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

Mitwachsene Divs

tarik02

tarik02

Mitglied
Hi Leute!


Ich hab mal wieder ein Problem:
Ich hätt gerne das der mittige Div
mit dem Inhalt mitwächst und die divs links und rechts mit Inhalt mit wächst.

Gibts da ne Lösung?

hier ein Link zur Seite
Mfg Tarik02
 
Werbung:
Werbung:
jein..

ich meine das problem hier:

Die Sidebar muss immer so hoch wie "main" sein und in der breite mitwachsen wenn ich text zoome.

Und wenn "cont2" dann mal genausobreit wie "main" ist, muss die seitbar unterhalb von "cont2" anfangen.

Soweit geht es auch, aber sie wächst nicht in der breite mit ;)

Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>test</title>
<!-- 
META-ANGABEN
 -->
<style type="text/css">
* { margin: 0; padding:0; }
html,body { height:100%; }

body { font-family:sans-serif; font-size:100.01%; line-height:1.4em; }

#over { width: 40em; margin:0em auto; }
#main{ width:100%;  border:1px solid; }

#sidebar_over { height:100%; background-image: url(bgnavi.png); background-position: 1.8em 0; background-repeat: repeat-y; }
#sidebar { width:5em; float:left; margin-left: 2em; }
#sidebar p { font-size:0.85em; color:white; }

#cont2 { height:5em; width:27em; background-color:#666; position:relative; float:right; }
#cont { width: 27em; height:10em; float:right; background-color:#ccc; }

</style>

</head>
<body>
<div id="over">

    <div id="main">
    <div id="sidebar_over"> 
     
        <div id="cont2"></div>
        
        <div id="sidebar">
            <p> test</p>
        </div>        

        <div id="cont">
        
        </div>
  
           <br style="clear:both;" />
     </div>
    </div>
  
</div>
</body>
</html>
 

Anhänge

  • bgnavi.png
    bgnavi.png
    248 Bytes · Aufrufe: 13
Zuletzt bearbeitet:
Werbung:
loon3y,
gebe #main die background-color der linken Spalte und verwende das background-image für die rechte Spalte.
Von links aus kannst du sie mit background-position in em positionieren.

Die Grafik mußt du dazu viel breiter machen.
 
neuroleptika schrieb:
loon3y,
gebe #main die background-color der linken Spalte und verwende das background-image für die rechte Spalte.
Von links aus kannst du sie mit background-position in em positionieren.

Die Grafik mußt du dazu viel breiter machen.
Zum Vergrößern anklicken....

wie meinst du das? wo "cont" und "cont2" drüber liegen, das drunter muss aber weiß sein...hm...
 
Du denkst vielleicht zu kompliziert.
Du kannst doch auch eine weiße Grafik verwenden.
html:
Code: 
<div id="alles">
<div id="spalte1">
darkred
</div>

<div id="spalte2">
<div id="inhalt-1">
darkgray
</div>
gray-2000px.png
</div>
<div class="clearer-left"><!-- --></div>
</div>
darkred für die linke Spalte und gray-2000px.png für die rechte Spalte.
css:
Code: 
html, body {
    margin: 0;
    padding: 0;
    font-size: 100%;
  }

#alles {
    background : darkred url(images/gray-2000px.png) repeat-y 15em 0;
    margin : auto;
    width : 40em;
  }

#spalte1 {
    float: left;
    width: 15em;
    color: white;
  }

#spalte2 {
    float: left;
    width: 25em;
    color: black;
  }

#inhalt-1 {
    background: darkgray;
    color: white;
  }

.clearer-left {
    clear: left;
  }

Anpassung IE:
Code: 
<!--[if lt IE 8]>
<style>
/*Zentrierung IE5, IE5.5:*/
* html body {
text-align: center;
}
/*text-align: center aufheben:*/
* html #alles {
text-align: left;
}
</style>
<![endif]-->
 
Zuletzt bearbeitet:
Werbung:
hm..sicherlich denke ich zu kompliziert, allerdings ist das problem bei dem ganzen, dass die "spalte1" nicht ganz links klebt, sonderen 2em von links weg und die 2em links müssen grau sein....deswegen geht das wohl nicht mit dem roten hintergrund....hm....außer ich mach noch eine spalte....
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben