zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden bilder in div container unten anordnen

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 15.09.2006, 11:07
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 27.04.2006
Beiträge: 17
diegaby befindet sich auf einem aufstrebenden Ast
Standard 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
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 15.09.2006, 13:10
Benutzerbild von Lloyd Larkin
Don Quijote
XHTMLforum-Mitglied
 
Registriert seit: 19.11.2005
Ort: Wien
Beiträge: 733
Lloyd Larkin befindet sich auf einem aufstrebenden Ast
Standard

Als erstes fällt mir natürlich die absolute Positionierung ein:
Code:
 
#bilder {
   position: relative;
}
 
img {
   position: absolute;
   bottom: 0;
}
Grüsse
lloyd
__________________
The only thing to do with good advice is pass it on. It is never any use to oneself. - Oscar Wilde -
#me { position: absolute; }
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 15.09.2006, 14:30
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 27.04.2006
Beiträge: 17
diegaby befindet sich auf einem aufstrebenden Ast
Standard

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?
Mit Zitat antworten
  #4 (permalink)  
Alt 15.09.2006, 14:49
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 11.01.2005
Ort: Berlin
Beiträge: 2.152
mazzo wird schon bald berühmt werden
Standard

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//
Mit Zitat antworten
  #5 (permalink)  
Alt 11.11.2008, 11:31
Benutzerbild von imho
Benutzer
neuer user
 
Registriert seit: 11.11.2008
Beiträge: 49
imho befindet sich auf einem aufstrebenden Ast
Standard

Zitat:
Zitat von mazzo Beitrag anzeigen
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
Mit Zitat antworten
  #6 (permalink)  
Alt 11.11.2008, 12:23
Benutzerbild von imho
Benutzer
neuer user
 
Registriert seit: 11.11.2008
Beiträge: 49
imho befindet sich auf einem aufstrebenden Ast
Standard

*schiiiiieb*
Mit Zitat antworten
  #7 (permalink)  
Alt 11.11.2008, 12:26
{ display: random;}
XHTMLforum-Kenner
 
Registriert seit: 08.09.2004
Ort: Stuttgart
Beiträge: 5.039
andir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblick
Standard

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.
__________________
Grüsse Andreas- auch mal wieder da...

Design isn't about the tools, it's about creating the best experience for the user. A design should be based on usability, accesibility, aesthetics, but never on floats, lists or background images. ( by Cameron Adams)
Wiedergelesen: > hier und hier

[Foren-Links] Dein Post? Klar, DAS vorher gelesen? Hilft. ## User-Landkarte
Mit Zitat antworten
  #8 (permalink)  
Alt 14.11.2008, 10:07
Benutzerbild von imho
Benutzer
neuer user
 
Registriert seit: 11.11.2008
Beiträge: 49
imho befindet sich auf einem aufstrebenden Ast
Standard

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
__________________
wissen ist gut
können ist besser
aber das interessante ist der weg dorthin.
Mit Zitat antworten
  #9 (permalink)  
Alt 14.11.2008, 10:45
{ display: random;}
XHTMLforum-Kenner
 
Registriert seit: 08.09.2004
Ort: Stuttgart
Beiträge: 5.039
andir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblick
Standard

Dann reicht es, genau diesem einen Bild das pos. absolute mitzugeben.
Für alle anderen Bilder verwende die üblichen Angaben.
__________________
Grüsse Andreas- auch mal wieder da...

Design isn't about the tools, it's about creating the best experience for the user. A design should be based on usability, accesibility, aesthetics, but never on floats, lists or background images. ( by Cameron Adams)
Wiedergelesen: > hier und hier

[Foren-Links] Dein Post? Klar, DAS vorher gelesen? Hilft. ## User-Landkarte
Mit Zitat antworten
Sponsored Links
  #10 (permalink)  
Alt 14.11.2008, 10:50
Benutzerbild von imho
Benutzer
neuer user
 
Registriert seit: 11.11.2008
Beiträge: 49
imho befindet sich auf einem aufstrebenden Ast
Standard

jetzt hab ich glaub ich den sinn komplett falsch verstanden. ich probiere es mal weiter und lese mich durch css4you und co
__________________
wissen ist gut
können ist besser
aber das interessante ist der weg dorthin.

Geändert von imho (14.11.2008 um 10:59 Uhr)
Mit Zitat antworten
Sponsored Links
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
DIV in anderem Container unten Ausrichten scripper CSS 2 30.06.2009 20:36
Linkverhalten im IE6 ChOpSueY! CSS 19 19.05.2008 22:48
joomla template entschlüsseln nieselfriem CSS 2 18.03.2008 13:12
Div mit margin spannt Div container nicht auf. donfo CSS 11 27.02.2008 11:51
Div Container aufteilen Steakfred CSS 1 26.04.2006 20:46


Alle Zeitangaben in WEZ +2. Es ist jetzt 11:24 Uhr.