[Sin]

Huhu,

habe nen Problem mit DIV's.

Ich habe 3 verschiedene DIV's in einem großen DIV.

Dummerweise werden 2 von ihnen einfach nicht nebeneinander angezeigt sondern immer untereinander.


URL -> http://sin11.si.funpic.de/

dicontent soll neben diright angezeigt werden.

HTML Code kann man sich ja so einfach angucken (CSS zwar auch aber das is einfacher .. )
CSS Datei ->

body {
	background-image: url(bgpix.jpg);
	background-repeat: repeat;
}

h1    {
 	 fonstize:18px;
  color:FF0000;
  font-style:normal;
    }
    
#dimain {
	width:800px;
	height:auto;
	border:thin dashed #666666;
	visibility:visible;
	margin:0px auto auto auto;

  }
#ditop {
  width:800px;
  height:226px;
  border:none;
  visibility: visible;
  margin:0px 0px auto 0px;
  background-image:url(header1.jpg);
  background-repeat:no-repeat;
  }
#dicont {
  visibility: visible;
  width:480px;
  height:auto;
  margin:0px 0px auto 0px;
  border:thin dashed #FF0000;
  }
  
#diright {
  visibility: visible;
  width:311px;
  height:482px;
  margin:0px 0px auto 489px;
  background-image:url(rightpd1.jpg);
  background-repeat:no-repeat;
  }  

Wäre sehr nett wenn mir wer helfen könnte .. probiere da schon ewig rum ;/

[immerreggen]

     body {
background-image: url(bgpix.jpg);
background-repeat: repeat;
}

h1    {
  fonstize:18px;
 color:FF0000;
 font-style:normal;
   }

#dimain {
width:800px;
height:auto;
border:thin dashed #666666;
visibility:visible;
margin:0px auto auto auto;

 }
#ditop {
 width:800px;
 height:226px;
 border:none;
 visibility: visible;
 margin:0px 0px auto 0px;
 background-image:url(header1.jpg);
 background-repeat:no-repeat;
 }
#dicont {
 visibility: visible;
 position:absolute;
 top:42%;
 left:10%;
 width:480px;
 height:auto;
 margin:0px 0px auto 0px;
 border:thin dashed #FF0000;
 }

#diright {
 visibility: visible;
 width:311px;
 height:482px;
 margin:0px 0px auto 489px;
 background-image:url(rightpd1.jpg);
 background-repeat:no-repeat;
 }

so?

[Sin]

Bis auf das es nen Tick weiter rechts sein könnte, ja!

Aber kannst du das mal erklären ?

du hast nun % benutzt .. aber warum funktioniert es jetzt O_o?

[immerreggen]

ich kann dir das weiter gar nicht großartig erklären, ich habe lediglich #dicont positioniert ok, wenn's noch nciht ganz stimmt, dann kannst du ja noch ein bissl mit den angaben rumtesten

btw.: ich positioniere immer in %

Dieser Beitrag wurde von immerreggen bearbeitet: 05. März 2005 - 19:59

[Floele]

Mal ne Frage...wofür ist das hier?

visibility: visible;

Der Standard-Wert ist immer visible.

Und das hier

margin:0px 0px auto 0px;

müsste eigentlich

margin:0;

entsprechen.

Das

height:auto; border:none;background-repeat:repeat;

kannste auch weglassen weil es Standard ist, und das

fonstize:18px;

ist falsch.

Insgesamt könnte man es zu so etwas verkürzen, auch wenn die Struktur des Layouts noch nicht so wirklich optimal ist.

body {
background-image: url(bgpix.jpg);
}

h1 {
color:#FF0000;
}
    
#dimain {
width:800px;
border:thin dashed #666666;
margin:0 auto;
}

#ditop {
width:800px;
height:226px;
background:url(header1.jpg) no-repeat;
}

#dicont {
width:487px;
height:480px;
margin:0;
border:thin dashed #FF0000;
}
  
#diright {
position:absolute;
width:311px;
height:480px;
margin-left:489px;
background:url(rightpd1.jpg) no-repeat;
}  

Dieser Beitrag wurde von Floele bearbeitet: 05. März 2005 - 21:13

[Sin]

Naja was mir unklar war -> hab ja mit "marin" den Abstand nach oben auf 0 gesetzt.

Nur war es eben immer ganz unten aber nach einem "Top" wert ging es - das finde ich halt etwas verwirrend.

Und FLoele danke für die Berichtigung
Es ist mein erstes Stylesheet und hab auch bissel ausprobiert.

[Floele]

Zitat (Sin: 06.03.2005, 08:30)

Naja was mir unklar war -> hab ja mit "marin" den Abstand nach oben auf 0 gesetzt.
Nur war es eben immer ganz unten aber nach einem "Top" wert ging es - das finde ich halt etwas verwirrend.

Du solltest hier den Außenrand eines Elements besser nicht mit der Positionierung verwechseln.
"diright" verhindert dass der Inhalt neben ihm angezeigt wird, weil es ein Blockelement ist, und neben Blockelementen haben unter normalen Bedigungen keine anderen Elemente mehr Platz. Durch die absolute Positionierung in meinem Stylesheet, wird das rechte DIV aus der Dokumentstruktur herausgenommen, sodass es keinen Platz mehr verbraucht bzw. andere Elemente beinflusst. Der Inhalt rutscht dadurch nach oben. Genaugenommen müsste das Styleheet übrigens so aussehen, da man eigentlich nur an (zum Beispiel relativ) positionierten Elementen positionieren kann.
margin-top heißt nicht, dass der Abstand nach oben auf jeden Fall 0 ist, sondern nur, dass der Abstand zwischen diesem und einem anderen Element (mindestens) 0 ist. Wenn es sich sowieso schon weiter weg befindet kommt ein margin von 0 natürlich nicht zur Geltung. Margin ist nur ein 'Rand' und keine Position um es kurz zu fassen.

body {
background-image: url(bgpix.jpg);
}

h1 {
color:#FF0000;
}
   
#dimain {
position:relative;
width:800px;
border:thin dashed #666666;
margin:0 auto;
}

#ditop {
width:800px;
height:226px;
background:url(header1.jpg) no-repeat;
}

#dicont {
width:487px;
height:480px;
margin:0;
border:thin dashed #FF0000;
}
 
#diright {
position:absolute;
top:226px;
width:311px;
height:480px;
margin-left:489px;
background:url(rightpd1.jpg) no-repeat;
}  

[Sin]

Ah! Vielen Vielen Dank für die Erklärung

Also ist Margin nur der unsichtbare Rand und hat nur was mit der Positionierung zu tun wenn en anderes Element zu nah kommt ..