Seitenlayout mit divs

[matzseesi]

Hi Leute,

Ich spiele mich gerade mit divs zur Gestaltung einer Website und habe ein kleines Problem.
Meine Seite soll ein Standardlayout besitzen. Einfach einen Header darunter Navigation links und Content und ganz unten dann einen Footer.

Das einzige was mit dem position Tag positioniert wird, ist das root DIV, welches ALLES beinhaltet. Alles andere wird einfach mit float positioniert.

Wenn ich jetzt innerhalb eines dieser divs ein weiteres div positionieren möchte und zwar absolut zum nächst höherwertigen div, funktioniert das nicht.

Hier die Seite:

    <div id="root">
      <div id="head">
        Headline
      </div>
      <div id="content">
        <div class="navigation_left">
          Navigation
        </div>
        <div class="content_main">
          Content main
        </div>
      </div>
      <div id="footer">
      </div>
    </div>

und hier mein CSS File:

@CHARSET "ISO-8859-1";

body { text-align:center;
       font-size:11px;
       font-family:Helvetica;
       margin:0px; }
#root {	position:relative;
        width:982px;
        border:0px solid #000000;
        margin:0px auto;
        padding:0px;
        text-align:left;
        color:#000000;
        background-color:#FF00FF; }
#root a { color:#000000;
          text-decoration:none;
          font-weight:bold; }
#root a:hover { color:#FF0000; }
#head { border:0px solid #000000;
        background-color:#BBBBBB;
        height:100px;
        margin:0px; }
#content { border:0px solid #000000;
           background-color:#FF0000;
           height:500px;
           width:100%;
           margin-top:0px; }
#footer { border:0px solid #000000;
          background-color:#00FF00;
          height:20px;
          margin:0px; }
.navigation_left { background-color:#0000FF;
                   float:left;
                   width:190px; }
.content_main { background-color:#b1cae3;
                width:792px;
                height:500px;
                float:left; }

Wenn ich nun z.b. bei der Headline folgendes im Headline div einfuegen moechte:

        <div class="headline_copyright">
          Testinhalt<br/>
          Testinhalt2<br/>
        </div>        
        Headline

mit folgendem CSS Code:

.headline_copyright { top:10px;
  left:5px;
  color:#FFFFFF; 
  font-family:Verdana; 
  font-size:10; }

dann wird mir dieses div nicht so positioniert wie ich das will.
Ich hätte dann einfach gerne, dass dieses div im Headline div ganz einfach um 10 nach unten und um 5 nach rechts verschoben wird! Wenn ich mich mit dem position tag spiele, kommt nur schmarn raus. Geht das nur über margin und padding? Oder kann ich ihm irgendwie sagen er soll mir einfach eine absolute positionierung zum nächsthöheren Element machen.

Gruß Matz

 

[Chaosengel_Gabriel]

margin-top und margin-left zur positionieren...
Belege die divs fürs Layout ruhig auch mit class komplett, statt id...
Dann setz bei den CSS-Anweisungen immer fein div davor, durch die class brauchst du nur mit . trennen, is leichter zu lesen als immer # ... oder!?
Die flaot der richtige Ansatz, aber vorsicht, wenn du 2 divs ineinander floatest dann triffst du aufn Bug!
Probier dann mal noch mit diplay als inline und block, dann müsste es gehn...

 

[Maik]

Hi,

das DIV .headline_copyright wird durch die Positionierung aus dem Textfluss genommen und überlappt daher den nachfolgenden Inhalt des übergeordneten DIVs #head.