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

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

N

nilsk

Neues Mitglied
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)
000_html_version_01.png


Problem: Beim Zusammenschieben des Browsers überlagern sich die DIVs nicht.
000_html_version_02.png


Im Original sieht das so aus:
000_joomla_version_01.png


So hätte ich es gern wieder:
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;
}

HTML (Auszug aus der index.php)
Code: 
<div id="all">

<!-- Die folgenden HTML-Dateien steuern im Code jeweils die entsprechenden, 
oben definierten DIVs an. -->
<? include ("./navigation.html"); ?>

<? include ("./banner_welcome.html"); ?>

<? include ("./01_start_page.html"); ?>

<? include ("./banner.html"); ?>

</div>


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
 
Zuletzt bearbeitet:
Wieso vergibst du nicht feste Breiten und verhinderst somit das Überlagern UND das nach unten rutschen der Divs?
 
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
 
Hallo.

Das wird wohl an deinen relativen positionierungen liegen.

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

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

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

Gruss
Elroy
 
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
 
Zuletzt bearbeitet:
Hallo.

Ich poste dir nur mal kurz den Anfang deiner Webseite:
HTML: 
<html>
<head>

</head>
<body>

<head>
      <base href="http://www.xxx.de/" />
  <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  <meta name="robots" content="noindex, nofollow" />
  <link rel="stylesheet" href="http://localhost:8888/000_xxx_com/css/main.css" type="text/css" />
</head>
<body>
<div id="all">

<html>
<head>
</head>
<body>

<head>
Fällt dir etwas auf?
<html>, <head> und <body> 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
 
Zuletzt bearbeitet:
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben