divs anordnen

00eraser00

Hi,

ich kriege das mit den divs einfach nicht richtig hin
ich möchte folgendes machen

div1 div2
div3 div4
div5

das heißt div 1 ist ein bild was in der mitte der seite sein soll, ein div mit nem video drin rechts daneben, also rechts angeordnet
div3 enthält das menü und div4 den jeweiligen gewählten inhalt, div4 soll sich links an div1 ausrichten
div5 soll einfach wieder zentriert unter allem anderen sein
ich kriege das einfach nicht hin,
hoffe es kann mir jemand helfen

Mr.619

So kannst du divs nebeneinander platzieren:

Bei div1 float:right und bei div2 float:left

und das Ganze eben untereinander wiederholen.

00eraser00

meinte das eher so

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

sejuma

auf die Schnelle, ohne Test und ohne Garantie:

div 1 float: left;
div 2: margin-left: mit Breite von div 1 + evtl. margin left von div 1 + Abstand zwischen div 1 und 2

div 3: clear: left; flaot: left
div 4 wie div 2 (mit anderen Werten)

div 5: clear: left; margin: 0 auto;

nick2

so wie sejuma hätte ich das auch gmacht ausser das die werte vonn div4 mit div 2 gleich sein müssen, nach meiner meinung !

00eraser00

habe das probiert, aber durch das erste (div1 float:left), steht doch alles oben links, div1 soll aber zentriert sein

es soll so aussehen

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

div1 ist ein bild das zentriert sein soll
div zwei enthält ein flash welches rechts von unten nach oben geht
div 3 enthält die navi
div 4 das fenster mit den texten, welches genauso breit sein soll wie das bild in div1
und div 5 enthält nur eine zeile mit text die auch zentriert sein soll

sejuma

Jetzt wird so langsam klar, was du willst.
Probier mal dieses Grundgerüst. Details musst du noch anpassen.

HTML

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
  "http://www.w3.org/TR/html4/loose.dtd">


<html>


<head>


<title> 
Test
</title>


<style type="text/css">

#box2
{float:right;
width: 100px;
height: 500px;
border: 1px solid black;
}


#box1
{width: 700px;
height: 80px;
margin: 0 auto;
border: 1px solid black;
}


#box3
{float: left;
width: 150px;
height:400px;
border: 1px solid black;
}


#box4
{border: 1px solid black;
margin-left: 160px;
margin-right: 110px;}


#box5
{clear: both;
border: 1px solid black;
}
</style>


</head>


<body>
<div id="box2">box 2</div>
<div id="box1">box 1</div>
<div id="box3">box 3</div>
<div id="box4">box 4</div>
<div id="box5">box 5</div>


</body>
</html>

Alles anzeigen

00eraser00

habe es jetzt so umgesetzt, aber das menue ist immer noch oben links und nicht weiter unten, das menü zentriert sein und da aufhören wo die ecke das logos beginnt:

#flash {
float:right;
width:auto;
height:auto;
}

#logo {
width:774px;
height:206px;
margin:auto
}

#menue{
float:left;
margin-left:100px;
margin-top:auto;
width:100px;
height:200px;
}

#hauptfenster {
margin-left:200px;
margin-right:200px;
height:100%;
}

#etc {
clear:both;
}

sejuma

Kannst du mal bitte einen Link oder den gesamten Quelltext einstellen, damit wir mal einen einheitlichen Stand haben.

00eraser00

<!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/back.gif);
background-repeat:no-repeat;
}
body,td,th {
font-family: Times New Roman, Times, serif;
}
#flash {
float:right;
width:auto;
height:auto;
background-color:transparent;
}

#logo {
width:774px;
height:206px;
margin:auto;
}

#menue{
float:left;
margin-left:100px;
margin-top:0px;
width:120px;
height:200px;
}

#hauptfenster {
margin-left:200px;
margin-right:200px;
height:100%;
}

#etc {
clear:both;
}

</style>

</dl>
</div>

</p>
</div>

<div id= "etc">Impressum, Webmaster: matthiasgeissler@gmx.de, letzte Änderung: 10.08.2007</div>
</body>
</html>

sejuma

So?

HTML

<!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/back.gif); 
background-repeat:no-repeat; 
} 
body,td,th { 
font-family: Times New Roman, Times, serif; 
} 
#flash { 
float:right; 
background-color:transparent; border: 2px solid black;
} 


#container
{width: 982px;
margin: 0 auto;
border: 1px solid red;}


#logo { 
width:774px; 
height:206px; 
 border: 2px solid black;
} 


