timmy: divs wie anordnen?

SELF-Forum

divs wie anordnen?

timmy
– Informationen zu den Bewertungsregeln

Hi,

ich hab Layouts bis jetzt immer mit Tabellen realisiert und wollte mal den anderen weg probieren (mit div und css)

Vorgestellt hätt ich mir eine Hintergrundleiste oben, eine unten, und in der Mitte ein div für den Inhalt der seite (siehe http://img245.imageshack.us/my.php?image=samlayouttw9.gif)

ich hab das folgendermaßen versucht:

<div class="headerbg">
</div>
<div class="contentwrapper">
asdf
</div>
<div class="footerbg">
</div>

.headerbg { margin: 0px; padding:0px; position:absolute; top:0px; height:200px; width:100%; background-color:#666666; z-index: 1;}
.footerbg { margin: 0px; padding:0px; position:absolute; bottom:0px; height:70px; width:100%; background-color:#CCCCCC; z-index:1;}
.contentwrapper { padding:0px; z-index:2; top: 70px; bottom: 20px; margin-left: 0px auto; border: 1px solid; border-color:#FF0000; width:800px;}

leider funktioniert das aber gar nicht :,(

  • das contentwrapper-div ist unterhalb des headerbg-div
  • das contentwrapper-div ist nicht zentriert
  • mozilla zeigt links auf der seite einen weißen rand bevor das header- und footerbg-div beginnen

kann mir wer weiterhelfen?

Beitrag melden
–
Informationen zu den Bewertungsregeln

  1. divs wie anordnen?

    Rato Micefarmer
    – Informationen zu den Bewertungsregeln

    siehe mal:
    http://aktuell.de.selfhtml.org/artikel/css/footer/

    mfg
    Rato

    --
    §§§
    Meine Postings basieren lediglich auf mein Wissen und können völliger Blödsinn sein.
    §§§
    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

  2. divs wie anordnen?

    Felix Riesterer Homepage des Autors
    – Informationen zu den Bewertungsregeln

    Lieber timmy,

    es ist nicht immer sinnvoll, CSS-Klassen zu vergeben. Manchmal sind IDs wesentlich sinnvoller!

    <div class="headerbg">

    Gibt's davon erwartungsgemäß mehrere? Ansonsten -> ID verwenden!

    <div class="contentwrapper">

    Hast Du mehrere solche? -> ID

    <div class="footerbg">

    Wieviele Footer hat Deine Seite? -> ID

    Mein Vorschlag:

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

    Im Prinzip mache ich das auch so.

    Liebe Grüße aus Ellwangen,

    Felix Riesterer.

    --
    ie:% br:> fl:| va:) ls:[ fo:) rl:° n4:? de:> ss:| ch:? js:) mo:} zu:)
    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

  3. divs wie anordnen?

    MudGuard Homepage des Autors
    – Informationen zu den Bewertungsregeln

    Hi,

    .headerbg { margin: 0px; padding:0px; position:absolute; top:0px; height:200px; width:100%; background-color:#666666; z-index: 1;}
    .footerbg { margin: 0px; padding:0px; position:absolute; bottom:0px; height:70px; width:100%; background-color:#CCCCCC; z-index:1;}
    .contentwrapper { padding:0px; z-index:2; top: 70px; bottom: 20px; margin-left: 0px auto; border: 1px solid; border-color:#FF0000; width:800px;}

    • das contentwrapper-div ist nicht zentriert

    margin-left erlaubt nur einen Wert. Du hast 2 angegeben, also muß das ignoriert werden. Vermutlich wolltest Du das 0px auto aber margin statt margin-left zuordnen.

    • mozilla zeigt links auf der seite einen weißen rand bevor das header- und footerbg-div beginnen

    margin/padding für html/body

    cu,
    Andreas

    --
    Warum nennt sich Andreas hier MudGuard?
    O o ostern ...
    Fachfragen unaufgefordert per E-Mail halte ich für unverschämt und werde entsprechende E-Mails nicht beantworten. Für Fachfragen ist das Forum da.
    Beitrag melden
    –
    Informationen zu den Bewertungsregeln