webForumDet fria alternativet

Problem att positionera DIV-boxar med CSS!

4 svar · 454 visningar · startad av Reisan

ReisanMedlem sedan feb. 200732 inlägg
#1

Jag har centrerat boxar efter varann, sidhuvud, kategorimeny, innehåll och sidfot. De har en bredd på 700px. Och inne i innehållsboxen så har jag tre DIV-boxar som jag kallat inner_left, inner_center och inner_right. De har måtten 150px 400px 150px. Och de ska vara bredvid varann i den ordningen inom innehållsboxen. Men får ej rätt på CSS:en. Tacksam för hjälp! Tipsa gärna om förbättringar i det jag gjort. Bifogar html-kod och css-koden.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>Visituz.com - En hemsida f&ouml;r vanliga anv&auml;ndare, av vanliga anv&auml;ndare!</title>
<link href="css/styluz.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div id="logotype"></div>
<div id="toolbar"></div>
<div id="content">
<div id="inner_left_content"></div>
<div id="inner_center_content"></div>
<div id="inner_right_content"></div>
</div>
<div id="footer">Visituz.com Copyright &copy; 2007 - All rights reserved </div>
</body>
</html>


#logotype {
	background-image: url(../img/vinjett.gif);
	background-repeat: no-repeat;
	height: 189px;
	width: 700px;
	margin-top: 0px;
	margin-right: auto;
	margin-bottom: 0px;
	margin-left: auto;
	border-top-width: 0px;
	border-right-width: 1px;
	border-bottom-width: 1px;
	border-left-width: 1px;
	border-top-style: none;
	border-right-style: solid;
	border-bottom-style: solid;
	border-left-style: solid;
	border-right-color: #808080;
	border-bottom-color: #808080;
	border-left-color: #808080;
}
#toolbar {
	background-image: url(../img/toolbar.gif);
	background-repeat: no-repeat;
	vertical-align: middle;
	height: 20px;
	width: 700px;
	margin-top: 0px;
	margin-right: auto;
	margin-bottom: 0px;
	margin-left: auto;
	border-top-width: 0px;
	border-right-width: 1px;
	border-bottom-width: 1px;
	border-left-width: 1px;
	border-top-style: none;
	border-right-style: solid;
	border-bottom-style: solid;
	border-left-style: solid;
	border-right-color: #808080;
	border-bottom-color: #808080;
	border-left-color: #808080;
}
#content {
	height: 100%;
	width: 700px;
	margin-top: 0px;
	margin-right: auto;
	margin-bottom: 0px;
	margin-left: auto;
	border-top-width: 0px;
	border-right-width: 1px;
	border-bottom-width: 1px;
	border-left-width: 1px;
	border-top-style: none;
	border-right-style: solid;
	border-bottom-style: solid;
	border-left-style: solid;
	border-right-color: #808080;
	border-bottom-color: #808080;
	border-left-color: #808080;
}
#footer {
	background-image: url(../img/toolbar.gif);
	background-repeat: no-repeat;
	height: 20px;
	width: 700px;
	margin-top: 0px;
	margin-right: auto;
	margin-bottom: 0px;
	margin-left: auto;
	border-top-width: 0px;
	border-right-width: 1px;
	border-bottom-width: 1px;
	border-left-width: 1px;
	border-top-style: none;
	border-right-style: solid;
	border-bottom-style: solid;
	border-left-style: solid;
	border-right-color: #808080;
	border-bottom-color: #808080;
	border-left-color: #808080;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 9px;
	font-style: normal;
	color: #000000;
}
body {
	margin: 0px;
	height: 100%;
	background-image: url(../img/bg_streck.gif);
}
#inner_left_content {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 10pt;
	font-style: normal;
	color: #000000;
	background-color: #f1f1f1;
	padding: 5px;
	float: left;
	height: 100%;
	width: 140px;
}
#inner_center_content {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 10pt;
	font-style: normal;
	color: #000000;
	background-color: f9f9f9;
	vertical-align: top;
	padding: 5px;
	float: left;
	height: 100%;
	width: 390px;
}
#inner_right_content {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 10px;
	font-style: normal;
	color: #000000;
	background-color: f1f1f1;
	vertical-align: top;
	height: 100%;
	width: 140px;
	float: left;
}
zcorpanMedlem sedan dec. 20042 269 inlägg
#2
html { font-size:81.25%; font-family:Verdana, sans-serif; background:white url(../img/bg_streck.gif); color:black; }
 body { width:700px; margin:0 auto; border:1px solid #808080; border-top:none;	}
  #logotype { background:url(../img/vinjett.gif) no-repeat; height:189px; border-bottom:1px solid #808080; }
  #toolbar { background:url(../img/toolbar.gif) no-repeat; height:20px; border-bottom:1px solid #808080; }
  #content { background-color:#f9f9f9; border-left:140px solid #f1f1f1; border-right:140px solid #f1f1f1; zoom:1; /* ie */ }
   #inner_left_content { padding:5px; float:left; display:inline; width:140px; margin-left:-145px; }
   #inner_center_content { padding:5px; float:left; width:390px; }
   #inner_right_content { padding:5px; width:140px; float:right; display:inline; margin-right:-145px; }
   #content::after { content:""; display:block; clear:both; }
  #footer { background:url(../img/toolbar.gif) no-repeat; height:20px; font-size:69.23%; clear:both; border-top:1px solid #808080; }
ReisanMedlem sedan feb. 200732 inlägg
#3

SuperMegaTack!

zcorpan skrev:

html { font-size:81.25%; font-family:Verdana, sans-serif; background:white url(../img/bg_streck.gif); color:black; }
 body { width:700px; margin:0 auto; border:1px solid #808080; border-top:none;	}
  #logotype { background:url(../img/vinjett.gif) no-repeat; height:189px; border-bottom:1px solid #808080; }
  #toolbar { background:url(../img/toolbar.gif) no-repeat; height:20px; border-bottom:1px solid #808080; }
  #content { background-color:#f9f9f9; border-left:140px solid #f1f1f1; border-right:140px solid #f1f1f1; zoom:1; /* ie */ }
   #inner_left_content { padding:5px; float:left; display:inline; width:140px; margin-left:-145px; }
   #inner_center_content { padding:5px; float:left; width:390px; }
   #inner_right_content { padding:5px; width:140px; float:right; display:inline; margin-right:-145px; }
   #content::after { content:""; display:block; clear:both; }
  #footer { background:url(../img/toolbar.gif) no-repeat; height:20px; font-size:69.23%; clear:both; border-top:1px solid #808080; }

Wow, du har fått det att se ut exakt som jag vill ha det och önskade mig! Attan vad glad jag är! Tack så hemskt mycket för hjälpen. Jag ska studera koden och ta lärdom! :D Du är verkligen duktig och är väldigt flitig på forumet. Keep the good work up!

zcorpanMedlem sedan dec. 20042 269 inlägg
#4

Om det är nånting du undrar över hur det fungerar så är det bara fråga. :) Allt är inte helt självförsörjande i den där koden; jag kunde ha varit flitigare i att kommentera saker och ting...

ReisanMedlem sedan feb. 200732 inlägg
#5

zcorpan skrev:

Om det är nånting du undrar över hur det fungerar så är det bara fråga. :) Allt är inte helt självförsörjande i den där koden; jag kunde ha varit flitigare i att kommentera saker och ting...

Ja, där var en del saker i koden som inte var så självklart. Men jag frågar om jag inte förstår delar i koden. :D

Genererad på 388 ms · cache AV · v20260730165559-full.f96bc7eb