html - CSS problem jeg ikke kan få låst - Udvikleren.dk

Tags: html css

Bruger #7753 @ 22.06.05 17:47

Hej,
jeg har lavet denne kode hvor det er menningen at #bottom skal være helt nede i bunden af siden, #white_border skal god ned til toppen af #bottom og #indhold skal holde sig inde i #white_border. Men jeg kan ikke få det til at lykkes. Eksempel: http://www.raiser.dk/christofferb/

Kode

body {
	background-color : #d2b0b0;
	font-size        : 13px;
	font-family      : verdana, geneva, arial, sans-serif;
}	

hr {
	height : 1px;
	color  : #000000;
}


a:link {
	color           : #2c62ea;
	font-weight     : bold;
	text-decoration : none;
}

a:visited {
	color           : #2c62ea;
	text-decoration : none;
}

a:hover {
	color           : #2c62ea;
	text-decoration : underline;
}

a:active {
	color           : #2c62ea;
	text-decoration : none;
}


#white_border {
	background   : #ffffff;
	font-size    : 13px;
	font-family  : verdana, geneva, arial, sans-serif;
	border-left  : #000000 1px solid;
	border-right : #000000 1px solid;
	position     : absolute;
	top          : 0px;
	left         : 100px;
	height       : 95% auto;
	width        : 700px;
}

#menu_sojle {
	background    : url("menu_sojle.gif") repeat;
	font-size     : 13px;
	font-family   : verdana, geneva, arial, sans-serif;
	border-top    : 1px #000000 solid;
	border-bottom : 1px #000000 solid;
	border-right  : 1px #000000 solid;
	border-left   : 1px #000000 solid;
	position      : absolute;
	top           : 100px;
	left          : 40px;
	height        : 250px;
	width         : 80px;
}

#menu_blog {
	background    : #eeeeee;
	font-size     : 13px;
	font-family   : verdana, geneva, arial, sans-serif;
	border-top    : 1px #000000 solid;
	border-bottom : 1px #000000 solid;
	border-right  : 1px #000000 solid;
	border-left   : 1px #000000 solid;
	position      : absolute;
	left          : 30px;
	top           : 105px;
}

#menu_referenser {
	background    : #eeeeee;
	font-size     : 13px;
	font-family   : verdana, geneva, arial, sans-serif;
	border-top    : 1px #000000 solid;
	border-bottom : 1px #000000 solid;
	border-right  : 1px #000000 solid;
	border-left   : 1px #000000 solid;
	position      : absolute;
	left          : 30px;
	top           : 135px;
}

#menu_christofferb {
	background    : #eeeeee;
	font-size     : 13px;
	font-family   : verdana, geneva, arial, sans-serif;
	border-top    : 1px #000000 solid;
	border-bottom : 1px #000000 solid;
	border-right  : 1px #000000 solid;
	border-left   : 1px #000000 solid;
	position      : absolute;
	left          : 30px;
	top           : 165px;
}

#menu_links {
	background    : #eeeeee;
	font-size     : 13px;
	font-family   : verdana, geneva, arial, sans-serif;
	border-top    : 1px #000000 solid;
	border-bottom : 1px #000000 solid;
	border-right  : 1px #000000 solid;
	border-left   : 1px #000000 solid;
	position      : absolute;
	left          : 30px;
	top           : 195px;
}

#menu_herche {
	background    : #eeeeee;
	font-size     : 13px;
	font-family   : verdana, geneva, arial, sans-serif;
	border-top    : 1px #000000 solid;
	border-bottom : 1px #000000 solid;
	border-right  : 1px #000000 solid;
	border-left   : 1px #000000 solid;
	position      : absolute;
	left          : 30px;
	top           : 225px;
}

#menu_safe {
	background    : #eeeeee;
	font-size     : 13px;
	font-family   : verdana, geneva, arial, sans-serif;
	border-top    : 1px #000000 solid;
	border-bottom : 1px #000000 solid;
	border-right  : 1px #000000 solid;
	border-left   : 1px #000000 solid;
	position      : absolute;
	left          : 30px;
	top           : 255px;
}

#menu_w3 {
	background    : #eeeeee;
	font-size     : 13px;
	font-family   : verdana, geneva, arial, sans-serif;
	border-top    : 1px #000000 solid;
	border-bottom : 1px #000000 solid;
	border-right  : 1px #000000 solid;
	border-left   : 1px #000000 solid;
	position      : absolute;
	left          : 30px;
	top           : 285px;
}

#menu_blog:hover,#menu_referenser:hover,#menu_christofferb:hover,#menu_links:hover,#menu_herche:hover,#menu_safe:hover,#menu_w3:hover {
	background : #d1dfea;
	cursor     : pointer;
}

#bottom {
	background    : #d1dfea;
	border-top    : 1px #000000 solid;
	border-bottom : 0px;
	border-right  : 1px #000000 solid;
	border-left   : 0px;
	width         : 801px;
	height        : 30px;
	clear         : both;
	position      : absolute;
	bottom        : 0px;
	left          : 0px;
}

#indhold {
	background    : #ffffff;
	position      : relative;
	width         : 665px;
	left          : 30px;
	top           : 100px;
	border-top    : 1px #000000 solid;
	border-bottom : 1px #000000 solid;
	border-right  : 1px #000000 solid;
	border-left   : 1px #000000 solid;
}

ChristofferB ::.

[Redigeret d. 23/06-05 12:34:12 af ChristofferB]

2 svar postet i denne tråd vises herunder
0 indlæg har modtaget i alt 0 karma

Sorter efter stemmer Sorter efter dato

Bruger #6372 @ 23.06.05 21:52

Ikke helt sikker på hvad du mener men jeg tror jeg har en idé.

Fjern "height" fra #white_border og indsæt "bottom: 0px" i stedet. På den måde vil den blive strukket ud over hele siden.

Hvis du derimod vil have at #white_border skal være variabel og #bottom skal ligge i bunden af denne så skal du fjerne "bottom" fra #bottom og så lege lidt videre med det.

Bruger #4907 @ 02.08.05 16:43

Hej,
jeg har lavet denne kode hvor det er menningen at #bottom skal være helt nede i bunden af siden, #white_border skal god ned til toppen af #bottom og #indhold skal holde sig inde i #white_border. Men jeg kan ikke få det til at lykkes. Eksempel: http://www.raiser.dk/christofferb/

Du bør vist lige starte med at få siden til at validere. Og så sender du siderne som text/html, selvom du bruger XHTML 1.1. Det må man ikke, ifl. W3C (selvom validatoren ikke brokker sig over det). Du bør enten bruge XHTML 1.0 i stedet, eller sende det som application/xhtml+xml fx.
Du bør forresten lære at bruge CSS-shorthands, det kan gøre koden noget mindre.
Og endelig mangler du sikkert stripslashes() der hvor du redigerer dine blogindlæg.

God arbejdslyst. :-)

CSS problem jeg ikke kan få låst

Karma barometer (30 dage)

Modtaget

Givet

Favorit hos
Forum tråde
Artikler