Zur Navigation

Design: fester Content-Bereich?

1 lava

Hallo,

ich möchte meine Webseite so aufbauen, daß sie den eigentlichen Content in einem zentrierten rechteckigen Bereich hat, zu dessen rechter oberer Ecke vom rechten Bildrand her ein horizontaler Strich läuft und von dessen linker unterer Ecke zum linken Bildrand hin ein horizontaler Strich läuft.

Nun bin ich unschlüssig, ob ich die Positionsangaben der benötigten Divs mit festen Pixelwerten oder prozentual angeben soll. Prozentual könnte einerseits den Vorteil haben, daß es sich dann der jeweiligen Bildschirmgröße anpaßt, andererseits kann genau das auch nachteilig sein, z.b. würde dann ein kurzer Textabschnitt auf einem sehr breiten Bildschirm nur einzeilig dargestellt. Ich hab irgendwann mal gelernt, daß Prozentangaben besser sind, Freunde von mir behaupten das Gegenteil und setzen auf feste Pixelangaben.

Was findet ihr besser, was ist gerade "in"? Und wie groß sollte dann der Content-Bereich idealerweise sein, wenn man ihn festlegt? Und das würde ja dann bedeuten, daß ich bei zu langen Texten, die dann in den Content-Bereich nicht reinpassen, immer auch eine Blätter-Funktion einbauen muß! Wenn der Content teilweise aus einer Datenbank ausgelesen werden soll, gibt es dann irgendeine Möglichkeit, daß der Umbruch automatisch erkannt wird???

26.07.2009 17:01 | geändert: 26.07.2009 17:12

2 Jörg Kruse

Lange Textzeilen sind mühsamer zu lesen, das ist denke ich der Hauptnachteil bei dynamischne Breiten. Hier hatte wir die Diskussion vor kurzem auch schon angerissen:

https://joergs-forum.de/auf-welche-bildschirmaufloesungen-optimiert-ihr-t-3332-1

Und das würde ja dann bedeuten, daß ich bei zu langen Texten, die dann in den Content-Bereich nicht reinpassen, immer auch eine Blätter-Funktion einbauen muß!

Ich würde nur die Breite mit width oder max-width beschränken und den Content-Container nach unten offen lassen.

Wenn der Content teilweise aus einer Datenbank ausgelesen werden soll, gibt es dann irgendeine Möglichkeit, daß der Umbruch automatisch erkannt wird???

Meinst du einen Seiten- oder Zeilenumbruch? Ersteren halte ich wie gesagt nicht für zwingend notwendig und bei zweiterem passen sich die Texte den vorgegeben Breiten der Elternelemente an

26.07.2009 19:53 | geändert: 26.07.2009 19:55

3 lava

Ich wollte gern den Content auch nach unten beschränken - ein Freund von mir hat eine Webseite mit extrem wechselnd langen Seiteninhalten und die Begrenzungslinie des Contents springt dann immer hin und her und das gefällt mir nicht.... Wenn ich überhaupt mit festen Größen arbeite, dann würde ich das so organisieren wollen, daß möglichst auch bei Menschen mit kleinem Bildschirm immer alles zu sehen ist und man nie scrollen muß, aber dann halt bei längeren Texten durch Anklicken eines
>>
auf die nächste Seite kommt. Hier ist halt die Frage, ob ich dann meine Datenbankpakete händisch überarbeiten muß (z.B. irgendein eindeutiges Trennzeichen einfügen, bei dem der Umbruch erfolgen soll) oder ob das eleganter geht.

26.07.2009 20:54

4 Jörg Kruse

Wenn ich überhaupt mit festen Größen arbeite, dann würde ich das so organisieren wollen, daß möglichst auch bei Menschen mit kleinem Bildschirm immer alles zu sehen ist und man nie scrollen muß, aber dann halt bei längeren Texten durch Anklicken eines
>>
auf die nächste Seite kommt.

