nicht angemeldet
Hallo.
Nachdem ich aufgrund diverser Forumsbeiträge vom Seitenlayout mit Frames und Tabellen weggehen wollte, habe ich mich etwas mehr mit css beschäftigt.
Beim Entwurf einer Seite mit den nachfolgenden Anforderungen habe ich das auch gleich mal anzuwenden versucht.
Ziele:
- oben: Banner / Schriftzug
- links Navigationsbereich mit fester Breite
- rechts oben Bereich für Navigations-Unterpunkte
- rechts Mitte: Bereich für den Seiteninhalt
- darunter: Werbelink und Such-Button
- Flexibilität der Seite in Bezug auf alle möglichen Bildschirmauflösungen ist besonders wichtig
Das Design meiner Testseite ist grausam, aber nicht von Belang, da es mir lediglich um die Seitenaufteilung geht!
Als Entwurf habe ich mal folgenden Code geschrieben, und würde gern wissen, ob dieser Code nun
- den Standards entspricht
- als einigermaßen "gut" angesehen wird
- ob es dazu noch Verbesserungsvorschläge gibt
Hier der Code:
<body style="background-color:#000000; font-size:100.1%">
<div style="position:absolute; left:10%; top:3%; width:80%; height:10%;">
<img style="width:100%; height:100%;" alt="Schriftzug coming soon">
</div>
<div style="position:absolute; left:3%; top:15%; width:95%; height:60%; z-index:5;">
<div style="margin-left:188px; background-color:red; z-index:2;">
<p align="left" style="font-size:12px; color:yellow;"><u>Link 1 | Link 2 | Link 3 | Link
4</u></p>
</div>
</div>
<div style="position:absolute; left:3%; top:15%; width:170px; height:60%;
background-color:red; overflow:auto;">
<p align="center" style="font-size:0.95em; color:yellow;">MENÜPUNKT 1<br>PUNKT 2<br>DER
DRITTE LINK<br>KONTAKT</p>
</div>
<div style="position:absolute; left:3%; top:15%; width:95%; height:60%; z-index:3;">
<div style="margin-left:188px; background-color:yellow; height:100%; overflow:auto;
z-index:1;">
<br><h1 align="center" style="font-size:16px; color:red;">Überschrift</h1>
<p align="left" style="font-size:12px; color:red;">Testinhalt<br>Testtesttest<br>
Testtesttest<br>Testtesttest<br>Testtesttest<br>Testtesttest<br>
Testtesttest<br>Testtesttest<br>Testtesttest<br>Testtesttest
Testinhalt<br>Testtesttest<br>
Testtesttest<br>Testtesttest<br>Testtesttest<br>Testtesttest<br>
Testtesttest<br>Testtesttest<br>Testtesttest<br>Testtesttest</p>
</div>
</div>
<div style="position:absolute; left:3%; top:76%; width:95%; height:9%;">
<p align="center" style="color:yellow; border-style=dotted; border-color:red;
border-width:1px;">
Werbe-Link: <a style="color:lime;"
target="_blank"href="http://www.selfhtml.teamone.de">SELFHTML</a></p>
</p>
</div>
<form name="FormularSuche" method="post" action="volltextsuche.php">
<div style="position:absolute; left:3%; top:86%; width:95%; height:12%;">
<p align="center" style="color:yellow; vertical-align:middle;">
<input type="text" name="Suchbegriff" style="width:25%">
<input type="submit" value="suchen">
</p>
</div>
</form>
Vielen Dank schonmal für weitere Tipps,
Thomas