• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Ausrichtung DIV - Container klappt nicht

R

_R_A_L_F_

Mitglied
Hallo,

das Problem ist, dass ich zwei DIV - Container hab, den einen möchte ich rechts und den anderen links ausrichten.

Das Problem ist nun, dass das nicht klappen will und ich nicht weiß wieso.

Anbei mal ein Screenshot wie es momentan aussieht und die Codes dazu.

style.css
HTML: 
#body {
    width: 1100px;
    height: 1275px;
    margin-top: 10px;
    margin-right: auto;
    margin-bottom: 10px;
    margin-left: auto;
    -moz-box-shadow: 0px 0px 10px #000;
    -webkit-box-shadow: 0px 0px 10px #000;
    box-shadow: 0px 0px 10px #000;
    background-color:#FFFFFF;
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
    border-top-left-radius: 0px;
    border-top-right-radius: 0px;
}   
#top {
    background-color: #979797;
    height: 10px;
    width: 1100px;
}
#logo {
    float: left;
    height: 200px;
    width: 350px;
    z-index: 2;
    position:absolute;
    margin-left: 25px;
    -moz-box-shadow: 3px 3px 5px #000;
    -webkit-box-shadow: 3px 3px 5px #000;
    box-shadow: 3px 3px 5px #000;
}

a:link {
    font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
    font-size: 14px;
    font-style: normal;
    text-decoration: none;
    color: #656565;
    font-weight: normal;
}

a:visited {
    font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
    font-size: 14px;
    font-style: normal;
    text-decoration: underline;
}

a:hover {
    font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
    font-size: 14px;
    font-style: normal;
    text-decoration: underline;
}

#menue {
    float: right;
    height: 40px;
    width: 680px;
    padding-top: 4px;
}
#slideshow {
    height: 0px;
    width: 1050px;
    z-index: 1;
    position: absolute;
    margin-top: 60px;
}
#inhalt {
    float: left;
    height: 500px;
    width: 740px;
    padding-top: 10px;
    padding-left: 20px;
}
#inhalt_bilder {
    float: left;
    height: 500px;
    width: 1000px;
    padding-top: 10px;
    padding-left: 20px;
}
#zeiten {
    height: 250px;
    width: 290px;
    float: right;
    padding-top: 10px;
    padding-right: 10px;
}
.bilder_links {
    height: 200px;
    width: 350px;
    padding-top: 10px;
    padding-right: 10px;
    border-top-style: double;
    border-right-style: double;
    border-bottom-style: double;
    border-left-style: double;
    margin-right: auto;
    margin-left: 0px;
}
.bilder_rechts {
    height: 200px;
    width: 350px;
    padding-top: 10px;
    padding-right: 10px;
    border-top-style: double;
    border-right-style: double;
    border-bottom-style: double;
    border-left-style: double;
    margin-right: 0px;
    margin-left: auto;
}
H1 {
    font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
    font-size: 24px;
    font-style: oblique;
    color: #656565;
}
H2 {
    font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
    font-size: 14px;
    font-style: normal;
    color: #656565;
}
H3 {
    font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
    font-size: 14px;
    font-style: normal;
    color: #656565;
    text-align: center;
}
#ende {
    height: 15px;
    width: 1050px;
    margin-right: auto;
    margin-left: auto;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    color: #666;
    text-align: center;
    font-style: normal;
}
textarea {
    resize: none;
}

HTML-Seite
HTML: 
<div id="inhalt_bilder">
<H1>Bildergalerie</H1>
<p>
<div class="bilder_links">
<H2><li>Altbausanierung</li></H2>
<div class="image-row">
            <div class="image-set">
                <a class="example-image-link" href="bildergalerie_altbau.html" title="Text Altbau Bild 1"><img class="example-image" src="bilder/galerie/altbau/bild1.jpg" alt="Bild 1 von 2  " width="100" height="100"/></a>
                <a class="example-image-link" href="bildergalerie_altbau.html"  title="Text Altbau Bild 2"><img class="example-image" src="bilder/galerie/altbau/bild2.jpg" alt="Bild 2 von 2 " width="100" height="100"/></a>                         
<br />               
<a href="bildergalerie_altbau.html" title="Hier gelangen Sie zum Album: Altbau">>> Hier gelangen Sie zum Album Altbau</a>
</div>
</div>                     

<div class="bilder_rechts">
<H2><li>Gewerbebau</li></H2>
<div class="image-row">
            <div class="image-set">
                <a class="example-image-link" href="bildergalerie_gewerbe.html" title="Text Gewerbe Bild 1"><img class="example-image" src="bilder/galerie/gewerbe/bild1.jpg" alt="Bild 1 von 2  " width="100" height="100"/></a>
                <a class="example-image-link" href="bildergalerie_gewerbe.html"  title="Text Gewerbe Bild 2"><img class="example-image" src="bilder/galerie/gewerbe/bild2.jpg" alt="Bild 2 von 2 " width="100" height="100"/></a>                         
<br />               
<a href="bildergalerie_gewerbe.html" title="Hier gelangen Sie zum Album: Gewerbebau">>> Hier gelangen Sie zum Album Altbau</a>
</div>
</div>

</div>                    
</div>           

</div>
</div>
 

Anhänge

  • bild.jpg
    bild.jpg
    163 KB · Aufrufe: 8
Hallo Tronjer,

also so groß ist die CSS - Datei auch wieder nicht ;)

In der Klasse .bilder_links und .bilder_rechts ist aber kein position:absolute vorhanden. Hier nochmal die CSS - Eigenschaften die den Code betreffen:

