WinFuture-Forum.de: [css] Div Problem - WinFuture-Forum.de

Zum Inhalt wechseln

Nachrichten zum Thema: Entwicklung
Seite 1 von 1

[css] Div Problem


#1 Mitglied ist offline   Sin 

  • Gruppe: aktive Mitglieder
  • Beiträge: 414
  • Beigetreten: 13. Mai 04
  • Reputation: 0

geschrieben 05. März 2005 - 19:06

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 :8): (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 ;/
0

Anzeige



#2 Mitglied ist offline   immerreggen 

  • Gruppe: aktive Mitglieder
  • Beiträge: 346
  • Beigetreten: 18. April 04
  • Reputation: 0

geschrieben 05. März 2005 - 19:44

     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? :8):
Eingefügtes Bild
"man kann nicht alles haben."
..oO es muss doch noch mehr als "alles" geben..?!
0

#3 Mitglied ist offline   Sin 

  • Gruppe: aktive Mitglieder
  • Beiträge: 414
  • Beigetreten: 13. Mai 04
  • Reputation: 0

geschrieben 05. März 2005 - 19:48

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

Aber kannst du das mal erklären :8):?

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

#4 Mitglied ist offline   immerreggen 

  • Gruppe: aktive Mitglieder
  • Beiträge: 346
  • Beigetreten: 18. April 04
  • Reputation: 0

geschrieben 05. März 2005 - 19:56

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

btw.: ich positioniere immer in %

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

Eingefügtes Bild
"man kann nicht alles haben."
..oO es muss doch noch mehr als "alles" geben..?!
0

#5 Mitglied ist offline   Floele 

  • Gruppe: aktive Mitglieder
  • Beiträge: 919
  • Beigetreten: 22. Juni 04
  • Reputation: 0

geschrieben 05. März 2005 - 21:09

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

0

#6 Mitglied ist offline   Sin 

  • Gruppe: aktive Mitglieder
  • Beiträge: 414
  • Beigetreten: 13. Mai 04
  • Reputation: 0

geschrieben 06. März 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.

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

#7 Mitglied ist offline   Floele 

  • Gruppe: aktive Mitglieder
  • Beiträge: 919
  • Beigetreten: 22. Juni 04
  • Reputation: 0

geschrieben 06. März 2005 - 09:45

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. :cool:
"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;
}  

0

#8 Mitglied ist offline   Sin 

  • Gruppe: aktive Mitglieder
  • Beiträge: 414
  • Beigetreten: 13. Mai 04
  • Reputation: 0

geschrieben 06. März 2005 - 10:28

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

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

Thema verteilen:


Seite 1 von 1

1 Besucher lesen dieses Thema
Mitglieder: 0, Gäste: 1, unsichtbare Mitglieder: 0