XHTMLforum

XHTMLforum (http://xhtmlforum.de/index.php)
-   CSS (http://xhtmlforum.de/forumdisplay.php?f=73)
-   -   bilder in div container unten anordnen (http://xhtmlforum.de/showthread.php?t=41915)

diegaby 15.09.2006 11:07

bilder in div container unten anordnen
 
Hallo,

bin CSS-Anfänger und bereits an einem Problem gescheitert. Vielleicht könnt Ihr mir weiterhelfen:

ich habe 3 divs angeordnet: Links das höchste (container1), recht daneben untereinander zwei kleinere (container 2 und Bildercontainer). Der Inhalt des bilderdivs soll am unteren Rand des divs angeordnet werden - geht das? Mit vertical-align:bottom komme ich leider nicht weiter.

Ich habe folgenden css-code verwendet:

Code:

#container1{
        width:200px;
        height:402px;
        float:left;
        border: 1px solid #000000;
}


#container2{
        width:200px;
        height:300px;
        border: 1px solid #ff0000;
}


#bilder{
        width:200px;
        height:100px;
        text-align:left;
        vertical-align:bottom;
        border: 1px solid #000000;
}

#bilder img{
        margin:0px 5px 0px 0px;
}


//--></style>


Leider hängen die Bilder immer noch am oberen Ende des containers.
Das Ergebnis kann man sich ansehen unter:
http://www.dashandelskontor.de/test.html

Gibt es Möglichkeiten, die Bilder auch unten anzuordnen? Die Höhe des Bildercontainers kann ich leider nicht generell verkleinern und auf das höchste Bild anpassen, da sich die Bilder und somit auch die Höhen immer wieder ändern und die Bilder nach dem unteren Rand des container1 ausgerichtet sein müssen ...

Danke schon mal im voraus
Gaby

Lloyd Larkin 15.09.2006 13:10

Als erstes fällt mir natürlich die absolute Positionierung ein:
Code:


#bilder {
  position: relative;
}
 
img {
  position: absolute;
  bottom: 0;
}

Grüsse
lloyd

diegaby 15.09.2006 14:30

hally lloyd,

das klappt leider nicht. Die Bilder stehen nun zwar unten, aber es sieht so aus als ob dann alle 3 Bilder übereinander angeordnet werden ...

siehe http://http://www.dashandelskontor.de/test2.html

was könnte man denn da noch machen?

mazzo 15.09.2006 14:49

Du hast alle IMG gleich behandelt und absolut an dieselbe Stelle gesetzt. Mindestens die horizontale Position sollte für jedes Bild anders sein. Abstände werden nicht greifen wenn diese absolut positioniert sind.

PS: Der link enthält zweimal http//

imho 11.11.2008 11:31

Zitat:

Zitat von mazzo (Beitrag 307815)
Du hast alle IMG gleich behandelt und absolut an dieselbe Stelle gesetzt. Mindestens die horizontale Position sollte für jedes Bild anders sein. Abstände werden nicht greifen wenn diese absolut positioniert sind.

alter thread, neue frage. wo soll ich die individuelle horizontale position der einzelnen img's definieren?

greetz imho

imho 11.11.2008 12:23

*schiiiiieb*

andir 11.11.2008 12:26

Gib den Bildern jeweils eine eigene id bzw. Klasse.

Code:

img#name {
left: 100px;
}

dann kannst du jeder id einen eigenen horizontalen Wert zuweisen.

Wie das mit den Selektoren ( id ist ein Selektor) geht, kannst Du unter anderem hier nachlesen:

CSS 4 You - The Finest in Stylesheets: Workshop CSS: Teil 3 - Selektoren I

Es gäbe noch andere Möglichkeiten, aber in diesem Fall ist die Wahl eines Klassen- oder ID-Selektors wohl ausreichend.

imho 14.11.2008 10:07

das habe ich angewandt, aber irgendwie klappt es nicht. ich weiß nicht, wo mein fehler liegt?!

Code:

#bilder {
  position: relative;
}
 
img {
        position: absolute;
        bottom: 0;
        right: 0;
        background-color: #ADADAD;
}

das ist die normale definition, womit alle images im dokument rechts sind.

Code:

#bilder {
  position: relative;
}
 
img#name {
        position: absolute;
        bottom: 0;
        right: 0;
        background-color: #ADADAD;
}

und so wäre es dann richtig, wenn ich die bilder einzeln definieren möchte? individueller name natürlich dabei.

ich möchte lediglich ein bild rechts unten haben, der rest soll dort stehen wo ich ihn auch hinsetze im html-code

andir 14.11.2008 10:45

Dann reicht es, genau diesem einen Bild das pos. absolute mitzugeben.
Für alle anderen Bilder verwende die üblichen Angaben.

imho 14.11.2008 10:50

jetzt hab ich glaub ich den sinn komplett falsch verstanden. ich probiere es mal weiter und lese mich durch css4you und co


Alle Zeitangaben in WEZ +2. Es ist jetzt 03:18 Uhr.

Powered by vBulletin® Version 3.8.11 (Deutsch)
Copyright ©2000 - 2020, vBulletin Solutions, Inc.

© Dirk H. 2003 - 2020