CSS-Layout:geht's eleganter?und wie dynamisiere ich mit PHP?

Beitrag von **lava_queer** » 05.08.2009, 15:42

Hallo,

ich möchte einen mittig positionierten Content-Bereich, der oben von einer rechts horizontal einlaufenden (aber nicht über die ganze Breite laufenden) Linie und unten von einer links horizontal auslaufenden (wieder nicht über die ganze Breite) Linie begrenzt wird. Darunter möchte ich noch eine Bilderleiste.

Hab diese Struktur jetzt mit CSS abgebildet, und ich krieg es auch so hin wie gewünscht.
Trotzdem frage ich mich (und somit euch), ob es auch einfacher geht.
Hier mal mein aktueller Code, bei dem das rote Hilfsdiv, das gelbe Hilfsdiv und die lila Leiste müßten dann noch auf weiße Hintergrundfarbe gesetzt werden müßten (zur Veranschaulichung hab ich extra mal knallige Farben genommen).

Code: Alles auswählen



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

</div>

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


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


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

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


</div>

Dabei ist im head-Bereich noch folgende Definition getroffen

Code: Alles auswählen

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


</style>

Freue mich auf konstruktive Verbesserungsvorschläge!

von **Anzeige von ABAKUS** »

Beitrag von **grossy** » 05.08.2009, 15:52

möööp:

in deinem Quelltext gibt es 10 mal <div> und 6 mal </div>

da fehlt 4 mal </div> wenn ich mich nicht verzählt habe.....

Beitrag von **lava_queer** » 05.08.2009, 15:57

Habs gerade selbst gemerkt und eigentlich versucht, ganz schnell mein Posting zu ändern - offenbar zu langsam! Nun frag ich nur noch, ob's überhaupt so ein sinnvoller Lösungsansatz ist, oder ob's besser geht.

Falls ich diesen Lösungsansatz beibehalte, wäre dann der nächste Schritt, statt mit festen Zahlen mit Variablen arbeiten zu wollen für Höhe und Weite des Contentkastens, für die Höhe und Überlappweite der Linie, für die Maße und Abstände der violetten Kästchen und für die Abstände -> ich denke, man kann das ganze als PHP-Seite aufrufen und dann z.B. die Anzahl der lila Kästchen davon abhängig machen, wieviele Bilder in einem bestimmten Ordner zur Verfügung stehen und ihre Platzhalter-Divs samt Inhalt dann dynamisch erzeugen. Aber so wie ich das sehe, kann ich dann wirklich nur mit inline-CSS arbeiten, obwohl ich lieber mit Style-Files arbeiten würde - geht das noch oder ist das sowieso hier nicht sinnvoll? Dankbar für Tipps!

von **Anzeige von ABAKUS** »

Content Erstellung von ABAKUS Internet Marketing
Ihre Vorteile:

einzigartige Texte
suchmaschinenoptimierte Inhalte
eine sinnvolle Content-Strategie
Beratung und Umsetzung

Jetzt anfragen: 0511 / 300325-0

Beitrag von **grossy** » 05.08.2009, 16:54

hmm, also ich steige nich ganz durch was du vor hast. eine art gallerie?

Ich verwende "absolute" nur sehr sehr selten. das macht einem nur das leben schwer. ich versuche alles mit margins und paddings zu positionieren. gib deinen bilder(-divs) ein float:left mit und sie positionieren sich alleine. da braucht man kein php.

ich hab so dass gefühl, du musst noch viel in sachen css lernen...

Beitrag von **lava_queer** » 05.08.2009, 16:59

Galerie ist nur ein Teil von dem, was ich vorhabe: Der Teil in der lila Leiste eben....

Insgesamt soll es einen Content geben mit zwei Begrenzunglinien, darüber ein Logo und darunter die Galerie. Wie's in etwa ausschaut, ohne daß Farben und Größen bereits stimmen, siehst du hier: https://neu.bdsm-fantasies.de , da hab ich mein Test-HTML hochgeladen. War wie gesagt nur der Versuch, diese Struktur überhaupt mit CSS umzusetzen. Und ja, ich muß noch viel lernen...

Dem Tipp mit den floats für die Galerie-Pics bin ich nachgegangen, der Code für die lila Leiste heißt jetzt:

Code: Alles auswählen

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

