nicht angemeldet
Positionierung von Kopf, Inhalt, Fuss und Nav
0 0 0 0 0 0 0 
MudGuard
Positionierung von Kopf, Inhalt, Fuss und Nav
Hallo,
ich möchte folgendes realisieren:
Die ganze Seite soll mit einer festen Grösse in der Mitte des Browserfensters dargestellt werden, das ganze soll vollständig mit CSS, ohne Tabellen oder Frames realisiert werden und muss leider auch im IE funktionieren!
Oben kommt eine Kopfzeile mit darüberliegender horizontaler Nav, dann kommt der Inhalt und unten eine feststehende Fusszeile.
Mein konkretes Problem ist, das ich die Nav nicht auf die Kopfzeile gelegt bekomme, sondern nur zwischen Kopf und Inhalt oder gar nicht sichtbar.
Vom Verständnis her:
Ich mache eine div#Seite mit einer festen Grösse die zentriert dargestellt wird und mit "position: relative" zum Elternelement für folgende div's gemacht wird.
Alle weiteren beziehen sich mit "position: absolute" und der Angabe von "top: YYYpx; left: XXXpx;" darauf und werden entsprechend dargestellt.
Mit "z-index" wird angegeben was vorne stehen soll.
Geht leider so nicht, entweder es wird immer links, oben dargestellt oder eben gar nicht :-(
Vielen Dank für Eure Tips,
Tschüß, Thorolf
Meine HTML:
---------------------------------------
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta content="text/html; charset=ISO-8859-1" http-equiv="content-type">
<title>Willkommen</title>
<link rel=stylesheet type="text/css" href="formate.css"></link>
</head>
<body>
<div id="Seite">
<div id="Kopfzeile">
<br>
</div>
<div id="Nav">
<ul id="Navigation">
<li><span>Über uns</span></li>
<li><a href="haupt.htm">Haupt</a></li>
<li><a href="presse.htm">Presse</a></li>
<li><a href="kontakt.htm">Kontakt</a></li>
</ul>
</div>
<div id="Inhalt">
<br>
<h1>Willkommen auf den Seiten von mir</h1>
Start Inhalt<br>
<br>
<br>
Ende Inhalt<br>
</div>
<div id="Fusszeile">
<br>
</div>
</div>
</body>
</html>
---------------------------------------
Meine CSS:
---------------------------------------
body {
color: #000000; background-color: #FFFFFF;
font-size: 100.01%;
font-family: Verdana,Helvetica,Arial,sans-serif;
margin: 0; padding: 1em 0;
text-align: center; /* Zentrierung im Internet Explorer */
}
div#Seite {
position: relative
text-align: left; /* Seiteninhalt wieder links ausrichten */
margin: 0 auto; /* standardkonforme horizontale Zentrierung */
width: 800px; height:600px;
padding: 0;
background: #FFFFFF;
border: 1px ridge silver;
z-index: 1;
}
html>body div#Seite {
border-color: white; /* Farbangleichung an den Internet Explorer */
z-index: 1;
}
div#Kopfzeile {
position: absolute;
top: 0px; left: 0px;
width: 800px; height:200px;
min-height:200px;
padding: 0;
background: #ffffff url(images/header.jpg) no-repeat;
z-index: 2;
}
#Nav {
position: absolute;
top: 160px; left: 100px;
width: 700px; height: 40px;
text-align: left; /* Seiteninhalt wieder links ausrichten */
margin: 0 auto; /* standardkonforme horizontale Zentrierung */
padding: 0;
background:transparent;
z-index:3;
}
ul#Navigation {
margin: 0; padding: 0;
top:0; left:0;
width: 100%;
background:transparent;
}
ul#Navigation li {
margin: 0.1em; padding: 0;
list-style: none;
display: inline;
}
ul#Navigation a, ul#Navigation span {
padding: 0.2em 2em;
font-size: 70%; font-weight: bold;
color: white; background-color: transparent;
}
* html ul#Navigation a, * html ul#Navigation span {
width: 1em; /* nur fuer IE 5.0x erforderlich */
w/idth: auto; /* sicherheitshalber fuer spaetere Versionen korrigiert */
}
ul#Navigation span {
text-decoration: none; font-weight: bold;
color: #0071B5; background-color: transparent;
}
ul#Navigation a:link {
text-decoration: none; font-weight: bold;
color: #253D6F; background-color: transparent;
}
ul#Navigation a:visited {
text-decoration: none; font-weight: bold;
color: #253D6F; background-color: transparent;
}
ul#Navigation a:hover {
text-decoration: none; font-weight: bold;
color: #0071B5; background-color: transparent;
}
ul#Navigation a:active {
text-decoration: none; font-weight: bold;
color: #0071B5; background-color: transparent;
}
div#Inhalt {
position: absolute;
top: 200px; left: 100px;
width: 700px; height: 357px;
min-height: 357px;
text-align: left; /* Seiteninhalt wieder links ausrichten */
margin: 0 auto; /* standardkonforme horizontale Zentrierung */
background: #F2F8FB;
z-index: 2;
}
* html div#Inhalt {
height: 1em; /* Workaround gegen den 3-Pixel-Bug des Internet Explorers */
margin-bottom: 0;
}
div#Inhalt h1 {
font-size: 1.0em;
margin: 0.2em 0;
color: navy;
}
div#Inhalt p {
font-size: 1em;
margin: 1em 0;
}
div#Fusszeile {
position: absolute;
top: 357px; left: 0px;
width: 800px; height: 43px;
text-align: left; /* Seiteninhalt wieder links ausrichten */
margin: 0 auto; /* standardkonforme horizontale Zentrierung */
padding: 0;
background: #305085 url(images/footer.jpg) no-repeat;
z-index: 2;
}
---------------------------------------
-
Hallo,
ich tippe mal das einfachste wäre die Reihenfolge von Kopf und Navi in Navi und Kopf zu ändern, da Divs default-mässig immer untereinander liegen.
bydey
--
-- noch immer ein erfolgloser <DIV> Jünger ---
ich tippe mal das einfachste wäre die Reihenfolge von Kopf und Navi in Navi und Kopf zu ändern, da Divs default-mässig immer untereinander liegen.
das hatte ich auch schon probiert, dann liegt die Nav am oberen Rand, oberhalb der Kopfzeile :-(
Bei dem vorher geposteten Quelltext stehen Kopf, Nav und Inhalt linksbündig am Browserfenster, die div#Seite steht zentriert darunter (da soll eigentlich auch der Rest rein) und die Fusszeile, ebenfalls linksbündig, etwa auf halber Höhe im Inhalt, da wo der Text aufhört :-(
Tschüß,
Thorolf
-
-
Hi,
Mein konkretes Problem ist, das ich die Nav nicht auf die Kopfzeile gelegt bekomme, sondern nur zwischen Kopf und Inhalt oder gar nicht sichtbar.
warum "auf" und nicht "in"? Dann sparst Du auch die oft problematische absolute Positionierung ein.
Und warum liest Du nicht einmal das Kapitel komplett, aus dem Du diesen Beispielcode so unreflektiert adaptiert hast?freundliche Grüße
Ingo-
Hallo Ingo,
warum "auf" und nicht "in"? Dann sparst Du auch die oft problematische absolute Positionierung ein.
da hätte ich ja auch drauf kommen können und damit geht's vielen Dank!
Jetzt wäre eine Beantwortung meiner Frage noch ganz nett warum es mit der absoluten Positionierung nicht klappt, was ist daran "problematisch"?
Und warum liest Du nicht einmal das Kapitel komplett, aus dem Du diesen Beispielcode so unreflektiert adaptiert hast?
Wie kommst Du darauf das ich das nicht getan hätte? Ich finde leider nach wie vor keine Antwort auf meine Frage!
Und was ist schlimm daran das ich den Beispielcode "unreflektiert adaptiert" habe? Wozu wurde der Code denn geschrieben ausser zum Benutzen und Anpassen?
Vielen Dank nochmal,
Tschüß, Thorolf
-
Hi,
Jetzt wäre eine Beantwortung meiner Frage noch ganz nett warum es mit der absoluten Positionierung nicht klappt, was ist daran "problematisch"?
Wenn Dich die Antwort auf diese jetzt ja nur noch akademische Frage interessiert, wäre das doch eine gute Gelegebnheit, das CSS-Kapitel solange durchzuarbeiten, bis Du die Antwort selbständig erkennst. ;-)
Warum absolute Positionierung problematisch ist, sage ich Dir aber gern: Immer dann, wenn die Größe eines so positionierten Elements nicht feststeht und besonders, wenn hierin noch Text (dessen Schriftgröße ja nicht vorausgesetzt werden kann) enthalten ist, dann kann es zu Überlagerungen kommen - bis hin zur Unbenutzbarkeit einer Seite.
Aber auch dies steht in besagtem Selfhtml-Kapitel...Und warum liest Du nicht einmal das Kapitel komplett, aus dem Du diesen Beispielcode so unreflektiert adaptiert hast?
Wie kommst Du darauf das ich das nicht getan hätte?Das zeigen mir die sinnlosen <br> - die Abstände könntest Du einfach im CSS (um)definieren. Oder im CSS die sinnlosen Angaben von min-height nach jeweils gleichgroßer Definition von height oder die überflüssigen Wiederholungen der Zeile
text-align: left; /* Seiteninhalt wieder links ausrichten */- und natürlich die absolute Positionierung, vor der eindringlich gewarnt wurde.
Und was ist schlimm daran das ich den Beispielcode "unreflektiert adaptiert" habe? Wozu wurde der Code denn geschrieben ausser zum Benutzen und Anpassen?
Ganz genau dazu ist er da. Allerdings wäre es sinnvoll, wenn man diese Anpassungen nicht nach try und error vornimmt, sondern mit Hilfe der Grundkenntnisse aus den übrigen CSS-Kapiteln und anhand der Erläuterungen in diesem Praxiskapitel.
Das ist im Prinzip genau wie an vielen anderen Stellen der Dokumentation. Wer etwas ganz konkretes sucht, kann sie als Nachschlagewerk verwenden. Wer etwas findet, das aber nicht ganz seinen Anforderungen entspricht, sollte sich zumindest die zum Verständnis erforderlichen Kenntnisse aneignen. Und so umfangreich ist das CSS-Praxiskapitel doch nicht, als das man es nicht einmal komplett durcharbeiten und dadurch die Beispiele auch verstehen kann.
Im Gegensatz zu anderen Quellen versucht SELFhtml halt, das Wissen zu vermitteln, um vorgefertigte Lösungen zu verstehen, selbst anpassen zu können oder auch völlig selbständig neues zu entwickeln.freundliche Grüße
Ingo-
Hallo Ingo,
erstmal Danke für Deine ausführliche Antwort.
Wenn Dich die Antwort auf diese jetzt ja nur noch akademische Frage interessiert, wäre das doch eine gute Gelegebnheit, das CSS-Kapitel solange durchzuarbeiten, bis Du die Antwort selbständig erkennst. ;-)
akademisch ist relativ, das Problem hatte ich bereits an anderer Stelle und wenn ich es mit Hilfe der Doku und den Beispielen gelöst bekommen hätte, hätte ich nicht nachgefragt!
Da steht "absolut" zum Elternelement und das Elternelement ist das welches zuvor mit "absolut" oder "relativ" dazu gemacht wurde (bei mir also die div#Seite) und falls nicht dann ist der Body das Elternelement!
Und genau das geht nicht, ich habe das Gefühl das immer der Body als Elternelement benutzt wird!
Natürlich ist die "relative" Lösung die bessere (mal abgesehen davon das sie im IE auch nicht richtig funktioniert), aber manchmal braucht man was "absolutes" und daher wäre es schon interessant was man falsch macht!
Das zeigen mir die sinnlosen <br> - die Abstände könntest Du einfach im CSS (um)definieren. Oder im CSS die sinnlosen Angaben von min-height nach jeweils gleichgroßer Definition von height oder die überflüssigen Wiederholungen der Zeile
text-align: left; /* Seiteninhalt wieder links ausrichten */Der Code ist ganz sicher noch sehr weit davon entfernt perfekt zu sein, die <br> werden durch "sinnvollen" Text ersetzt, "min-height" ist nach meinem Verständnis nicht das Gleiche wie "height" und immerhin war ich damit einen kleinen Schritt weitergekommen und natürlich freue ich mich über Verbesserungsvorschläge, vielleicht wird auch mein Code dann irgendwann mal gut!
Das ist im Prinzip genau wie an vielen anderen Stellen der Dokumentation. Wer etwas ganz konkretes sucht, kann sie als Nachschlagewerk verwenden.
Dazu nutze ich SelfHTML, z.Z. habe ich ca. 15 Seiten in meinem Browser geöffnet!
»»Wer etwas findet, das aber nicht ganz seinen Anforderungen entspricht, sollte sich zumindest die zum Verständnis erforderlichen Kenntnisse aneignen. Und so umfangreich ist das CSS-Praxiskapitel doch nicht, als das man es nicht einmal komplett durcharbeiten und dadurch die Beispiele auch verstehen kann.
Zum einen habe ich vor längerer Zeit mal das HTML-Kapitel komplett ausgedruckt und durchgearbeitet und auch das CSS-Kapitel habe ich grösstenteils schon gelesen. Da ich aber weder ein Web-Designer bin, noch ständig Web-Seiten entwerfe kommt man auch nach dem Studium von Doku und Beispielen oft nicht um "try und error" herum, insbesondere wenn man denkt das es so eigentlich gehen muss aber es trotzdem nicht tut!Meine bisherigen Webseiten sind vollständig mit Tabellen designed (so um 1997 wo ich meine erste Webseite gemacht habe gab es noch nicht viel anderes) und nun versuche ich mich an CSS, auch wenn es mit Tabellen sicher einfacher ginge - aber aller Anfang ist schwer!
Mit freundlichen Grüße
Thorolf
-
Hi,
Da steht "absolut" zum Elternelement und das Elternelement ist das welches zuvor mit "absolut" oder "relativ" dazu gemacht wurde (bei mir also die div#Seite) und falls nicht dann ist der Body das Elternelement!
absolute, relative oder auch fixed - also alles außer dem Default static, ja.
Und genau das geht nicht, ich habe das Gefühl das immer der Body als Elternelement benutzt wird!
Dann hast Du etwas verkehrt gemacht. Teste es doch an einem einfachen Beispiel: setze mitten in die Seite ein div mit position:relative und hierein ein weiteres mit position:absolute.
Natürlich ist die "relative" Lösung die bessere (mal abgesehen davon das sie im IE auch nicht richtig funktioniert),
warum nicht? Grundsätzlich geht das auch im IE.
"min-height" ist nach meinem Verständnis nicht das Gleiche wie "height"
stimmt. Aber was soll min-height, also eine Mindesthöhe, wenn du height mit demselben Wert angibst? Außer daß der IE min-height nicht versteht.
Zum einen habe ich vor längerer Zeit mal das HTML-Kapitel komplett ausgedruckt und durchgearbeitet
Tja, das ist der Knackpunkt. Man vergißt schnell, wenn man die Kenntnisse nicht auch anwendet.
Meine bisherigen Webseiten sind vollständig mit Tabellen designed (so um 1997
Zu dieser Zeit ging das auch kaum anders...
nun versuche ich mich an CSS, auch wenn es mit Tabellen sicher einfacher ginge - aber aller Anfang ist schwer!
Glaube mir, wenn man Tabellen kennt oder sie von einem Programm erstellen läßt, mag zwar einiges einfacher gehen, aber wenn Du Dich ert mal in CSS eingearbeitet hast (wobei Du absolute Positionierung wirklich als *Sonderfall* betrachten solltest), dann wirst Du ein CSS-Layout ruckzuck realisieren können. Die meiste Arbeit wird Dir dann die Anpassung an den IE und die Umschiffung diverser Bugs dieses Browsers machen. Ich brauche jedenfalls oft zigmal mehr Zeit für die Fehlerkorrektur des IE als für das Layout selbst.
Daher mein Tip, den Dir auch andere geben würden: Teste Deine Seiten zunächst nur im Firefox und validiere sie. Wenn das stimmt, dann laß Dich überraschen, was der IE draus macht. ;-)freundliche Grüße
Ingo-
Hallo Ingo,
Dann hast Du etwas verkehrt gemacht. Teste es doch an einem einfachen Beispiel: setze mitten in die Seite ein div mit position:relative und hierein ein weiteres mit position:absolute.
damit wäre meine Frage ja geklärt, es sollte so wie gedacht gehen!
Natürlich ist die "relative" Lösung die bessere (mal abgesehen davon das sie im IE auch nicht richtig funktioniert),
warum nicht? Grundsätzlich geht das auch im IE.Weil die Fusszeile nicht unten am Ende erscheint (also nach height: 357px;) sondern unterhalb des letzten Textes. Die div#Seite (am Rahmen zu erkennen) geht aber wie gewünscht bis zum Ende!
eingearbeitet hast (wobei Du absolute Positionierung wirklich als *Sonderfall* betrachten solltest), dann wirst Du ein CSS-Layout ruckzuck realisieren können. Die meiste Arbeit wird Dir dann die Anpassung an den IE und die Umschiffung diverser Bugs dieses Browsers machen.
Genau deswegen beschäftige ich mich nun mit CSS und leiser muss man noch auf den IE Rücksicht nehmen, aber es kann ja nur besser werden :-)
Ich brauche jedenfalls oft zigmal mehr Zeit für die Fehlerkorrektur des IE als für das Layout selbst.
Das merke ich gerade, im FF ist es fast fertig (Opera und Safari machen es auch richtig) aber der IE zeigt nur Schrott an :-(((
Daher mein Tip, den Dir auch andere geben würden: Teste Deine Seiten zunächst nur im Firefox und validiere sie. Wenn das stimmt, dann laß Dich überraschen, was der IE draus macht. ;-)
Gibt es dazu weiterreichende Infos oder nur das worauf bei SelfHTML immer mal wieder hingewiesen wird?
Vielen Dank nochmal!
Mit freundlichen Grüßen
Thorolf-
Hi,
warum nicht? Grundsätzlich geht das auch im IE.
Weil die Fusszeile nicht unten am Ende erscheint (also nach height: 357px;) sondern unterhalb des letzten Textes. Die div#Seite (am Rahmen zu erkennen) geht aber wie gewünscht bis zum Ende!Das müßtest Du einmal online zeigen. Wenn ich den eingangs von Dir geposteten Code im FF und IE anzeige, ist dieser Balken gleich (=mittig) positioniert.
Daher mein Tip, den Dir auch andere geben würden: Teste Deine Seiten zunächst nur im Firefox und validiere sie. Wenn das stimmt, dann laß Dich überraschen, was der IE draus macht. ;-)
Gibt es dazu weiterreichende Infos oder nur das worauf bei SelfHTML immer mal wieder hingewiesen wird?Infos wozu? Es gibt einige Seiten, die sich mit den Bugs des IE beschäftigen und Workaround aufzeigen. Quasi Allround-Talente hierfür ist übrigens die explizite Angabe von height und line-height für die jeweils passenden Elemente.
freundliche Grüße
Ingo
-
-
-
Hi,
Da steht "absolut" zum Elternelement und das Elternelement ist das welches zuvor mit "absolut" oder "relativ" dazu gemacht wurde
Steht das da wirklich so?
Was das Elternelement ist, hat nichts, aber auch gar nichts, mit position oder sonstigem CSS zu tun.
Das Elternelement wird rein durch die Dokument-Struktur festgelegt.Das, worum es bei position:absolute (und der Basis der Koordinaten) geht, ist der containing block - und der ist das innerste Vorfahrenelement mit einer Positionierung, die von static abweicht, bei Fehlen eines solchen Elements ist es der viewport (NICHT der body, auch wenn in vielen Fällen die Position des body mit der des viewports mehr oder weniger zufällig übereinstimmt - aber auch html kann z.B. padding haben ...)
cu,
Andreas--
Warum nennt sich Andreas hier MudGuard?
Schreinerei Waechter
Fachfragen per E-Mail halte ich für unverschämt und werde entsprechende E-Mails nicht beantworten. Für Fachfragen ist das Forum da.
-
-
-