Layoutrahmen klebt immer am unteren Rand des Browserfensters
0 0 0 
Detlef G.
Layoutrahmen klebt immer am unteren Rand des Browserfensters
Hallo,
ich bin bei meiner 1. Internetseite und finde keine Lösung für folgendes Problem: Der weiße Layoutrahmen klebt (wenn mit Inhalt gefüllt) immer am unteren Browserfensterrand. Ohne Abstand. Ich möchte, dass er unten genauso Abstand hält wie oben. Mit margin-bottom komme ich nicht weiter. Die Pixel-Angaben werden ignoriert. Nehme ich nur Bottom, habe ich ca. 2 Handbreit Rand, obwohl ich 15px angegeben habe. Ich weiß nicht weiter.
Hier der Code:
#layoutrahmen {
border: 8px solid white;
left: 50%;
MARGIN-LEFT: -430px;
WIDTH: 857px;
POSITION: absolute;
Top: 15px;
}
body {
background-color: grey;
}
---------------------------------
<head>
<link href="layout.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="layoutrahmen">
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
</body>
</html>
-------------------------------------
Die Absätze sind natürlich nur da, um zu erreichen, dass der Layoutrahmen unter das Browserfenster rutscht :-)
Wenn man dann nach unten scrollt, klebt der weiße Rahmen immer unten am Browserfensterrand. :-(
Warum bringt margin-bottom nicht den gewünschten Abstand?
Kann mir vielleicht jemand helfen?
Vielen Dank schon mal.
Elke
-
Hallo, Elke!
Bei position:absolute wird das Element aus dem Objektfluss komplett herausgenommen, so dass Angaben wie "margin" keinen Sinn ergeben. Wenn Du schon ein solches mit dynamischem Inhalt ausstatten willst, musst Du auf position:absolute verzichten.
Gruß, LX
--
RFC 1925, Satz 8: Es ist komplizierter als man denkt.-
Hallo LX,
danke für Deine Antwort! Das war sehr hilfreich, das wir mir so noch gar nicht klar. Wie geschrieben, ich steige gerade erst ein.
Wie würdest Du es realisieren? Ohne position:absolute.
Zentriert und der Layoutrahmen mit Abstand oben und unten.Freue mich über einen Tipp!
Liebe Grüße
Elke-
Hallo Elke
Wie würdest Du es realisieren? Ohne position:absolute.
Zentriert und der Layoutrahmen mit Abstand oben und unten.LX hat wohl gerade keine Zeit ;-)
Blocklevelelemente lassen sich mit margin:auto zentrieren.
Wir brauchen also oben und unten 15px und rechts und links auto.
Diese Angaben können wir schön zusammenfassen s. margin (Außenrand/Abstand allgemein)
Das ergibt dann einfachmargin: 15px auto;
Weil Irgend Ein Browser in einer veralteten Version sich nicht an die Regeln hält, geben wir dem Elternelement (body) eintext-align:center;mit.
Übrigens: grey wird nicht von allen Browsern verstanden, zumindest der 6er IE ignoriert es, er versteht dafür gray. Ich weiß jetzt nicht, ob ein anderer Browser dies nicht versteht, deshalb würde ich statt grey oder gray lieber #888 verwenden.Auf Wiederlesen
Detlef--
- Wissen ist gut
- Können ist besser
- aber das Beste und Interessanteste ist der Weg dahin!-
Hallo Detlef,
danke für Deine nette Antwort!
Habe viel daraus gelernt!! Super klar erklärt, so dass ich gut folgen konnte. Habe mich sehr darüber gefreut :-)Habe vor 5 Minuten im Netz gelesen, dass gerade CSS-Anfänger position:absolute oft unzweckmäßig einsetzen und die Folgen nicht absehen (können). Da bin ich ja wohl genau in die Falle getappt.
Und grey werde ich umbenennen in #......
Herzlichen Dank nochmals und gerne
Auf Wiederlesen :-)
Elke -
Hallo Detlef,
nun muss ich mich doch nochmal zu meinem Layoutrahmenproblem melden, denn nun bastele ich an einem Folgeproblem. Bei meiner position:absolute-Variante saß der Footer an der richtigen Stelle. Nun seit dem Umstellen auf margin:15px auto; passt der Rand oben und unten, aber nun sitzt der Footer im unteren weißen 8px-Layoutrahmen-Rand. :-(
Habe außer den besprochenen Änderungen nichts gemacht und trotzdem ist nun in der Folge daraus ein Fehler im Footer entstanden. Bin schon den ganzen Tag am Herumexperimentieren und Lesen, aber es will einfach nicht klappen.Hier das CSS:
#layoutrahmen {
border: 8px solid white;
left: 50%;
width: 858px;
margin: 15px auto;
}body {
background-color: #CCCCCC;
font-family: Verdana, Arial, Helevtica, sans-serif;
text-align: center;
}#footer
{
margin: 4px;
padding: 0px;
clear: both;
}#footer ul
{
margin: 0px;
padding: 0px;
width: 858px;
list-style-type: none;
}#footer li
{
list-style-type: none;
float: right;
margin: 0px;
padding: 0px;
border: 0px;
}#footer li a
{
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
display: inline;
line-height: 15px;
width: 0px;
margin: 0px;
padding-right: 10px;
border: 0px;
color: #0066cc;
vertical-align: middle;
text-align: center;
}#footer li a:link, #navi a:visited
{
text-decoration: none;
color: #0066cc;
}#footer li a:hover
{
color: #FFFFFF;
}Und im Body steht:
<body>
<div id="layoutrahmen">
<div id="headlogo1">Headlogo</div>
<div id="headline">Headline</div>
<div id="headbanner1">Headbanner</div>
<div id="navi">Navi</div>
<div id="content">Content</div>
<div id="footer">
<ul>
<li><a href="seite1.htm">Seite1</a></li>
<li><a href="seite2.htm">Seite2</a></li>
<li><a href="seite3.htm">Seite3</a></li>
</ul>
</div>
</div>
</body></html>
Woran liegt es wohl, dass der Footer jetzt nach unten rutscht und nicht mehr über der weißen Randlinie sitzt, sondern drin?
Danke schon im voraus ganz herzlich für die Hilfe!
Liebe Grüße
Elke-
Hallo Elke,
Elemente mit der Eigenschaft "float" sind auch aus dem normalen Elementfluß herausgenommen, ihr Inhalt dehnt die umgebende Box daher nicht aus.
Hat das Elternelement aber selbst die Eigenschaft "float" oder "position:absolute" oder "display:inline-block" oder einen von "visible" abweichenden Wert der Eigenschaft "overflow", bildet es einen "Block formatting context" und wird vom Inhalt der gefloateten Box ausgedehnt.
Vielleicht möchtest du den <li> statt des "float" die Eigenschaft "display:inline" zuweisen.
Grüße, patrick
-
Hallo Patrick,
vielen Dank für Deine Hilfestellung!
Vielleicht möchtest du den <li> statt des "float" die
Eigenschaft "display:inline" zuweisen.Habe das "float:right" ersetzt durch "display:inline", aber das bringt leider nicht das gewünschte Ergebnis. Der Footer sitzt zwar wieder schön oberhalb des weißen Randes des Layoutrahmens, aber mittig also zentriert und nicht rechtsbündig. Die Links sollen aber wieder am rechten Rand sitzen.
Hast Du noch einen Tipp für mich?
Danke nochmals und einen schönen Sonntag!
Elke-
Hallo.
Habe das "float:right" ersetzt durch "display:inline", aber das bringt leider nicht das gewünschte Ergebnis. Der Footer sitzt zwar wieder schön oberhalb des weißen Randes des Layoutrahmens, aber mittig also zentriert und nicht rechtsbündig. Die Links sollen aber wieder am rechten Rand sitzen.
Dann solltest du ihnen entsprechende Eigenschaften zuweisen. Wenn du weißt, wie du deine Inhalte zentriert hast, sollte es dir leicht fallen, das für bestimmte Elemente wieder zu ändern.
MfG, at-
Hallo,
es fällt mir leider nicht leicht, sonst hätte ich doch nicht um Unterstützung angefragt :-(
Ist keine Faulheit! (Ich lese das zwischen Deinen Zeilen.)Ich habe es mit text-align:right versucht und das bringt nichts, es bleibt zentriert.
Mag mir jemand helfen?
Würde mich sehr freuen. Fange wirklich gerade bei Null an und da ist erst mal alles sehr verwirrend.Liebe Grüße
Elke-
Hallo.
Ist keine Faulheit! (Ich lese das zwischen Deinen Zeilen.)
Lies besser nur zwischen den Zwischenräumen.
Ich habe es mit text-align:right versucht und das bringt nichts, es bleibt zentriert.
Ein kleiner Tipp: Gib den Elementen unterschiedliche Hintergrundfarben. Dann siehst du nämlich, wie breit sie sind und ob eine Ausrichtung mittels
text-alignüberhaupt zum gewünschten Ergebnis führen kann. Vielleicht benötigt das jeweilige Element ja erst eine entsprechende Breite oder will über seinen Außenabstand ausgerichtet werden.
MfG, at-
Hallo,
ok, ich lasse es mal, komme einfach nicht weiter, hänge da schon mehrere Tage und Nächte dran. Mag sein, dass ich ein Brett vor dem Kopf habe, ich finde die Lösung nicht.
Falls mir doch noch jemand zur Lösung helfen möchte, freue ich mich sehr, ansonsten sage ich
tschüß
Liebe Grüße
Elke-
Hallo.
Mag sein, dass ich ein Brett vor dem Kopf habe, ich finde die Lösung nicht.
Was hast du versucht? Hast du die bisherigen Ratschläge befolgt? Was ist der aktuelle Stand? Kannst du ein Beispiel online stellen? Hellsehen kann hier kaum jemand.
Falls mir doch noch jemand zur Lösung helfen möchte, freue ich mich sehr, ansonsten sage ich
tschüß
Ich habe in deinen alten Code dem Selektor
#footer lidie folgende Eigenschaft hinzugefügt:margin-top: -1em;
Auf Dauer wird das aber keine Lösung sein, denn dein Code sieht schon recht kompliziert aus für ein so simples Ergebnis.
Befasse dich also mit den Grundlagen und Abhängigkieten, nimm die Ratschläge bitte ernst, die dir hier gegeben werden, und liefere Ergebnisse in Form von Code oder noch besser online. Nicht um uns einen Gefallen zu tun, sondern aus purem Eigennutz. Denn fertigen Code wirst du hier höchst selten auf dem Silbertablett serviert bekommen. Und das hat nichts mit Boshaftigkeit zu tun, sondern entspricht einfach nicht dem Ansatz von Self.
MfG, at-
Hallo,
kann nur den Code posten, ist ja meine 1. Internetseite und die habe ich momantan nur lokal. Habe alle Tipps umgesetzt. Durch die Farbzuteilung (Background) zeigte sich nur, dass der Footer die richtige Breite und Höhe hat. Seit "display: inline;" bei "#footer li" sind die Links zentriert und ich bekomme sie nicht rechtsbündig. text-align:right bringt an keiner möglichen Stelle etwas.
»» Ich habe in deinen alten Code dem Selektor
#footer lidie folgende Eigenschaft hinzugefügt:margin-top: -1em;Ich war schon einen Schritt weiter. Die Höhenposition des Footers stimmt ja jetzt! Siehe Ratschlag hier Es geht nur noch darum, dass ich seither die Links im Footer nicht mehr rechtsbündig bekomme.
Der aktuelle Code:
#layoutrahmen {
border: 8px solid white;
left: 50%;
width: 858px;
margin: 15px auto;
}body {
background-color: #CCCCCC;
font-family: Verdana, Arial, Helevtica, sans-serif;
}#footer
{
margin: 4px;
padding: 0px;
clear: both;
background-color:green;
}#footer ul
{
margin: 0px;
padding: 0px;
width: 858px;
list-style-type: none;
}#footer li
{
list-style-type: none;
display: inline;
margin: 0px;
padding: 0px;
border: 0px;
text-align: right;
}#footer li a
{
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
display: inline;
line-height: 15px;
width: 0px;
margin: 0px;
padding-right: 10px;
border: 0px;
color: #0066cc;
vertical-align: middle;
text-align: right;
}#footer li a:link, #navi a:visited
{
text-decoration: none;
color: #0066cc;
}#footer li a:hover
{
color: #FFFFFF;
}
------------------------------------------
<body>
<div id="layoutrahmen">
<div id="headlogo1">Headlogo</div>
<div id="headline">Headline</div>
<div id="headbanner1">Headbanner</div>
<div id="navi">Navi</div>
<div id="content">Content</div>
<div id="footer">
<ul>
<li><a href="seite1.htm">Seite1</a></li>
<li><a href="seite2.htm">Seite2</a></li>
<li><a href="seite3.htm">Seite3</a></li>
</ul>
</div>
</div>
</body>....denn dein Code sieht schon recht kompliziert aus für ein so simples Ergebnis.
Was meinst Du mit "recht kompliziert"? Warum? Welche Teile?
Elke
-
Hallo.
kann nur den Code posten, ist ja meine 1. Internetseite und die habe ich momantan nur lokal.
Das solltest du ändern, denn damit machst du es allen leichter.
Habe alle Tipps umgesetzt. Durch die Farbzuteilung (Background) zeigte sich nur, dass der Footer die richtige Breite und Höhe hat.
Dann haben sich dir zwei Möglichkeiten eröffnet:
1. Man sagt einfach:Habe alle Tipps umgesetzt. Durch die Farbzuteilung (Background) zeigte sich nur, dass der Footer die richtige Breite und Höhe hat.
2. Man liest noch einmal:
Gib den Elementen unterschiedliche Hintergrundfarben.
Dann erkennt man hoffentlich, dass man nicht nur ein Element einfärben sollte, sondern alle beteiligten. Das hilft wirklich.
Seit "display: inline;" bei "#footer li" sind die Links zentriert und ich bekomme sie nicht rechtsbündig. text-align:right bringt an keiner möglichen Stelle etwas.
Das ist falsch, siehe unten.
»» Ich habe in deinen alten Code dem Selektor
#footer lidie folgende Eigenschaft hinzugefügt:margin-top: -1em;Ich war schon einen Schritt weiter. Die Höhenposition des Footers stimmt ja jetzt! Siehe Ratschlag hier Es geht nur noch darum, dass ich seither die Links im Footer nicht mehr rechtsbündig bekomme.
Das ändert nichts daran, dass du mit meinem Ratschlag auch deinen älteren Code wie gewünscht hättest aussehen lassen können.
Das geht aber natürlich auch mit dem aktuellen:#footer ul
{
margin: 0px;
padding: 0px;
width: 858px;
list-style-type: none;text-align: right;}
#footer li
{
list-style-type: none;
display: inline;
margin: 0px;
padding: 0px;
border: 0px;
text-align: right;background-color: red;}
Ich hoffe, das hilft dir weiter.
....denn dein Code sieht schon recht kompliziert aus für ein so simples Ergebnis.
Was meinst Du mit "recht kompliziert"? Warum? Welche Teile?Zum Beispiel ist bislang keines der
<div>-Elemente notwendig. Gleiches gilt für viele Angaben in deinem CSS.
MfG, at-
Hallo at,
danke erst mal für Deine Geduld.
kann nur den Code posten, ist ja meine 1. Internetseite und die habe ich momantan nur lokal.
Das solltest du ändern, denn damit machst du es allen leichter.
Ich werde mich da umgehend mal drum kümmern. Sehe ich schon ein, dass es mit einem Link zur Seite besser wäre!
- Man liest noch einmal:
Gib den Elementen unterschiedliche Hintergrundfarben.
Dann erkennt man hoffentlich, dass man nicht nur ein Element einfärben
sollte, sondern alle beteiligten. Das hilft wirklich.Habe jetzt durch das ROT bei "#footer li" gesehen, dass dann der rote Bereich auf der rechten Seite den weißen 8px-Rand überschneidet, links ist dafür ein Abstand. Wenn ich nur #footer mit grünem Hintergrund kenntlich mache, geht nichts über den rechten weißen Rand. (Warum nicht auch der grüne Bereich??) Aber man sieht, dass der Footer (grün) anscheinend nicht breit genug ist, obwohl auch 858px bleibt ein minimaler Abstand zum Layoutrahmenrand. Ohjeeee.....
Das fällt zwar nicht auf, wenn alles dieselbe Hintergrundfarbe hat. Ist es trotzdem kritisch?#footer ul
{
margin: 0px;
padding: 0px;
width: 858px;
list-style-type: none;text-align: right;Stimmt! Jetzt gehen die Links an den rechten Rand.
Was aber hat dann "text-align: right;" für eine Auswirkung, wenn es bei
#footer oder #footer li steht??
Ich erkenne (noch) keine.Ich hoffe, das hilft dir weiter.
Ja, das hat es auf jeden Fall.
Und das alles, weil ich bei #layoutrahmen anstatt "position:absolute" nun "margin: 15px auto;" habe. Das eine Problem (fehlender Außenrand unten) ist gelöst, dafür ein anderes entstanden. So ganz steige ich da mit diesen Abhängigkeiten noch nicht durch. :-(Lese zwar dauernd, nicht nur selfhtml, sondern auch ccs4you und ca. ein Dutzend anderer CSS-Seiten, auch Little boxes, aber als Anfänger raucht einem da ganz schön der Kopf. Manches ist einfach super, wenn einem "ein Mensch" in ganz schlichten Worten nachhilft ;-)
....denn dein Code sieht schon recht kompliziert aus für ein so simples Ergebnis.
Was meinst Du mit "recht kompliziert"? Warum? Welche Teile?Zum Beispiel ist bislang keines der
<div>-Elemente notwendig. Gleiches gilt für viele Angaben in deinem CSS.Die div-Elemente sollten das Grundgerüst darstellen, in das dann Navi und Content-Text eingefügt werden sollen. Habe ich aus Peter Müllers "Little Boxes": Die Webseite mit div in Bereiche einteilen.
Ist das wohl nicht gut?Nochmals herzlichen Dank.
Elke-
Hallo.
danke erst mal für Deine Geduld.
Danke, dass du sie zu schätzen weißt.
Habe jetzt durch das ROT bei "#footer li" gesehen, dass dann der rote Bereich auf der rechten Seite den weißen 8px-Rand überschneidet, links ist dafür ein Abstand. Wenn ich nur #footer mit grünem Hintergrund kenntlich mache, geht nichts über den rechten weißen Rand. (Warum nicht auch der grüne Bereich??) Aber man sieht, dass der Footer (grün) anscheinend nicht breit genug ist, obwohl auch 858px bleibt ein minimaler Abstand zum Layoutrahmenrand. Ohjeeee.....
Das fällt zwar nicht auf, wenn alles dieselbe Hintergrundfarbe hat.Deshalb hatte ich ja dazu geraten.
Ist es trotzdem kritisch?
Kritisch kann es irgendwann werden, wenn anfängliche Fehler das Weiterkommen erschweren. Natürlich ist es also besser, von Anfang an möglichst sauber zu arbeiten. Aber das ist gerade für Anfänger, die aus sehr vielen unterschiedlichen Richtungen Ratschläge annehmen, ohne diese bereits bewerten zu können, sicher nicht einfach.
Deine Frage kannst du dir also nur selbst beantworten. Wenn die Verweise auch später keine Hintergrundfarbe, kein Hintergrundbild und keinen Rahmen bekommen sollen, funktioniert deine Lösung ja hinreichend gut. Wenn du die Verweise später noch aufwendiger gestalten möchtest, wird dir dein bisheriger Code hingegen vermutlich auf die Füße fallen.Was aber hat dann "text-align: right;" für eine Auswirkung, wenn es bei
#footer oder #footer li steht??
Ich erkenne (noch) keine.Da ist auch nichts zu erkennen.
#footer ulist ein Blockelement, nimmt also ohnehin die gesamte Breite von#footerein. -- Dass du#footer ulexplizit eine feste Breite gegeben hast, können wir dabei sogar vernachlässigen. -- Und wenn etwas genau so breit ist wie sein Container, kann man es darin nicht verschieben.#footer lihingegen hast du die Eigenschaftdisplay: inline;zugewiesen, weshalb die Listenpunkte nur so breit sind wie ihr jeweiliger Inhalt. Daher lässt auch dieser sich nicht in seinen jeweiligen Containern, den Listenpunkten selbst, ausrichten.Und das alles, weil ich bei #layoutrahmen anstatt "position:absolute" nun "margin: 15px auto;" habe. Das eine Problem (fehlender Außenrand unten) ist gelöst, dafür ein anderes entstanden. So ganz steige ich da mit diesen Abhängigkeiten noch nicht durch. :-(
Das ist auch nicht ganz einfach.
position: absolute;ist wirklich nur etwas für Fortgeschrittene. Aber dein eigentliches Problem ist, dass du viel zu viele Elemente hast und ihnen viel zu viele Eigenschaften zuweist. Da verwundert es kaum, wenn du die Abhängigkeiten nicht verstehst.Lese zwar dauernd, nicht nur selfhtml, sondern auch ccs4you und ca. ein Dutzend anderer CSS-Seiten, auch Little boxes, aber als Anfänger raucht einem da ganz schön der Kopf. Manches ist einfach super, wenn einem "ein Mensch" in ganz schlichten Worten nachhilft ;-)
Ich versuche das hier mal. Und in Anbetracht der Zahl von Neulingen, bei denen das in diesem Forum bereits gelungen ist, bin ich da auch ganz optimistisch.
Die div-Elemente sollten das Grundgerüst darstellen, in das dann Navi und Content-Text eingefügt werden sollen. Habe ich aus Peter Müllers "Little Boxes": Die Webseite mit div in Bereiche einteilen.
Ist das wohl nicht gut?Für wirklich komplexe Projekte wird das unerlässlich sein, aber für jemanden, der gerade die Grundlagen erlernt, ist diese Herangehensweise alles andere als hilfreich. Weshalb? Nun, du hast doch schon einige "Boxes", seien sie nun "Little" oder "Big":
<html>ist eine Box,<body>ist eine Box,<ul>ist eine Box. Weiter oben hatten wir ja auch schon festgestellt, dass beispielsweise deine Liste exakt die gleiche Fläche einnimmt wie das sie umgebende<div>-Element.
Außerdem solltest du sinnvolle Elemente einsetzen, wo es nur geht. Kompliziert und widersinnig wird es schon noch früh genug werden. Mache es dir also möglichst einfach.
Wie so etwas aussehen könnte, kannst du dir ja vielleicht mal ansehen.
MfG, at-
Hallo at,
Deine Kommentare haben mir wirklich einiges klar gemacht!!
Ich habe auch Detlef geschrieben, der ja mit Dir voll auf einer Linie liegt, dass ich mir heute Abend Deinen und auch den Beitrag von Detlef ausgedruckt habe und alles Schritt für Schritt durchgegangen bin, habe alles direkt umgesetzt und die einzelnen Schritte und Varianten ausprobiert. Du hättest mal sehen sollen, WIE hell es im Zimmer geworden ist ;-) von den vielen Lichtern, die mir aufgegangen sind.Über den Link zu Deinem Vorschlag mit der gekürzten Code-Fassung habe ich mich richtig gefreut! Es hat mir erst mal so sichtbar klar gemacht, wie ich mich doch verzettelt hatte.
Aber dein eigentliches Problem ist, dass du viel zu viele Elemente
hast und ihnen viel zu viele Eigenschaften zuweist. Da verwundert es
kaum, wenn du die Abhängigkeiten nicht verstehst.Wie gut, dass ich gleich zu Beginn guten Rat bekommen habe.
Nun bin ich total kaputt, mir brummt der Kopf, aber doch glücklich, weil es 1. mit dem Layoutrahmen klappt und 2. ich enorm Wichtiges dazugelernt habe. Und schon ist man wieder motiviert weiter zu lernen, wo man am Nachmittag soweit war, alles aufzugeben :-)
Möchte Dir ganz herzlich danken, dass Du Dir so viel Zeit für mich genommen hast! Es hat mir wirklich viel gebracht.
Liebe Grüße
Elke-
Hallo.
Möchte Dir ganz herzlich danken, dass Du Dir so viel Zeit für mich genommen hast! Es hat mir wirklich viel gebracht.
Das freut mich sehr. Ich wünsche dir weiterhin viel Erfolg und Freude beim Lernen. Und wo du Hilfe bekommst, weißt du ja jetzt auch.
MfG, at
-
-
-
Hallo Elke,
eher konnte ich nicht antworten, weil ich ein paar Tage nicht zu Hause und internetfrei war.
Das solltest du ändern, denn damit machst du es allen leichter.
Ich werde mich da umgehend mal drum kümmern. Sehe ich schon ein, dass es mit einem Link zur Seite besser wäre!
Was hast du denn mit deiner 1. Internetseite vor?
Soll sie immer lokal bleiben, oder hast du irgendwo Webspace, wo du sie später veröffentlichen willst?
Wenn ja, dann kannst du dort einen Demoordner einrichten, wenn nein, wäre es auch leicht möglich, dir welchen zu besorgen. Ein kostenfreier Anbieter dürfte zum Hochladen von Beispielen auf jeden Fall reichen.
(Als ich damals meine Domain registriert hatte, legte ich dort praktisch als erstes einen Ordner /demos/ an, in dem ich dann meine eigenen Entwürfe und auch Beispiele für dieses Forum ablegte.)Habe jetzt durch das ROT bei "#footer li" gesehen, dass dann der rote Bereich auf der rechten Seite den weißen 8px-Rand überschneidet, links ist dafür ein Abstand. Wenn ich nur #footer mit grünem Hintergrund kenntlich mache, geht nichts über den rechten weißen Rand. (Warum nicht auch der grüne Bereich??)
Dein CSS:
#footer { margin: 4px; padding: 0px; clear: both; background-color:green; }Mit margin: 4px; legst du rundherum 4px Abstand fest. Da du sinnvollerweise nicht extra eine Breite angegeben hast, nimmt er dann genau den Platz ein, der noch zur Verfügung steht und zeigt dir diesen mit grünem Hintergrund an.
#footer ul { margin: 0px; padding: 0px; width: 858px; list-style-type: none; }Hier legst du plötzlich wieder eine Breite fest und zwar die gesamte Breite von #layoutrahmen. Dadurch ist die ul dann 8px breiter als #footer und ragt dann natürlich ein Stück nach rechts über.
Stimmt! Jetzt gehen die Links an den rechten Rand.
Was aber hat dann "text-align: right;" für eine Auswirkung, wenn es bei
#footer oder #footer li steht??
Ich erkenne (noch) keine.text-align: right; musst du immer dem Element geben, in dem etwas ausgerichtet werden soll.
Du willst ja nicht den Text in den Listenpunkten ausrichten, die genau so breit sind, dass er hineinpasst. Du willst ja die Listenpunkte rechtsbündig in der ul ausrichten, also braucht diese (oder eins ihrer Vorfahrenelemente) das text-align: right;.Die div-Elemente sollten das Grundgerüst darstellen, in das dann Navi und Content-Text eingefügt werden sollen. Habe ich aus Peter Müllers "Little Boxes": Die Webseite mit div in Bereiche einteilen.
Ist das wohl nicht gut?Damit passiert es dir leicht, dass du viele unnötige Elemente (Div) hast, oder dass du gar keine sinnvollen Elemente mehr verwendest, weil ja alles mittels Divs auch funktioniert. Übrigens, gut ist, dass du eine Liste für die Footernavigation verwendet hast.
Lies dazu mal meine Herangehensweise und nochmal meine Herangehensweise.
Wie genau dein Quelltext sinnvollerweise noch aufgeräumt werden könnte, können wir so nicht sagen, weil wir nicht wissen, welche Inhalte die einzelnen Bereiche aufnehmen sollen.
Trotzdem ein paar Beispiele:<div id="layoutrahmen">
könnte wohl entfallen, weil du auch body selbst diese Eigenschaften geben könntest, und dafür die, die jetzt body hat html.<div id="headlogo1">Headlogo</div> <div id="headline">Headline</div> <div id="headbanner1">Headbanner</div>Vielleicht wäre hier etwas in der Art passender:
<div id="head"> <img src="headloge.png" alt="Logo..."> <h1>Seitenüberschrift</h1> <img src="headbanner.png" alt="Banner..."> </div><div id="navi">Navi</div>
Was wird das für eine Navigation? Auch eine Liste?
Dann s. eins weiter.<div id="footer"> <ul> <li><a href="seite1.htm">Seite1</a></li> <li><a href="seite2.htm">Seite2</a></li> <li><a href="seite3.htm">Seite3</a></li> </ul> </div>Wenn der Footer nur die Liste enthalten soll und keine weiteren Elemente, dann kann das Div weggelassen werden. Die Liste allein würde vollkommen reichen, die Eigenschaften, die #footer hat, kann auch gleich die ul bekommen.
<ul id="footer"> <li><a href="seite1.htm">Seite1</a></li> <li><a href="seite2.htm">Seite2</a></li> <li><a href="seite3.htm">Seite3</a></li> </ul>Natürlich müssten dann die CSS-Regeln auch entsprechend geändert werden.
#footer { margin: 4px; padding: 0px; clear: both; background-color:green; list-style-type: none; text-align: right; }Auf Wiederlesen
Detlef--
- Wissen ist gut
- Können ist besser
- aber das Beste und Interessanteste ist der Weg dahin!-
Hallo.
eher konnte ich nicht antworten, weil ich ein paar Tage nicht zu Hause und internetfrei war.
Diesen Abend hättest du dir gern auch noch frei nehmen dürfen. Aber andererseits fühle ich mich jetzt in meinen Ausführungen bestärkt.
MfG, at -
Hallo Detlef,
eher konnte ich nicht antworten, weil ich ein paar Tage nicht zu
Hause und internetfrei war.Das ist richtig nett, dass Du Dir trotzdem heute Abend noch die Zeit genommen hast!! Vielen Dank!
Die Internetseite soll (Fernziel) schon ins Internet, im Moment möchte ich aber erst mal einiges lernen, HTML/CSS für den Anfang. Das mit einem kostenlosen Webspace für die Testseiten ist eine gute Idee, da werde ich mich morgen gleich mal kümmern.
Hier legst du plötzlich wieder eine Breite fest und zwar die gesamte
Breite von #layoutrahmen. Dadurch ist die ul dann 8px breiter als
#footer und ragt dann natürlich ein Stück nach rechts über.Manchmal könnte ich mir wirklich die Haare rupfen, ich vergesse immer wieder, dass ich die Abstände dazu addieren muss! Bin schon dabei, es mir einzuhämmern. Klar, dass der Bereich dann darüber hinaus ragt.
Deine Kommentare sind wirklich sehr, sehr hilfreich und gut verständlich. Da freut sich der Anfänger!! :-)
Ich habe mir heute Abend Deinen und auch den Beitrag von at ausgedruckt und bin alles Schritt für Schritt durchgegangen, habe alles direkt umgesetzt und die einzelnen Schritte und Varianten ausprobiert. Du hättest mal sehen sollen, WIE hell es im Zimmer geworden ist ;-) von den vielen Lichtern, die mir aufgegangen sind.
Danke Dir auch für die Links zu "Deiner Herangehensweise". Das hat mir auch noch weiter geholfen.
Deine gekürzte Code-Fassung (und at hatte es ja vergleichbar gemacht) hat mir erst so richtig klar gemacht, wie ich mich doch verzettelt hatte. Wie gut, dass ich gleich zu Beginn Euren guten Rat bekommen habe.
Nun bin ich total kaputt, aber doch glücklich, weil es 1. mit dem Layoutrahmen klappt und 2. ich enorm Wichtiges dazugelernt habe.
Ich sage ganz herzlich Danke für Deine tolle Hilfe!!
Liebe Grüße
Elke-
Hallo Elke
…, ich vergesse immer wieder, dass ich die Abstände dazu addieren muss! Bin schon dabei, es mir einzuhämmern.
Dann hämmere nicht zu sehr. ;-)
Besser ist es, Breiten und Höhen nur dort anzugeben, wo sie auch wirklich nötig sind. Bei deinem Footer ist das nicht der Fall.
Blockelemente nehmen standardmäßig genau die Breite ein, die ihnen ihr Elternelement Platz bietet. Ohne Breitenangabe passt es dann auch ohne Rechnerei genau. Wenn man aus irgendwelchen Gründen die Breite eines Elements ändert, passen die darin enthaltenen Elemente dann auch ganz von selbst.Ich sage ganz herzlich Danke für Deine tolle Hilfe!!
Den Dank möchte ich zurückgeben, es ist schön und motivierend, eine Rückmeldung zu erhalten, dass die Antworten hilfreich waren.
Auf Wiederlesen
Detlef--
- Wissen ist gut
- Können ist besser
- aber das Beste und Interessanteste ist der Weg dahin!
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-