<div style="background-color&#58;#000000;height&#58;80px;width&#58;10px;float&#58;left"></div>
<div style="background-color&#58;#CC0066;height&#58;80px;width&#58;80px;float&#58;left"></div>
<div style="background-color&#58;#000000;height&#58;80px;width&#58;10px;float&#58;left"></div>
<div style="background-color&#58;#CC0066;height&#58;80px;width&#58;80px;float&#58;left"></div>
<div style="background-color&#58;#000000;height&#58;80px;width&#58;10px;float&#58;left"></div>
<div style="background-color&#58;#CC0066;height&#58;80px;width&#58;80px;float&#58;left"></div>
<div style="background-color&#58;#000000;height&#58;80px;width&#58;10px;float&#58;left"></div>
<div style="background-color&#58;#CC0066;height&#58;80px;width&#58;80px;float&#58;left"></div>
<div style="background-color&#58;#000000;height&#58;80px;width&#58;10px;float&#58;left"></div>


</div>

, d.h. ich wechsele schwarze Spaces mit violetten Kästchen ab, statt violette Kästchen absolut zu positionieren...

Für weitere Tipps bin ich weiterhin dankbar...[/code]

Beitrag von **e-fee** » 05.08.2009, 17:36

In dem Fall kann man eigentlich auch zwei Klassen in einer externen CSS-Datei oder zumindest Head definieren, dann hat man nicht bei jedem div den ganzen Rattenschwanz da stehen.

Beitrag von **Mork vom Ork** » 05.08.2009, 18:25

Das muss mir mal jemand erklären.

lava_queer hat geschrieben:ich möchte einen mittig positionierten Content-Bereich

Der grüne? Sehe ich.

der oben von einer rechts horizontal einlaufenden (aber nicht über die ganze Breite laufenden) Linie

Sehe ich nicht. Ich sehe da zwar einen schwarzen Balken, aber der läuft von links rein, nicht von rechts. Rechts neben ihm findet sich noch ein gelber Balken, der in deiner Beschreibung nicht auftaucht.

und unten von einer links horizontal auslaufenden (wieder nicht über die ganze Breite) Linie

Damit meinst du den rechtsbündigen, blauen Balken?

Darunter möchte ich noch eine Bilderleiste.

Das lila Dingen mit den vier Kästchen vermutlich.

Und was hat es mit dem großen roten Kasten auf sich? Den hast du anscheinend nicht erwähnt.
Nicht in deinem Sinne ist vermutlich auch, dass die ganze Konstruktion etwa 25% breiter ist als der Anzeigebereich des Browsers und somit rechts aus dem Fenster kippt.

Freue mich auf konstruktive Verbesserungsvorschläge!

Erstmal nur, dass du tunlichst auf das style-Attribut verzichten solltest. Es ist bäh, und warum, sieht man bei dir: Dein Code sieht fürchterlich chaotisch aus.

Ich habe auch den Eindruck, dass du versuchst, mit HTML-Elementen zu malen, dafür sind sie aber nicht gedacht. Wie oben schon angedeutet, weiß ich noch nicht so recht, was du vor hast, aber so wird das IMHO nichts Vernünftiges.

Beitrag von **lava_queer** » 06.08.2009, 08:43

Wie eigentlich aus dem obersten Posting ersichtlich sein sollte (hattest du das nicht mitgelesen?), sind der rote, der lila und der gelbe Bereich lediglich Hilfs-Divs, die später einen weißen Hintergrund bekommen. Ich habe sie als Elternelemente benötigt, um darauf bezugnehmend die Positionen der tatsächlich gewünschten anzuzeigenden Elemente (i.e. grüner Contentbereich, blaue und schwarze Linie, violette Kästchen) festzulegen.

Bei der Beschreibung der ein- und auslaufenden Linien hab ich tatsächlich rechts und links verwechselt, sorry! Und daß du sie als Balken und nicht als Linien wahrnimmst, liegt lediglich daran, daß mir die endgültigen Maße schlichtweg erstmal egal waren, genauso wie die Farben (die kriegen natürlich später auch beide dieselbe Farbe), es ging mir erstmal ums Prinzip, wie so ein Layout überhaupt aufgebaut werden könnte mit CSS.

Meine erste Idee, alles absolut auf die jeweilige Größe des Anzeigefensters zu beziehen, welche ich mir mittels Javascript ermitteln lassen könnte, hatte ich verworfen. Ich wollte eine Lösung ohne Javascript, und dazu fiel mir eben o.g. Lösung ein. Meine Frage an euch lautet, ob es noch eine bessere gibt. Zum Beispiel habe ich das Herauslaufen aus dem Anzeigebereich bewußt in Kauf genommen, weil mir erstmal nichts besseres eingefallen ist - falls es eine Alternative gibt, möchte ich die natürlich gerne wissen, darum ja dieser Thread.

