FF-Problem mit top-Abstand von ChrisB, 29.10.2008 17:55

FF-Problem mit top-Abstand

Dominik 29.10.2008 17:47

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 &amp; 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 &uuml;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&uuml;rate :-)<br />  
Mir fr&ouml;ie &uuml;s fescht d&auml; Tag mit &ouml;ich z&auml;m&auml; 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;  
  }

Beitrag melden

– Informationen zu den Bewertungsregeln

FF-Problem mit top-Abstand
ChrisB 29.10.2008 17:55

css
– Informationen zu den Bewertungsregeln
Hi,

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.)

Also wieder mal das Thema Collapsing Margins. (Insb. der Abschnitt mit adjoining margins.)

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.

CSS kann nicht rechnen, also bleiben nur Workarounds.

Bspw. umgebenden Container mit 100% (Mindest-)Hoehe, und darin Headerbild absolut positionieren.

4.) ach ja, kann man den Code auch als anhang posten??damit ich nicht immer alles hier reinschreiben muss??

Gar nicht.
Haette aber auch wenig Vorteile, denn auch Anhaenge muesste man immer noch herunterladen - da ist hier rein Posten sogar noch die bessere Wahl. Optimal bei umfangreicherem Code waere natuerlich ein Online-Beispiel (und auch dabei bitte immer auf's wesentliche verkuerzen).

MfG ChrisB

--
„This is the author's opinion, not necessarily that of Starbucks.“
Beitrag melden

–
Informationen zu den Bewertungsregeln
FF-Problem mit top-Abstand
suit Homepage des Autors 29.10.2008 17:59

css
– Informationen zu den Bewertungsregeln
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??

vermutlich aufgrund des "magischen abstands" nach dem bild

2.)Wie kann ich das lösen, ohne eine border machen zu müssen??

ändere die display-eigenschaft eines bildes

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.

mathematisch garnicht ;)
und nachdem ich dich sowieso nicht von diesem unsinnigen vorhaben abbringen kann: click

Besten Dank für die Hilfe!!
Echt seit top!habt mir schon seeeeeehr viel geholfen...wollte einfach mal danke sagen

offenbar noch nicht gut genug ;) mehr dazu später

4.) ach ja, kann man den Code auch als anhang posten??damit ich nicht immer alles hier reinschreiben muss??

ein link reicht auch, ist sogar besser, attachments gibts afaik nicht
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">

ZONK! das link-element ist hier nicht erlaubt, eine zeile rauf damit

<body>

<div class="IE_S">
<div id="Head_pic">
<img src="Bilder/DSC_0901.jpg">
</div>
</div>

ZONK! ZONK! ZONK! ZONK!
was soll das hier? den sinn dieser klasse versteh ich nicht
den header könntest du als h1-element lösen, das bild as hintergrundbild
das alt-attribut fehlt
2 imho überflüssige div-elemente, auch das bild selbst lässt sich per css formatieren

<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>

ZONK! ZONK! ZONK! ZONK!
- redundantes div-element
- benenne deine navigation mit "navigation" oder "menu" nicht mit "links", das ist verwirrend
- die klasse Blobb ist redundant, jeder link ist ident und über sein elternelement zuordenbar
- verwende unsortiere listen für deine navigation
- benennen den "aktiven" menupunkt mit "current" und nicht mit "aktiv", da dein aktiver link != einem derzeigen link entspricht
- besser noch, verlinke den aktuellen menüpunkt garnicht
  was tut DEL?
<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>

ZONK! ZONK! ZONK! ZONK! ZONK! ZONK! ZONK! ZONK! ZONK!
- wieder ein redundanter IE-kasten herum?
- verwende kein inlinecss
- verwende keine weasle-words (herzlich willkommen will keiner lesen
- verwende [link:http://www.w3.org/International/questions/qa-escapes@title=keine entities wo sie nicht sein müssen]
- verwende p-elemente zur auszeichnung von textabsätzen (2 aufeinanderfolgende br-elemente sind fast immer falsch
- schleudere nicht mit ids herum - index1 und index2, da ist eins zu viel - das bild wäre über sein elternelement selektierbar
- wenn du von br innerhalb von html 4.01 verwendest, verwende nicht das shorttag-feature
</div>
</div>

ZONK!
- irgend ein div ist jetzt zu viel
</body>
</html>
```
>   
> CSSCODE  

den kommentier ich mal nicht - da wäre aber auch einiges an weniger sinnvollem zeug drin  
  
btw: die "meckerei" ist als gratisdreingabe zu sehen, damit du deine arbeit noch weiter verbessern kannst - einige dinge sind philisophischer natur, andere sind essentiell wichtig (html fehler, grobe stil fehler)
```
Beitrag melden

–
Informationen zu den Bewertungsregeln

SELFHTML Forum - Ergänzung zur Dokumentation Übersicht

Dominik: FF-Problem mit top-Abstand