<div> wird außerhalb des Elternelements angezeigt
lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript
absolut positionieren
absolute code
ahnung
bild
blocken
code
display
element
ergebnis
fehler
header
http
korrektheit
liege
pfad
pixel
position
relative code
unterkante
url
-
Guten Abend,
mir ist gerade aufgefallen, dass der
innerhalb des<div class="pfad">
vollkommen außerhalb des Elternelementes liegt. Nämlich (bei mir FF 3.6) an der Unterkante der Seite.<div class="header">
Eigentlich müsste sich doch das
auf das Elternelement und nicht das body, bzw. html-Element beziehen.bottom: 0px;
Oder liege ich da falsch? Habe ich vielleicht einen Denkfehler?
Ich habe css- & html-Dateien bereits durch den Validator des W3C gejagt und es wurden keine Fehler gefunden.
Edit: Hatte den Link vergessen: http://biolauri.12hp.de/
Beitrag zuletzt geändert: 19.2.2011 23:33:11 von biolauri -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
-
Ich bin mir nicht ganz sicher, aber hast du es schonmal mit
probiert?position:absolute; -
Hab ich gerade geändert. Hat leider keine Veränderung gebracht.
Achja. Sry. Hab den Link vollkommen vergessen:
http://biolauri.12hp.de/
Da ist die Seite. -
Die Kombination macht es
.pfad { bottom: 0; position: relative; }
Da steht: absolut Positionieren und zwar unten.
Damit das funktioniert, mußt Du die Position des Elternelementes relativieren:
.header { height: 33%; position: relative; }
FF -
Ah, vielen Dank, fatfreddy!
Nur der Korrektheit halber:
fatfreddy schrieb:
Da steht: absolut Positionieren und zwar unten..pfad { bottom: 0; position: relative; }
Dann muss es aber
heißen, oder?position: absolute;
Eine Frage hab ich noch: Jetzt wird der Pfad nicht mehr neben dem Logo, sonder "über" dem Logo (in der z-Achse gesehen) angezeigt.
Hast du da eine Ahnung, wie man das ändern kann?
Ich hab das ganze geändert: http://biolauri.12hp.de
Das Logo ist als schwarzer Block zu sehen. -
Ich würde deine Elemente "floaten" lassen. ".header", ".menu", ".sidemenu" und ".content" mit "float:left;" ausstatten. Weiters ".header a" mit "display:block;float:left;" und ".pfad" mit "position:relative;float:left;" ausstatten. Dann steht der Pfad auch neben dem Logo. Warum ist das Logo eigentlich 2000x2000 Pixel?
-
Wie schon gesagt wurde, du positionierst das Element unten:
.pfad { bottom: 0; position: absolute; }
entfernst du das bottom: 0; hast du das gewünschte Ergebnis.
Da fällt mir auf, dass du nicht geschrieben hast, welches Ergebnis du gerne hättest ;)
Beitrag zuletzt geändert: 22.2.2011 10:46:01 von sneppa -
wagnerm schrieb: Ich würde deine Elemente "floaten" lassen. ".header", ".menu", ".sidemenu" und ".content" mit "float:left;" ausstatten. Weiters ".header a" mit "display:block;float:left;" und ".pfad" mit "position:relative;float:left;" ausstatten. Dann steht der Pfad auch neben dem Logo.
Also das floaten bringt leider nicht das gewünschte Ergebnis. Die anderen Angaben auch nicht. Der Pfad steht dann wieder ganz unten auf der Seite.
Warum ist das Logo eigentlich 2000x2000 Pixel?
Weil ich das nur schnell in paint.net gemacht hab und mir keine großen Gedanken über die Größe gemacht hab. Auf der richtigen Seite wirds dann kleiner sein.
sneppa schrieb: Wie schon gesagt wurde, du positionierst das Element unten:
.pfad { bottom: 0; position: absolute; }
entfernst du das bottom: 0; hast du das gewünschte Ergebnis.
Das Problem dann ist, dass der Pfad dann nicht mehr an der Unterkante des header-Divs ist. Mich wunder es, dass sich das bottom-Attribut nicht auf den Elter, sondern die ganze Seite bezieht.
Da fällt mir auf, dass du nicht geschrieben hast, welches Ergebnis du gerne hättest ;)
Stimmt. Mein Fehler. Ich rede nicht viel drum rum. Hier ist das Bild, wie ich es gern hätte:
http://biolauri.12hp.de/vorlage.gif
Ich hab das Bild abgeschnitten. Das wichtigste sollte drauf sein. Ich weiß, menu & sidemenu sieht nicht schön aus, aber darum gehts ja jetzt auch gar nicht! ;D
Danke für die Hilfe! -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
