Seitenaufbau mit Div-Layern

[tztz]

Hallo,

ich habe mir das Tutorial zum Thema DIV-Layer durchgelesen und das ganze dann auch mal probiert, probiert, probiert.

Um mein Ergebniss anzuschauen nahm ich immer Firefox! Jetzt schaute ich mir die Seite mal mit dem IE an musste feststellen dass das komplette Layout verschmissen wird!

Woran liegt das?

Hier die Seite:http://slimbapics.sl.funpic.de/Test/

[d222]

aller anfang ist schwer

mal eine Frage was wollstest du machen?

also ein div hast du nicht geschlossen, aber das wird nicht das Problem lösen. Aber eine schnelle Antwort kann ich dir nicht sagen, müsste ich mir den kompletten Code durchlesen/durchsuchen.

Am besten du überlegst dir genau was du willst und dann kann man dir schritt für schritt helfen, wobei man sagen muss es gibt viele wege zum ziel.

[Markus]

wobei dieses problem mit div layern immer existent ist. IE und Firefox machen da immer ärger und sehen unterschiedlich aus, aber wenn du dein Problem näher schilderst kann man das sicher lösen. Man muss halt teilweise ein Problem anders angehen um das auf beiden Browsern gleich aussehen zu lassen

gruß

[Dac-XP]

Mit dem IE 7 hat man weniger Probleme als mit dem IE 6. Nur leider benutzt noch kaum jemand die 7er Version.

[d222]

Stimmt so nicht ganz wenn man guten html/css schreibt hat man so gut wie keine Unterschiede.

Ist nur eine Frage der Erfahrung und Umsetztung.
Aber ärger macht der IE dennoch, weil vieles einfacher wäre, wenn alle Firefox nehmen würde.

[tztz]

Also hier ist mal ein Bild mit dem groben Aufbau meiner Seite:


oben ein Banner
links das Menü
rechts Termine, Shoutbox, usw.
und in der mitte das hauptfenster!

[d222]

moin,

so dann fangen wir mal an.

Ich geh jetzt mal davon aus das du feste Breiten benutzen willst, macht zumindest sinn.
Ich werde dir jetzt nicht den kompletten Code hier posten, sonst lernst du ja nichts, werde probieren dir es Schritt für Schritt zuerklären.
Wäre gut wenn du immer zwischen Schritte hier postet dann kann man das gut zusammen durchgehen.

Aufbau Html:

1. ein Div container id="container". dadrin packst du 4 weitere divs
"header" für den banner, und dadrunter "navi", "content", "rechts" mit float:left. Die drei float divs müssen als summe die breite von dem "container" haben. Am besten gibts du jedem div eine andere Farbe und eine Höhe damit man gleich sieht ob alles richtig ist.

2. "navi"

für die navi benutzt du listen.

Code: Alles auswählen

<ul>
     <li><a href="">Link</a></li>
</ul>

natürlich soviele wie du brauchst.

Aufbau CSS:

als erstes *{margin:0;padding:0}

damit hast du schonmal keine Probleme mit irgentwelchen margin`s und padding`s. Alle sind jetzt auf 0.

dann Baust du deine CSS auf für die div mit float usw.
Wenn du das hast postet du mal das Erbegnis oder falls Fragen auftauchen nochmal fragen.

mfg

[tztz]

@d222

Danke erstmal!


Ich hab das ganze jetzt mal probiert: klick


Habe jetzt folgende Probleme/Fragen:

- wie kann ich den DIV-Container zentriert ausrichten lassen?
- DIV-Head ist auf margin-top 10px gesetzt! Wieso wendet Firefox das auf DIV-Container an? (IE 7 zeigts richtig an!)
- wieso kann ich für DIV-Navi kein margin-left erstellen?

DANKE

[d222]

moin,

fangen wir an

1. du musst deiner id container margin:auto zuweisen damit wird der Container zentriert.

2. IE halt .
CSS

Code: Alles auswählen

body{margin:0}

3. Ist mal wieder der IE der sogenannte doubled-margin bug.
Lösung:

Code: Alles auswählen

<div id="links">
  <div id="navi">
  </div>
</div>

tritt bei floats auf. du packst einfach noch einen div um die id navi
css

Code: Alles auswählen

#links{float: left;width: 185px;height: 300px;}
#navi{margin:0 5px 0 10px;background-color: #666fff;}

oder
einfach zu deiner id navi

Code: Alles auswählen

display:inline

hinzufügen.

hoffe das hilft dir erstmal weiter.

noch ein paar sachen

du brauchst für deine Links keine class
schreib einfach in der CSS

Code: Alles auswählen

#navi a{}

damit sprichst du alle a tags in der id navi an.

dazu kant du alles zusammenfassen was zusammengehört

beispiel:

Code: Alles auswählen

border:thin solid #FF0000;

oder

Code: Alles auswählen

margin-left:5px;margin:right:5px = margin:0 5px;

so das war es erstmal viel erfolg und falls noch fragen auftauchen meld dich.

mfg

[tztz]

Original von d222:

1. du musst deiner id container margin:auto zuweisen damit wird der Container zentriert.

OK, Firefox stellts jetzt richtig dar!
Aber der IE zentrierts links!

Könnte das evtl. irgendwie für den IE mit text-align: center gehen???

Original von d222:

2. IE halt Smile.
CSS

Code: Alles auswählen

body{margin:0}

Brachte leider nichts!
IE zeigts weiterhin richtig an!
Firefox leider nicht!

Dieser Body Container wird auf den kompletten bodybereich angewandt?? oder?? Diese wurde heißen man könnte allgemeine Sachen auch hier definieren?!

Original von d222:

3. Ist mal wieder der IE der sogenannte doubled-margin bug.
Lösung:

Code: Alles auswählen

<div id="links">
  <div id="navi">
  </div>
</div>

tritt bei floats auf. du packst einfach noch einen div um die id navi
css

Code: Alles auswählen

#links{float: left;width: 185px;height: 300px;}
#navi{margin:0 5px 0 10px;background-color: #666fff;}

OK das funktioniert sowohl mit dem IE als auch mit dem Firefox!

Allerdings passt beim Firefox der Abstand zwischen Navi und Content jetzt nicht! Habe versucht das wieder mit einem extra Container ausenherum zu lösen! Funktionierte allerdings nicht!



Zudem schreibt der IE alles was im content-Container steht zusätzlich nochmal unter die Container!


Hier ist die Seite: klick

[d222]

so,

hatte ich gerade vergessen noch zu schreiben, dein doctype fehlt.
kommt ganz nach oben.

Code: Alles auswählen

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

dann sollte es mit margin:auto und body{margin:0 }auch im IE gehen.
Body kannst du alles definieren und gilt für die kompeltte Seite.

jetzt das andere

Code: Alles auswählen

#rechts {display:inline} <- fehlt

#navi muss das float:left weg

und zum Schluss das mit dem Text unter dem Content.
Wenn du floatest musst du diesen wieder aufheben.

ich mach das immer so:

html

Code: Alles auswählen

<br class="nofloat" />

css

Code: Alles auswählen

.nofloat{clear:both;line-height:0.01em;font-size:0.01em}

das BR muss unter den letzten float div, bei dir also unter

Code: Alles auswählen

<div id="content">
</div>

[tztz]

@d222

Erstmal vielen vielen dank das du mir hier alles so genau erklärst!

Ich hab jetzt unten noch einen Container ergänzt!

Einziges Problem das ich jetzt noch habe ist das beim Firefox der Container nicht ganz oben beginnt!

Kann man im Firefox alle margin´s standartmässig auf 0 setzten?

klick

[d222]

ja mit *{} definierst du alles.

aber solltest beachten das
margin = äusserer Abstand zum Rand
padding = innerer Abstand zum Rand

spricht wenn du deiner id container ein padding von 10 px gibts alles dadrin 10px abstand hält.

Daher würde ich dir raten mach dir genau einen Plan wie du eine Seite aufbauen willst und wo padding und margin sinn macht. Must nicht für jeden div etwas definieren dadruch.
Am besten gehts du alle margins mal durch und guckst wo es sinn macht und wo padding besser wäre.

[tztz]

OK! DANKE!

Einmal muss ich aber noch nerven!

Und zwar: Wie kann den DIV-Container vertikal zentrieren?

[Dac-XP]

Also Horizontal würde gehen mit:

Code: Alles auswählen

margin: 0px auto;
width: 500px;

Dann müsste Vertikel gehen mit:

Code: Alles auswählen

margin: auto 0px;
height: 500px;

Bin mir da aber nicht sicher ob du noch "position: absolute;" dranhängen musst.