|
|||
2 divs neben einander
ich probiere gerade gerade meine page in css um zu coden.
dabei bin ich auf das problem gestoßen ein bild neben einen text zu packen, sodass beide sich direkt neben einander befinden. ich kann dazu leider kein float:left beim bild benutzen, weil der text nicht unter dem bild weiter gehen soll, wenn er länger ist als das bild. es soll also so aussehen: http://henningpohlmeyer.he.funpic.de...n/ebenenmasken das ganze nur eben in css. ich bin schon total am verzweifeln und habe inzwischen ziemlichen müll code fabriziert. hier mein aktueller stand: http://henningpohlmeyer.he.funpic.de...p/ebenenmasken das problem was jetzt noch besteht ist, dass wenn der text länger ist als das bild sich mit dem nächsten text überschneidet. step: Code:
<div class="thumbnailcontainer"> <div class="tutdescription"> Ich möchte in diesem Tutorial diese Beiden Bilder fließend in einander übergehen lassen. </div> <div class="tutimage"> [img]images/tutorials/photoshop/ebenenmasken/bild1.gif[/img] </div> </div> css teil: Code:
div.tutimage { width:250px; margin:0; position:static; } div.tutdescription { left:250px; width:250px; padding-left:10px; text-align:left; margin:0; position:absolute; } div.thumbnailcontainer { width:500px; margin:0 auto; padding:0; clear:both; position:relative; vertical-align:middle; } |
Sponsored Links |
|
|||
ja ich hab ja 2 divs.
in dem einen ist das bild. und in dem anderen der text. das ganze ist in nem 500px breiten container. die beiden divs die drin sind sind beide 250px breit. beide haben einen margin von 0 wenn sie nun position:static haben sollten beide neben einander angezeigt werden. jedoch wird nach dem ersten divs ein zeilensprung verursacht und der 2. div wird darunter anstatt daneben angezeigt. das hat also nichts mit margin zu tun... nur woran kanns liegen? |
|
|||
Wenn du zwei Divs nebeneinander anordnen willst, brauchst du float:left und nicht position:static! static ist der Initialwert von position, und da Divs Blockelemente sind, werden sie standardmäßig untereinander angezeigt!
Allerdings weiß ich nicht, was das mit deinem Problem, das du am Anfang geschildert hast, zu tun hat... |
|
|||
weil ich den einen inneren div jetzt auf position:absolute gelegt habe.
und das bislang der einzige weg war die beiden divs neben einander zu bekommen. mit float:left im ersten divs ändert sich sonst nichts und es entsteht immernoch ein absatz nach dem ersten div. |
|
|||
Aah, jetzt kapier ich erst dein Problem. Also erstmal solltest du die absolute Positionierung rausschmeißen! Dann den beiden Divs float:left; geben und im HTML-Code austauschen, weil sonst links die Beschreibung und rechts das Bild angezeigt werden würde, weil die Beschreibung im HTML zuerst kommt.
Das würde dann ungefähr so aussehen: HTML: Code:
<div class="thumbnailcontainer"> <div class="tutimage"> [img]images/tutorials/photoshop/ebenenmasken/bild1.gif[/img] </div> <div class="tutdescription"> Ich möchte in diesem Tutorial diese Beiden Bilder fließend in einander übergehen lassen. </div> </div> Code:
div.tutimage { width:250px; margin:0; float:left; } div.tutdescription { width:240px; padding-left:10px; text-align:left; margin:0; float:left; } div.thumbnailcontainer { width:500px; margin:0 auto; padding:0; clear:both; position:relative; vertical-align:middle; } Ich hab das so nicht getestet, aber es sollte funktionieren. |
|
|||
vielen vielen dank.
jetzt gehts! ich wusste nicht das das padding da mit drauf gerechnet wird. das war mein problem. ich dachte immer das wird dann einfach abgezogen von der gesamtgröße... |
Themen-Optionen | |
Ansicht | |
|
|
Ähnliche Themen | ||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
div's mit unterschiedlichem z-index überlagern einander in falscher Reihenfolge | Phate | CSS | 4 | 15.10.2014 08:57 |
Script nur für Inhalt eines bestimmten DIVs | Kipperdesign | Javascript & Ajax | 8 | 11.02.2013 13:03 |
zwei div's in class neben einander | jagga007 | CSS | 4 | 16.07.2012 11:09 |
Divs nebeneinander, aber mittig | RomanM | CSS | 2 | 24.10.2007 06:32 |
Divs neben einander... | Mathman | CSS | 14 | 24.05.2006 08:41 |