Darstellung mit <div>

[Boodrig]

Hallo Zusammen!

Seit kurzem habe ich damit angefangen eine kleine Homepage zu basteln.
Mit dem bisherigen Ergebnis war ich eigentlich ganz zu frieden.

Bislang habe ich drei <div> - Boxen verwendet
- eine #wrap, um die ganze Seite einzubetten
- eine #Kopf,
- und eine #Navigation.
Als nächsten Schritt wollte ich ein weitere Box als Textfeld hinzufügen und genau dabei habe ich dann das Problem, dass die margins, die ich mir Wünsche, nicht eingehalten werden (Zumindest im Opera und im Firefox, im IE passt alles soweit).

Ich wäre sehr dankbar, wenn mir jemand dabei helfen könnte.

Die Seite ist unter Boodrig in Schweden zu finden.
Mein Stylsheet unter http://www.uni-ulm.de/~s_pherfu/CSS/text1.css
Es gibt auch ein Bild, wie ich mir das ganze vorstelle:
http://www.uni-ulm.de/~s_pherfu/Soll.bmp

 

[bronko]

hey,

im kopf brauchst du nicht floaten,

beim textfeld keine width: 100%, einfach weglassen

textfeld dann so breit machen das es zum kopf passt oder im kopf das padding weglassen, dann stimmen die maße schonmal fasst, musst das menü dann aber wieder hochrücken.

um den grauen hintergrund zu bekommen brauchst du noch ein div mit der eigenschaft clear: both;

dann sollte es aussehen wie du möchtest.

 

[Boodrig]

Hallo!

Schonmal Danke für die Antwort!

Auf jeden Fall sieht es jetzt schonmal besser aus.

Allerdings weiß ich nicht wie ich meine Navigation wieder nach oben rücken kann. Eigentlich sind meine margins doch auf 0px gesetzt. (Ist das jetzt das Problem, wie es in den FAQ's beschrieben ist?)

Kannst du mir erklären, wieso das Entfernen des paddings im Kopf solche Wunder bewirkt? Sollten die unterschiedlichen <div> Elemente, sofern sie nicht verschachtelt sind, unabhängig voneinander sein?

Und zu guter letzt: Wo und wie muss ich dass clear:both setzen?

Schonmal danke

 

[bronko]

leider finde ich den fehler wegen deiner navigation gerade auch nicht.

du solltest aber anstatt jeden punkt in deinem menü in eine wilde div,div kombination zu verwandeln, das ganze als list aufbauen.

dazu nimmst du die eine <ul>

dann <li><a href....>bla</a></li>

und am ende wieder </ul>

lässt sich dann auch viel leichter formatieren.... du brauchst nicht immer div id="bla" zu schreiben...


zu dem "wunder" bei der box musst du wissen wie diese aufgebaut ist.
eine box hat eine breite: width. diese umfasst den inhalt.

dann hat eine box ein padding, das ist der abstand zwischen inhalt und border.

dann kommt die border
und dann kommt das margin, als abstand zwischen border und den objekten drumherum.

ein beispiel:

du hast:

width: 100px
padding: 20px
border: 5px
margin: 10px

dann ist deine box nicht etwa 100px von width breit,
sondern 100+20+20+5+5+10+10 = 170px breit.

daher stand deine box über den rand hinaus.....

 

[Boodrig]

So, nun habe ich es endlich hingekriegt.

Vielen Dank für deine Unterstützung, bronko. Auf deinen Rat hin habe ich meine Navigation nun mit <ul> gestaltet. Von dem Ergebnis bin eigentlich sehr begeistert. Aber leider gibt es da noch eine kleine Sache, die mich stört.

Und zwar besteht im IE (in FF und Opera hats geklappt) folgendes Problem:
Meiner Navigation habe ich den Look von Buttons verpasst. Leider kann ich im IE nicht irgendwo auf den Button klicken um den Link zu aktivieren, sondern ich muss immer genau auf die Schrift klicken?

Hat jemand eine Ahnung, was da nun wieder falsch läuft!??!

Mit den Links von oben könnt ihr euch ein Bild von der Sache machen.

Schonmal danke

 

[neuroleptika]

Das ist eine merkwürdige Eigenschaft vom Internetexplorer.
Er braucht für mache Elemente "Layout". Warum das so ist, wissen vielleicht nur die Entwickler von Microsoft.

schreibe mal in die css:

* html ul#navilist a {
height: 1%;
}

oder

* html ul#navilist a {
display: inline-block;
}

Dann müsste es im IE6 funktionieren.

Für den IE 7 schreibst du anstelle von* html
* +html und anstelle height, min-height:

* +html ul#navilist a {
min-height: 1%;
}

Im IE8 wird das Problem hoffentlich gelöst sein.

Wenn du mehr darüber wissen möchtest google mal nach haslayout.

@bronko:
margin beinflusst nicht die Breite eines Blockelementes, sondern nur den Abstand zum Nächsten Blockelement.

 

[bronko]

@bronko:
margin beinflusst nicht die Breite eines Blockelementes, sondern nur den Abstand zum Nächsten Blockelement.

"und dann kommt das margin, als abstand zwischen border und den objekten drumherum."

 

[Boodrig]

Super, jetzt funktioniert es prima!

Jetzt muss ich nur noch alles mit Inhalt füllen und dann kann ich mit meiner Seite wirklich online gehen.

Vielen Dank für eure Hilfe!

Das mit "hasLayout" scheint ein ja größeres Problem zu sein, jedenfalls findet man einige Treffer bei google. Ich wäre allerdings wohl nie auf die Idee gekommen nach einer Eigenschaft wie dieser zu suchen und hätte wohl eher aufgegeben. Deshalb nochmal vielen Dank für die Hilfe.

mfg. Boodrig

 

[Efchen]

Zitat von neuroleptika
margin beinflusst nicht die Breite eines Blockelementes, sondern nur den Abstand zum Nächsten Blockelement.
Zitat von bronko
"und dann kommt das margin, als abstand zwischen border und den objekten drumherum."

Genaugenommen beeinflusst margin natürlich schon die Breite eines Blockelements, denn die bildet sich ja aus:
margin-left + border-left + padding-left + width + padding-right + border-right + margin-right

Gruß,
-Efchen