✔ div verschachteln

Status
Nicht offen für weitere Antworten.
N

notebook20000

Gesperrt
Hallo,

wie bekomme ich sowas hin



xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
x xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx x
x x x x
x x x x
x xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx x
x x
x x
x x
x x
x x
x x
x x
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx

Also zwei divs ineinader. Das Problem

der body hat ein background. da äußere div benfalls, das aber sich zumindestens in der höhe an das hintere body bild anpassen muss. das innere div enthält eine navigation mit backgroundimage. leider wird das alles nicht korekt positioniert im firefox. im ie habe ich es schon hinbekommen aber der firefox will nicht so wie ich will:(

Hier der HTML Code

Code: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>gameportal</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
<!--
body {
 background-color: #560000;
 background-image: url(images/background.jpg);
 background-repeat: repeat;
 background-attachment:scroll
 background-position:top;
 margin: 0 auto; 
 text-align:center;
 font-family:Arial, Verdana;
 font-size: 13px;
}
.main {
 margin: 0 auto; 
 background-image: url(images/mainpic.jpg);
 background-repeat:no-repeat;
 background-attachment:scroll;
 background-position:top;
 background-color:red;
 height:1000px;
 width:960px;
}
.mainmenu {
 text-align:left;
 width:872px;
 height:36px;
 margin:100px 5px 4px 5px;
 background-image:url(images/mainmenubackground.jpg);
 background-repeat:no-repeat;
 background-attachment:scroll;
 background-position:top;
 color:white;
 padding: 7px 10px 7px 10px;
}
-->
</style></head>
<body>
 <div class="main">
  <div class="mainmenu">Menupunkt 1</div>
 </div>
</body>
</html>
 
Hi,

versuch es mal mit diesen Regeln für das DIV .main:

Code: 
.main {
position:absolute;
left:50%;
margin-left:-480px; /* negative Hälfte von width:960px */
top:0;
background-image: url(images/mainpic.jpg);
background-repeat:no-repeat;
background-attachment:scroll;
background-position:top;
background-color:red;
height:1000px;
width:960px;
}
 
Hallo,

schon ganz ok. im ie sowieso aber im firefox wird der innere div nicht richtig zentriert. im Firefox ist es nach links ausgerichtet und nicht zentriert
 
Ersetz mal für .mainmenu

Code: 
margin:100px 5px 4px 5px;
durch

Code: 
margin:100px auto 4px auto;
 
Hallo,

ok, jetzt bräucht ich nur mal eine Erklärung zu:

left:50%;
margin-left:-480px; /* negative Hälfte von width:960px */


wie ist das jetzt zu verstehen?
 
Diese beiden Regeln sorgen für die horizontale Zentrierung der Box .main im Browserfenster, und ersetzen margin:0 auto.

Mit left:50% wird der linke Boxrand in der Fenstermitte positioniert, die Box sitzt somit zunächst mal außermittig zum rechten Fensterrand verschoben, und wird mit margin-left:-480px um die Hälfte der Boxbreite nach links zurückgeschoben.

Somit ist die Box in der horizontalen Fenstermitte positioniert.
 
im menu div gibts auch noch ein problem. das:
padding: 7px 10px 7px 10px;

wird im firefox nicht korrekt erkannt. oben und unten ist der abstand aber nach links ist kein rand zu erkennen. im e gehts
 
Das kann ich leider nicht bestätigen.

ff.jpg

Du solltest das Dokument mal besser im "Standardsmode" übergeben, denn derzeit hält sich der IE nicht an dein Stylesheet. ;-]

padding:7px 10px 7px 10px zählt gemäß dem Boxmodell zur Breite und Höhe eines Elements, sprich die Angaben werden zur width- und height-Eigenschaft hinzuaddiert, und ergeben somit die tatsächliche Boxenbreite und -höhe.

FF macht hier soweit alles richtig und zeigt die Box 892*50px anstelle von 872*36px an.

Folglich müssen die padding-Werte von der width- und height-Eigenschaft subtrahiert werden, um auf die gewünschte Elementbreite (872px) und -höhe (36px) zu kommen - also:

Code: 
width:852px; /* 2*10 + 852 = 872 */
height:22px; /* 2*7 + 22 = 36 */
 
ie bekomme ich den "standarmod"?

so sieht das doku jetzt aus

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>gameportal</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
<!--
body {
background-color: #560000;
background-image: url(images/background.jpg);
background-repeat: repeat;
background-attachment:scroll
background-position:top;
margin: 0 auto;
text-align:center;
font-family:Arial, Verdana;
font-size: 13px;
}
.main {
margin: 0 auto;
background-image: url(images/mainpic.jpg);
background-repeat:no-repeat;
background-attachment:scroll;
background-position:top;
background-color:red;
height:1000px;
width:960px;
}

.main {
position:absolute;
left:50%;
margin-left:-480px; /* negative Hälfte von width:960px */
top:0;
background-image: url(images/mainpic.jpg);
background-repeat:no-repeat;
background-attachment:scroll;
background-position:top;
background-color:red;
height:1000px;
width:960px;
}
.mainmenu {
text-align:left;
width:872px;
height:36px;
margin:100px auto 4px auto;
background-image:url(images/mainmenubackground.jpg);
background-repeat:no-repeat;
background-attachment:scroll;
background-position:top;
color:white;
padding: 7px 10px 7px 10px;
}
-->
</style></head>
<script type="text/javascript">
alert(document.compatMode);
</script>
<body>
<div class="main">
<div class="mainmenu">Menupunkt 1</div>
</div>
</body>
</html>

Das Testscript gibt bei mir BackCompat aus bei IE undFirefox
 
Code: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
          "http://www.w3.org/TR/html4/loose.dtd">
Code: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 
          "http://www.w3.org/TR/html4/strict.dtd">
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück