Div-Container Anordnung

murphy_f · 26 Januar 2013

Hallo zusammen!

Ich möchte folgendes Layout anhand verschiedener Div-Container umsetzen, allerdings will es nicht so recht klappen.
Irgendwo scheint sich ein Fehler eingeschlichen zu haben. Bestimmt gibt es für mein Vorhaben auch eine elegantere, einfachere Lösung?
Ich würde mich sehr freuen, wenn jemand den Fehler findet oder sogar eine Idee für eine bessere Umsetzung hat.

Hier eine schnelle Skizze, wie es eigentlich aussehen soll:
(Rand links und rechts ist eigentlich nicht nötig, die Ränder sind später nicht sichtbar.)

Wichtig ist, dass das Div für das Menü und das mittlere Div bündig untereinander sitzen, was sie leider momentan nicht tun.
Wahrscheinlich müsste man die beiden erst mal zusammen in ein Div packen?
Außerdem soll der komplette content dann später zentriert sitzen.

Momentan sieht es leider so aus.
Wieso (verdammt) umschließt #pagewrapper die anderen Divs nicht?

Offensichtlich ist die ganze Struktur fehlerhaft, aber ich hab gerade ein riesiges Brett vorm Kopf und weiß nicht weiter.
Es wär unendlich cool, wenn mir jemand weiterhelfen könnte.

Lieben Gruß,
Janina

Der Code:

HTML:

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    
    <link rel="stylesheet" href="murphy_style.css" type="text/css" />
   
    
<title>The Work of Francis Murphy</title>
    
</head>

<body>

<div id="pagewrapper">

    <div id="sidebar">

            <ul>    〇 ʘ Ξ    Ѫ ᐉ ᐥ    

<li><a href="http://suitsncats.de/wordpress/phtgrph/">phtgrph</a></li>

<li><a href="http://suitsncats.de/wordpress/wbdsgn/">wbdsgn</a></li>

<li><a href="http://suitsncats.de/wordpress/ppr/">ppr</a></li>

<li><a href="http://suitsncats.de/wordpress/prsn/">prsn</a></li>

        </ul>
        
    </div><!-- end of sidebar-->



        <div id="content1"></div>

        <div id="content2"></div>

        <div id="content3"></div>

        <div id="content4"></div>

        <div id="content5"></div>





</div><!-- end pagewrapper -->




</body>
</html>






</body>
</html>

HTML:

@charset "UTF-8";
/* CSS Document */

#pagewrapper {
    margin-left:auto;
    margin-right:auto;
    width:1110px;
    border: 1px solid #000;
    
}


    
#sidebar {
    width:204px; 
    margin-left:auto;
    margin-right:auto;
    text-align:center; 
    color: #666; 
    margin-top:50px;
    border: 1px solid #000;
    
    }
    
#sidebar ul {
margin:0px; 
padding:0px;
}

#sidebar ul li {
    margin: 5px 0; 
    padding: 0; 
    list-style-type: none; 
    font-family:Times New Roman, Times New Roman, Times, serif;
    font-size: 9pt; 
    font-style:italic;
    font-weight: normal; 
    line-height:14px;
    border-top: 1px solid #000000;
    }
    

#content1  {
    
    margin-right:20px;
    width:204px;
    height:500px;
    border: 1px solid #000;
    float:left;
    }

    
#content2 {
    width:204px;
    height:500px;
    margin-right:20px;
    border: 1px solid #000;
    float:left;
    }
    
#content3 {
    width:204px;
    height:500px;
    margin-right:20px;
    border: 1px solid #000;
    float:left;
    }    
    
#content4 {
    width:204px;
    height:500px;
    margin-right:20px;
    border: 1px solid #000;
    float:left;
    }    
    
    #content5 {
    width:204px;
    height:500px;
    border: 1px solid #000;
    float:left;
    
    }

number15 · 26 Januar 2013

Also dein Code ist mist :)

Hab dir mal in 2min schnell das prinzip hingeschustert.
Check nur nich ob die Sidebar das linke content div ist?!

Grundsaetzliches aber:
-Verwende doch HTML5, Divs namens sidebar... autsch!
-Verwende klassen wenn sich das zeug wiederholt
-Den "doppelblock" brauchste extra div um dem float:left; gerecht zu werden, einfach verschachteln siehe code.

Also sieht so aus wie von der vorlage. Sei dir aber gesagt ich wuerde das NIE so machen!
Aufloesungen vom Browsen, mobile geraeten etc... gibt nur probleme!!!

Code:

<!DOCTYPE HTML>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    
    <link rel="stylesheet" href="style.css" type="text/css" />
<title>The Work of Francis Murphy</title>
</head>
<body>
<div id="pagewrapper">
    <div id="sidebar" class="content">
            <ul>  
<li><a href="http://suitsncats.de/wordpress/phtgrph/">phtgrph</a></li>

<li><a href="http://suitsncats.de/wordpress/wbdsgn/">wbdsgn</a></li>

<li><a href="http://suitsncats.de/wordpress/ppr/">ppr</a></li>

<li><a href="http://suitsncats.de/wordpress/prsn/">prsn</a></li>

        </ul>
        
    </div> 
       <!-- SIDEBAR ?!?! <div id="content1" class="content"></div>-->

        <div id="content2"class="content"></div>
        <div id="content3">
            <div id="middleUp"></div>
            <div id="middleDown"></div>
        </div>
        <div id="content4" class="content"></div>
        <div id="content5" class="content"></div>
