Hallo
Wenn ich folgenden Code darstelle im IE gehts wie geplant, der Firefox macht aber zwischen Anzeigebereich und Headerbild eine üble Lücke...ausser ich mache einen Rahmen um das Anzeigebereich-div-element(unten imcssfile einfach ausgeklammert.)
1.)Wieso ist dieser unterschied??
2.)Wie kann ich das lösen, ohne eine border machen zu müssen??
3.)Wie kann ich machen das der Anzeigebereich 100% der Resthöhe unter dem Headerbild ist, egal wie gross das browserfenster ist??D.h das ich keine fixe höhe angeben muss, sondern dass anzeigebereich und Headerbild die volle Fenstergrösse ausnutzen.
Besten Dank für die Hilfe!!
Echt seit top!habt mir schon seeeeeehr viel geholfen...wollte einfach mal danke sagen
4.) ach ja, kann man den Code auch als anhang posten??damit ich nicht immer alles hier reinschreiben muss??
HTMLCODE
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Rahel & Dominik</title>
</head>
<link rel="stylesheet" href="STIL.css" type="text/css">
<body>
<div class="IE_S">
<div id="Head_pic">
<img src="Bilder/DSC_0901.jpg">
</div>
</div>
<div id="LinksIE">
<div id="Links">
<a href="#" class="Blobb" id="aktiv">Home</a>
<a href="#" class="Blobb">Heirat</a>
<a href="#" class="Blobb">Paar</a>
<a href="#" class="Blobb">Wunschbuch</a>
<a href="#" class="Blobb">Kontakt</a>
<div id="DEL"></div>
</div>
</div>
<div class="IE_S">
<div id="Anzeigebereich">
<h1 style="margin-top:100px;">Herzlich Willkommen uf üsere Homepage</h1>
<div id="index1"><img src="Bilder/possibility3.JPG" id="Index2" alt="Einladungskarte"></div>
<div style="">Scho gli isches sowit u mir hürate :-)<br />
Mir fröie üs fescht dä Tag mit öich zämä zfiire.<br />
<br />
Dominik und Rahel
</div>
</div>
</div>
</div>
</body>
</html>
CSSCODE
/*******************************************************************************
* Allgemeine Elemente *
*******************************************************************************/
body {
background-color:#79B9FF;
width:100%;
height:100%;
margin:0;
padding:0;
}
/* Floatclearelement */
#DEL {
clear: both;
}
/* Element, da IE margin:auto nicht schnallt */
div.IE_S {
text-align:center;
}
/* Das Headerbild */
#Head_pic{
margin: 0 auto 0 auto;
width:750px;
height: 233px;
}
/*******************************************************************************
* Auszechnung der Link-Leiste *
*******************************************************************************/
#Links {
margin:0 auto 0 auto;
width:750px;
}
#LinksIE {
margin:-24px 0 0 0;
text-align:center;
position: relative;
}
a.Blobb{
/*Auszeichnung der Links: FORM*/
width:150px;
height:24px;
background:url(Bilder/glass_bg.png) transparent top repeat;
display:block;
float:left;
/*Auszeichnung der Links: SCHRIFT*/
font-family:century gothic;
color:black;
text-decoration:none;
}
a#aktiv, a.Blobb:hover {
background:url(Bilder/nav_current.png) transparent top repeat;
color:white;
}
/*******************************************************************************
* Auszechnung des Anzeigebereichs *
*******************************************************************************/
#Anzeigebereich {
width:748px;
min-height:567px; /* mindest höhe des Bereichs */
background-color:white;
margin:0 auto 0 auto;
/* border:1px solid white; */
}
/*******************************************************************************
* *
* Spezielle Auszeichnungen *
* *
*******************************************************************************/
/*******************************************************************************
* index.html *
*******************************************************************************/
#Index1 {
text-align:center;
}
#Index2 {
width:70%;
margin: 0 auto 0 auto;
}