Altes Problem: divs aneinander ausrichten

Veritas · #1 (**permalink**) 06.12.2005, 11:50

Hallo,

bin zwar neu hier aber hab doch schon so ziemlich alles durchstöbert, was zu meiner Frage passen könnte. Dabei bin ich auf vieles gestoßen, u.a. auf die faux colums, wobei das in meinem Fall wohl nichts hilft, da mein Design ein bisschen trickreich ist.

Und zwar könnt ihr unten das Prinzip sehen... mein Problem dabei ist: Ich möchte den lime-farbenen Kasten links unten ("Kundenbereich") bündig haben wie den weißen Kasten in der Mitte ("Content") und zwar abhängig vom Inhalt. Sprich: Wenn sich der weiße Kasten vergrößert, soll der lime-farbende Kasten auch größer werden und der untere Rand auf gleicher Höhe liegen wie der untere Rand des weißen Kastens.

Mit den faux columns komme ich da nicht weiter, weil mein normaler Hintergrund einen Farbverlauf enthält und die beiden Kästen ja nicht durchgängig sind (oben gibt es ja noch den Header mit Menü und den grünen Kontaktkasten).

Im Prinzip eigentlich ziemlich einfach, aber mit CSS scheint mir das unmöglich zu sein. Mit Tabellen ginge das natürlich mega einfach, aber davon wollen wir ja alle wegkommen.

Hier noch Teile meines Codes:

CSS:

Code:

body {
           height: 100%;
           margin: 0;
           padding: 0;
           background-image: url(images/background.jpg);
}

p,div,ul,ol,h1,h2,h3,h4,h5,th,td { 
           font-family: Arial,sans-serif; 
           font-size: 12px;
           font-weight: bold;
}

#container {
           width: 858px;
           margin: 10px auto;
}

#flash {
           float: left;
           height: 230px;
           width: 640px;
           background-color: yellow;
}

#menu_block {
           height: 230px;
           margin: 0px 0px 0px 640px;
           background-color: red;;
}

* html #flash {
        /* \*/
        margin-right: -3px;
        /* */
}
* html #menu_block {
        /* \*/
        margin-left: 637px;
        /* */ 
}

#links {
           float: left;
           width: 210px;
           margin-top: 5px;
}

#content_block {
           margin: 5px 0px 0px 215px;
           background-color: white;
}

* html #links {
        /* \*/
        margin-right: -3px;
        /* */
}
* html #content_block {
        /* \*/
        margin-left: 212px;
        /* */ 
}

#adresse_block {
           width: 210px;
           height: 195px;
           background-color: green;
}

#kunden_oben {
           width: 210px;
           height: 35px;
           background-color: lime;
           margin-top: 5px;
}

#kunden_block {
           width: 210px;
           background-color: lime;
}

#footer {
           height: 15px;
           widht: 858px;
           margin-top: 5px;
           background-color: #FFFFFF;
}

HTML:

Code:

<body>

         

<div id="container">  
  <div id="flash"></div>

  <div id="menu_block"><div id="menu">###MENU###</div></div>

  <div id="links"><div id="adresse_block"><div id="links_headline">IHR KONTAKT</div><div id="adresse"></div></div><div id="kunden_oben"><div id="links_headline">KUNDENBEREICH</div></div><div id="kunden_block"><div id="login">###LOGIN###</div></div></div>

  <div id="content_block"><div id="content">###CONTENT###
...###CONTENT###</div></div>

  <div id="footer"></div>

</div>
        
         

</body>

Ich hoffe ich geh keinem auf die Nerven mit so einer Frage, die ja eigentlich schon 1000 mal gestellt wurde, aber ich komm einfach nicht auf eine Lösung, selbst nach stundenlanger Suche in diesem Forum. Bin halt absoluter CSS Neuling (wie so viele...).

Danke schonmal im Voraus!

Sentinel · #2 (**permalink**) 06.12.2005, 11:56

so leider nun noch wenig zeit. der limesfarbene hat keine ansatzmöglichkeit für die 100% nach was soll er die berechnen. eine abhängigkeit zu weiß kann er erst herstellen wenn er ein einem container mit dem ist, von dem er die abhängigkeit bekommen soll.

Code:

<div class="haupt">
<div class="linkstop"></div>
<div class="linksbottom"></div>
<div class="maincontent"></div>
</div>

Veritas · #3 (**permalink**) 06.12.2005, 13:04

Danke für die schnelle Antwort!

Du meinst, ich soll um die mittleren Elemente einen Hauptblock packen und dann bei dem limefarbenen Block height: 100% einstellen? Den Gedanken hatte ich auch schon, aber es scheint nicht so ganz zu funktionieren. Ich glaube so einfach lässt sich das Problem nicht lösen, v.a. mit dem ganzen floaten.

Aber ich probier mal in der Richtung rum... mal schauen, ob's mal klappt.

Edit: Also ich hab's fast so, wie ich es mir vorgestellt hab, das wirft aber ne andere Frage auf: Ich will ein Hintergrundbild in y-Richtung wiederholen, aber erst ab einem bestimmten Punkt. In x-Richtung kann ich den Startpunkt verschieben, aber in y-Richtung will er einfach nicht.
Versteht ihr, was ich mein?

Danke schonmal!