</div><!-- end pagewrapper -->
</body>
</html>
</body>
</html>

Code:

@charset "UTF-8";
/* CSS Document */

#pagewrapper { width:1200px; margin: auto;}

#sidebar {}
    
#sidebar ul {
margin:0px; 
padding:0px;
}

#sidebar ul li {
    margin: 5px 0; 
    padding: 0; 
    list-style-type: none; 
    font-family:Times New Roman, Times New Roman, Times, serif;
    font-size: 9pt; 
    font-style:italic;
    font-weight: normal; 
    line-height:14px;
    border-top: 1px solid #000000;
    }
    

.content{margin-right:20px;
    width:204px;
    height:500px;
    border: 1px solid #000;
    float:left;
    text-align:center; }

#middleUp{ height:100px; border: 1px solid #000; margin-bottom:20px;}
#middleDown{ height:300px;   border: 1px solid #000;}
#content2{}
#content3{margin-right:20px;
    width:204px;
    height:500px;
    float:left;
    text-align:center;}
#content4{}
#content5{}

murphy_f · 28 Januar 2013

Danke schon mal!

Allerdings habe ich jetzt immer noch das gleiche Problem wie vorher:
Wenn ich die Breite von #pagewrapper auf die Breite vom content verringere, damit das Zentrieren davon Sinn macht und der content am Ende auch in der Mitte sitzt, springt das letzte div immer in die nächste Zeile.
Kann ich das irgendwie verhindern oder gibt es einen besseren Weg das Layout zu zentrieren?

Hat vielleicht noch jemande eine Idee, wie man das Layout besser umsetzen könnte?

djheke · 31 Januar 2013

Laut deiner Grafik soll es wohl so aussehen?!

Code:

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>The Work of Francis Murphy</title>

<style type="text/css">

#wrapper {
 width:1000px;
 margin:0px auto;
 overflow:hidden;
 position:relative;
}

#spalte1  {
 width:400px;
 float:left;
}

#spalte2 {
 width:400px;
 float:right;
}

#spalte3  {
 margin:0 400px;
}



#wrapper:before  {
 content:"";
 position:absolute;
 top:0px;
 left:0px;
 width:195px;
 bottom:0px;
 border:1px solid #000;background:#eda;
}

#wrapper:after  {
 content:"";
 position:absolute;
 top:0px;
 left:200px;
 width:195px;
 bottom:0px;
 border:1px solid #000;background:#aee;
}

#wrapper_innen:before  {
 content:"";
 position:absolute;
 top:0px;
 left:600px;
 width:195px;
 bottom:0px;
 border:1px solid #000;background:#add;
}

#wrapper_innen:after  {
 content:"";
 position:absolute;
 top:0px;
 left:800px;
 width:195px;
 bottom:0px;
 border:1px solid #000;background:#ada;
}

.box {
 width:200px;
 float:left;
 position:relative;z-index:99;
}

.box_mitte_oben {
 width:195px;
 margin-bottom:5px;
 border:1px solid #000;background:#dad;
}

.box_mitte_oben ul {
 margin:-1px 0px 0px 0px; 
 padding:0px;
}

.box_mitte_oben ul li {
 margin: 0; 
 padding: 0; 
 list-style-type: none; 
 border-top: 1px solid #000000;
}

.box_mitte_oben a {
 padding:10px;
 color:#000;
 text-decoration:none;
 display:block;
}

.box_mitte_unten {
 width:195px;
 border:1px solid #000;background:#aaa;
}

.box_mitte_unten:after {
 content:"";
 display:block;
 clear:both;
}

h2 {
 padding:10px;margin:0;
}


    
</style>    
</head>

<body>

<div id="wrapper">
<div id="wrapper_innen">

 <div id="spalte1"> 
  <div class="box"> 
   <h2>Spalte1 Box1</h2> 
  </div>
  <div class="box"> 
   <h2>Spalte1 Box2</h2> 
  </div>
 </div>

 <div id="spalte2">
  <div class="box"> 
   <h2>Spalte2 Box1</h2> 
  </div>
  <div class="box"> 
   <h2>Spalte2 Box2</h2> 
  </div>
 </div>

<div id="spalte3">
   <div class="box_mitte_oben"> 
    <ul>  
     <li><a href="http://suitsncats.de/wordpress/phtgrph/">phtgrph</a></li>
     <li><a href="http://suitsncats.de/wordpress/wbdsgn/">wbdsgn</a></li>
     <li><a href="http://suitsncats.de/wordpress/ppr/">ppr</a></li>
     <li><a href="http://suitsncats.de/wordpress/prsn/">prsn</a></li>
    </ul>
  </div>
  <div class="box_mitte_unten">
   <h2>Box mitte unten</h2>
   
  </div>
</div>



</div>
</div>

</body>
</html>

http://www.gipspferd.de/forumhilfe/div-container-anordnung/

Div-Container Anordnung

murphy_f

Neues Mitglied

number15

Neues Mitglied

murphy_f

Neues Mitglied

djheke

Aktives Mitglied

Neueste Beiträge