#menue{ 
float:left; 
margin-top:0px; 
width:120px; 
height:200px; border: 2px solid black;
} 


#hauptfenster { 
margin-left:120px; 
height:100%; border: 2px solid black;
} 


#etc { 
clear:both; border: 2px solid black;
} 


</style> 


<script type="text/javascript"> 
function archiv(){ 
var zielobjekt =document.getElementById("hauptfenster"); 
zielobjekt.innerHTML= "<iframe src='archiv.html' style='height:100%; width:100%'></iframe>"; 
} 
function home(){ 
var zielobjekt =document.getElementById("hauptfenster"); 
zielobjekt.innerHTML= "<iframe src='home.html' style='height:100%; width:100%'></iframe>"; 
} 
function organisation(){ 
var zielobjekt =document.getElementById("hauptfenster"); 
zielobjekt.innerHTML="<iframe src='organisation.html' style='height:100%; width:100%'></iframe>"; 
} 
function idee(){ 
var zielobjekt =document.getElementById("hauptfenster"); 
zielobjekt.innerHTML= "<iframe src='idee.html' style='height:100%; width:100%'></iframe>"; 
} 
function team(){ 
var zielobjekt =document.getElementById("hauptfenster"); 
zielobjekt.innerHTML= "<iframe src='team.html' style='height:100%; width:100%'></iframe>"; 
} 
function schwerpunkte(){ 
var zielobjekt =document.getElementById("hauptfenster"); 
zielobjekt.innerHTML= "<iframe src='schwerpunkte.html' style='height:100%; width:100%'></iframe>"; 
} 
function kompetenzen(){ 
var zielobjekt =document.getElementById("hauptfenster"); 
zielobjekt.innerHTML= "<iframe src='kompetenzen.html' style='height:100%; width:100%'></iframe>"; 
} 
function partner(){ 
var zielobjekt =document.getElementById("hauptfenster"); 
zielobjekt.innerHTML= "<iframe src='partner.html' style='height:100%; width:100%'></iframe>"; 
} 
function referenzen(){ 
var zielobjekt =document.getElementById("hauptfenster"); 
zielobjekt.innerHTML= "<iframe src='referenzen.html' style='height:100%; width:100%'></iframe>"; 
} 
function kontakt(){ 
var zielobjekt =document.getElementById("hauptfenster"); 
zielobjekt.innerHTML= "<iframe src='kontaktformular.php' style='height:100%; width:100%'></iframe>"; 
} 
</script> 
</head> 


<body> 
<div id="container">
<div id="flash"> 
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" 


codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0" width="200" height="1205"> 
<param name="movie" value="flash/fsblasen.swf" /> 
<param name="wmode" value="transparent" /> 
<param name="quality" value="high" /> 
<embed src="flash/fsblasen.swf" wmode="transparent" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" 


type="application/x-shockwave-flash" width="200" height="1205"></embed> 
</object> 
</div> 


<div id="logo">[img]bilder/logventure_Logo2.jpg[/img]</div> 


<div id="menue">menue 
<dl id="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> 
 
</dl> 
</div> 


<div id="hauptfenster">


hauptfenster</p> 
</div> 


<div id= "etc">Impressum, Webmaster: <a href="mailto:>> Edit by Admin :Das Posten von Email-Adressen ist hier nicht 


gestattet << </div>
</div>


</body> 
</html>

Alles anzeigen

Wenn du die Rahmen weglässt musst du nochmal die Breiten justieren.

00eraser00

das menü ist immer noch oben links, das flash nicht ganz rechts am rand und das logo wird zwischen dem flash und dem linken rand zentriert, da das flash aber nicht ganz rechts ist ist das logo auch nicht in der mitte der seite

es soll so sein, dass sich die divs an der auflösung ausrichten, aber ihr verhältnis zueinander trotzdem gleich ist

sejuma

Zitat von 00eraser00

es soll so sein, dass sich die divs an der auflösung ausrichten, aber ihr verhältnis zueinander trotzdem gleich ist

Dann musst du statt mit Pixelwerten mit Prozentangaben arbeiten, z. B. width: 80%

Dein Logo-Bild hat jedoch eine feste Breite. Von daher kann es sich nicht anpassen (Es sei denn du verwendest auch hier einen Prozentwert, was zu Skalierung mit Verpixelung führen kann).
Die Navi wird bei mir unter dem Logo angezeigt (IE 7).
Falls u IE 6 hast, dann weise der Navi noch ein "display: inline;" zu.

divs anordnen

Tags

Benutzer online in diesem Thema