Design mit DIV und CSS

**Kropff** · 18.06.2008, 17:36

schau dir mal das hier. da wird alles erklärt.

peter

**UzumakiNaruto** · 18.06.2008, 19:59

Original geschrieben von Kropff
schau dir mal das hier. da wird alles erklärt.

peter

Danke Peter,
nebeneinander sind sie jetzt.
Nur wie bekomme ich jetzt die navi und den inhalt ZWISCHEN header und footer?

#navi
float:left;

#content
float:left;

beide nebeneinander

entferne ich bei navi float:left; sind sie nicht mehr nebeneinander .. ABER zwischen header und footer.

Dieses ist aktuell auf der Webseite anzusehen.

**Blackgreetz** · 18.06.2008, 20:19

Könntest du deine neue Version bitte uppen?

..oder ist die bereits drauf und wird bei mir im Firefox nur falsch angezeigt?

Edit:

float -> fließt...
Wenn du float:left sagst, dann fließen beide links an etwas vorbei...
-> float: right / left...

und dir fehlt ganz klar ein clear:both;

mfg

**UzumakiNaruto** · 18.06.2008, 20:40

Original geschrieben von Blackgreetz
Könntest du deine neue Version bitte uppen?

..oder ist die bereits drauf und wird bei mir im Firefox nur falsch angezeigt?

Edit:

float -> fließt...
Wenn du float:left sagst, dann fließen beide links an etwas vorbei...
-> float: right / left...

und dir fehlt ganz klar ein clear:both;

mfg

danke black

das clear:both in footer war das was mir die lösung brachte

uppen muss ich nichts .. ich arbeite direkt auf dem server ;-) oder besser gesagt du guckst auf meinen server der neben mir steht

jetzt habe ich nur noch das problem, das der footer direkt an den inhalt anschließt, OBWOHL in in #footer

Code:

margin-top:10px;

drinne habe

aber er bezieht das auf GANZ oben .. und nicht auf das element das über ihm ist.
ist dort was zu beachten?

Code:

#container {
	text-align:left;
	width:800px;
	margin:0px auto;
}

#rahmen {
	border:1px #808080 solid;
	background-color:#C8C8C8;
}

#head {
	width:95%;
	padding:5px;
	margin-top:10px;
	margin-bottom:10px;
	border:1px #808080 solid;
	background-color:#E8E8E8;
}

#foot {
	clear:both;
	width:95%;
	padding:5px;
	margin-top:10px;
	margin-bottom:10px;
	border:1px #808080 solid;
	background-color:#E8E8E8;
}

#navi {
	float:left;
	width:100px;
	margin-left:14px;
	border:1px #808080 solid;
	background-color:#E8E8E8;
}

#content {
	width:660px;
	float:left;
	margin-left:6px;
	border:1px #808080 solid;
	background-color:#E8E8E8;
}

**Kropff** · 18.06.2008, 20:41

ein clear: both hat er im footer drin. ist also richtig. btw: sieht doch schon ganz ok aus. im ie 6 scheint noch der double-margin-bug eingeschlichen zu haben, aber ansonsten sieht es doch ganz gut aus.

gruß
peter

EDIT:
da war ich wohl zu langsam

zu deinem problem. verpass navi und content ein margin-bottom:10px;. dann müsste es klappen.

**UzumakiNaruto** · 18.06.2008, 20:49

Original geschrieben von Kropff
ein clear: both hat er im footer drin. ist also richtig. btw: sieht doch schon ganz ok aus. im ie 6 scheint noch der double-margin-bug eingeschlichen zu haben, aber ansonsten sieht es doch ganz gut aus.

gruß
peter

EDIT:
da war ich wohl zu langsam

zu deinem problem. verpass navi und content ein margin-bottom:10px;. dann müsste es klappen.

thx ... auch wenn ich ungerne BEIDEN diese option mitgebe .. naja ... divs sind eben anders als tabellen.

wäre es möglich mir ein screen-shot vom problem aus dem ie zu senden?
debian oder suse sind dem nicht sehr zugetan

**Kropff** · 19.06.2008, 08:51

hier ist er. obgleich mal ohne den ie6 eigentlich keine seiten entwickeln sollte.

peter

Angehängte Dateien

ie.gif (4,5 KB, 223x aufgerufen)