Das ist aber auch nicht jedermanns Sache. Ich finde es angenehmer, den Inhalt mit dem Mausrad zu scrollen, als über einen Button weiterzublättern. Es ist dann z.B. auch umständlicher, die Seite mit F3 abzusuchen. Die Threads hier im Forum sind auch unterteilt, aber bei der Länge von 10 Beiträgen ist das für mich ok. Wenn ich mir allerdings vorstelle, nach jedem einzelnen Beitrag weiterblättern zu müssen, empfände ich das eher als lästig.

Hier ist halt die Frage, ob ich dann meine Datenbankpakete händisch überarbeiten muß (z.B. irgendein eindeutiges Trennzeichen einfügen, bei dem der Umbruch erfolgen soll) oder ob das eleganter geht.

Automatisiert ginge vielleicht mithilfe von wordwrap() - aber dies funktioniert meines Wissens nicht zuverlässig mit UTF-8 und man bricht dann unschön mitten in den Sätzen um, was das Lesen auch nicht angenehmer macht. Da sind eindeutige, sinnvoll gesetzte Trennzeichen sicher besser.

27.07.2009 10:32

5 lava

Wenn ich nun meinen festen Contentbereich bauen will, und rechts oben und links unten jeweils noch eine begrenzende Linie einfügen mag, die jeweils vom Rand horizontal mit ein bischen Überlapp bis zum Contentbereich läuft, dann hab ich mal ein bißchen mit div's gebastelt, wie ich das umsetzen kann - und frage mich nun, ob es nicht eleganter geht.

Im Beispiel habe ich einen grünen Contentbereich von 400x400px, eine untere blaue Linie, die 100px weit noch entlang des Contentbereichs läuft, und eine obere blaue Linie, die ebenfalls 100px weit mit dem Contentbereich überlappt - das rote und das gelbe Div sind Hilfs-Div, ohne die ich nicht zurechtgekommen bin, dh. die hätten im "Ernstfall" dann die Hintergrundfarbe der Seite. Erste Frage: Geht es besser?

<html>
<head>

<title>Testdatei Designfragen</title>

<style type="text/css">
body {
	font-family:Verdana, Arial, Helvetica, sans-serif;
	color:#000000;
	margin: 0 auto;
	width: 100%;
	height:100%;
	border: 0;
}


</style>	

</head>

<body>





<div style="background-color:#CC0033;width:50%;height:50%;position:absolute;top:50%;left:50%"><!--rot, Hilfsdiv -->
<div style="background-color:#99FF33;width:400px;height:400px;position:relative;top:-200px;left:-200px;"><!--grün, Content-->
Und hier schreibe ich jetzt meinen Text rein.

</div>
<div style="background-color:#0033CC;height:10px;width:100%;position:relative;top:-200px;left:100px;"><!--blau, untere Linie-->
</div>

<div style="background-color:#FFFF33;height:10px;width:100%;position:relative;top:-620px;left:-100%"><!-- gelb, Hilfsdiv -->

<div style="background-color:#000000;height:10px;width:100%;position:relative;left:-100px"><!-- schwarz, obere Linie-->

</div>
</div>

</body>
</html>

Zweite Frage:
Und WENN ich es so machen will: Das war ja ziemliche Zahlenspielerei, dh. zwei jeweils um 200px verschobene Divs gaben dann eine Gesamtverschiebung um 400px etc. - es wäre ja gut, hier mit Variablen zu arbeiten und 2 * $x auszurechnen o.ä. - kriegt man das hin? Wenn die Seite eine PHP-Seite wäre, dann könnte man vermutlich PHP-Variablen nehmen im <script style="text/css"></script>-Bereich? Aber was macht man, wenn man mit <script style="text/css" src="mystyle.css"/> den Script-Teil noch in eine andere Datei auslagern will - kann man dann trotzdem Variablen nehmen und wie?

04.08.2009 16:26 | geändert: 04.08.2009 18:10

6 Jörg Kruse

Du kannst auch CSS-Dateien über PHP ausgeben lassen. Dazu würde ich aber nicht raten, da dadurch die Serverlast erhöht wird, wenn auch noch diese Dateien durch den PHP-Parser geschickt werden. Wenn, dann würde ich solche dynamischen Angaben direkt im HTML-Dokument ausgeben lassen.

Zum Layout: vielleicht kannst du die Linien auch mithilfe von Hintergrundgrafiken realisieren - diese lassen sich ja mittels der Eigenschaft background-position horizontal positionieren

04.08.2009 17:31

7 lava

Ich habs jetzt nochmal etwas verbessert mit vielen absoluten statt relativen Angaben, scheinbar bezieht sich absolute ja immer nur aufs Eltern-Div:

<div style="background-color:#CC0033;width:50%;height:50%;position:absolute;top:50%;left:50%"><!--rot, Hilfsdiv -->
<div style="background-color:#99FF33;width:400px;height:400px;position:absolute;top:-200px;left:-200px;"><!--grün, Content-->
Und hier schreibe ich jetzt meinen Text rein.
<div style="position:relative;left:10px">Das ist ein Div</div>

</div>

<div style="background-color:#0033CC;height:10px;width:100%;position:absolute;top:200px;left:100px;"><!--blau, untere Linie-->
</div>

<div style="background-color:#6633FF;height:40px;width:40px;position:absolute;top:210px;left:100px;"></div><!-- Das ist ein kleines lila Kästchen; BLOCK-1 -->

<div style="background-color:#FFFF00;height:10px;width:100%;position:absolute;top:-210px;left:-100%"><!--gelb, Hilfsdiv, BLOCK-2-->
<div style="background-color:#000000;height:10px;width:100%;position:relative;left:-100px"><!-- schwarz, obere Linie-->
</div>


</div>

Erspart mir einiges an Rechnerei. Irritiert bin ich aber, daß das vertauschen von BLOCK-1 mit BLOCK-2, die ja beide absolut bzgl. ihres Elterndivs positioniert sind, die Position des kleinen lila Kästchens doch verschiebt -> gilt das "absolute" nur solange, wie vorher keine "relative"s auftreten? Aber das Einfügen/Auskommentieren des Text-Divs im Content, was auch relativ positioniert ist, verändert die übrigen Positionen nicht - ich seh aber keinen nachvollziehbaren Unterschied !?

Noch schlimmer passiert mir dasselbe, wenn ich unten noch eine weitere lila Leiste mit kleinen violetten Kästchen (soll später eine Bildergalerie werden) anlege, dann zerschießt es mir die obere schwarze Linie und das umgebende gelbe Hilfsdiv total:

<div style="background-color:#CC0033;width:50%;height:50%;position:absolute;top:50%;left:50%"><!--rot, Hilfsdiv -->
<div style="background-color:#99FF33;width:400px;height:400px;position:absolute;top:-200px;left:-200px;"><!--grün, Content-->
Und 
hier schreibe ich jetzt meinen Text rein.
<div style="position:relative;left:10px">Das ist ein Div</div>

</div>

<div style="background-color:#0033CC;height:10px;width:100%;position:absolute;top:200px;left:100px;"><!--blau, untere Linie-->
</div>



<div style="background-color:#6633FF;height:80px;width:200%;position:absolute;top:230px;left:-100%;"><!--lila Leiste-->

<div style="background-color:#CC0066;height:80px;width:80px;position:absolute;top:0px;left:10px;float:left;"><!--violette Kästchen-->
<div style="background-color:#CC0066;height:80px;width:80px;position:absolute;top:0px;left:100px;float:left;">
<div style="background-color:#CC0066;height:80px;width:80px;position:absolute;top:0px;left:100px;float:left;">
<div style="background-color:#CC0066;height:80px;width:80px;position:absolute;top:0px;left:100px;float:left;">

</div>

<div style="background-color:#FFFF00;height:10px;width:100%;position:absolute;top:-210px;left:-100%"><!--gelb, Hilfsdiv: bezieht sich das absolute nun nicht mehr auf das rote Eltern-Hilfsdiv ??? -->
<div style="background-color:#000000;height:10px;width:100%;position:relative;left:-100px"><!-- schwarz, obere Linie-->
</div>


