Citat:
|
Ursprungligen postat av martine
Citat:
|
Ursprungligen postat av Thor
jo jag vet att det saknas 5% i bredd mellan de två fälten, men ökar jag bredden på nån av dem så hamna mainboxen under menyboxen istället... Tydligen är 20%+75%+x alltid mer än 100%
|
Du behöver lära dig lite mer om "box-modellen" så slipper du otrevliga överraskningar. Det finns en uppsjö av css-böcker som tar upp detta.
Citerar mig själv för någon vecka sedan:
Citat:
|
Är du för övrigt säker på att du förstår hur box-modellen (w3c:s och IE:s) fungerar med kollapsande marginaler osv.? Om inte annat så kan det löna sig att lägga ner lite tid på att lära sig hur det verkligen fungerar (sök på collapsing margins, IE box model, css box model, hasLayout, IE Layout, IE layout & collapsing margins, strict DTDs, quirks mode, standard mode, …).
|
Detta är ett allmänt tips för alla som ständigt förundras över marginalfel, breddfel, pixelförskjutningar och webbläsares rendering…
|
Som jag sa ovan, jag försöker lära mig... Ditt citat är ungefär lika givande som att besvara en fråga om högerregeln genom att hänsvisa personen att söka på bilskolor på google...
Nån som verkligen kan hjälpa mig istället?
Problem som kvarstår;
1/ mainboxen vill inte rada upp sig men headerboxen (skiljer på 2px nu). 2 pixlar kan man visserligen leva med, men det vore ju trevligt om det blev rakt.
2/ Mainboxen hamnar under menyboxen om jag minskar min upplösning minsta lilla från 1152x864.
index.php
Kod:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
<link rel=stylesheet href="stylesheet.css" type="text/css">
</head>
<body>
<div class="topboxram">
<div class="topbox">
<?php include("includes/network.php") ?>
</div>
</div>
<div class="maincontainer">
<div class="headerboxram">
<div class="headerbox">
<img src="images/header.jpg">
</div>
</div>
<div class="menyboxram">
<div class="menybox">
<?php include("includes/meny.php") ?>
</div>
</div>
<div class="mainboxram">
<div class="mainbox">
Text text text text text.<br>Text text text text text.<br>Text text text text text.<br>Text text text text text.<br>Text text text text text.<br>Text text text text text.<br>Text text text text text.<br>
</div>
</div>
<div class="footboxram">
<div class="footbox">
<?php include("includes/footline.php") ?>
</div>
</div>
</div>
</body>
</html>
stylesheet.css
Kod:
body {
background: #555555;
color: #000000;
font-family: Verdana, Arial, sans-serif;
font-size: 12px;
margin: 0px;
}
A {
color: #0000FF;
font-weight : none;
text-decoration: none;
}
A:hover {
color: #0000FF;
font-weight : none;
text-decoration: underline;
}
.topboxram {background-color: #349B43;
width: 100%;
padding: 0px;
border-top: 1px solid #FFFFFF;
border-bottom: 1px solid #FFFFFF;
text-align: center;}
.topbox {padding: 2px;
text-align: center;
font-family: Verdana, Arial, sans-serif;
font-size: 12px;
font-weight: bold;
color: #FFFFFF;}
.topbox A {
color: #FFFFFF;
font-weight : none;
text-decoration: none;
}
.topbox A:hover {
color: #FFFF00;
font-weight : none;
text-decoration: none;
}
.maincontainer {width: 80%;
padding: 0px;
position: relative; left: 10%; top: 30px;}
.headerboxram {background-color: #349B43;
border: 1px solid #000000;
width: 100%;
min-width: 675px;
margin: 0px;
padding: 0px;
text-align: center;}
.headerbox {padding: 3px;
text-align: center;}
.menyboxram {float: left;
background-color: #349B43;
border: 1px solid #000000;
width: 19%;
margin-top: 5px;
margin-right: 5px;
padding: 0px;
text-align: left;}
.menybox {padding: 3px;
text-align: left;
font-family: Verdana, Arial, sans-serif;
font-size: 12px;
font-weight: bold;
color: #FFFFFF;}
.menybox A {
color: #FFFFFF;
font-weight : none;
text-decoration: none;
}
.menybox A:hover {
color: #FFFF00;
font-weight : none;
text-decoration: none;
}
.mainboxram {float: right;
background-color: #CCCCCC;
border: 1px solid #000000;
width: 80%;
margin-top: 5px;
padding: 0px;
text-align: left;}
.mainbox {padding: 3px;
text-align: left;}
.footboxram {background-color: #349B43;
width: 100%;
margin-top: 5px;
padding: 0px;
border: 1px solid #000000;
text-align: center;}
.footbox {padding: 3px;
text-align: center;
font-family: Verdana, Arial, sans-serif;
font-size: 12px;
font-weight: bold;
color: #FFFFFF;}
.footbox A {
color: #FFFFFF;
font-weight : none;
text-decoration: none;
}
.footbox A:hover {
color: #FFFF00;
font-weight : none;
text-decoration: none;
}