|
|||
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> |
Sponsored Links |
|
|||
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. |
Sponsored Links |
|
|||
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 |
|
|||
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?
|
|
|||
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) |
|
|||
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 ...
|
Themen-Optionen | |
Ansicht | |
|
|
Ä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 |