**Abraxax** · 19.06.2008, 14:33

tipp: http://browsershots.org/ ,-)

**UzumakiNaruto** · 19.06.2008, 15:12

Original geschrieben von Abraxax
tipp: http://browsershots.org/ ,-)

die seite ist ja gold wert

---

thx peter

**UzumakiNaruto** · 24.06.2008, 13:34

jetzt komme ich zu einem neuen problem.

ich möchte jetzt gerne unter der navigation noch einen block einfügen.
soweit kein problem

Code:

<div id="container">

   <div id="rahmen" align="center">

      <div id="head">{header}</div>
      <div id="navi">{navi}</div>
      <div id="cert">{cert}</div>
      <div id="content"></div>
      <div id="foot">{footer}</div>

   </div>

</div>

wird der content neben cert angezeigt

Code:

<div id="container">
   <div id="rahmen" align="center">
      <div id="head">{header}</div>
      <div id="navi">{navi}</div>      		
      <div id="cert">{cert}</div>		
      <div id="content"></div>	
      <div id="foot">{footer}</div>
   </div>
</div>

wandert cert mit, sobald content länger wird.

habt ihr eine lösung für das problem?

habe auch schon versucht navi und cert in ein div zu schachteln, brachte aber auch nichts

**Kropff** · 24.06.2008, 13:40

habe auch schon versucht navi und cert in ein div zu schachteln, brachte aber auch nichts

das sollte aber der richtige weg sein. wie sieht der versuch aus?

peter

**UzumakiNaruto** · 24.06.2008, 13:51

Original geschrieben von Kropff
das sollte aber der richtige weg sein. wie sieht der versuch aus?

peter

Code:

<div id="container">
   <div id="rahmen" align="center">
      <div id="head">{header}</div>
      <div>
         <div id="navi">{navi}</div>      		
         <div id="cert">{cert}</div>		
      </div>
      <div id="content"></div>	
      <div id="foot">{footer}</div>
   </div>
</div>

**UzumakiNaruto** · 24.06.2008, 13:54

funkt jetzt

aus #navi und #vert habe ich float:left; entfernt
und der "schachtel" habe ich dann float:left; gegeben.

Code:

<div id="container">

   <div id="rahmen" align="center">

      <div id="head">{header}</div>
      <div id="left-side">
         <div id="navi">{navi}</div>
         <div id="cert">{cert}</div>      
      </div>      
      <div id="content"></div>
      <div id="foot">{footer}</div>

   </div>

</div>

**UzumakiNaruto** · 22.07.2008, 12:40

hi,

da ich validierten quellcode schreiben möchte, kann ich div ids nicht erneut verwenden.

aber jetzt habe ich das "problem", das ich auf diese methode zurückgreifen müsste, wenn ich meine css datei kurz und übersichtlich halten möchte.

ich habe eine navigation in verschiedene blöcke unterteilt und jetzt möchte ich für alle blöcke ein einheitliches aussehen haben.

Code:

|----------------|
|  BLOCK-TITEL   |
|----------------|
|  BlOCK-INHALT  |
|                |
|----------------|

gibt es da irgendeine möglichkeit dafür, das die blöcke immer einen gleichen aufbau haben, ohne alles "neu" zu erstellen?

css

Code:

#block_navi {
   color: #000;
   width:130px;
   margin-left:19px;
   margin-bottom:10px;
   border:1px #808080 solid;
   background-color:#E8E8E8;
}

#block_navi_title {
   color: #FFF;
   font-weight:bold;
   background-color:#81848B;
   padding: 5px;
}

#block_navi_content {
   padding: 5px;
}

#block_login {
   color: #000;
   width:130px;
   margin-left:19px;
   margin-bottom:10px;
   border:1px #808080 solid;
   background-color:#E8E8E8;
}

#block_login_title {
   color: #FFF;
   font-weight:bold;
   background-color:#81848B;
   padding: 5px;
}

#block_login_content {
   padding: 5px;
}

html

Code:

<div id="left-side">
   <div id="block_navi" align="left">
      <div id="block_navi_title">Navigation</div>
      <div id="block_navi_content">
         [...]
      </div>
   </div>
   <div id="block_login" align="left">
      <div id="block_login_title">Login</div>
      <div id="block_login_content">
         [...]
      </div>
   </div>
</div>

Design mit DIV und CSS