nicht angemeldet
Warum will der Text in meinem DIV nicht umbrechen???
Hallo zusammen!
Ich habe das Problem das ich gerade von Tabellen weg kommen möchte und daher mich in DIV's einarbeite. Doch nun habe ich das Problem, das ich obwohl ich width gesetzt habe der Text nicht umbricht.
Mein Layout besteht ganz einfach aus nur zwei Spalten.
Daher meine Frage: Was mache ich falsch, dass mein Text nicht umbricht?
Er sollte einfach umbrechen un den Container ggf. höher machen.
##################Mein Code der html Datei:################################
<html>
<head>
<title>
Zwei DIV's
</title>
<style type="text/css" media="all">@import url("css_layout.css");</style>
</head>
<body>
<div id="content">
<pre>
Dies ist Container Nummer 1 welcher einmal das Navigationsmenü enthält.
</pre>
</div>
<div id="content2">
<pre>
Dies ist Container Nummer 2 welcher einmal den Hauptinhalt enthält.
</pre>
</div>
</body>
</html>
##################Ende Code der html Datei:################################
##################Mein Code der css Datei:#################################
body {
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
font-family: verdana, arial, helvetica, sans-serif;
color: #ccc;
background-color: #333;
}
a {
text-decoration: none;
font-weight: bold;
color: #ccc;
outline: none;
}
a:visited {
color: #ccc;
}
a:active {
color: #ccc;
}
a:hover {
color: #ccc;
text-decoration: underline;
}
.ahem {
display: none;
}
strong, b {
font-weight: bold;
}
p {
font-size: 12px;
line-height: 22px;
margin-top: 20px;
margin-bottom: 10px;
}
h1 {
font-size: 24px;
line-height: 44px;
font-weight: bold;
margin-top: 0;
margin-bottom: 0;
}
h2 {
font-size: 18px;
line-height: 40px;
font-weight: bold;
margin-top: 0;
margin-bottom: 0;
}
h3 {
font-size: 16px;
line-height: 22px;
font-weight: bold;
margin-top: 0;
margin-bottom: 0;
}
h4 {
font-size: 14px;
line-height: 26px;
font-weight: bold;
margin-top: 0;
margin-bottom: 0;
}
h5 {
font-size: 12px;
line-height: 22px;
font-weight: bold;
margin-top: 0;
margin-bottom: 0;
}
h6 {
font-size: 10px;
line-height: 18px;
font-weight: bold;
margin-top: 0;
margin-bottom: 0;
}
img {
border: 0;
}
.nowrap {
white-space: nowrap;
font-size: 10px;
font-weight: bold;
margin-top: 0;
margin-bottom: 0;
}
.tiny {
font-size: 9px;
line-height: 16px;
margin-top: 15px;
margin-bottom: 5px;
}
#content {
float: left;
padding: 10px 2% 10px 2%;
margin: 20px 1% 20px 2%;
background: #666;
border: 5px solid #ccc;
width: 200px;
}
html>body #content{}
#content2 {
float: left;
padding: 10px 2% 10px 2%;
margin: 20px 2% 20px 1%;
background: #666;
border: 5px solid #ccc;
width: 800px;
}
html>body #content2 {}
pre {
font-size: 12px;
line-height: 22px;
margin-top: 20px;
margin-bottom: 10px;
}
##################Ende Code der css Datei:#################################
-
Hallo,
Kurze Frage:
Warum nutzt du <pre>?
Wenn Du das schon tust, musst Du natuerlich auch sorge dafuer tragen, dass der Text an entsprechenden Stellen umgebrochen wird.
--
"Sei froh dass du nen Virenscanner hast, der schlauer ist als du..."
-
Hi,
Ich habe das Problem das ich gerade von Tabellen weg kommen möchte und daher mich in DIV's einarbeite.
Du solltest nicht nur von Layouttabellen wegkommen, sondern hin zu sinnvollem Code - und DIV ist in den allermeisten Fällen weniger angebracht als andere Elemente.
##################Mein Code der html Datei:################################
<html>
Du weißt, dass hier noch der DOCTYPE fehlt?
<div id="content">
<pre>
Dies ist Container Nummer 1 welcher einmal das Navigationsmenü enthält.
</pre>
</div>Sinnvoll wäre hier statt dem DIV eine UL für die Navigation und statt der ID "content" z.B. "munu".
Völlig unsinnig ist hier PRE; damit gibst Du an, dass der Inhalt so wie im Quelltext eingegeben dargestellt werden soll.<div id="content2">
<pre>
Dies ist Container Nummer 2 welcher einmal den Hauptinhalt enthält.
</pre>
</div>Dieses DIV als Containerelement ist sinnvoll, die ID weniger, da es kein zweiter Inhalt ist.
PRE ist hier ebenso unsinnig.##################Mein Code der css Datei:#################################
den brauchst und solltst Du hier gar nicht komplett anführen, sondern nur den relevanten.
Die meisten Elemente sind in Deinem HTML-Beispiel noch gar nicht enthalten und einige werden vermutlich auch niemals verwendet werden - wozu also das CSS dafür schon angeben?Da Du es aber nunmal gepostet hast, einige Anmerkungen:
body {
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;da reicht auch margin:0; padding:0; - allerdings ist die Frage, ob das wirklich nötig ist. Außerdem darf auch HTML ein padding haben...
a:visited {
color: #ccc;
}
a:active {
color: #ccc;
}
a:hover {
color: #ccc;das ist überflüssig, da bereits für A definiert. Aber vermutlich sind die Farben erst mal Platzhalter, oder?
strong, b {
font-weight: bold;
}das ist überflüssig, da Vorgabe in den Browsern.
font-size: 12px;
line-height: 22px;
margin-top: 20px;
margin-bottom: 10px;Du solltest Dich mit der Einheit em beschäftigen.
#content2 {
float: left;
padding: 10px 2% 10px 2%;
margin: 20px 2% 20px 1%;
background: #666;
border: 5px solid #ccc;
width: 800px;
}float ist hier unangebracht. Ebenso die Breitenangabe, die zusammen mit den übrigen Angaben mit 800+16+16+16+8+10+200+4+4+4+2+10 = 1090px bereits ein standard großes Fenster sprengt.
html>body #content2 {}
irgendwie sieht mir das ganze übrigens so aus, als wenn Du von irgendwo her Codefetzen kopiert hättest, ohne den Sinn zu verstehen...
Ein Lesetipp: http://de.selfhtml.org/css/layouts/freundliche Grüße
Ingo -
<pre> sorgt dafür, dass der Text genauso dargestellt wird, wie du ihn im Editor geschrieben hast. Damit verhinderst du den Textumbruch.
Den Rest habe ich jetzt nicht genau durchgelesen. Nimm <pre> einfach raus und sieh nach, was dann noch für Probleme bleiben.
MFG Raphael