DIV Anordnungsproblem

Status
Nicht offen für weitere Antworten.
0

00eraser00

Grünschnabel
Hi,

ich bekomme, das mit den Div Containern einfach nicht hin, habe im Netz recherchiert probiert und es paßt einfach nicht. Ich hoffe ihr könnt mir helfen.
Ich möchte folgendes darstellen:

div1------------div2
--div3--div4--div5
-------div6----------

div1 soll ein bild oben links sein
div2 soll ein bild oben rechts sein
div3 soll mit etwas abstand von links, das menü enthalten
div4 enthält das hauptfenster, welches am größten sein soll, also mit kleinem abstand zu div3 und div5
div5 ist ein flash welches sich knapp rechts von div4 und knapp unter div2 befinden soll
div6 steht unter allem in der mitte und entählt nur eine zeile mit impressum

ich möchte, dass sich bei unterschiedlichen auflösungen die divs an die auflösung anpassen, das verhältnis untereinander aber gleich bleibt, also dass das menü nicht auf einmal über dem hauptfenster liegt z.b.

ich hoffe ihr könnte mir helfen
danke schonmal
 
Hi,

wie sieht denn dein bisheriger Versuch aus? Oder erwartest du, dass wir dir hier das gebrauchsfertige Endprodukt liefern?

Das zentrale Stichwort für die nebeneinanderliegenden DIVs ist die float-Eigenschaft.

Auf http://layouts.ironmyers.com/ gibt es zwar nicht das Layout en Detail, wie du dir es wünschst, aber zumindest findest du dort grundlegende Beispiele, aus denen du deine Erkenntnisse ziehen kannst, um dein Seitenkonzept zu realisieren.
 
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>LogVenture</title>
<style type="text/css">
body{
background-image:url(bilder/back2.jpg);
}
#header{
float:left;
width:100%;
}
#bildli{
float:left;
}
#bildre{
float:right;
}
#container{
margin:0 auto;
margin-top:10px;
border-width:2px;
border:solid;
border-color:#000000;
float:left;
width:100%;
}

#footer{
margin:0 auto;
margin-top:10px;
border-width:2px;
border:solid;
border-color:#000000;
float:left;
width:100%;
}

#menue{
float:left;
margin-left:10px;
display:inline;
}

#hauptfenster{
float:left;
margin-left:20px;
}
#flash{
float:right;
}

</style>

</head>

<body>

<div id="header">
<div id="bildli"><img src="bilder/bildlinks1.jpg" /></div>
<div id="bildre"><img src="bilder/logventure_Logo3.jpg" /></div>
</div>

<div id="container">
<div id="menue">menue
<!-- DO NOT MOVE! The following AllWebMenus linking code section must always be placed right AFTER the BODY tag-->
<!-- ******** BEGIN ALLWEBMENUS CODE FOR menu ******** -->
<script type="text/javascript">var MenuLinkedBy="AllWebMenus [4]",awmMenuName="menu",awmBN="630";awmAltUrl="";</script><script charset="UTF-8" src="menu.js" type="text/javascript"></script><script type="text/javascript">awmBuildMenu();</script>
<!-- ******** END ALLWEBMENUS CODE FOR menu ******** -->

</div>
<div id="hauptfenster">dhauptfenster</div>
<div id="flash">flash</div>
</div>

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

</body>
</html>


Das ist mein aktueller Versuch:
Habe folgende Umsetzung gewählt.
Einen Header mit Bildli und Bildre drin.
Einen Container mit dem Menü, dem Hauptfenster und dem Flash drin.
Und einen Footer für ein bischen Text.
Das Problem ist er stellt alles, bis auf das Menü richtig dar. Das macht er, obwohl er den Rahmen des DIV's richtig anzeigt trotzdem oben links hin.
 
Wenn das Menü oben links im Browserfenster angezeigt wird, lässt dies die Vermutung zu, dass es absolut positioniert ist, und sich die Positionsangaben derzeit auf das body-Element beziehen.

Abhilfe könnte da eine relative Positionierung des DIVs #menue schaffen, damit sich die Positionsangaben an diesem Element orientieren:

Code: 
#menue{
position:relative;
float:left;
margin-left:10px;
display:inline;
}
Das Problem, dass du aber haben wirst, ist der Umstand, dass der Inhalt des Menüs das DIV #menue und #container in der Vertikalen nicht vergrößert, da es durch seine absolute Positionierung aus dem normalen Textfluss genommen wird.
 
Auf dem angehängten Bild ist eine Grafik. So soll das dann aussehen.
Ich hoffe ihr habt noch Tipp.s
 

Anhänge

  • screen.jpg
    screen.jpg
    12,9 KB · Aufrufe: 15
So, ich hab mich mal dran gesetzt, deinen Quellcode dem Screenshot etwas anzupassen ;)

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>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>LogVenture</title>
<style type="text/css">
html,body {
margin:0;
padding:10px;
}

body{
background-image:url(bilder/back2.jpg);
}

#header{
padding:20px;
border:2px solid #000;
}

#bildli{
float:left;
border:1px solid #c5c5c5;
}

#bildre{
float:right;
border:1px solid #c5c5c5;
}

#container{
margin-top:20px;
border:2px solid #000;
padding: 20px;
}

#menue{
float:left;
margin-left:10px !important;
margin-left:5px;
width:150px;
border:1px solid #c5c5c5;
}

#hauptfenster{
margin:0 120px 0 180px;
border:1px solid #c5c5c5;
}

#flash{
float:right;
width:100px;
border:1px solid #c5c5c5;
}

#footer{
margin-top:20px;
border:2px solid #000;
padding:20px;
text-align:center;
}

.clearfix:after {
content: ".";
display: block;
height: 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="header" class="clearfix">
     <div id="bildli"><img src="bilder/bildlinks1.jpg" alt="" /></div>
     <div id="bildre"><img src="bilder/logventure_Logo3.jpg" alt="" /></div>
</div>

<div id="container" class="clearfix">
     <div id="menue">menue</div>
     <div id="flash">flash</div>
     <div id="hauptfenster">dhauptfenster</div>
</div>

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

</body>
</html>
Das angesprochene Problem mit dem absolut positionierten Menü ist hierbei nicht berücksichtigt!
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück