PDA

Archiv verlassen und diese Seite im Standarddesign anzeigen : HTML Ebenen und ihre Ausrichtung

Nighthawk1977
2009-08-11, 22:12:59
Hallo zusammen,

bislang habe ich immer noch recht altbacken mit Tabellen gearbeitet. Vielleicht nicht elegant, aber es hat funktioniert. :tongue:

Nun komme ich aber mit Tabellen nicht mehr weiter weil mir das zu komplex wäre. Habe nun festgestellt/gelernt, dass man auch mit Ebenen arbeiten kann, die man frei verschieben kann etc. Ich denke, damit kann ich das Vorhaben umsetzen, da ich eigentlich nur unterschiedlich breite bzw. hohe "Boxen" brauche.

Was ich mich allerdings frage: Wie kann ich das jetzt so hinbauen, dass ich die Ebenen exakt positionieren kann, aber dennoch flexibel bin. Was soll dabei rauskommen: Die zu erstellende Seite soll auf 1024 x 768 ausgelegt sein, an den Seiten jeweils noch ein wenig Rand. Ich möchte jetzt bei 1024 x 768 zentriert arbeiten. Wenn der Besucher jetzt eine höhere Auflösung benutzt, dann soll das immer noch zentriert sein, die Ränder links und rechts entsprechend größer. Ich bräuchte also eine feste Position, die aber dennoch variabel ist. :eek: Meine Idee wäre eine einzelne zentrierte Tabelle die quasi so groß ist wie der sichtbare Bereich bei 1024 x 768 (also sowas um 900 x 570 z.B., um links und rechts noch Rand zu haben). Die Ebenen müssten sich dann quasi am Rand der Tabelle orientieren. Will sagen, die Tabelle ist je nach Auflösung immer zentriert, aber die obere linke Box ist z.B. immer 10 Pixel von linken und oberen Rand der Tabelle entfernt unabhängig von der Auflösung.

Wie krieg ich das hin? :confused: Hoffe, ich hab mich halbwegs verständlich ausgedrückt... Bin da diesbezüglich ziemlicher Laie, der bislang immer mit Frontpage zurecht gekommen ist.
DanMan
2009-08-11, 22:35:23
Haste kein 08/15 Schema als Bild?
Nighthawk1977
2009-08-11, 23:02:31
Hab mal bissel mit Powerpoint gestrickt:

http://www.marquardt-treffen.de/bilder_foren/3dcenter/ebenen.jpg

Ich stell mir das so vor:

Das was Ganze was du ja jetzt siehst ist im Prinzip der sichtbare Bereich bei 1024 x 768. Entsprechend zentriert (hier rot umrandet) die Inhalte. Ich hab jetzt zunächst versucht das ganze als Tabelle aufzubauen, bekomme da hinterher aber Probleme mit den Inhalten. Da wäre ich mit einzelnen Ebenen einfach flexibler als mit ner Tabelle.

Ich stell mir das so vor: Der rote Kasten ist ne Tabelle die einfach nur dazu dient, dass die Inhalte immer horizontal zentriert dargestellt werden, unabhängig von der Auflösung.

Die übrigen Inhalte würde ich als Ebenen einbinden wollen, können ja alle auf dem gleichen Level liegen da sich nichts überlappen muss etc.

Nun sollen diese Ebenen aber an der Tabelle ausgerichtet werden um so quasi mitzentriert zu werden. Aktuell sehe ich mich aber nur in der Lage die Ebenen mit Bezug auf den Seitenrand zu positionieren, nicht aber abhängig von der Tabelle. Weißt du, was ich meine?
Geldmann3
2009-08-11, 23:43:32
Kannst du das nicht mit css (float) machen? So habe ich es ähnlich schon in einigen News Scripten getan. Wenn Artikel und Bilder dynamisch miteinander verfließen sollen. Sonst wird man ja verrückt vor lauter Tabellen...

Try this
http://www.html-seminar.de/design_per_css_-_float.htm
DanMan
2009-08-12, 00:48:35
Sollte so hinhauen, habs nicht getestet. Rest erklärt sich von selbst, denk ich:

