zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden 2 divs neben einander

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 04.11.2005, 00:07
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 04.11.2005
Beiträge: 13
UnnamedProphet befindet sich auf einem aufstrebenden Ast
Standard 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;
	}
kann mir wer helfen?
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 04.11.2005, 09:26
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 23.03.2005
Beiträge: 1.033
Swoop befindet sich auf einem aufstrebenden Ast
Standard

dem text, den du links od. rechts neben dem bild haben willst halt den entsprechenden margin geben..
__________________
Shibby.....

Mein Blog
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 04.11.2005, 15:19
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 04.11.2005
Beiträge: 13
UnnamedProphet befindet sich auf einem aufstrebenden Ast
Standard

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?
Mit Zitat antworten
  #4 (permalink)  
Alt 04.11.2005, 15:26
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 20.02.2005
Beiträge: 1.045
Tigereye befindet sich auf einem aufstrebenden Ast
Standard

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...
Mit Zitat antworten
  #5 (permalink)  
Alt 04.11.2005, 15:32
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 04.11.2005
Beiträge: 13
UnnamedProphet befindet sich auf einem aufstrebenden Ast
Standard

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.
Mit Zitat antworten
  #6 (permalink)  
Alt 04.11.2005, 15:43
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 20.02.2005
Beiträge: 1.045
Tigereye befindet sich auf einem aufstrebenden Ast
Standard

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>
CSS:
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;
   }
Außerdem darf Width in .tutdescription nur 240px sein, weil das Padding (10px) addiert wird.

Ich hab das so nicht getestet, aber es sollte funktionieren.
Mit Zitat antworten
  #7 (permalink)  
Alt 04.11.2005, 16:06
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 04.11.2005
Beiträge: 13
UnnamedProphet befindet sich auf einem aufstrebenden Ast
Standard

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...
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
div's mit unterschiedlichem z-index überlagern einander in falscher Reihenfolge Phate CSS 4 15.10.2014 09:57
Script nur für Inhalt eines bestimmten DIVs Kipperdesign Javascript & Ajax 8 11.02.2013 14:03
zwei div's in class neben einander jagga007 CSS 4 16.07.2012 12:09
Divs nebeneinander, aber mittig RomanM CSS 2 24.10.2007 07:32
Divs neben einander... Mathman CSS 14 24.05.2006 09:41


Alle Zeitangaben in WEZ +2. Es ist jetzt 01:57 Uhr.