CSS Div ganz oben an den Rand

[MarkusM]

Hallo,

ich erstelle gerade eine Website und möchte dabei folgendes umsetzen:

der Inhalt der Seite soll mittig ausgerichtet sein und beinhaltete das Menü welches und rechts daneben den Hauptinhalt.

Das ganze sollte jedoch direkt am oberen Bildschirmrand festsitzen. Derzeit habe ich immer einen Abstand am oberen Bildschirmrand.
Dazu habe ich meine zwei DIV Elemente schon mit "top: 0px;" oder "top: 0;" nach oben zu setzen versucht, jedoch klappt dies nur, wenn ich "position: absolute;" setzte.
Das wiederrum hat die Auswirkung, dass die Seite nicht mehr mittig dargestellt wird.

Derzeit schaut das ganze bei mir so aus:
HTML:

  
<div id="main-content">  
   <div class="zeile clearfix">  
      	<div class="menu">Menu</div>  
        <div class="content">Content</div>  
   </div>  

CSS:

  
#main-content {  
	position: absolute;  
	width: 980px;  
	background: red;  
	top: 0;  
}  
  
.clearfix:before, .clearfix:after {  
    content: " ";  
    display: table;  
}  
.clearfix:after {  
    clear: both;  
}  
.clearfix {  
}  
  
.menu {  
    float: left;  
    width: 230px;  
    height: 550px;  
    background: yellow;  
    margin-right: 20px;  
}  
.content {  
    float: left;  
    width: 730px;  
    height: 100%;  
    background: green;  
}  
  
.zeile {  
    margin: 0 auto;  
}  

Vorgestellt hab ich mir das in etwa so wie auf dieser Seite:
http://denoizzed.com/templates/photo/kingsize/multipage/about.html

Klar könnte ich mir diese "Vorlage" auch kaufen, aber ich möchte mir die Website nach meinen Wünschen und Vorstellungen selbst gestalten.

[Der Martin]

Hi,

der Inhalt der Seite soll mittig ausgerichtet sein und beinhaltete das Menü welches und rechts daneben den Hauptinhalt.

ähm, bitte nochmal in Deutsch. ;-)

Das ganze sollte jedoch direkt am oberen Bildschirmrand festsitzen. Derzeit habe ich immer einen Abstand am oberen Bildschirmrand.

Möglicherweise ein padding des body-Elements. Möglicherweise hätte es schon genügt, eben dieses padding auf 0 zu setzen.

Dazu habe ich meine zwei DIV Elemente schon mit "top: 0px;" oder "top: 0;" nach oben zu setzen versucht, jedoch klappt dies nur, wenn ich "position: absolute;" setzte.

Klar. Angaben zur Position haben nur dann eine Wirkung, wenn ein Element auch tatsächlich positioniert wird, also position einen der Werte absolute, relative oder fixed hat.

Das wiederrum hat die Auswirkung, dass die Seite nicht mehr mittig dargestellt wird.

Das ist noch kein Grrund, bestimmte Buchstaben einfach so zu verrdoppeln.

<div id="main-content">

<div class="zeile clearfix">
       <div class="menu">Menu</div>
        <div class="content">Content</div>
   </div>

  
Aus dem Kontext herausgelöst sieht das nach einer div-Inflation aus. Ich bin a) nicht überzeugt, dass alle diese Containerelemente nötig sind, und b) möchten manche von ihnen bestimmt semantisch passendere Elemente sein.  
  

> ~~~css

#main-content {  

> 	position: absolute;  
> 	width: 980px;  
> 	background: red;  
> 	top: 0;  
> }  
>   
> .clearfix:before, .clearfix:after {  
>     content: " ";  
>     display: table;  
> }  
> .clearfix:after {  
>     clear: both;  
> }  
> .clearfix {  
> }  
>   
> .menu {  
>     float: left;  
>     width: 230px;  
>     height: 550px;  
>     background: yellow;  
>     margin-right: 20px;  
> }  
> .content {  
>     float: left;  
>     width: 730px;  
>     height: 100%;  
>     background: green;  
> }  
>   
> .zeile {  
>     margin: 0 auto;  
> }

Auweia. Das kann man bestimmt auch einfacher und übersichtlicher haben. Lass uns da nochmal von vorn anfangen.

So long,
 Martin

[Auge]

Hallo

Das ganze sollte jedoch direkt am oberen Bildschirmrand festsitzen. Derzeit habe ich immer einen Abstand am oberen Bildschirmrand.

Möglicherweise ein padding des body-Elements. Möglicherweise hätte es schon genügt, eben dieses padding auf 0 zu setzen.

Nimm vorsichtshalber margin mit hinzu. Wenn ich mich recht entsinne war da mal was in Sachen unterschiedlichem Browserverhalten (ähnlich wie bei Listen). Ob das – wenn ich denn überhaupt richtig liege – heute noch relevant ist, weiß ich nicht. Die eine eventuell überflüssige Angabe macht den Kohl aber auch nicht fett.

Tschö, Auge