Edit 2: Hab gerade gesehen, dass man bei einem repeat-y nur die x-Position ändern kann... schade, das wär's echt gewesen.

Wenn noch jemand Ideen zum zuerst genannten Problem weiß, nur her damit!

Sentinel · #4 (**permalink**) 06.12.2005, 14:24

bring ein div element dazu das es 100% vom browser annimmt. body benötigt dazu eine height definition mit wertangabe.

zu deinem bg, ein elternelemnt darüber mit einem bg. darin ein div container mit deinem inhalt und dem bg. ist im grunde ein fake aber sollte gehen.

1. div with 400
2 div width 300 oder je nach startpunkt

den spaß ausrichten sollte zumindest mit augenzwinkern bestehen

Sentinel · #5 (**permalink**) 06.12.2005, 14:29

als schnellteststreifen:

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>Demo High Anpassung</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
<!--
/*teststreifen 1*/
body {margin:0;padding:0;height:100%;background:black;}
#tara {height:90%;background:red;margin:auto;}
-->
</style>
</head>

<body>
<div id="tara">



text
</p>
<div>

</body>
</html>

Veritas · #6 (**permalink**) 06.12.2005, 14:34

Ich versteh im Moment nur Bahnhof... kann aber auch daran liegen, dass ich seit 8 Uhr vorm PC sitz und es einfach frustrierend ist, dass nix klappt.

Muss mir das erstmal in Ruhe anschauen, danke schonmal!

Sentinel · #7 (**permalink**) 06.12.2005, 14:58

naja schreib auch so hingeschmissene brocken

zu deinem probs 1:

da sollt du den teststreifen mal anschauen und damit spielen.

zu deinem bg probs 2:

wenn du einen startpunkt benötigst die einfachste variante, wenn der startpunkt nicht zu weit weg ist, dem bild einfach unten einen transparentstreifen antackern. der transparentbereich ist dann dein startpunkt.
variante 2 wäre:

Code:

<div style="padding-bottom:10px;">
<div>dein inhalt mit der bg grafik</div>
<div>

Veritas · #8 (**permalink**) 06.12.2005, 15:50

So hab's jetzt mit einem Trick gelöst. Das ist zwar nicht ganz perfekt, aber irgendwie hab ich das Gefühl, dass man bei CSS öfters mal rumtricksen muss. Trotzdem danke Sentinel für die vielen Antworten!

Wenn wieder was ist, meld ich mich...

Veritas · #9 (**permalink**) 15.12.2005, 12:01

Bitte nicht lachen über mich, ich weiß diese Lösung ist wirklich nicht so elegant, aber nach so langem Hin- und Herüberlegen hatte ich einfach keine Lust mehr und hab die einfache Variante genommen.

Also die Elemente "Ihr Kontakt", "Kundenbereich" und "Content" habe ich in ein <div> gepackt, das praktisch den ganzen Mittelteil umfasst (ich nenne es mal "Main-Element"). Wenn sich jetzt der Inhalt des Content-Blocks ändert und nach unten wäschst, wird auch dieses Main-Element größer. Logisch...

Dann habe ich ein Hintergrundbild gemacht, das ist so breit wie das Element Kundenbereich und hat dessen Farbe. Diesen Hintergrund habe ich dem Main-Element gegeben. Und jetzt kommt der Trick: Dieses Hintergrundbild hat eine riesige Höhe (5000 Pixel) und wird einfach per background-position hinter den Kundenbereich gelegt. Dann noch ein repeat-y eingefügt, damit es auch wirklich nur nach unten geht. Jetzt wird dieses Hintergrundbild immer abgeschnitten und wächst natürlich mit, sobald sich der Content-Block und damit das Main-Element vergrößert.

Das Pfuschige dabei ist, dass man die Seite jetzt theoretisch nur 5000 px hoch machen kann (also man kann nicht unendlich nach unten scrollen) und das Hintergrundbild verbraucht mehr Speicherplatz, als wenn es dynamisch mitwächst. Aber da es nur eine Farbe besitzt, hält sich das sehr in Grenzen.

Ich hoffe ihr habt das so einigermaßen verstanden. Kann auch sein, ich hab mir das zu kompliziert gemacht, aber es funktionert (sogar bei FF und IE

)...

Gruß

Veritas · #10 (**permalink**) 19.12.2005, 13:07

Ja das dachte ich auch. Aber wenn ich repeat-y mache, dann kann ich das Hintergrundbild nicht mehr verschieben. Also ich kann nur die x-Koordinate verschieben, die y-Koordinate hat keinen Einfluss und das Bild wird über das ganze Element in y-Richtung wiederholt. D.h. auch die Box "Ihr Kontakt" wird damit hinterlegt, was ich nicht möchte.

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Ansicht
Linear-Darstellung Zur Hybrid-Darstellung wechseln Zur Baum-Darstellung wechseln

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
Divs per float positionieren - Problem mit IE	fluppi	CSS	9	20.03.2008 13:16
verschachtelte DIVs und Problem mit Height:100%	sonicm	CSS	5	11.05.2005 13:17
Problem beim Positionieren mehrerer div's...	tomate	CSS	3	13.09.2004 15:34
Problem mit verschachtelten Div's	Sombreo	CSS	9	22.07.2004 21:49
Problem: 3 Div's horizontal positionieren	Krieju	CSS	2	07.05.2004 17:00