HTML: 
#inhalt_bilder {
    float: left;
    height: 500px;
    width: 1000px;
    padding-top: 10px;
    padding-left: 20px;
}
.bilder_links {
    height: 200px;
    width: 350px;
    padding-top: 10px;
    padding-right: 10px;
    border-top-style: double;
    border-right-style: double;
    border-bottom-style: double;
    border-left-style: double;
    margin-right: auto;
    margin-left: 0px;
}
.bilder_rechts {
    height: 200px;
    width: 350px;
    padding-top: 10px;
    padding-right: 10px;
    border-top-style: double;
    border-right-style: double;
    border-bottom-style: double;
    border-left-style: double;
    margin-right: 0px;
    margin-left: auto;
}

Woran liegt es dann?
 
Ok, ich ignoriere mal das erste Posting und stelle mir jetzt ein Elternelement #inhalt_bilder und darin zwei Kindelemente: .bilder_links und .bilder_rechts vor.

- #inhalt_bilder bekommt kein float
- .bilder_links bekommt ein float:left
- .bilder_rechts bekommt entweder float:left oder float:right. Je nachdem, ob das Element direkt an .bilder_links angrenzen oder rechtsbündig in #bilder_inhalt stehen soll.
- Das darauf folgende Element muss ein clear enthalten.
 
Danke für deine Bemühungen. Hab den Code jetzt mal so abgeändert wie von dir beschrieben:

- #inhalt_bilder float entfernt
HTML: 
#inhalt_bilder {
    height: 500px;
    width: 1000px;
    padding-top: 10px;
    padding-left: 20px;
}

- .bilder_links float:left hinzugefügt
HTML: 
.bilder_links {
    height: 200px;
    width: 350px;
    float:left;
    padding-top: 10px;
    padding-right: 10px;
    border-top-style: double;
    border-right-style: double;
    border-bottom-style: double;
    border-left-style: double;
    margin-right: auto;
    margin-left: 0px;
}

- .bilder_rechts ebenfalls float:left hinzugefügt
HTML: 
.bilder_rechts {
    height: 200px;
    width: 350px;
    float:left;
    padding-top: 10px;
    padding-right: 10px;
    border-top-style: double;
    border-right-style: double;
    border-bottom-style: double;
    border-left-style: double;
    margin-right: 0px;
    margin-left: auto;
}

Im danachfolgenden DIV (#Ende) habe ich ein Clear hinzugefügt:
HTML: 
#ende {
    height: 15px;
    width: 1050px;
    margin-right: auto;
    margin-left: auto;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    color: #666;
    text-align: center;
    font-style: normal;
    clear: left;
}

Gleiches Ergebnis aber wie vorher (siehe Bild)
 

Anhänge

  • bild.jpg
    bild.jpg
    149,1 KB · Aufrufe: 3
War das jetzt so schwer?
HTML: 
<!DOCTYPE html>
<html>
<head>
  <title>Foo</title>
  <meta charset="utf-8">
<style>
    #inhalt_bilder {
    width: 1000px;
    margin: auto;
    border: 1px green solid;
  }
  .bilder_links, .bilder_rechts {
    float: left;
    width: 350px;
    height: 300px;
    margin: 20px;
  }
   .bilder_links {
    border: 1px red solid;
   }
   .bilder_rechts {
    border: 1px blue solid;
   }
   .clear {
    clear: both;
   }
</style>
</head>
<body>
  <div id="inhalt_bilder">
    <div class="bilder_links"></div>
    <div class="bilder_rechts"></div>
    <div class="clear"></div>
  </div>
</body>
</html>
 
Natürlich ist es nicht schwer. Dein Code funktioniert ja auch selbstverständlich. Nur wenn ich es in meiner CSS - Datei so einfüge, klappt es eben nicht.

Es klappt erst dann, wenn ich anstatt:
HTML: 
<div class="bilder_links">
<H2><li>Altbausanierung</li></H2>
<div class="image-row">
            <div class="image-set">
                <a class="example-image-link" href="bildergalerie_altbau.html" title="Text Altbau Bild 1"><img class="example-image" src="bilder/galerie/altbau/bild1.jpg" alt="Bild 1 von 2  " width="100" height="100"/></a>
                <a class="example-image-link" href="bildergalerie_altbau.html"  title="Text Altbau Bild 2"><img class="example-image" src="bilder/galerie/altbau/bild2.jpg" alt="Bild 2 von 2 " width="100" height="100"/></a>                      
<br />            
<a href="bildergalerie_altbau.html" title="Hier gelangen Sie zum Album: Altbau">>> Hier gelangen Sie zum Album Altbau</a>
</div>
</div>

Das ganze nur noch so aufbaue:
HTML: 
<div id="inhalt_bilder">
<H1>Bildergalerie</H1>
<p>
<div class="bilder_links">
bla links
</div>
<div class="bilder_rechts">
bla rechts
</div>
<div class="clear"></div>
</div>
</div>

Also gehe ich mal stark davon aus, das es an dem verschachtelten DIV - Classes liegt. Nur wie löse ich das Problem?
 
Warum nutzt du nicht die zweite Variante?

Ist doch im großen und ganzen nicht viel unterschied..
 
Hab ich jetzt auch so gemacht und es klappt auch. ;) Nur zum Verständnis wollte ich nochmal nachfragen, warum es bei der Variante mit dem verschachtelten Containern nicht klappt?
 
Beim 2. Beispiel ist es auch Verschachtelt versteh nicht ganz was du meinst..
Code: 
<div id="master">
    <H1>Bildergalerie</H1>
    <div class="sub1">
        <div class="sub1-sub1">
            1/1
        </div>
        <div class="sub1-sub2">
            1/2
        </div>
    </div>
    <div class="sub2">
        2
    </div>
    <div class="sub3"></div>
</div>
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben