CSS til irritasjon...

4. august 2009

Jeg forsøker å endre på css'en på websiden min slik at siden blir sentrert i nettleseren, ved å bruke relative og margin: 0 auto.

Problemet er at siden blir heller kaotisk...Er det noen som kan se over hva jeg gjør feil her?

(Farger er satt på kun for å se hvor de forskjellige DIV dukker opp. Siden skal ikke være så "fargerik" )
Original css, hvor siden ser ut som den skal, bortsett fra at den ikke sentrerer:
(css1.css)

Kode

body 
{
	font-size:11px;
	text-decoration:none;
	font-family:verdana, arial, helvetica, sans-serif;
}

a 
{
	color:#000000;
	font-size:11px;
	font-family:verdana, arial, helvetica, sans-serif;
	padding: 5px;
}
a:link {color:#000000;}
a:visited {color:#000000;}

#Main
{
	position:absolute;
	top:0px;
	left:0px;
	width:1000px;
	height:700px;
	background-color:#FFFF88;
}

#Header
{
	position:absolute;
	top:0px;
	left:80px;
	width:920px;
	height:50px;
	background-color:#FF8888
}

#LogonBox
{	
	position:absolute;
	top:50px;
	left:0px;
	width:80px;
	height:50px;
	background-color:#88FF88;
	border-color:black;
	border-width:1px 1px;
}

#LeftBar
{	
	position:absolute;
	top:100px;
	left:0px;
	width:80px;
	height:580px;
	background-color:#8888FF;
}

#Content
{
	border-top-style:solid;
	border-top-color:black;
	border-top-width: 2px;
	border-left-style:solid;
	border-left-color:black;
	border-left-width: 2px;
	position:absolute;
	top:50px;
	left:80px;
	width:900px;
	width:920px;
	height:628px;
	overflow-y: auto;
	background-color:#888888;
}

#Footer
{
	border-top-style:dotted;
	border-top-width: 1px;
	border-top-color:black;
	text-align:right;
	position:absolute;
	top:680px;
	left:80px;
	width:920px;
	height:20px;
	background-color:#ff88ff
}

#LoginForm
{
	border-style:dotted;
	border-color:black;
	border-width:1px 1px;
	position:relative;
	background-color:#FF0000;
	top:10px;
	left:10px;
	width:150px;
	height:100px;
	font-size:11px;
	font-family:verdana, arial, helvetica, sans-serif;
}


#GalleryCategory 
{
	position:absolute;
	top:0px;
	left:0px;
	width:90px;
	height:628px;
	overflow-y:hidden;
	background-color:#00FF00;
}
#GalleryNavigateThumbs
{
	position:absolute;
	top:560px;
	left:90px;
	width:90px;
	height:68px;
	text-align:center;
	background-color:#FF00FF;
}

#GalleryThumbnail 
{
	position:absolute;
	top:0px;
	left:90px;
	width:90px;
	height:560px;
	align:center;
	background-color:#FFFF00;
}

#GalleryPicture 
{
	position:absolute;
	top:0px;
	left:180px;
	width:740px;
	height:560px;
	text-align:center;
	background-color:#00FFFF;
}

#GalleryDescription
{
	position:absolute;
	top:560px;
	left:180px;
	width:740px;
	height:68px;
	text-align:center;
	background-color:#F8F8F8;
}

Forsøk på å få sentrert ting (css2.css)

Kode

body 
{
	font-size:11px;
	text-decoration:none;
	font-family:verdana, arial, helvetica, sans-serif;
}

a 
{
	color:#000000;
	font-size:11px;
	font-family:verdana, arial, helvetica, sans-serif;
	padding: 5px;
}
a:link {color:#000000;}
a:visited {color:#000000;}

#Main
{
//	position:absolute;
	top:0px;
	margin: 0 auto;
//	left:0px;
	width:1000px;
	height:700px;
	background-color:#FFFF88;
	
}

#Header
{
	position:relative;
	top:0px;
	left:80px;
	width:920px;
	height:50px;
	background-color:#FF8888
}

#LogonBox
{	
	position:relative;
	top:0px;
	left:0px;
	width:80px;
	height:50px;
	background-color:#88FF88;
	border-color:black;
	border-width:1px 1px;
}

#LeftBar
{	
	position:relative;
	top:0px;
	left:0px;
	width:80px;
	height:580px;
	background-color:#8888FF;
}

#Content
{
	border-top-style:solid;
	border-top-color:black;
	border-top-width: 2px;
	border-left-style:solid;
	border-left-color:black;
	border-left-width: 2px;
	position:relative;
	top:0px;
	left:80px;
	width:900px;
	width:920px;
	height:628px;
	overflow-y: auto;
	background-color:#888888;
}

#Footer
{
	border-top-style:dotted;
	border-top-width: 1px;
	border-top-color:black;
	text-align:right;
	position:relative;
	top:0px;
	left:80px;
	width:920px;
	height:20px;
	background-color:#ff88ff
}

#LoginForm
{
	border-style:dotted;
	border-color:black;
	border-width:1px 1px;
	position:relative;
	background-color:#FF0000;
	top:10px;
	left:10px;
	width:150px;
	height:100px;
	font-size:11px;
	font-family:verdana, arial, helvetica, sans-serif;
}

#GalleryCategory 
{
	position:relative;
	top:0px;
	left:0px;
	width:90px;
	height:628px;
	overflow-y:hidden;
	background-color:#00FF00;

}
#GalleryNavigateThumbs
{
	position:relative;
	top:0px;
	left:90px;
	width:90px;
	height:68px;
	text-align:center;
	background-color:#FF00FF;

}

#GalleryThumbnail 
{
	position:relative;
	top:0px;
	left:90px;
	width:90px;
	height:560px;
	align:center;
	background-color:#FFFF00;
}

#GalleryPicture 
{
	position:relative;
	top:0px;
	left:180px;
	width:740px;
	height:560px;
	text-align:center;
	background-color:#00FFFF;
}

#GalleryDescription
{
	position:relative;
	top:0px;
	left:180px;
	width:740px;
	height:68px;
	text-align:center;
	background-color:#F8F8F8;
}

HTML koden:

Kode

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<HTML>
<HEAD>
<LINK rel="stylesheet" type="text/css" href="css1.css">
<META http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>DEV</title>
</HEAD>
<BODY>
<div id="Main">
<div id="Header">V5 Dev</div>
<div id="LogonBox">Logon Box</div>
<div id="LeftBar">LeftBar</div>
<div id="Content">
<DIV id="GalleryCategory">Gallery Category</DIV>
<DIV id="GalleryThumbnail">Gallery Thumbnail</DIV>
<DIV id="GalleryNavigateThumbs">Gallery Navigate Thumbs</DIV>
<DIV id="GalleryPicture">Gallery Picture</DIV>
<DIV id="GalleryDescription">Gallery Description</DIV>
</div>
<div id="Footer">Sjanten 2009</div>
</div>
</BODY>
</HTML>

Sist endret av Sjanten; 4. august 2009 kl. 08:53.