box mit css positionieren

[roggi]

Moin Moin,

vielleicht kann mir jemand helfen?

Ich bin dabei, für unseren Squashverein eine Seite zu erstellen. Die Seite soll eigentlich aus 5 Boxen bestehen.

1. Titelleiste
2. Hauptnavigation
3. Text-/Grafikbereich
4. Menue
5. Fussbereich

1,2 sollen auch auf jeder weiteren Seite gleich bleiben. Wäre das ein Fall für included und PHP?

Hier sind meine Ergebnisse bis jetzt:

http://www.1-rendsburger-squash-club.de/

Jetzt kommen eine Menge Fragen:

Warum reicht meine Titelleiste nicht bis an den oberen Rand des Browsers? Über der Titelleiste schaut ein kleine Teil des Containers heraus.

Warum ist die Hauptnavigation nicht mit einem grünen Hintergrund über die gesamte Breite versehen?? ( Die Farbe sollen nur am Anfang zur Vereinfachung für mich vorhanden sein)

Warum haben der Text- und Menuebereich unterschiedliche Höhen??

Weshalb sind manche Teile im Menuebereich grün?

Fragen über Fragen. Die Seiten sollen nur im Bildschirmbereich bleiben, also kein scrollen. (Später im Mitgliederbereich bei Tabellen soll natürlich gescrollt werden.


body
{
margin: 0;
padding: 0;
font: 85% arial, hevetica, sans-serif;
text-align: center;
color: #000;
background-color: #D6D6D6;
}

#container
{
width: auto;
text-align: left;
background-color: red;
border: 1px solid black;
height: auto;
}

#titelleiste { background-color: fuchsia; }
h1 {margin-left: 20px;}
#hauptnavigation { background-color : #00FF33;}
ul { background-color : #00FF33;
padding : 0;
list-style-type : none;
}

#hauptnavigation li {
margin : 0 1em 0 1em;
border : 1px solid black;
float : left;
}

#hauptnavigation a {
background : #D93B0B;
color : #ffffff;
display : block;
text-align : center;
width : 9em;
text-decoration : none;
}

#hauptnavigation a:hover {
background : #ffffff;
color : #D93B0B;
}

#menu
{
float: right;
width: 250px;
background-color: yellow;
margin-top: 5%;
}

#textfeld
{
margin-right: 250px;
background-color: aqua;
margin-top: 5%;
}[/code][/quote]

Ein grobem Überblick gibt es im Beigefügtem Bild

[derHund]

code-tags benutzen!

Warum reicht meine Titelleiste nicht bis an den oberen Rand des Browsers?

setzt das mal an den anfang deines stylesheets:

* {
  margin  : 0;
  padding : 0;
}

Warum ist die Hauptnavigation nicht mit einem grünen Hintergrund über die gesamte Breite versehen??

ist sie doch. nur leider hat sie eine höhe von 0, so daß du es nicht sehen kannst. setzt die lis mal auf inline, entferne das block aus den as.

Warum haben der Text- und Menuebereich unterschiedliche Höhen??

warum sollten sie denn gleiche höhen haben? also, was veranlaßt dich zu glauben, daß dies so sein sollte?

Weshalb sind manche Teile im Menuebereich grün?

deswegen:

 ul { background-color: #00FF33; }

[Kropff]

Warum reicht meine Titelleiste nicht bis an den oberen Rand des Browsers?

setzt das mal an den anfang deines stylesheets:

oder

h1{display: inline;} 

gruß
peter

[Abraxax]

und hier und hier sollte man immer mal wieder vorbeischauen ....

[Quetschi]

Re: box mit css positionieren

Original geschrieben von roggi

margin: 0;
padding: 0;

0 was?

[Abraxax]

0 semikolon!


0 äppl oder 0 birnsche ist doch egal. 0 bleibt 0.