|
|||
div-Container ordentlich untereinander anordnen?
Hallo Zusammen!
Ich habe einen Content-Container, in dem ich gerne weitere Container einfügen möchte. Ich möchte diese Container gerne untereinander anordnen, erhalte jedoch teilweise Überschneidungen. Im IE wird die Anordnung (untereinander) richtig dargestellt; in Opera, Firefox und Netscape kommt es dagegen zu Überschneidungen. Gibt es eine für alle Browser verständliche Anweisung, Container untereinander anzuordnen? Danke im Voraus! |
Sponsored Links |
|
|||
Wo ist das Problem? Die ordnen sich doch von ganz allein untereinander an.
Bitte poste Deinen Code, damit man sehen kann, was da schief läuft!
__________________
Grüße, Terry ... die immer noch sporadisch mitliest, auch wenn sie sich wenig zu Wort meldet ... |
Sponsored Links |
|
|||
Code
Das Problem liegt bei breaklineContent. Wie gesagt, im IE werden die untereinander angeordent, in den anderen Browsern nicht.
Ich hoffe, ihr blickt durch den Code durch. Code:
#content{ padding: 0px 10px 0px 0px; float: left; width: 548px; border-right: 1px solid #ccd2d2; } #siteName{ margin: 0px; padding: 16px 0px 8px 0px; color: #ffffff; font-weight: normal; } #pageName{ padding: 0px 0px 5px 15px; margin-bottom: 30px; } #breadCrumb{ padding: 5px 0px 5px 15px; font: small Verdana,sans-serif; color: #AAAAAA; } .feature{ padding: 0px 0px 0px 15px; position: relative; width: 530px; font-size: 11px; } .chartsLeft { width: 170px; float: left; } .chartsMiddle { width: 170px; float: left; } .chartsRight { width: 170px; float: right; } .columnLeft{ width: 250px; float: left; border-right: 1px solid #ccd2d2; padding-right: 10px; } .columnRight{ float: right; width: 260px; } .story { padding: 0px 0px 0px 15px; font-size: 80%; } .breaklineContent{ margin-top: 20px; margin-left: 15px; border-top: 1px solid #ccd2d2; width: 530px; position: relative; } Zitat:
|
|
|||
Das Problem liegt im floaten ohne zu clearen.
Gefloatetete Elemente liegen außerhalb des normalen Elementflußes. Danach muß ein clear:both gesetzt werden, um den nächsten Container darunter zu positionieren. Außerdem: warum definierst Du die nebeneinanderliegenden Bilder doppelt? Code:
.chartsLeft { width: 170px; float: left; } .chartsMiddle { width: 170px; float: left; } .chartsRight { width: 170px; float: right; } Code:
<div class="chartsLeft">[img]cd.jpg[/img]</div> <div class="chartsMiddle">[img]cd.jpg[/img]</div> <div class="chartsRight">[img]cd.jpg[/img]</div> Noch ein Tipp: Bilder können auch alleine floaten - die brauchen kein <div> drumrum - also einfach so: [img]cd.jpg[/img]
__________________
Grüße, Terry ... die immer noch sporadisch mitliest, auch wenn sie sich wenig zu Wort meldet ... |
|
|||
Wow, super hat geklappt! Danke!
Zitat:
Noch ein anderer Darstellungsunterschied in den Browsern: Zitat:
Oberhalb der border-Linie jedoch beträgt der Abstand in NS und Firefox nicht - wie angegeben - 20px, sondern anscheinend eher 0px. Dies betrifft jedoch wieder nur die Darstellung der beiden Breaklines nach den gefloateten charts-Containern. Wie bekomme ich nun den Abstand da rein? |
|
|||
Probleme!!
Hallo zusammen
Ich habe da ein Problem mit meinem CSS glaube ich. Welcome at Andonis Homepage hier und auch bei Videos habe ich das Problem, dass es irgendwie nicht richtig angezeigt wird. Beim scrollen geht es nicht richtig unter dem oberen und unteren Streifen kann mir jemand helfen?? Code:
body { background-image:url(Bilder/BG.jpg); background-position:center top; background-repeat:repeat-x; background-attachment:fixed; } /* Anfang Header */ .divHeader { background-image:url(Bilder/header.jpg); position:fixed; height:150px; width:100%; top:0; right:0; } .divHeaderInner { font-family:Arial, Helvetica, sans-serif; font-size:22px; width:800px; height:150px; margin:auto; } .MenuPicL { /*float:left;*/ height:150px; width:170px; background-image:url(Bilder/rueda.png); position:fixed; top:0; left:0; } .MenuPicR { /*float:left;*/ height:150px; width:170px; background-image:url(Bilder/rueda.png); position:fixed; top:0; right:0; } /* Ende Header */ /* Body Anfang */ .divBody { background-image:url(Bilder/body.jpg); background-repeat:repeat-y; margin:auto; width:800px; } .divBodyInner { padding-top:180px; padding-bottom:72px; padding-left:10px; padding-right:10px; font-size:22px; } /* Body Fertig */ /* Footer Anfang */ .divFooter { background-image:url(Bilder/footer.jpg); position:fixed; right:0; bottom:0; height:62px; width:100%; } .divFooterInner { font-size:16px; text-align:center; padding-top:15px; } /*Footer Ende*/ /* CSS für Footer Links */ .footerLink { text-decoration:none; color:#FFFFFF; } a.footerLink:link { color:#FFFFFF; } a.footerLink:visited{ color:#FFFFFF; } a.footerLink:hover { color:#181f29; } /* Fertig mit Footer Links */ /* Drop down Menu */ div.menu{ width:800px; margin-top:110px; margin-left:auto; margin-right:auto; background-color:#313f53; height:30px; text-align:center; } ul.menu{ position:relative; padding:0px; margin:0px; list-style-type:none; color:#FF00FF; float:left; } ul.menu ul{ position:absolute; list-style-type:none; margin:0px; display:none; margin-left:-40px; z-index:1; } ul.menu ul ul{ position:absolute; display:none; margin-top:-20px; margin-left:121px; z-index:-1; } ul.menu:hover ul { display:block; } ul.menu:hover ul ul { display:none; } ul.menu ul li:hover ul { display:block; } a.menu { display:block; /*background-color:#313f53;*/ background-image:url(Bilder/btn.jpg); width:149px; height:30px; padding-left:10px; padding-top:10px; text-decoration:none; color:#FFFFFF; font-family:arial; text-align:center; font-size:15px; border-bottom: solid 1px black; border-right: solid 1px #000099; } a.menu:hover { background-color:#006699; color:#66FFFF; } /* Drop down Menu fertig */ /* Titel bei z.B About */ .titel { color:#0099CC; font-style:inherit; font-size:24px; } /* Text im Footer */ .footerText{ color:#FFFFFF; text-align:center; font-size:12px; } /* Zitat Satz */ .zitat { color:#FFFFFF; font-style:italic; font-size:16px; } /* Zitat Autor */ .zitat2 { color:#0099CC; font-style:italic; font-size:12px; } /* Spruch Div */ .divSpruch { width:100px; height:150px; float:right; z-index:1; } /* Ende Spruch */ Ich bedanke mich schon im Vorraus |
|
|||
Du hast 2 Probleme eingebaut:
a) Du hast keinen z-index für absolut bzw. fixiert positionierte Elemente angegeben. b) Wenn Flash-Dateien von HTML-Elementen überlappt werden sollen dann musst Du einen wmode angeben. Informier dich darüber bei Adobe. Und wieso machst Du dafür kein eigenes Topic auf? |
Themen-Optionen | |
Ansicht | |
|
|
Ähnliche Themen | ||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
CSS - CMS - lange Menus Balken/BG oben? | shinobi | CSS | 3 | 13.10.2011 22:12 |
DIV Höhe 100% | Daniel86 | CSS | 12 | 29.07.2011 13:40 |
DIV container verschachteln und pixelgenau platzieren | Yakilo | CSS | 4 | 02.02.2010 20:18 |
CSS Text nebeinander? | carstiee09 | CSS | 13 | 13.11.2009 20:18 |
div container verschachteln | blau | CSS | 2 | 05.12.2006 20:44 |