Hi....Ich baue gerade meine erste Seite komplett ohne Tabellen und komme gerade nicht weiter. Ich glaube ich habe die Positionierung der Seite falsch angegangen, vielleicht hat mir einer von euch nen Tipp, wie ich das am Besten mache, um auch im IE das gleiche Aussehen hinzubekommen....Hier ist eine Voransicht der Ebenen:

Wär echt geil, wenn einer von euch mir Tipps für die Positionierungen der Ebenen vielleicht auch mit Margin/Padding geben könnte.

Ich weiss, ich könnte auch mit weniger ebenen auskommen, aber designmässig brauche ich alle, um mit hilfe von verschieden Farbabstufungen und borders einen 3D effekt der elemente hinzubekommen....aber das nur nebenher......

Dexter

So richtig verstehe ich Dein Problem nicht, dass ist doch eher ne einfachere Übung?
Deine Bezeichnungen sind etwas suboptimal, unter "Ebene" kann man sich nicht sonderlich viel vorstellen.
Positionieren brauchst Du da nicht viel, ich würde es etwa so lösen:
- Hauptcontainer mit braunem Rahmen und oben dem Inhalt "Ebene 2", keine Ahnung ob das ein Absatz oder ne Überschrift ist, musst Du wissen.
- Unterhalb Ebene 2 (noch in Container 1) kommt die Navigationsliste mit margin 1 oder 2 Pixel (mag grad nich nachmessen)
- darunter fängst Du einen neuen Container an mit margin nach Links/rechts 10 Pixel (hab immer noch nicht nachgemessen)
-- in diesen Container packst Du drei weitere Unter-Container, die wie in deiner Vorlage untereinanderliegen
-- unterhalb "ebene 3" floatest Du in div 3,5 Deine zwei nebeneinanderliegenden Container. Div 3,5 bekommt ein Padding von ca 5 Pixel (hab immer noch nicht nachgemessen)
- nun schliesst Du Deinen Container unterhalb von der navi
- einen Container für den Footer reinpacken, positionieren. Wie Du den ganz runter bekommst, kannst Du fragen, wenn Du die html-datei fertig hast, fällt mir grad nur ein Workaround ein, der Dir nix nützt, solang Du kein HTML hast.

Superskinny

Zitat:

Deine Bezeichnungen sind etwas suboptimal, unter "Ebene" kann man sich nicht sonderlich viel vorstellen.

Also damit meinte ich eigentlich die divs....

Wirklich schwierig war es nicht.....habe nur ein kleines Problem, ganz unten das Bild auch wirklich ganz unten zu plazieren(footer.jpg)....Ansonsten kann man an dem Code(vorallem CSS) glaub ich noch einiges optimieren....hier ist was ich bisher zusammengeschustert habe....getestet in Firefox und IE 6:

Zitat:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Testaufbau</title>
<style type="text/css">

</style>
</head>

<body background="../startseite/images/body_bg.jpg">
<div id="Layer1">
<div id="Layer2">
<div align="center"><img src="image/deko_oben.gif" width="775" height="26" /></div>

<div id="Navi"><img src="image/buttons_preview.jpg" alt="buttons" width="762" height="26" align="middle" /></div>
<div id="Banner"><div id="Bannerunder"><div align="center"></div></div>

</div>
<div id="content">
<div align="left"><div id="content_left"></div>
</div><div id="content_right"></div>

</div>
<p> </p>
<p align="center"><img src="image/deko_unten.gif" width="784" height="43" /><img src="image/footer.jpg" width="780" height="53" align="bottom"/></p>
</div>
</div>
</body>
</html>

Im CSS sind noch nicht verwendete Elemente drin....kannste ja mal angucken....und wie plazier ich das Bild ganz unten am besten....

Dexter

Uh relativ nett soweit, allerdings skaliert es nicht. Verzichte darauf für jeden Furz eine Breite und Höhe anzugeben, sondern verwende margins und paddings. Verzichte auf absolute Positionierung, sobald sich jemand bei Deinem Layout die Schriftgrösse verstellt fliegt das alles auseinander oder schlimmer, der Text rutscht hinter andere Elemente.
Für die Übersicht wäre es auch ganz hilfreich, wenn Du _alle_ Styles ins Stylesheet packst, statt grossflächig Konstrukte wie "<div align="left">" und dergleichen im Markup zu verteilen.
Pack bei Deinen Tests ausreichend Text in die Container, da siehst Du am Schnellsten, wo Probleme entstehen können.

Hatte grad bisschen Langeweile und hab auch mal was zusammengestückelt:
http://quizzers.info/temp/layout.html das bleibt auch noch bei 300% Skalierung alles im Rahmen und im Layout.

Superskinny

Ja mit Skalierung geht hier leider nicht viel, da ich den text über hintergrundbilder plaziere, die Positionierung musste ich ein paar mal abändern, um es in den beiden browsern einigermassen gleich hinzubekommen.....lustigerweise hat es diesmal zuerst in IE gut hingehauen....dann erst in firefox....aber grobe schnitzer sind noch keine drin, oder?

Dexter

Zitat:

Zitat von Superskinny

aber grobe schnitzer sind noch keine drin, oder?

Meinen Beitrag gelesen? Auch mal meinen Entwurf angeschaut?

Anzeige

Anmelden

Weitere Tipps