DIVs sollen sich überlagern, mit 'float'. Was muss ich tun?

html.de-Forum HTML, XHTML & CSS
1

Bei meiner Seite möchte ich den Informations-Fluss von links oben nach rechts unten beibehalten. Befehle wie „position: absolute“ möchte ich daher nicht nutzen, sondern der HTML-Code soll ‚floaten‘.

HTML Version (mein aktueller Nachbau der Seite, ohne Joomla)
http://dl.dropbox.com/u/645462/000_tmp/000_html_version_01.png

Problem: Beim Zusammenschieben des Browsers überlagern sich die DIVs nicht.
http://dl.dropbox.com/u/645462/000_tmp/000_html_version_02.png

Im Original sieht das so aus:
http://dl.dropbox.com/u/645462/000_tmp/000_joomla_version_01.png

So hätte ich es gern wieder:
http://dl.dropbox.com/u/645462/000_tmp/000_joomla_version_02.png

CSS (Auszüge)

[CODE]#all
{
background-color: #c20a0a;
font-size: 0.95em;
margin: 0 auto;
height: 200%;
max-width: 993px;
padding: 10px 6px 6px 6px;
text-align: left;
-moz-border-radius-topleft: 10px;
-moz-border-radius-topright: 10px;

}

#navi_element_left {
width: 194px;
min-height: 1px;
padding: 3px 0 3px 6px;
border-bottom: solid 2px #cccccc;
border-left: solid 6px #cccccc;
color: #000000;
background: #e6e6e6;
margin: 0 0 10px 0;
text-decoration: none;
}

#navi_element_left:hover
{
color: #ffffff;
background: #333333;
border-bottom: solid 2px #333333;
border-left: solid 6px #333333;
}

#welcome_area {
background: #ffffff;
width: 91px;
font-family: helvetica, arial;
margin: 5px 20px 0 -15px;
font-size: 0.7em;
position: relative;
min-height:520px;
float:left;
}

#main_content {
background: #ffffff;
width: 48%;
font-family: helvetica, arial;
margin: 0 25px 0 0;
max-width:555px;
min-width:20%;
font-size: 1em;
padding: 0px 20px 20px 20px;
position: relative;
min-height:520px;
float:left;
}

#banner_right {
float: left;
}
[/CODE]

HTML (Auszug aus der index.php)

[CODE]

<? include ("./navigation.html"); ?> <? include ("./banner_welcome.html"); ?> <? include ("./01_start_page.html"); ?> <? include ("./banner.html"); ?>
[/CODE]

Kann mir jemand sagen, was ich im Code machen muss, damit sich die DIVs bis zu einem gewissen Grad überlagern?

Wäre klasse wenn jemand helfen kann.

Grüße
Nils

2

Wieso vergibst du nicht feste Breiten und verhinderst somit das Überlagern UND das nach unten rutschen der Divs?

3

Hallo Timmer,

ich möchte keine festen Breiten vergeben, da mir Webseiten besser gefallen, bei denen man das Fenster breiter und schmaler machen kann und sich der Inhalt bis zu einem gewissen Grad anpasst.

Wäre sehr nett, wenn jemand dazu einen Tipp hat.

Grüße
Nils

4

Hallo.

Das wird wohl an deinen relativen positionierungen liegen.

Lass die mal weg und versuch mal ob es dann klappt.

Gruss
Elroy

5

Habe die relativen Positionierungen entfernt. Das hat nichts verändert; die Seite verhält sich wie vorher. Was könnte ich noch probieren?

6

Hallo.

Ein Link zur Seite wäre gut.
Mit deinen Codeauszügen kann man leider keine Testcase nachbauen.

Gruss
Elroy

7

Hallo Elroy (+ alle anderen :)),

habe die Anfänge der neuen „.com“-Seite jetzt mal hochgeladen: Habe diese Vorabseite entfernt; Code dieses Entwurfes war unvollständig.

Aktuelle Probleme:

  • Kriege es nicht hin, den Main Content vernünftig variabel zu machen (width). Habe daher vorerst doch feste Breiten vergeben. Möglicherweise hat jemand noch eine andere Idee dazu.

  • Der jeweils angewählte Navigationspunkt soll rot bleiben. Wäre klasse, wenn dazu jemand eine Lösung oder richtungsweisenden Tipp weiß. (@ Elroy: Deine Anmerkung bezüglich PHP in dem anderen Thread habe ich bereits gesehen.)

  • Der „#all“ DIV Container umfasst nach unten hin (height) nicht die anderen, obwohl das DIV um die anderen herum liegt. Horizontal funktioniert es; vertikal nicht. Kann mir jemand erklären was zu tun ist, das wäre sehr gut.

Grüße
Nils

8

Hallo.

Ich poste dir nur mal kurz den Anfang deiner Webseite:
[HTML]

[/HTML]Fällt dir etwas auf? , und dürfen auf jeder Seite nur einmal vorkomme. Das geht übrigens so weiter, die ganze Seite lang.

Bitte validiere erst mal deinen Code und beseitige die Fehler. So wie er jetzt ist macht die Fehlersuche wenig Sinn.
Du solltest auch noch einen Doctype setzte, da das fehlen des Doctype auch zu Fehldarstellungen führen kann.

Gruss
Elroy