✔ 3 Spalten Layout. Text fließt über Ende der letzten hinaus.

mrepox · 26. März 2006

Hallo Leute,

ich versuche grade den Umstieg auf Tabellenloses Layout und teste grade ein wenig.
Nun stoße ich auf das Problem, das in dem Layout wie auf dem Bild zu sehen ist, der Text rechts über das Spaltenende in den Body Bereich hinausläuft.

Ist das ein allegmeines CSS Problem oder gibts da einen Trick?

#div news ist das gemeinte css und es ist rechts die weiße spalte!

Code:

HTML-Code (unbedingt die DTD mitnehmen):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>2-Boxen-Modell mit Header und Footer</title>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />
<style type="text/css">
/*<![CDATA[*/
<!--
div#nav-2 ul, div#nav-2 li {

list-style: none;
margin: 0; padding: 0;

}
body {
background-color: #ece8d7; 
color: black;
margin:0 auto; /* main-Box zentrieren in IE 5 und hoeher */
text-align:center; /* main-Box zentrieren in IE 5 und hoeher */
font: 70%/1.5em Verdana, sans-serif;
    color: #6A6A65;
}
#main {
background-color: 6a6a65; color: white;
border: 1px solid black;
width: 900px; /* oder auch z.B. 800px */
margin: 20px auto; /* main-Box vertikal zentrieren, Rand oben + unten 20px */
text-align:center; /* main-Box vertikal zentrieren in Opera, NN, Mozilla */
}
#top {
background-color:#b8c7ff; color:black;
height: 125px;
border-bottom:1px solid black;
text-align:left;
padding: 5px;
}
#top h1, #top p {
}
#nest {
background-color:#4e4c4c;color:black;
font-size:80%;
text-align: left;
}
#leftBox {
background-image:url(bilder/navi_background.jpg);
width: 200px; float:left;
height: 232px;
border-right:1px solid black;
 
}
#leftBox h1, #leftBox p {
padding:0; margin:0;
}
#content {
background-image: url(bilder/bgtheme.jpg); color:black;
margin:0 211px 0 203px;
border-left:1px solid black;
font: 70%/1.5em Verdana, sans-serif;
    color: #6A6A65;
    padding: 5px;
    
}
#content h1, #content p {
padding:0; margin:0;
}
#news {
background-color: white; color:black;
 float: right; width: 200px;
 margin: 0; padding: 5px;
border-left:1px solid black;
font: 70%/1.5em Verdana, sans-serif;
color: #6A6A65;
      
}

div#news p {
    font-size: 1em;
    margin: 0.5em;
  }
#footer {
clear:both;
background-color:#e2e2e2; color:black;
padding:10px 0 10px 0;
border-top:1px solid black;
}
#footer p {
font:500 75%/100% verdana,helvetica,sans-serif;
}
div#nav-2 {

background: url(bilder/navi_background.jpg);

float: left;

height: 232px;

width: 200px;

}



div#nav-2 ul {

border-bottom: 2px solid #FFF;

margin-top: 0;

}



div#nav-2 li, div#nav-2 li a {

color: #cacaca;

text-align: right;

}



div#nav-2 li {

border-bottom: 1px solid;

font-size: 1.2em;

height: 38px;

width: 200px;

}



div#nav-2 li a, div#nav-2 li span {

display: block;

font-weight: normal;

height: 100%;

padding-right: 5px;

text-decoration: none;

}



div#nav-2 li a:focus, div#nav-2 li a:hover, div#nav-2 li a:active, div#nav-2 li span {

font-weight: bold;color: #000000; 

}



div#nav-2 li > a:focus, div#nav-2 li > a:hover, div#nav-2 li > a:active, div#nav-2 li > span { /* nur MOSe */

background: url(bilder/nav-highlight.png);

}


-->
/*]]>*/
</style>
</head>
<body>

<div id="main">

<div id="top"><!-- #top oeffnen -->
<h1>Header</h1>
<p>background-color: yellow; color:black; height: 100px; border-bottom:3px solid black; text-align:left;</p>
</div><!-- #top schliessen-->

