XHTMLforum

XHTMLforum (http://xhtmlforum.de/index.php)
-   CSS (http://xhtmlforum.de/forumdisplay.php?f=73)
-   -   div-Container ordentlich untereinander anordnen? (http://xhtmlforum.de/showthread.php?t=33759)

tomnovo 28.11.2004 13:34

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!

terrikay 28.11.2004 13:37

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!

tomnovo 28.11.2004 13:48

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;
}

Hier das HTML-Zeugs:
Zitat:

<div id="content">
<div id="breadCrumb">Breadcrumb / Breadcrumb / Breadcrumb /</div>
<div id="pageName">
<h2>Herzlich Willkommen!</h2>
</div>
<div class="story">
<div class="red subLine">St&ouml;bern nach Interpreten</div>
<div class="orange letterSpacing">asdasfasf</div>


<div class="red subLine">Suche</div>
<div class="orange">
in
<select name="">
<option value="all">Alle Felder</option>
<option value="interpret">Interpret</option>
<option value="titel">Titel</option>
</select>
nach
<input name="suche" type="text" class="textbox" size="30" maxlength="50">
<input type="submit" name="Submit" value=" Los! " class="textbox">
</div>
<div id="mikrofon"></div>
</div>
<div class="breaklineContent"></div>
<div class="feature"><h3 class="red">Unsere Charts</h3>
<div class="chartsLeft">[img]cd.jpg[/img]</div>
<div class="chartsMiddle">[img]cd.jpg[/img]</div>
<div class="chartsRight">[img]cd.jpg[/img]</div>
</div>
<div class="breaklineContent"></div>
<div class="feature">
<div class="columnLeft"></div>
<div class="columnRight"></div>
</div>
<div class="breaklineContent"></div>
</div>

terrikay 28.11.2004 14:48

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]

tomnovo 28.11.2004 15:49

Wow, super hat geklappt! Danke!

Zitat:

Außerdem: warum definierst Du die nebeneinanderliegenden Bilder doppelt?
Wie meinst du das? Wie kann ich es anders machen? (befasse mich erst seit 2 Wochen mit CSS)

Noch ein anderer Darstellungsunterschied in den Browsern:
Zitat:

.breaklineContent{
margin-top: 20px;
margin-left: 15px;
border-top: 1px solid #ccd2d2;
width: 530px;
position: relative;
clear: both;
height: 20px;
}
Habe - wie man sieht - noch height hinzugefügt, weil NS und Mozilla keine Höhe "automatisch" einfügen wie IE und Opera. Der Abstand zum nächsten Element unterhalb der border-Linie ist nun überall gleich.

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?

Andoni 14.05.2010 16:18

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 */

das ist meine CSS.

Ich bedanke mich schon im Vorraus

threadi 14.05.2010 20:05

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? :roll:

Andoni 15.05.2010 09:57

jaaa keine ahnung xD bin neu hier und dachte der Titel würde passen :mrgreen:

aber danke für deine Antwort. Mal schaun was sich da tun lässt.


Alle Zeitangaben in WEZ +2. Es ist jetzt 03:55 Uhr.

Powered by vBulletin® Version 3.8.11 (Deutsch)
Copyright ©2000 - 2021, vBulletin Solutions, Inc.

© Dirk H. 2003 - 2020