CSS layout-problem

Thor · 2008-10-01, 16:13

Jag har äntligen börjat försöka lära mig CSS layout fullt ut (dvs skippa tables i största möjliga mån) men jag har stött på patrull...

1/ Jag kan inte få mina boxar att rada upp sig snyggt. Min mainbox (den med "text text text" i) kommer inte kant i kant med headerboxen (se bild nedan, gul ring uppe till höger)

2/ Jag får en liten scroll i sidled och kan inte komma på varför (se bild nedan, gul ring nere till höger)

3/ Jag kan inte komma på nån smidig lösning för att få menyboxen och mainboxen att få samma avstånd till varandra som de har till headerboxen och samtidigt behålla mainboxen högerställd. (se bilden nedan, gul ring uppe till vänster)

med en tabell hade det ju varit hur enkelt som helst att få till detta, men jag vill ju undvika den...

Bifogar även kod:

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="topbox"><?php include("includes/network.php") ?></div>
<div class="maincontainer">
<div class="headerbox"><img src="images/header.jpg"></div>
<div class="menybox"><?php include("includes/meny.php") ?></div>
<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>
</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;
}

.topbox {background-color: #349B43;
 width: 100%;
 padding: 2px;
 border-top: 1px solid #FFFFFF;
 border-bottom: 1px solid #FFFFFF;
 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;}

.headerbox {background-color: #349B43;
 border: 1px solid #000000;
 width: 100%;
 min-width: 675px;
 margin: 0px;
 padding: 2px;
 text-align: center;}
 
.menybox {float: left;
 background-color: #349B43;
 border: 1px solid #000000;
 width: 20%;
 min-width: 175px;
 margin-top: 5px;
 padding: 2px;
 text-align: left;}
 
.mainbox {float: right;
 background-color: #CCCCCC;
 border: 1px solid #000000;
 width: 75%;
 margin-top: 5px;
 padding: 2px;
 text-align: left;}

Aktiva användare som för närvarande tittar på det här ämnet: 1 (0 medlemmar och 1 gäster)

Menu

CSS layout-problem