<div id="nest"><!-- #nest oeffnen-->
<div id="nav-2"><!-- #leftBox oeffnen-->


					<li><a href="#">Home</a></li>

					<li><a href="#">How to's</a></li>

					<li><a href="#">Download</a></li>

					<li><a href="#">Interna</a></li>

					<li><a href="#">Links</a></li>

					<li><a href="#">Admin</a></li>

			
</div><!-- #leftBox schliessen -->
<div id ="news">jhrwejhrjwehrjwehrjhwejrhjhjhj</p><p>hgdhgsadhgsahdgahsgdhgasdhagdhasg1234567890</p><p>hgashdgasdhghgahgdh1234567890</p></div>

<div id="content"><!-- #content oeffnen-->
<h1>Ueberschrift content</h1>
<p> plenty, plenty, plenty cool content for all user's plenty, plenty, plenty cool content for all user's plenty, plenty, plenty cool content for all user's plenty, plenty, plenty cool content for all user's plenty, plenty, plenty cool content for all user's plenty, plenty, plenty cool content for all user's plenty, plenty, plenty cool content for all user's plenty, plenty, plenty cool content for all user's plenty, plenty, plenty cool content for all user's plenty, plenty, plenty cool content for all user's plenty, plenty, plenty cool content for all user's plenty, plenty, plenty cool content for all user's plenty, plenty, plenty cool content for all user's plenty, plenty, plenty cool content for all user's plenty, plenty, plenty cool content for all user's plenty, plenty, plenty cool content for all user's plenty, plenty, plenty cool content for all user's plenty, plenty, plenty cool content for all user's plenty, plenty, plenty cool content for all user's plenty, plenty, plenty cool content for all user's plenty, plenty, plenty cool content for all user's plenty, plenty, plenty cool content for all user's plenty, plenty, plenty cool content for all user's plenty, plenty, plenty cool content for all user's plenty, plenty, plenty cool content for all user's plenty, plenty, plenty cool content for all user's plenty, plenty, plenty cool content for all user's plenty, plenty, plenty cool content for all user's plenty, plenty, plenty cool content for all u
 plenty, plenty, plenty cool content for all user's plenty, plenty, plenty cool content for all user's plenty, plenty, plenty cool content for all user's plenty, plenty, plenty cool content for all user's plenty, plenty, plenty cool content for all user's plenty, plenty, plenty cool content for all user's plenty, plenty, plenty cool content for all user's plenty, plenty, plenty cool content for all user's plenty, plenty, plenty cool content for all user's plenty, plenty, plenty cool content for all user's plenty, plenty, plenty cool content for all user's plenty, plenty, plenty cool content for all user's plenty, plenty, plenty cool content for all user's plenty, plenty, plenty cool content for all user's plenty, plenty, plenty cool content for all user's plenty, plenty, plenty cool content for all user's plenty, plenty, plenty cool content for all user's plenty, plenty, plenty cool content for all user's plenty, plenty, plenty cool content for all user's plenty, plenty, plenty cool content for all user's plenty, plenty, plenty cool content for all user's plenty, plenty, plenty cool content for all user's plenty, plenty, plenty cool content for all user's plenty, plenty, plenty cool content for all user's plenty, plenty, plenty cool content for all user's plenty, plenty, plenty cool content for all user's plenty, plenty, plenty cool content for all user's plenty, plenty, plenty cool content for all user's plenty, plenty, plenty cool content for all u

 </p>
</div><!-- #content schliessen -->

</div><!-- #nest schliessen -->

<div id="footer"><!-- #footer oeffnen -->
<p>&copy; webexil-linux.de</p>
</div><!-- #footer schliessen -->

</div><!-- #main schliessen -->


</body>
</html>

Gumbo · 26. März 2006

Da der Browser im dortigen Text keinen Ansatzpunkt für einen Zeilenumbruch – wie etwa ein Leer- oder Satzzeichen – hat, kann er auch keinen darstellen. Das ist ein völlig legitimes Verhalten.

✔ 3 Spalten Layout. Text fließt über Ende der letzten hinaus.

mrepox

Erfahrenes Mitglied

Anhänge

Gumbo

Erfahrenes Mitglied

Neue Beiträge