HTML Seit aufbauen....

[Parallax]

Hallo,

ich wollte eine Grundgerüst einer HTML-Seite aufbauen, und zwar ein Div-Container als Title Leiste, einen Container als Nav-Menü seitlich links, einen Container für Anmerkungen seitlich rechts und einen letzen für Kontakt, Impressum usw. unten....

In der Mitte dieses Rechtsecks fehlt etz noch ein Bereich für den Text der Website....

Das ganze Konstrukt soll bei einer Auflösung von 1024 x 768 so groß sein dass links und rechts noch ca ein Rand von 1-2 cm bleibt.... bei höheren Auflösungen soll sich nur der Rand vergrößern, das Konstrukt Mittig und in fester größe weiter bestehen...

Nächstes Prob: Wenn ich das Fenster verkleinere, sollen sich erst die Ränder verkleiner bis das Fenster so klein ist, das sie Seite nicht mehr angezeigt werden kann und dann eben die Bildlaufleisten einsetzen....

und zu guter letzt: das Nav-Menü hätte ich nun so gestaltet das jeder Button ein kleines Div-Element in dem seitlich linken großen Div-Element wird....

so das sind nun Fragen über Fragen... ich hab mal mit HTML und CSS a bissi angefangen das zu positionieren aber des wird net so wie ichs haben will....

bin absoluter anfänger, bitte daher verständlich und net so komplex anworten

mei CSS- Code sieht Momentan so aus...

div.logo { font-family:Arial;
width:1000px;
height:100px;
background-color:#FFEE00;
position:absolute;
left:100px;
top:50px;
}


div.navi { width:50px;
height:100%;
background-color:#FF0000;
position:absolute;
left:100px;
top:152px;
}


div.right { width:100px;
height:100%;
background-color:#0000FF;
position:absolute;
left:1000px;
top:152px;
}

div.text { width:800px;
height:100%;
background-color:#FFFFFF;
position:absolute;
left:152px;
top:152px;
}

 

[_Thor_]

Ein Header ist meistens eine Überschrift erster Ordnung, weil es die Überschrift der Seite ist, also <h1>, nicht <div>.

Ein Menü ist eine Auflistung von Links, also eine Liste <ul>, nicht <div>.

Die rechte Spalte könnte ein <div> sein, je nach Inhalt.

Das Positionieren deiner Seite erreichst du mit margin: Außenabstand: CSS-Referenz auf CSS 4 You - The Finest in Stylesheets und min-width: Minimale Breite: CSS-Referenz auf CSS 4 You - The Finest in Stylesheets

 

[Parallax]

ok klingt ganz gut....

ähm naja der header sollte kein text werden sonder ein logo... also ein jpg welches als seiten titel gilt....

da is doch ein div besser angebracht als ein H1 oder verwechsel ich da irgendwas....

und warum nimmt man für das Nav menü ne liste...?? versteh net ganz wie das funktionieren soll... aber danke für die css verweise.... die sollten mir weiter helfen...


mfg

 

[_Thor_]

ähm naja der header sollte kein text werden sonder ein logo... also ein jpg welches als seiten titel gilt....

Eine Überschrift muss ja nicht zwingend Text enthalten, eine Grafik ist auch erlaubt, aber trotzdem ändert sich an der Bedeutung nichts, es bleibt die Seitenüberschrift und nur darum geht es bei HTML, deinem Inhalt eine Bedeutung zu geben und das machst du durch die Wahl der Tags.

da is doch ein div besser angebracht als ein H1 oder verwechsel ich da irgendwas....

Warum sollte ein <div> hier besser geeignet sein? Wenn du mir das erklären kannst, kann ich dir vielleicht besser verdeutlichen, warum es nicht so ist.

und warum nimmt man für das Nav menü ne liste...?? versteh net ganz wie das funktionieren soll

Weil es auch hier nur um die Semantik geht. Ein Menü ist eine Auflistung von Links, Auflistungen werden durch eine Liste ausgezeichnet, deshalb <ul>. Aussehen wird das ganze dann so:

<ul id="navigation">
  <li><a href="1.html">Link</a></li>
  <li><a href="2.html">Link</a></li>
  <li><a href="3.html">Link</a></li>
  <li><a href="4.html">Link</a></li>
  <li><a href="5.html">Link</a></li>
  <li><a href="6.html">Link</a></li>
</ul>

 

[Bernhard]

Hallo Parallax,

verzichte soweit als möglich auf position:absolute;
Mach Dich stattdessen mal mit float und clear vertraut...

Grüße
Bernhard

 

[Parallax]

So, hab etz mal die css Datei von position:absolut auf float umgeändert


schaut etz so aus

div.logo { font-family:Arial;
width:1000px;
height:100px;
background-color:#000000;
margin-top:50px;
margin-left:100px;
margin-right:0px;
margin-bottom:0px;
}


div.navi { width:50px;
height:100px;
background-color:#000000;
margin-top:5px;
margin-left:100px;
margin-right:0px;
margin-bottom:0px;
float:left;
}


div.right { width:100px;
height:100px;
background-color:#000000;
margin-top:5px;
margin-left:5px;
margin-right:0px;
margin-bottom:0px;
float:right;
}

div.text { width:800px;
height:100px;
background-color:#000000;
margin-top:5px;
margin-left:5px;
margin-right:0px;
margin-bottom:0px;
}


Das abändern der divs zu H1 und ul erfolgt sobald ich das Seitenlayout vernünftig hab

allerdings hab ich ein problem mit dem div class="text".... das sollte in der mitte zwischen div navi und div right liegen.... allerdings tut es das egal was ich probiere net... warum?? oder was mach ich falsch