<html><head><style>
.center {width:800px;margin:0 auto;position:relative; height:600px;background:red;}
.box {width:200px;height:200px;position:absolute;left:20px;top:20px;background:black; }
</style></head><body>

<div class="center"><div class="box"></div></div>

</body></html>
darph
2009-08-12, 08:48:45
Das was Ganze was du ja jetzt siehst ist im Prinzip der sichtbare Bereich bei 1024 x 768.
Thu dir selbst als Entwickler und deinen Kunden und Besuchern den Gefallen und verabschiede dich von der Vorstellung, nach Bildschirmauflösungen entwickeln zu müssen.

Du hast keine Ahnung über die Beschaffenheit des Clientsystems! Insbesondere weißt du nichts über seine tatsächliche Bildschirmauflösung, ob das Fenster maximiert oder im Fenster (!) dargestellt wird. Du weißt nicht einmal, wie groß die Toolbars und wie breit die Scrollbalken sind!

Interessanterweise verärgerst du mit solchen Versimplifizierungen des Designprozesses gerade die Leute, die einen größeren Monitor haben: Nicht jeder verwendet seinen Browser maximiert! Gerade wenn der Monitor sehr groß ist, wollen die Leute ihren Browser in einem kleineren Fenster betreiben. (Weil … uh … das ist ja grad das Tolle an Windows, weißt du?)

Dein Design sollte nach Möglichkeit (und mit angemessenem Aufwand vertretbar) so flexibel sein, daß der Betrachter sich das Fenster so hinziehen kann, wie er (oder sie) das will. Nicht du. Du entwirfst für andere, nicht für dich selbst, zumindest, wenn du Geld für willst.
Nighthawk1977
2009-08-12, 18:30:26
Ohje, ich glaube, ich habe mich wirklich etwas missverständlich ausgedrückt.

Darph, ich gebe dir dahingehend Recht, dass es nicht sinnvoll ist, einen User seine persönliche Freiheit nehmen und ihm etwas aufzuzwingen.

Das ist aber auch gar nicht meine Absicht. Ich arbeite jetzt das zweite Mal mit einer kleinen Marketingagentur eines ehemaligen Nachbarn zusammen und habe entsprechend ein vorgegebenes Layout das wiederrum mit dessen Kunden entwickelt wurde. Dort heißt die Vorgabe in dem Fall: Der Besucher soll bei einer Auflösung von 1024 x 768 nicht vertikal scrollen müssen, egal ob er jetzt die Auflösung hat, oder im Fenstermodus arbeitet. Klar, wenn er sich sein Fenster auf 320 x 240 zieht, dann scrollt er eben. Aber ich habe als Vorgabe eben, dass die Inhalte bei angenommenen 1024 x 768 kein Scrollen notwendig machen und das natürlich andererseits das definierte Layout beibehalten wird. Meine Freiheit sieht eben so aus, dass ich die Inhalte im Fenster, egal wie groß, zentriert haben möchte um unendliche leere Flächen unten und rechts von den Inhalten zu haben.

Ich hoffe, es ist jetzt etwas deutlicher geworden, wo ich eigentlich hin will. ;)
dav133
2009-08-16, 20:47:43
Sowas nach dem Schema?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html>
<head>
<title></title>
<meta http-equiv="content-type" content="application/xhtml+xml;charset=utf-8" />
<style type="text/css">
#wrapper {
min-width:1000px;
max-width:1400px;
margin:0 auto;
border:2px solid red;
overflow:auto;
}

#wrapper #top {
border:2px solid green;
margin:10px;
height:100px;
}

#wrapper #left {
float:left;
width:30%;
padding:10px;
}

#wrapper #right {
float:right;
width:65%;
padding:10px;
}

div.block {
width:100%;
border:2px solid blue;
height:100px;
margin-bottom:10px;
}

</style>
</head>
<body>
<div id="wrapper">
<div id="top"></div>
<div id="left">
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
</div>
<div id="right">
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
</div>
</div>
</body>
</html>

Skaliert zwischen 1000 und 1400px (min-/max-width). Ist leider nicht IE6-tauglich, da wirste dir mit CSS-Expressions oder Javascript-Workarounds helfen müssen. Hoffe mal, du meinst sowas wirklich ;).

lg