zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden 3 Bilder Positionieren

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 12.03.2009, 11:37
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 10.03.2009
Beiträge: 32
cyberoner1 befindet sich auf einem aufstrebenden Ast
Standard 3 Bilder Positionieren

Noch ein Problem...

wie bekommt man es hin 3 Grafiken nebeneinander zu plazierern die in einem Container sind, wobei die 1. sich nach links orientiert, die 3. nach rechts und die 2. genau dazuwischen?

Habe mal ein bisschen rumgespielt und mit links und rechts ist das kein Problem nur mit der 3. in der Mitte weiß ich einfach nicht weiter.

hier der css:

Code:
#footer {
width:990px;
height:100px;
background-color:#ffffff;
margin-left:auto;
margin-right:auto;
}


.grafik1 {
float:left;
}

.grafik2 {

}
.grafik3 {
float:right;
}
HTML-Code:
<div class="grafik1"><img src="grafik1"></div>
<div class="grafik2"><img src="grafik2"></div>
<div class="grafik3"><img src="grafik3"></div>
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 12.03.2009, 12:05
EvT EvT ist offline
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 11.09.2006
Ort: Bad Wildungen
Beiträge: 2.220
EvT ist jedem bekanntEvT ist jedem bekanntEvT ist jedem bekanntEvT ist jedem bekanntEvT ist jedem bekanntEvT ist jedem bekannt
Standard

Floats beeinflussen nur nachfolgende Elemente. Deshalb muss #image 2 im Quelltext nach dem floatenden #image3 stehen: <div 1><div 3><div 2>

Nebenbei bemerkt: Um drei Grafiken nebeneinander anzuordnen ist es weder erforderlich sie in jeweils ein Div zu setzen noch sie zu floaten:
<img 1><img 2><img 3> würde schon ausreichen.
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 12.03.2009, 12:10
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 10.03.2009
Beiträge: 32
cyberoner1 befindet sich auf einem aufstrebenden Ast
Standard

das ganze mit nur einem div container zu machen habe ich schon versucht. Mein Problem war, das hier alles direkt nebeneinander war und ich nach rechts noch eine Lücke hatte.

Ziel soll es ja sein das 1. Image ganz links zu positionieren, das dritte nach ganz rechts und das 2 soll genau in der Mitte von den beiden.

linke Bild hat eine Breite von 607 Pixel.
rechte Bild hat eine Breite von 100 Pixel
Bild in der Mitte hat 120 pixel

gesamtbreite von 990px
Mit Zitat antworten
  #4 (permalink)  
Alt 12.03.2009, 12:41
EvT EvT ist offline
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 11.09.2006
Ort: Bad Wildungen
Beiträge: 2.220
EvT ist jedem bekanntEvT ist jedem bekanntEvT ist jedem bekanntEvT ist jedem bekanntEvT ist jedem bekanntEvT ist jedem bekannt
Standard

Was soll mit dem Leerraum von 167 Pixel passieren? Soll sich das mittlere Bild automatisch im Leerraum zentrieren oder kommen seitliche Margins für das mittlere Bid in Betracht?
Mit Zitat antworten
  #5 (permalink)  
Alt 12.03.2009, 12:42
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 10.03.2009
Beiträge: 32
cyberoner1 befindet sich auf einem aufstrebenden Ast
Standard

genau, das mittlere Bild soll sich zwischen den beiden Bilden zentrieren
Mit Zitat antworten
  #6 (permalink)  
Alt 12.03.2009, 12:59
EvT EvT ist offline
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 11.09.2006
Ort: Bad Wildungen
Beiträge: 2.220
EvT ist jedem bekanntEvT ist jedem bekanntEvT ist jedem bekanntEvT ist jedem bekanntEvT ist jedem bekanntEvT ist jedem bekannt
Standard

Ichao hatte eine elegante Lösung dieses Problems über text-align:justify realisiert. Wir hatten hierüber auch einen Thread, den ich leider im Moment auch über die Suchfunktion nicht finde. Da ich nicht den kompletten Code posten möchte, bleibt mir nicht anderes übrig als weiterzusuchen ... kann also dauern, falls nicht jemand zufällig den Link oder einen anderen Lösungsansatz zur Hand hat ...


edit: Ha, doch noch gefunden. Lies dir Ichaos Postings in diesem Thread durch.

Geändert von EvT (12.03.2009 um 13:03 Uhr)
Mit Zitat antworten
  #7 (permalink)  
Alt 12.03.2009, 13:29
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 10.03.2009
Beiträge: 32
cyberoner1 befindet sich auf einem aufstrebenden Ast
Standard

super hat funktioniert. im FF sieht es super aus, nur im IE mal wieder nicht... da ist mal wieder die mittlere Grafik an der linken rangeklatscht. Aber ich denke das liegt daran, weil ich hier noch keine css hacks eingebuat habe. Und das wird auch noch mal eine Herausforderung ...
Mit Zitat antworten
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
bilder genau positionieren gandalf_hh Javascript & Ajax 18 22.06.2011 15:03
Bilder richtig positionieren - wie mit CSS? RaBo CSS 2 15.07.2009 15:34
Bilder im div mit float positionieren henmey CSS 4 25.01.2009 02:53
bilder so positionieren, dass sie immer untereinander auftauchen vikingosegundo CSS 3 22.10.2008 19:11
Bilder in Div absolut Positionieren Maximus1234 CSS 7 08.06.2008 23:13


Alle Zeitangaben in WEZ +2. Es ist jetzt 09:35 Uhr.