✔ 3 Divs, einer links oben, einer links unten und rechts einer daneben !

Status
Nicht offen für weitere Antworten.
ZipZek

ZipZek

Mitglied
Hi Community,

Ich habe ein kleines (großes) Problem mit den Divs auf meiner Webseite.
Ich würde es gerne so haben wie auf dem angehängten Bild, habe aber keine Ahnung wie ich das realisieren soll. Mit 2 DIVs ist es ja noch relativ einfach mit float:left aber einer oben und der andere ganz unten Weiß echt nicht wie ich das anstellen soll.

Dazu sei gesagt dass ich mich mit >validem< html noch nicht soo lange beschäftige.

Vielen Dank im vorraus,
Phil
 

Anhänge

  • 3divs.jpg
    3divs.jpg
    17,2 KB · Aufrufe: 34
Hi,

du könntest ein äusseres, relativ positioniertes Div-Element erstellen. Dort ordnest du wie bisher zwei Container an - einen links oben mit float: left und daneben den Content. Das dritte unten angeordnete Element positionierst du absolut an der unteren linken Ecke (bottom: 0; left: 0).

Beispiel:
Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>www.tutorials.de</title>
<meta name="author" content="Quaese">
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">

<style type="text/css">
  <!--
* { padding: 0;
    margin: 0;}

#holderDiv{ position: relative;}
* html #holderDiv{ height: 1%;}
#leftTop{ float: left;
          width: 200px;
          height: 200px;
          background: #ff0;}
#rightBottom{ position: absolute;
              left: 0;
              bottom: 0;
              width: 200px;
              height: 200px;
              background: #0f0;}
#contentDiv{ background: #f00;
             height: 600px;
             margin-left: 210px !important;
             margin-left: 207px;}

.clearDiv{ font-size: 1px;
           line-height: 0em;
           height: 0;
           clear: both;}
 //-->
</style>
<script type="text/javascript">
  <!--
 //-->
</script>
</head>
<body>
<div id="holderDiv">
  <div id="leftTop">Links oben</div>
  <div id="rightBottom">Rechts unten</div>
  <div id="contentDiv">Content</div>
  <div class="clearDiv">&nbsp;</div>
</div>
</body>
</html>
Vielleicht kannst du damit etwas anfangen.

Ciao
Quaese
 
Hi,

dies wäre ein Lösungsansatz:

Code: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<meta name="author" content="Maik">
<title>tutorials.de | demo_ZipZek</title>

<style type="text/css">
<!--
* {
margin:0;
padding:0;
}

#wrapper {
position:relative;
}

#div1 {
float:left;
width:200px;
height:100px;
background:#ffff00;
margin-right:0 !important;
margin-right:-3px;
}

#div2 {
position:absolute;
bottom:0;
left:0;
height:100px;
width:200px;
background:#00ff00;
}

#div3 {
min-height:250px;
height:auto !important;
height:250px;
margin-left:200px !important;
margin-left:197px;
background:#ff0000;
}

.clearfix:after {
content:".";
display:block;
height:0;
font-size:0;
clear:both;
visibility:hidden;
}

.clearfix {display:inline-block;}

/* Hides from IE-mac \*/
* html .clearfix {height:1%;}
.clearfix {display:block;}
/* End hide from IE-mac */
-->
</style>

</head>
<body>

<div id="wrapper" class="clearfix">
     <div id="div1">div1</div>
     <div id="div2">div2</div>
     <div id="div3">div3</div>
</div>

</body>
</html>
//edit: @Quaese: Zwei Dumme, ein Gedanke ;-)
 
Sehr cool!

Vielen Dank für die Ideen aber irgendwie krieg ich das nicht richtig eingebaut, weil irgendwie Einstellungen Global vorgenommen werden und so andere DIVs verfälschen, ich weiß aber nicht genau wo....
Hier mal das Layout: www.digitalizm.de/pofo

Und im Anhang seht ihr wie es aussehen soll, unten links dieses kleine Menü soll noch rein.

Könnt ja bei gelegenheit vllt mal drüberschauen !

P.S.: bin für jede Optimierung im Quelltext dankbar, da ich noch nicht so sicher auf dem Gebiet bin ;)

Gruß, Phil
 

Anhänge

  • original.jpg
    original.jpg
    72,5 KB · Aufrufe: 50
Zuletzt bearbeitet:
Nimm mal folgende Ergänzungen und Änderungen im Stylesheet vor:

Code: 
#main{
        background-image:url(images/bg.gif);
        margin:0px auto 0px auto;
        width:748px;
        position:relative;
}

#content{
        /*float:left;*/ /* auskommentiert = deaktiviert */
        text-align:justify;
        line-height: 19px;
        /*width:493px;*/ /* auskommentiert = deaktiviert */
        vertical-align:top;
        margin-right:10px;
        margin-left:210px;
}

#leftBottom {
        position:absolute;
        left:0;
        bottom:30px;
        width:190px;
}
und notiere im HTML-Code nach dem DIV #subnavi das DIV #leftBottom:

Code: 
<div id="outer">
        <div id="subnavi">
                ...
        </div>
        <div id="leftBottom">
             <ul>
                 <li>Druckansicht</li>
                 <li>Sitemap</li>
                 <li>Impressum</li>
             </ul>
        </div>
        <div id="content">
                ...
        </div>
</div>
 
das gibts ja nicht ;)
ihr seid echt zu geil

Vielen, vielen, vielen, vielen, vielen, vielen, vielen, vielen Dank

Besten Gruß,
Phil
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück