Bild im Hintergrund 100%, Inhalt soll am oberen Rande des Bildes anfangen

Tripel-As

Dabei seit: 02.01.2011

Dienstag, 18. Januar 2011, 17:23

Hi,

Die Frage ist etwas schwer zu formulieren, ich versuche es mal.

Erst meine alte Variante. Folgender Quelltext steht irgendwo in meiner HTML-Datei.

Spoiler
HTML
1
2
3
4
5
...
<img id="bild" src="test.jpg" alt="test">
<div id="test">
</div>
...

Das dazugehörige CSS:

Spoiler
Cascading Style Sheet
1
2
3
4
5
6
7
8
9
10
11
12
13
14
img#bild {
height: 30em;
width: 40em;
position: relative;
z-index: 1;
}
div#test {
height: 30em; /*wird zu auto, nur zu Testzwecken */
width: 40em;
margin-top: -30em;
position: relative;
z-index: 2;
display: block;
background-color: #fff;

Nun sollte der Div-Container über dem Bild liegen (ist jetzt nicht mein Quellcode, habe ich gerade mal so gedacht

.

Und nun die gaaaaaanz große Frage:
Ich ändere das img wie folgt (der Rest bleibt):

Spoiler
Cascading Style Sheet
1
2
3
img#bild {
width: 100%;
height: auto;

Jetzt passt sich das img der Breite an, doch wie gelingt es mir nun das div genau an die obere Kante des img zu setzen?
Wenn jemand nen anderen Lösungvorschlag hat, bin ich gerne offen.

HINWEIS: Ich möchte dieses Problem nicht über JS (Stichwort offSetHeight) lösen.

Gruß, Toast

Vulpire GbR - Marketingagentur in Köln und Dülmen

jperl

Super Moderator

Dabei seit: 09.04.2003

Beiträge: 3 453

Mittwoch, 19. Januar 2011, 13:38

naja bevor css3 kommt wird das wohl eher nichts sauberes werden.

siehe diese webseite:
http://ringvemedia.com/

und die erklärung dazu:
http://www.drweb.de/magazin/hintergrundb…-css-skalieren/

jperl

Konfuzius [chinesischer Philosoph (551 - 479 v. Chr.)]
Das Entscheidende am Wissen ist, daß man es beherzigt und anwendet.

cccpmik

Foren Gott

Dabei seit: 04.09.2007

Beiträge: 2 999

Mittwoch, 19. Januar 2011, 13:43

ich kann gerade überhaupt nicht folgen.. vllt mal ein screenshot damit man sehen kann was du vorhast?? eventuell <map> element anschauen

Mein kleines Projekt
-Cruel Online-

elchrz

Foren As

Dabei seit: 06.10.2010

Beiträge: 99

Mittwoch, 19. Januar 2011, 16:24

Hallo,
ich weiß nicht, ob ich genau verstanden hab, was du machen willst, aber wie wäre es denn wenn du dein Bild und das Div in einen Container packst und diesen absolut positionierst. Das Bild wird dann relativ dazu auf (0,0) gesetzt und das Div absolut auf (0,0).

Spoiler
HTML
1
2
3
4
5
6
<div id="container">
    <img id="bild" src="test.jpg" alt="test"/>
    <div id="test">
        Hallo
    </div>
</div>

und

Spoiler
Cascading Style Sheet
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
div#container{
    margin-left:50px;
    margin-top:50px;
    width:800px;
    height:auto;
    position:absolute;
    top:0px;
    left:0px;

}

img#bild {
    height: auto;
    width: 100%;
    position: relative;
    top:0px;
    left:0px;
    z-index: 1;
}

div#test {
    height: auto;
    width: 100%;
    position: absolute;
    top:0px;
    left:0px;
    z-index: 2;
    display: block;
    background-color: transparent;
}

Dann müssten das Bild und das Div doch übereinander liegen, oder irre ich?

Toast

Tripel-As

Dabei seit: 02.01.2011

Beiträge: 210

Mittwoch, 19. Januar 2011, 16:36

@elchrz:

Mmmhhh... sollte es, bin mir aber nicht ganz sicher, ob das Div im Container bleibt, wenn ich es absolut mache (wird das dann nicht auch absolut zur Seite platziert... ich weiß, SELFHTML sagt etwas anderes, ich kann mich aber dran erinnern, dass ich das schon mal versucht habe... evtl war ich dafür auch zu doof

). Ich probiere es auf jeden Fall gleich mal aus!

Gruß, Toast

Edit: Hab's gerade probiert. Im Firefox klappt es (anderes hätte mich auch verwundert). Den IE kann ich erst nachher überprüfen

Schon mal Danke soweit an alle! :thumbup:

Vulpire GbR - Marketingagentur in Köln und Dülmen

Dieser Beitrag wurde bereits 1 mal editiert, zuletzt von »Toast« (19. Januar 2011, 16:36)

elchrz

Foren As

Dabei seit: 06.10.2010

Beiträge: 99

Mittwoch, 19. Januar 2011, 16:57

Hallo,
das Div bleibt im Container, schließlich setzt du es ja in die obere linke Ecke. Verwirrend ist vielleicht, dass eine absolute Position relativ zu der Position des Parent-Elements (in diesem Fall des Containers) wirkt. Der Container selbst hat <body> als Parent-Element, daher wird es absolut auf der Seite platziert.
Du kannst dem Container aber natürlich auch eine relative Position geben, falls sich der Container wiederum innerhalb einer Tabelle o.ä. befindet. Hauptsache ist, dass der Container eine position:absolute oder position:relative hat. Ohne diese Positionierung - da hast du recht - würde sich das Div absolut auf der Seite positionieren.

Toast

Tripel-As

Dabei seit: 02.01.2011

Beiträge: 210

Samstag, 22. Januar 2011, 12:51

Jo, das war mir auch erst aufgefallen

Jetzt ist mir noch nen anderes Problem aufgefallen. Da das Div absolut positioniert ist, richtet sich das Test-Div nicht nach der Höhe des absoluten Divs. Sprich, wenn ich über die größe des Bildes komme, würde eine border des Test-Divs genau durch mein absolute Div laufen.

Folglich habe ich das Bild absolut positioniert. Nur wenn jetzt das Bild "zu groß" ist, läuft die Border durch das das Bild. Kann man es nicht irgendwie hinbekommen, dass sich das Test-Div von der Höhe her sowohl an das relative, wie auch das absolute Div orientiert?

Gruß, Toast

Vulpire GbR - Marketingagentur in Köln und Dülmen

Dieser Beitrag wurde bereits 1 mal editiert, zuletzt von »Toast« (22. Januar 2011, 12:51)

Bild im Hintergrund 100%, Inhalt soll am oberen Rande des Bildes anfangen

HTML

Cascading Style Sheet

Cascading Style Sheet

HTML

Cascading Style Sheet

Ähnliche Themen