</div>

Beziehen sich die absolute-Angaben also doch nicht auf das rote Hilfsdiv, welches eigentlich für alle innenliegenden Divs das Elternelement sein müßte?

04.08.2009 17:58 | geändert: 04.08.2009 18:35

8 Jörg Kruse

Wenn alle (Groß-)Elternelemente normal positioniert sind, richten sich die top und left Angaben eines absolut positionierten Elements am Anzeigebereich des Browsers aus. Wenn ein Elternelement ebenfalls absolut positioniert ist, richtet es sich danach aus.

04.08.2009 21:47

9 lava

Mein Verschiebe-Problem hat sich erledigt, ich hatte ein paar <div> nicht mehr mit </div> geschlossen! Nun sind alle Kindelemente vom roten Hilfsdiv gegeneinander vertauschbar:

<div style="background-color:#CC0033;width:50%;height:50%;position:absolute;top:50%;left:50%"><!--rot, Hilfsdiv -->
<div style="background-color:#99FF33;width:400px;height:400px;position:absolute;top:-200px;left:-200px;"><!--grün, Content-->
Und hier schreibe ich jetzt meinen Text rein.
<div style="position:relative;left:10px">Das ist ein Div</div>

</div>

<div style="background-color:#0033CC;height:10px;width:100%;position:absolute;top:200px;left:100px;"><!--blau, untere Linie-->
</div>








<div style="background-color:#6633FF;height:80px;width:200%;position:absolute;top:230px;left:-100%;">


<div style="background-color:#CC0066;height:80px;width:80px;position:absolute;top:0px;left:10px;float:left;"></div>
<div style="background-color:#CC0066;height:80px;width:80px;position:absolute;top:0px;left:100px;float:left;"></div>
<div style="background-color:#CC0066;height:80px;width:80px;position:absolute;top:0px;left:190px;float:left;"></div>
<div style="background-color:#CC0066;height:80px;width:80px;position:absolute;top:0px;left:280px;float:left;"></div>

</div>



<div style="background-color:#FFFF00;height:10px;width:100%;position:absolute;top:-210px;left:-100%"><!--gelb, Hilfsdiv-->
<div style="background-color:#000000;height:10px;width:100%;position:relative;left:-100px"></div><!-- schwarz, obere Linie-->
</div>


</div>

05.08.2009 10:28 | geändert: 05.08.2009 17:08

10 lava

Ich hab jetzt meinen verbesserten Quellcode mal hier hochgeladen:

http://neu.bdsm-fantasies.de

Alle Maße und Farben stimmen noch nicht, insbesondere sind Hilfselemente noch farbig:

Der rote Bereich ist das Eltern-Div, an dem sich alle Positionen ausrichten.

Der grüne Bereich ist der gewünschte Content.

Der blaue Bereich ist die gewünschte untere Linie.

Der schwarze Bereich ist die gewünschte obere Linie, die als Hilfs-Elternelement den gelben Bereich benutzt.

Die violetten Kästchen sind die gewünschten Bilder, die lila Leiste das zugehörige Hilfs-Elternelement.

Meine erste Frage: War es sinnvoll, daß rote oberste Elterndiv so zu wählen, wie ich es gewählt habe? Was wäre ggf. die Alternative gewesen?

Zweite Frage: In meiner Umsetzung ist die Länge des schwarzen und des blauen Bereichs gleich 100% der Länge des roten Elements, also 50% des Anzeigefensters -> da sie jeweils 100px weiter links/rechts als die Bildschirmmitte ansetzen, ragen sie also um 100px aus dem Anzeigebereich heraus (was für rechts offenbar nichts macht, für links einen Scrollbalken generiert). Eigentlich bräuchte ich statt einer width=100% eine width=100%-100px , aber das ist offenbar keine zulässige Angabe...mit width=100% sorge ich immerhin dafür, daß die Bereiche lang genug sind - trotzdem ist es ein bißchen "gemaunschelt", und außerdem ist der Scrollbalken ärgerlich. Was kann ich tun?

06.08.2009 10:47