|
|||
floating überlappt sich
Hi,
ich hab n problem mit floating. eigentlich müsste bei floating sich ja die Blöcke nebeneinander positionieren, aber bei mir tun sie das nicht sondern überlappen sich. Hier mein Beispiel: Code:
<div id="sub"> <div id="frei">Navigation</div> <div id="border"> <ul id="liste"> <!-- SUB-MENUE --> ##SUBS## <!-- SUBS-MENUE ENDE --> </ul> </div> </div> <div id="nav"> <!-- NAVIGATION --> ##NAV# <!-- NAVIGATION ENDE --> </div> <div id="content"> <!-- INHALT --> ##INHALT# <!-- INHALT ENDE --> </div> Code:
div#allgemein { width: 100%; position: absolute; background-color: white; } div#rahmen { position: relative; width: 800px; margin: 0px auto; text-align: center; } div#banner { width: 800px; height: 80px; background-image: url('../bilder/head.gif'); background-repeat: no-repeat; margin: 0px auto; text-align: center; } div#sub { position: relative; background-image: url('../bilder/sub.gif'); background-repeat: no-repeat; width: 100%; height: 30px; margin: 0px auto; } div#frei { width: 150px; height: 100%; font-weight: bold; font-size: 12px; color: #8098B2; padding-top: 7px; float: left; } div#border { height: 100%; padding-left: 20px; border-bottom: 1px solid #013162; } ul#liste { float: left; padding-top: 7px; } ul#liste li { display: inline; } div#sub ul#liste a { font-weight: bold; font-size: 12px; color: #013162; font-family: Verdana; padding: 0px 5px 0px 5px; text-decoration: none; } div#sub ul#liste a:hover { color: #000000; text-decoration: underline; } div#nav { width: 150px; height: 100%; background-image: url('../bilder/nav2.gif'); background-repeat: repeat-y; border: 1px solid black; float: left; } div#content { background-image: url('../bilder/main.gif'); background-repeat: no-repeat; background-position: left top; text-align: justify; width: 650px; border: 1px solid black; } gruß Luke |
Sponsored Links |
|
||||
Überlappen sich wo/wie? Bereits gecleared?
Siehe FAQ Frage/Antwort 2. Edit: Hast du ein Link zu deinem Problem? Grüsse lloyd
__________________
The only thing to do with good advice is pass it on. It is never any use to oneself. - Oscar Wilde - #me { position: absolute; } Geändert von Lloyd Larkin (13.09.2006 um 18:46 Uhr) |
Sponsored Links |
|
|||
ich kann die ganze Seite hier reinstellen...
Code:
<!-- KOPFTEIL BEGINN --> <!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>HI-FOG.de - Homepage Marioff.de | 13.09.2006 | </title> <link href="../../bilder/icon.ico" rel="SHORTCUT ICON" /> <meta name="generator" content="Webweaver v1.6.3 [http://pr0g.net]" /> <link rel="stylesheet" type="text/css" href="start.css" /> </head> <body> <div id="allgemein"> <div id="rahmen"> <div id="banner"> <span class="hidden">Willkommen bei Marioff dem weltweit führendem Anbieter für Wassernebel-Brandschutz-Systeme</span> </div> <!-- KOPFTEIL ENDE --><div id="sub"> <div id="frei">Navigation</div> <div id="border"> <ul id="liste"> <!-- SUB-MENUE --> <!-- SUBS-MENUE ENDE --> </ul> </div> </div> <div id="nav"> <!-- NAVIGATION --> ##NAV# <!-- NAVIGATION ENDE --> </div> <div id="content"> <!-- INHALT --> ##INHALT# <!-- INHALT ENDE --> </div> <!-- FUSS BEGINN --> <table cellpadding="0" cellspacing="0" id="sub_bottom"> <tr> <td> <div id="nav2"> </div> </td> <td> <div id="main2"> </div> </td> </tr> </table> <table cellpadding="0" cellspacing="0" id="bottom"> <tr> <td style="width: 150px; border-top: 1px solid #6683A3;"> </td> <td style="border-top: 1px solid #013162; text-align: right; padding: 3px;"><b>Erstellt am: </b>13.09.06 | 17:34 <br />Marioff.de by Florian Schulz 2004-06</td> </tr> </table> </body> </html> <!-- FUSSTEIL ENDE --> Code:
body { margin: 0px; padding: 0px; font-style: normal; font-weight: light; font-size: 15px; font-family: Verdana; text-align: center; } div#allgemein { width: 100%; position: absolute; background-color: white; } div#rahmen { position: relative; width: 800px; margin: 0px auto; text-align: center; } div#banner { width: 800px; height: 80px; background-image: url('../bilder/head.gif'); background-repeat: no-repeat; margin: 0px auto; text-align: center; } div#sub { position: relative; background-image: url('../bilder/sub.gif'); background-repeat: no-repeat; width: 100%; height: 30px; margin: 0px auto; } div#frei { width: 150px; height: 100%; font-weight: bold; font-size: 12px; color: #8098B2; padding-top: 7px; float: left; } div#border { height: 100%; padding-left: 20px; border-bottom: 1px solid #013162; } ul#liste { float: left; padding-top: 7px; } ul#liste li { display: inline; } div#sub ul#liste a { font-weight: bold; font-size: 12px; color: #013162; font-family: Verdana; padding: 0px 5px 0px 5px; text-decoration: none; } div#sub ul#liste a:hover { color: #000000; text-decoration: underline; } div#nav { width: 150px; height: 100%; background-image: url('../bilder/nav2.gif'); background-repeat: repeat-y; border: 1px solid black; float: left; } div#content { background-image: url('../bilder/main.gif'); background-repeat: no-repeat; background-position: left top; text-align: justify; width: 650px; border: 1px solid black; } Gruß Flow |
|
|||
eben sie erscheinen ja NICHT untereinander und nicht nebeneinander sondern übereinander und das ist ja das Problem.
tut mir leid ich hab leider kein Webspace wo ich das jetzt drauf laden kann Gruß Flow |
|
|||
Luke, auch mit deinem Codebeispiel ist mir nicht klar, was genau dein Problem ist. Reduzier den Code auf den Problembereich (was haben die Tabellen damit zu tun?) und beschreib es bitte genauer, vielleicht mit Screenshot.
Und validier deinen Code, bevor du ihn hier einstellst. Ich vermute, dass du das Konzept von float noch nicht ganz verstanden hast. Dein #nav hat ein float, #content nicht. Es weichen somit *nur die Inhalte* von #content dem float aus, nicht jedoch die gesamte Box. (Was der IE macht, ist falsch). Grundlagenlektüre: http://www.andreas-kalt.de/webdesign.../float-theorie |
|
||||
Also in meinem Testcase liegt INHALT unter NAV und da du NAV links floatest, kann es durchaus sein, dass INHALT keinen Platz mehr hat und deshalb darunter (unter NAV!) dargestellt wird.
Falls dem bei dir nicht so ist, kannst du gerne den Ordner packen und mir als Mail schicken.
__________________
The only thing to do with good advice is pass it on. It is never any use to oneself. - Oscar Wilde - #me { position: absolute; } |
|
|||
Hi,
kein Wunder das sich die beiden Container überlappen, ändere mal bitte wie folgt: Code:
div#content { width: 620px; } 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>HI-FOG.de - Homepage Marioff.de</title> <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <style type="text/css"> <!-- * { margin: 0; padding: 0; } .clear { clear: both; } body { font: .8em Verdana, Geneva, Arial, Helvetica, sans-serif; background-color: White; color: Black; } #seite { margin: 0 auto; width: 750px; } #banner { height: 80px; background-color: #FFDEAD; color: Black; } #banner span { visibility: hidden; } #navi { background-color: #CC6600; padding: 5px 10px; color: Black; } #navi ul { list-style-type: none; float: right; } #navi ul li { display: inline; } #sidebar { width: 180px; float: left; margin-right: 10px; background-color: #F4A460; margin-bottom: 10px; color: Black; } #sidebar ul { list-style-type: none; } #content { width: 550px; float: left; background-color: #FFE4C4; color: Black; } #footer { border-top: 1px solid #CC6600; text-align: center; padding: 5px 0; clear: both; } --> </style> </head> <body> <div id="seite"> <div id="banner"> <span>Willkommen bei Marioff dem weltweit führendem Anbieter für Wassernebel-Brandschutz-Systeme</span> </div> <div id="navi"> <ul> <li><a href="#">Listenpunkt</a> </li> <li><a href="#">Listenpunkt</a> </li> <li><a href="#">Listenpunkt</a> </li> <li><a href="#">Listenpunkt</a> </li> </ul> <p><strong>Navigation</strong></p> </div> <div id="sidebar"> <ul> <li><a href="#">Listenpunkt</a> </li> <li><a href="#">Listenpunkt</a> </li> <li><a href="#">Listenpunkt</a> </li> <li><a href="#">Listenpunkt</a> </li> </ul> </div> <div id="content">Seiteninhalt...</div> <div id="footer"> <p><strong>Erstellt am: </strong>13.09.06 | 17:34 - Marioff.de by Florian Schulz 2004-06</p> </div> </div> </body> </html>
__________________
Gruss Karlo |
Themen-Optionen | |
Ansicht | |
|
|
Ähnliche Themen | ||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
Wiedermal floating | mcdaniels | CSS | 7 | 16.05.2011 21:08 |
Floating Problem beim IE 6 | eddy1968 | CSS | 5 | 12.04.2010 10:52 |
div am unteren Rand pos. => Bei kleineren Monitoren überlappt div nach oben! | RollingStones | CSS | 3 | 30.05.2009 13:02 |
[IE] border überlappt an ecken | psycho_dmr | CSS | 5 | 03.02.2006 16:05 |
floating Problematik bei verschachtelten div's | bensen | CSS | 2 | 29.05.2005 17:36 |