3 Divs, einer links oben, einer links unten und rechts einer daneben ! @ tutorials.de: Tutorials, Forum & Hilfe

ZipZek · 30.12.07 11:11

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

**Quaese** · 30.12.07 11:33

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

Maik · 30.12.07 11:33

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

**Quaese** · 30.12.07 12:03

In der Schule wäre uns vorgeworfen worden, voneinander abgeschrieben zu haben ;-)

Quaese

ZipZek · 30.12.07 13:04

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

Maik · 30.12.07 13:19

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;
        [b]position:relative;[/b]
}
 
#content{
        [b]/*float:left;*/[/b] /* auskommentiert = deaktiviert */
        text-align:justify;
        line-height: 19px;
        [b]/*width:493px;*/[/b] /* auskommentiert = deaktiviert */
        vertical-align:top;
        margin-right:10px;
        [b]margin-left:210px;[/b]
}
 
[b]#leftBottom {
        position:absolute;
        left:0;
        bottom:30px;
        width:190px;
}[/b]

und notiere im HTML-Code nach dem DIV #subnavi das DIV #leftBottom:

Code :

<div id="outer">
        <div id="subnavi">
                ...
        </div>
        [B]<div id="leftBottom">
             <ul>
                 <li>Druckansicht</li>
                 <li>Sitemap</li>
                 <li>Impressum</li>
             </ul>
        </div>[/B]
        <div id="content">
                ...
        </div>
</div>

ZipZek · 30.12.07 13:26

das gibts ja nicht

ihr seid echt zu geil

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

Besten Gruß,
Phil

tut orials.de	tut verbinden	tut dir helfen	tut kooperieren
©2000-2012 tutorials.de Alle Rechte vorbehalten	tut informieren » Impressum » Nutzungsregeln » Netiquette » Team » Redaktion	» Tutorials » Videotutorials » Showroom » Events & Contests » Chat » RSS-Feed » Blogs	» der-webdesigner.net » DesignerInAction » Design Nation » Directorforum » Flashhilfe » PHP-Resource » PHPwelt » PSD-Tutorials

Themen-Optionen

Anzeige

Ähnliche Themen

rechts ,zentriert und links bündig auf einer Zeile

Text in einer Zeile, ein Teil links, ein Teil rechts?!

Menü Links,Rechts,Oben und Unten

scroll oben/unten/rechts/links

Hintergrundbild in einer Zelle links rechts unten ausrichten ?

E-Mail:

Abonnieren Abbestellen