CSS-hjelp

[Nala]

Jeg driver og tester ut CSS. Skal prøve å bruke dette når jeg lager layouten på sida mi (men fader altså, som jeg sliter). Det jeg lurer på nå er: Hvordan sikrer jeg at bakgrunnsbildet mitt automatisk følger lengden på tekst og bilder (innhold) på sida? Har satt inn et bilde, men når jeg legger teksten oppå følger ikke bildet etter liksom. Teksten kommer utenfor bildet nedover på sida. Ser jo særdeles lite smart ut...

Takknemlig for all hjelp :-D

[Catzy]

I hvilken tag har du lagt inn bildet?

Body background eller i f.eks. div eller table?

Hvordan ser koden din ut?

Catzy

[Gjest "gjest"]

/*

----------------------------------------------------- */

body { color: #00000; background-color: #BEC7E6; margin:0px 0px 0px 0px; font-family: verdana, tahoma, arial, sans-serif; font-size: 11px;}

img { border:0px solid #FFFFFF;}

input, select, checkbox, textarea, option { font-family:verdana, arial, sans-serif; background-color: #434B78; border:1px solid #9EB1E9; color: #FFFFFF; font-size:11px; font-weight: normal;}

ul {list-style-type: none; margin: 0px 0px 25px 0px; padding: 5px; line-height: 130%; text-align: left; }

li { padding: 0 0 4px 12px; line-height: 1.4em; background: url("lbildet av bakgrunnslinje settes her") no-repeat 0 5px;}

a img { border: none; }

a { color: #95416F; text-decoration: none;}

a:link, a:visited, a:hover { color: #95416F; text-decoration: none;}

a:hover { color: #99A6D9; text-decoration: underline;}

side a { color: #EBCDC3; text-decoration: none;}

side a:link, a:visited, a:hover { color: #95416F; text-decoration: none;}

side a:hover { color: #EEA185; text-decoration: underline;}

.posted a { color: #95416F; text-decoration: none;}

.posted a:link, a:visited, a:hover { color: #95416F; text-decoration: none;}

.posted a:hover { color: #99A6D9; text-decoration: underline;}

.posted {background: transparent url("link til bildet av bakcgroundposting settes her") no-repeat top left; padding-left: 50px; padding-bottom: 10px; margin: 3px; border-bottom:1px solid;color: #000000;}

#frame { margin: auto; width: 950px; background-color : #transparant; background-image: url(link til framebildet settes her"); background-repeat: repeat-y; background-position: top left; }

#frametitle { float: left; width: 950px; background-image: url("link til backgroundbilde settes her"); background-repeat: no-repeat; background-position: top left; }

#side { float: right; width: 220px; margin-top: 90px; margin-right: 40px; overflow:hidden;}

#content { float: left; width: 550px; padding: 5px; margin-top: 210px; margin-left: 30px; }

#menu {margin-top: 0px; margin-bottom: 5px; text-align: center; color: #003B5E;}

.side { color: #01060D; padding-left: 0px; margin-bottom: 5px; line-height: 140%; background-color: #transparent; background-position: top left; padding: 0px; }

.date { font-size: 18px; color: #01060D; padding-top: 5px; text-align: right; }

.title { font-size: 14px; font-weight: bold; color: #01060D; padding-top: 5px; text-align: right;}

.category { font-weight: normal; margin-bottom: 20px; text-align: left; padding-bottom: 10px; }

.body { text-align: left; color: #000000; margin-top: 5px;margin-bottom: 5px;margin-left: 0px;padding-left: 15px;padding-right: 15px;padding-bottom: 15px;

background-color : #transparant;}

blockquote {font-size: 12px; border: 1px solid #4E3A32; background-color: #C5C98E; padding: 10px; line-height: 140%; margin: 5px; font-weight: normal;}

#footer {clear: both; height: 28px; margin: 0px; padding: 12px 20px 3px 20px; text-align: center; font-size: 10px; background: url("link til footer settes her") no-repeat top left;}

#footer a { color: #003B5E;text-decoration:none; border:0px;}

#footer a:hover { color: #000000; text-decoration:none;border:0px;}

acronym { border-style: dashed; border-width: 0 0 1px 0; cursor: help; }

#commentsbody { margin: 0px 0px 0px 0px; background-color: #B0BAE1;background-image: url('link til bilde settes her"); background-repeat: repeat-yes;}

#banner-commentspop{ background-color:#transparent; border-bottom:0px solid #FFFFFF;font-family: verdana, arial; font-size: 13px; color: #062B5F;

font-weight: bold; margin: 2px 10px 2px 10px; padding: 15px 5px 10px 5px; }

.authcomment { font-family:verdana, arial, sans-serif; color:#000000; background-position: bottom left; font-size:11px;font-weight:normal; line-height:14px; padding:10px; margin: 2px 10px 2px 10px; text-align:left; background:#D9A7B1; border: 1px solid #81333D;}

.commentbox { font-family:verdana, arial, sans-serif; color:#000000; background-position: bottom left; font-size:11px; font-weight:normal; line-height:14px; padding:10px; margin: 2px 10px 2px 10px; text-align:left; background:#DADCF1; border: 1px solid #272E7A;}

.comments-posted {font-family:verdana, arial, sans-serif; font-size: 11px; color: #000000; margin-bottom:5px; line-height:15px; font-weight: normal;

padding-top:5px;margin-top:2px; border-top:#4E3A32 solid 1px;text-align:center; }

[Nala]

I hvilken tag har du lagt inn bildet?

Body background eller i f.eks. div eller table?

Hvordan ser koden din ut?

Catzy

←

Det er nok her feilen ligger. Har plassert ulike elementer rundt på sida. Altså ikke som ett bakgrunnsbilde. Nå skal jeg inn i Photoshop og lage klart designet der, for så å prøve igjen. Får se om det blir bedre da.

Den koden din Gjest ser helt skremmende ut for en rookie som meg. Men jeg skal se på den, og se om jeg skjønner noe. Takk for at du vil hjelpe

[Gjest "gjest"]

Den koden din Gjest ser helt skremmende ut for en rookie som meg. Men jeg skal se på den, og se om jeg skjønner noe. Takk for at du vil hjelpe

←

Nei da, den er enkel. Du putter den i NVU (www.nvu.org) og så jobber du med den der. Lykke til.