Die momentane Idee hat den roten Bereich als Elternfenster für alles andere: auch wenn das jetzt nicht sichtbar drin liegt, aber alle Positionen und alle prozentualen Weitenangaben orientieren sich daran. Ich hab die Hilfsdivs extra farbig markiert, damit man meinen Codeaufbau besser verstehen kann.

Wer meinen Code nicht durchlesen mag, aber trotzdem einen Tipp hat, wie man das Gewünschte alternativ umsetzen könnte: gewünscht sind der grüne Kasten, die schwarzen und blauen Linien und die violetten Kästchen mit jeweils variablen Maßen (dafür muß es dann noch eine PHP-Auswertung geben, die die Zahlen durch Variablen ersetzt)...alles andere sind Hilfselemente.

Beitrag von **Lord Lommel** » 06.08.2009, 09:20

Ich weiß nicht, ob ich es richtig verstanden habe, aber versuch trotzdem mal einen Hinweis zu geben. Habs nur überflogen.

1.) mod_rewirte: seite.html -> seite.php?type=html und seite.css -> seite.php?type = css
2.) Du erstellst eine Klasse "DivContainer" oder so. Da haust du z.B. mittels Add($daten) die ganzen divs mit den nötigen Werten rein.
3.) Jetzt schreibst du für die DivContainer-Klasse eine Funktion WriteHTML(), die das entsprechende HTML ausgibt und den Link zur seite.css drin hat.
4.) Analog schreibt die Funktion WriteCSS() das CSS (denk an den Headre "content-type").
5.) In der seite.php wird dann nach $_GET['type'] geschaltet, was ausgegeben werden soll.

Da tolle da dran ist, daß du immer nur an einer Stelle was ändern mußt.

Beitrag von **Mork vom Ork** » 07.08.2009, 11:48

lava_queer hat geschrieben:Wie eigentlich aus dem obersten Posting ersichtlich sein sollte (hattest du das nicht mitgelesen?)

Hätte ich deinen Beitrag nicht gelesen, könnte ich hier nicht der augenscheinlich Einzige sein, dem aufgefallen ist, dass deine Beschreibung nicht mit der Grafik übereinstimmt. Alles in allem war mir das aber alles etwas zu verwirrend.

Meine Frage an euch lautet, ob es noch eine bessere gibt.

Dein Problem ist, dass sich dein Wunsch nicht mit einer Grundregel realisieren lässt, von der bei HTML und CSS ausgegangen wird: Eine HTML-Seite ist immer so hoch wie ihr Inhalt, nicht wie das Browser-Fenster. Somit lässt sich eigentlich auch nichts vertikal im Browser-Fenster zentrieren, weil das Browser-Fenster keine Bezugsgröße ist.
Und deshalb sieht's auch so aus, als wenn du versuchst, das Eckige ins Runde zu kloppen, insbesondere hinsichtlich der ganzen Armada von position:absolute-Angaben. Überhaupt solltest du für jedes position:absolute eins auf die Finger kriegen - und für jede Anwendung von px auch ;> Webseiten sind eher bewegliche Angelegenheiten, deshalb sind absolute Positionierung wie auch absolute Maße meist fehl am Platze.

Für eine vertikale Positionierung, wenn sie denn unbedingt sein muss, greifst du am besten auf eine äußere Tabelle zurück (oder Javascript, aber das wolltest du ja nicht). Es gibt zwar Möglichkeiten, sowas mit List und Tücke auch via CSS zu realisieren, aber das Tabellenlayout funktioniert am ehesten in allen Browsern.

Die Linien solltest du als Hintergrundgrafik realisieren, solche Grafiken lassen sich auch relativ positionieren.

Deine Galerie last but not least:
float wird überschätzt, es hat je nach Umständen unangenehme Nebenwirkungen. Für Sachen, die einfach in einer Zeile (in line) stehen sollen, gibt es eine bessere Möglichkeit: display:inline.

Was das mit den schwarzen Kästen zwischen den Bildern soll, weiß ich nicht so recht; mich dünket, dass hier entweder <img>, ein Rand (border-left) oder ein Außenabstand (margin) angebracht wäre.