WN - CSS layout-problem

WN (https://www.wn.se/forum/index.php)

- Klientsidans teknologier, design och grafik (https://www.wn.se/forum/forumdisplay.php?f=12)

- - CSS layout-problem (https://www.wn.se/forum/showthread.php?t=32304)

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;}

1 & 2 beror på att padding läggs på width. (Tips, googla css box model). Alltså topbox & headerbox blir 100% + 2px.
Det kan du t ex lösa genom att genom att ta bort padding och lägga den i en separat div.

3 hinner jag inte svara på nu, svarar nån gång i kväll om du inte får hjälp från annat håll

Citat:

.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;}

menyn är 25% och vänsterställd, den andra diven är 70% och högerställd.
mellanrummet är det återstående 5% (minus innehållspadding)

topbox blir dock totalt 100% + 4px bred. (padding på både vänster och höger )

Citat:

Originally posted by allstars@Oct 1 2008, 21:38
menyn är 25% och vänsterställd, *den andra diven är 70% och högerställd.
mellanrummet är det återstående 5% (minus innehållspadding)

topbox blir dock totalt 100% + 4px bred. (padding på både vänster och höger )

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%

med en tabell skulle jag ju lösa det så här:

Kod:

<table width="80%">

 *<tr>

 * *<td colspan="2"><img src="images/header.jpg"></td>

 *</tr>

 *<tr>

 * *<td width="175">meny</td>

 * *<td width="100%">main</td>

 *</tr>

</table>

Problemet är dock; hur får jag de två boxarna (menybox & mainbox) att anpassa sin bredd i förhållande till varandra samt besökarens upplösning, utan att mainbox hamnar på en "egen rad" om besökaren har en låg upplösning?

ta bort padding på topbox och lägg en div innuti (utan bredd) som har padding, då tror jag inte att topbox tvingas att bli större.

Citat:

Originally posted by Thor@Oct 2 2008, 00:04
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…

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:

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;

}

om du inte sätter en bredd på topbox då?

Kod:

body {

 background: #555555;

 color: #000000;

 font-family: Verdana, Arial, sans-serif;

 margin: 0;

}



p {font-size: 12px;}



a {

 color: #0000FF;

 font-weight : none;

 text-decoration: none;

}



a:hover {

 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-size: 12px;

        font-weight: bold;

        color: #FFFFFF;

}



.topbox a {

font-weight: normal;

 color: #fff;

}



.topbox a:hover {

 color: #ffff00;

 font-weight: normal;

 text-decoration: none;

}







.headerbox {

background-color: #349B43;

 border: 1px solid #000000;

 min-width: 675px;

 margin-bottom: 5px;

 text-align: center;}

 

.maincontainer {

width: 80%;

 position: relative; left: 10%; top: 30px; float: left;

 }



.clear {visibility: hidden; height:1pt; line-height:1pt; padding:0; margin:0;}



.menybox {float: left;

 background-color: #349B43;

 border: 1px solid #000000;

 width: 20%;

 min-width: 175px;

 padding: 2px;

 text-align: left;}

 

.mainbox {

float: right;

 background-color: #CCCCCC;

 border: 1px solid #000000;

 width: 75%;

 padding: 2px;

 text-align: left;}

Jag gjorde även xhtml strict utan markupen

Kod:

<!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" xml:lang="en" lang="en">

<head>

        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/>

        <title>Untitled Document</title>

        <link rel="stylesheet" type="text/css" href="style.css" media="all" />

</head>



<body>





<div class="topbox"><p>Min lilla <a href="">länksamling</a></p></div>

<div class="maincontainer">

        <div class="headerbox">

 <p></p>

 <img src="images/header.jpg" />

        </div>

        

        

        <div class="menybox">

 <ul>

         <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>

         <li>Nunc quis est quis pede iaculis suscipit.</li>

         <li>Aenean congue ante nec risus.</li>

         <li>Maecenas lobortis pede vel augue.</li>

         <li>Suspendisse interdum magna hendrerit dui.</li>

         <li>Etiam sit amet ligula et dolor nonummy interdum.</li>

         <li>Duis congue scelerisque nisl.</li>

 </ul>

        </div>



        <div class="mainbox">

 <h1>Donec ut augue et volutpat</h1>

 <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Etiam egestas metus vitae leo. Morbi elementum vulputate sem. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Etiam in mi at libero dignissim molestie. In malesuada lacinia nisi. Praesent placerat consequat nisl. Praesent mi nulla, pellentesque quis, mattis vel, iaculis quis, sem. Etiam congue mauris at massa. Nunc massa quam, commodo quis, malesuada non, elementum at, nibh. Nulla erat libero, malesuada id, vestibulum quis, nonummy in, dolor. Ut sapien nunc, placerat vel, faucibus sed, accumsan at, tellus.</p>

 

 <h2>Etiam vestibulum nibh amet</h2>

 <p>Donec ornare ante semper nisl sollicitudin vulputate. Proin lobortis elementum arcu. Vestibulum porta neque. Integer ut sem. Sed felis erat, egestas a, venenatis ac, posuere eget, lectus. Etiam lobortis metus sit amet nunc. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Pellentesque placerat, tellus et porttitor sodales, metus urna blandit nibh, a ullamcorper felis sem in velit. Sed nonummy. Quisque eget eros et turpis adipiscing consequat.</p>

        </div>



        <hr class="clear"/>

</div>

</body>

</html>

Tackar allstar, allt är nu snyggt uppradat :)

Nu ska jag bara lista ut hur jag får allt att stanna på samma ställe även i mindre upplösningar...

Inte svar på frågan, men en tanke: du besparar dig mycket huvudbry när det gäller inkompatibilitet mellan olika browsers (IE, FF, Opera, Safari) om du gör dina sidor för ”strict mode” snarare än ”transitional”.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Det är jobbigt att ändra (och se hela layouten krascha) men jag tror definitivt du har igen det i längden.

Det var min femöreskommentar.