Rahmenhöhe Firefox vs. IE
Julhein
- browser
Hallo Zusammen,
habe vor einiger Zeit mal einen HTML- und CSS-Kurs gemacht und
bastle zur Zeit an meiner eigenen Homepage...mal mehr und mal weniger
erfolgreich! ;-)
Habe meine Seite so aufgebaut, dass ich einen Rahmen in der Breite von
780px festgelegt habe, welcher wiederum aus drei Bereichen besteht:
Kopf (Bilder)
Navigation und
Inhalt.
Nun möchte ich, dass die Navigationsleiste genauso lang (height) ist,
wie der Inhaltsteil.
Wenn ich also nun für die Navigation und Inhalt jeweils height: 700px
festlege, dann zeigt der IE das auch korrekt (gleich lang) an.
Im FF ist die Navigationsleiste länger, obwohl sie die gleiche
Pixelzahl besitzt, wie der Inhaltsbereich.
Hoffe ihr könnt mir noch folgen... ;-)
Habe einfach mal "Height" auf 700px festgesetzt, da ich gerne möchte,
dass beide Bereich gleich lang sind und die Navigationsleiste umfasst ja
nicht so viele Punkte, dass sie automatisch so lang ist wie der Inhaltsbereich. Gibt es sonst noch eine Möglichkeit, wie das hinkriegt?
Wär super, wenn ihr mir hier weiterhelfen könntet, da ich langsam immer die gleichen Sachen probiere und natürlich nichts hilft! ;-)
Schon mal vielen DAnk!
Tschö, Julia
Salve
Sind vielleicht die Padding-Werte unterschiedlich?
Salve
Sind vielleicht die Padding-Werte unterschiedlich?
Hi, ich habe noch gar keine Padding-Werte festgelegt... :-(
Hi,
Hi, ich habe noch gar keine Padding-Werte festgelegt... :-(
dann gelten die Standardwerte, was immer Probleme bringen kann. Ich selbst, lösche daher am Anfang jedes Dokuments diese Angaben durch
*{margin:0,padding:0;}
und setzt sie dann gezielt neu bei den Elementen.
Aber um dein problem nachzuvollziehen, wird Quelltext benötigt.
Mike
Hi,
*{margin:0,padding:0;}
grrr, bevor mir jemand noch einen Strick aus dem Flüchtigkeitsgfehler dreht;-)
*{margin:0;padding:0;}
Mike
HI, habe das jetzt so geändert...allerdings hat sich in FF nix geändert.
Hier mal mein CSS-Definition:
* {
margin:0;
padding:0;
}
body {
font-family: sans-serif;
color: #000000;
text-align:center;
}
html, body {
background: url(../Bilder/rasen4.png);
}
#rahmen {
width: 780px;
margin: 0 auto;
text-align: left;
}
#kopf {
width: 780px;
height: 150px;
float: left;
}
#navigation {
width: 150px;
height: 700px;
text-align: left;
background: #008030;
float: left;
}
#inhalt {
text-align: left;
background: #EFEFEF;
height: 700px;
}
Kannst du den Fehler finden?
Schonmal danke...
VG Julia
Hi,
Kannst du den Fehler finden?
ohne das dazugehörige Html-Gerüst? Nein.
Warum willst du eine Höher von 700px oder höher erzwingen, und Float ist auch immer wieder als Problemfall bekannt. Man sollte also auf Float verzichten, wenn nicht unbedingt notwendig.
Mike
Hi Mike,
würde halt gerne einen optisch gleich hohen Inhalts- und Navigationsbereich haben. Wie könnte ich das denn sonst bewerkststelligen? :-)
Und wie soll ich das float umgehen? Habe das so gelernt und wenn ich
das weglasse, dann ist die Navigationsleiste und Inhalt nicht mehr so wie ich das gerne hätte....
Wär super nett, wenn du mir hier noch weiterhelfen könntest...
Vielen Dank.
Julia
Hi Julia,
Wär super nett, wenn du mir hier noch weiterhelfen könntest...
würde ich ja gerne, aber dazu müsste ich das HTML sehen. Die Höhe lässt sich anstatt in Pixel auch in Prozent angeben(aber da gibt es auch einige Haken und Ösen).
Dieser Artikel ist zwar schon älter aber das Wesentliche trifft zu.
Gruss
Mike
Hi Mike,
danke für deine Hilfe...hier mein HTML-Text:
<body>
<div id="rahmen">
<div id="kopf">
<img src="../Bilder/P1020504.jpg" alt="" width="260" height="150"><img src="../Bilder/P1020503.JPG" alt="" width="260" height="150"><img src="../Bilder/P1020505.JPG" alt="" width="260" height="150">
</div>
<div id="navigation">
<ul>
<li><a href="Start.html">Startseite</a></li>
<li><a href="mich.html">Über mich</a></li>
<li><a href="Download.html">Download</a></li>
</ul>
</div>
<div id="inhalt">
Text sdfsldfghdsfkd
</div>
</div> <!--Ende Rahmen-->
</body>
Das ist erstmal nur eine Vorlage, damit ich überhaupt das Grundgerüst
hinbekomme. Wie gesagt, ich möchte gerne, dass der Hintergrund (body) variable ist, den Rahmen (der Navigation und Inhaltsbereich umfasst) habe ich auf width 780 px gesetzt, damit sich Bilder und Texte später nicht verschieben, wenn man vergrößert oder verkleinert.
Der Navigationsbereich und Inhaltsbereich soll nun gleich "hoch" sein und da kommt das Problem, dass das in Firefox nicht korrekt dargestellt wird.
Wenn ich height nämlich nicht bestimme, dann ist die Navigationsleiste ja viel kürzer als der Inhaltsbereich...
Also, nochmal vielen Dank für deine Hilfe! :-)
Viele Grüße,
Julia
HI, habe das jetzt so geändert...allerdings hat sich in FF nix geändert.
Hier mal mein CSS-Definition:
* {
margin:0;
padding:0;
}
body {
font-family: sans-serif;
color: #000000;
text-align:center;
}
html, body {
background: url(../Bilder/rasen4.png);
}
#rahmen {
width: 780px;
margin: 0 auto;
text-align: left;
}
#kopf {
width: 780px;
height: 150px;
float: left;
}
#navigation {
width: 150px;
height: 700px;
text-align: left;
background: #008030;
float: left;
}
#inhalt {
text-align: left;
background: #EFEFEF;
height: 700px;
}
Kannst du den Fehler finden?
Schonmal danke...
VG Julia
Abgesehen davon, dass fest vorgegebene Höhen für Inhaltselemente äußerst unschön sind... http://de.selfhtml.org/css/eigenschaften/positionierung.htm#overflow@title=overflow?
Christian