|
|||
Text ragt entweder hinaus oder wird verschoben
Mahlzeit,
bin grad am um/neubau einer Webseite und will dies eigentlich kompl. mit divs css usw. veranstalten und ohne Tables.. Erstmal kurz der Code.. CSS-Datei (noch etwas alles durcheinander.. bin noch n bissel Anfänger) Code:
body { background-color: #FFFFFF; margin: 0px; text-align: center; vertical-align: top; background-image: url(img/background_1.gif); background-repeat: repeat-x; } #ueberschrift { font-family: Arial, Helvetica, sans-serif; font-size: 10px; color: #333333; font-weight: bold; font-style: normal; line-height: normal; font-variant: normal; text-transform: none; text-decoration: none; height: 120px; width: 760px; border-bottom-width: 5px; border-bottom-style: solid; border-bottom-color: #BAE3F8; background-color: #000000; } #datum { font-family: Arial, Helvetica, sans-serif; font-size: 10px; font-weight: normal; color: #999999; } #hauptcontainer { background-color: #DEF4FF; margin: 56px auto; width: 760px; padding: 1px; border: 1px solid #C5ECFF; } #hauptcontainer .hauptbereich { background-color: #FFFFFF; width: inherit; padding: 0px; border: 1px solid #8BDAFF; vertical-align: top; text-align: left; margin: auto; } #hauptcontainer .hauptbereich_1 { background-color: #F3F3F3; padding: 4px; } #hauptcontainer .hauptbereich_2 { width:inherit; border: 1px solid #EAF7FD; background-color: #FFFFFF; text-align: left; padding: 16px; background-image: url(img/background_2.gif); background-repeat: repeat-x; } #kopfbereich { width: 100%; background-color: #555555; height: 52px; border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: #999999; text-align: left; padding-left: 56px; vertical-align: top; } #menu_1 { width: 120px; height: auto; float:left; font-family: Arial, Helvetica, sans-serif; font-size: 11px; } #menu { list-style-type:none; width: 120px; border-top:1px solid #FFC5E2; } #menu li{ list-style-type:none; border-bottom:1px solid #FFC5E2; } #menu_1 h1 { font-family: Arial, Helvetica, sans-serif; font-size: 11px; font-weight: bold; color: #000000; margin-left: 3px; padding: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; } #menu a { display:block; width: 112px; padding: 4px 4px; text-decoration: none; } #menu a:link { color:#FF3399; background-color:transparent; } #menu a:visited { color:#FF3399; background-color:transparent; } #menu a:hover { color:#FF3399; background-color:#FFF3F9; } #menu a:active { color:#FF3399; background-color:#FFF3F9; } #textbereich_1 { margin-left: 160px; } #clear { clear: both; margin: 0px; padding: 0px; height: 0px; width: 0px; } #text_kompl { margin: 0px; padding: 0px 0px 16px; float: left; } #text_kompl h1 { font-family: Arial, Helvetica, sans-serif; font-size: 14px; font-style: normal; font-weight: bold; font-variant: normal; color: #000000; text-decoration: none; margin: 0px 0px 6px; padding: 0px; } #text_kompl .eintrag { font-family: Arial, Helvetica, sans-serif; font-size: 11px; font-style: normal; font-weight: normal; color: #333333; text-decoration: none; margin: 0px; padding: 0px; text-align: justify; } #text_kompl .keycom { font-family: Arial, Helvetica, sans-serif; font-size: 11px; color: #000000; margin: 16px 0px 0px; padding: 0px; float: left; } #text_kompl a { text-decoration: none; } #text_kompl a:link { color:#FF3399; background-color:transparent; } #text_kompl a:visited { color:#FF3399; background-color:transparent; } #text_kompl a:hover { color:#FF3399; background-color:#FFF3F9; } #text_kompl a:active { color:#FF3399; background-color:#FFF3F9; } #text_kompl .comments { font-family: Arial, Helvetica, sans-serif; font-size: 11px; color: #000000; margin: 16px 0px 0px 64px; padding: 0px; float: left; } #text_kompl .datum { font-family: Arial, Helvetica, sans-serif; font-size: 11px; color: #000000; padding: 0px; margin-top: 16px; margin-right: 0px; margin-bottom: 0px; margin-left: 64px; float: left; } #leer { margin-top: 16px; } #text_kompl .comdate { margin: 0px; padding: 0px 0px 16px; border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: #EBEBEB; } #text_erster { margin: 0px 0px 48px; padding: 0px; } #text_erster h1 { font-family: Arial, Helvetica, sans-serif; font-size: 14px; font-weight: bold; color: #000000; margin-top: 0px; margin-right: 0px; margin-bottom: 6px; margin-left: 0px; } #text_erster .last5 { font-family: Arial, Helvetica, sans-serif; font-size: 11px; font-weight: normal; color: #000000; margin: 0px; padding: 0px; } #text_erster a { text-decoration: none; } #text_erster a:link { color:#FF3399; background-color:transparent; } #text_erster a:visited { color:#FF3399; background-color:transparent; } #text_erster a:hover { color:#FF3399; background-color:#FFF3F9; } #text_erster a:active { color:#FF3399; background-color:#FFF3F9; } #links { width: 120px; padding: 0px; margin-top: 32px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; position: relative; } #links h1 { font-family: Arial, Helvetica, sans-serif; font-size: 11px; font-weight: bold; color: #000000; text-decoration: none; margin: 0px; padding: 0px; } #links .links { font-family: Arial, Helvetica, sans-serif; font-size: 11px; font-weight: normal; color: #000000; text-decoration: none; margin: 0px; padding: 0px; } #links a { text-decoration: none; } #links a:link { color:#FF3399; background-color:transparent; } #links a:visited { color:#FF3399; background-color:transparent; } #links a:hover { color:#FF3399; background-color:#FFF3F9; } #links a:active { color:#FF3399; background-color:#FFF3F9; } Code:
<!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="de" lang="de"> <head> <title>Untitled Document</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <link href="style.css" rel="stylesheet" type="text/css" /> </head> <body> <div id="hauptcontainer"> <div class="hauptbereich"> <div id="ueberschrift"></div> <div class="hauptbereich_1"> <div class="hauptbereich_2"> <div id="menu_1"> <h1>Menü</h1> <div id="menu"> <li><a href="#">Startseite</a></li> <li><a href="archiv">Archiv</a></li> <li><a href="über%20FLo">über ...</a></li> <li><a href="Bilder">Bilder</a></li> <li><a href="Gästebuch">Gästebuch</a></li> <li><a href="kontakt">Kontakt</a></li> </div> <div id="links"><h1>Links</h1> <p class="links"><a href="#">Link 1</a><br> <a href="#">Link 2</a><br> <a href="#">Link 3</a><br> <a href="#">Link 4</a><br> <a href="#">Link 1</a><br> <a href="#">Link 2</a><br> <a href="#">Link 3</a><br> <a href="#">Link 4</a><br> <a href="#">Link 1</a><br> <a href="#">Link 2</a><br> <a href="#">Link 3</a><br> <a href="#">Link 4</a><br> <a href="#">Link 1</a><br> <a href="#">Link 2</a><br> <a href="#">Link 3</a><br> <a href="#">Link 4</a><br> <a href="#">Link 1</a><br> <a href="#">Link 2</a><br> <a href="#">Link 3</a><br> <a href="#">Link 4</a><br> </p> </div> </div> <div id="textbereich_1"> <div id="text_erster"> <h1>Willkommen auf XXXX </h1> <p class="last5">Die letzten 5 Einträge auf einen Blick für den schnellen Klick:<br> - <a href="#">Eintrag 1 </a><br /> - <a href="#">Eintrag 2 </a><br /> - <a href="#">Eintrag 3 </a><br /> - <a href="#">Eintrag 4 </a><br /> - <a href="#">Eintrag 5 </a> </p> </div> <div id="text_kompl"> <h1> Eintrag 1 </h1> <p class="eintrag"> Blabla blablablabla bla blablabla blabla Blabla blablablabla bla blablabla blabla blabla bla </p> <span class="eintrag">Blabla blablablabla bla blablabla blabla </span><span class="eintrag">Blabla </span><span class="eintrag">Blabla</span><span class="eintrag">Blabla</span><span class="eintrag">Blabla</span><span class="eintrag">Blabla</span> <div class="comdate"> <p class="keycom"><strong>Keywords</strong><br> <a href="#">Texte</a><br> <a href="#">Rezept</a><br> <a href="#">Essen</a><br> <a href="#">Bilder</a></p> <p class="comments"><strong>Kommentare</strong><br> <a href="#">Comment1</a><br> <a href="#">Comment2</a><br> <a href="#">schreiben</a></p> <p class="datum"><strong>Gepostet am</strong><br>25. Jun 2006 02:11:08</p> <p id="clear"></p></div></div> <div id="text_kompl"> <h1> Eintrag 2 </h1> <p class="eintrag"> Blabla blablablabla bla blablabla blabla Blabla blablablabla bla blablabla blabla blabla bla </p> <span class="eintrag">Blabla blablablabla bla blablabla blabla </span><span class="eintrag">Blabla blablablabla bla blablabla blabla </span><span class="eintrag">Blabla blablablabla bla blablabla blabla </span><span class="eintrag">Blabla blablablabla bla blablabla blabla </span><span class="eintrag">Blabla blablablabla bla blablabla blabla </span><span class="eintrag">Blabla blablablabla bla blablabla blabla</span> <div class="comdate"> <p class="keycom"><strong>Keywords</strong><br> <a href="#">Texte</a><br> <a href="#">Rezept</a><br> <a href="#">Essen</a><br> <a href="#">Bilder</a></p> <p class="comments"><strong>Kommentare</strong> <br> <a href="#">Comment 1 </a><br> <a href="#">Comment 2 </a><br> <a href="#">schreiben</a></p> <p class="datum"><strong>Gepostet am</strong> <br>25. Jun 2006 02:11:08</p> <p id="clear"></p> </div> </div> <div id="clear"></div> </div> </div> </div> </div> </div> </body> </html> |
Sponsored Links |
|
|||
nun das Problem: wenn ich es so lasse geht bei mir im IE der Text über hauptbereich_1 und hauptbereich_2 hinaus .. was ich ja nicht will (also voll übern Rand drüber).
Wenn ich das float: left; bei text_kompl wegnehme dann verschiebt er mir den 2. Eintrag auf höhe des endes von den links will ich natürlich auch nicht... und langsam aber sicher krieg ich ne Krise. Kann mir jemand sagen was ich verkehrt gemacht habe? Oder geht es gar nicht anders?? |
Sponsored Links |
|
||||
Habe mal folgendes geändert: ( Just test it ... )
Betreffende Definitionen einfach mal austauschen bzw. alte auskommentieren. Code:
#menu_1 { width: 120px; float: left; border: 1px solid #000; font-family: Arial, Helvetica, sans-serif; font-size: 11px; } #textbereich_1 { margin-left: 130px; float: right; } #text_kompl { margin: 0px; padding: 16px; clear: both; border: 1px solid #000; } #text_erster { margin: 0px 0px 48px; padding: 16px; clear: left; border: 1px solid #000; }
__________________
"Das meiste, das man im WWW findet, ist Grundrauschen." (C. Schoenleber in de.org.ccc) Daily Garfield |
Themen-Optionen | |
Ansicht | |
|
|
Ähnliche Themen | ||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
Hilfe!!! mein Homepagelayout funktioniert nicht! | maxx | CSS | 5 | 14.10.2012 08:21 |
Wrapper wächst nicht mit, keine Floats | maclady | CSS | 11 | 10.02.2010 18:30 |
Auf-/Zuklappen mit JS | crimi | Javascript & Ajax | 7 | 23.09.2008 17:27 |
Helft mir. Ich habe voll die Leseschwäche | nick | CSS | 12 | 15.01.2008 21:52 |
3 dynam. Spalten mit Inhaltsüberlauf | spacegaier | CSS | 6 | 12.10.2007 01:24 |