• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Anfrage wg. Layout mit CSS

Status
Für weitere Antworten geschlossen.
T

the0dor

Neues Mitglied
Hallo, liebe Forumsmitglieder!

Nach einer gewissen Zeit der Abstinenz (mein letztes Homepage-Projekt:
Plattenwaschen vor ungefähr 3-4 Jahren), muss ich mich für einen Freund wieder ins html/css-Getümmel stürzen, um ihm eine kleine Seite zu basteln.

Ich habe mich schon wieder ein gaaanz kleines bisschen in die Materie reingelesen (hab nämlich inzwischen so viel wie möglich wieder vergessen;)), und dabei habe ich festgestellt - es ist ja einiges Wasser den Bach runter - dass man jetzt mehr und mehr versucht, Layouts komplett mit CSS zu realisieren (Stichwort "div" und "float", autsch), da wollte ich mal nicht so sein und halt auch dabeisein.
Wer Lust hat, kann ja mal die o.g. Seite ansörfen, die ist halt klassisch über Tabellen realisiert.
Für mein neues Projekt habe ich mal ein Layoutentwurfsbild hergestellt (klasse Idee, wieso hat mir das vor 4 Jahren keiner gesagt...).

Nun zu meiner Anfrage: könnte sich das jemand mal anschauen und mir sagen, ob das zu realisieren ist (CSS-mäßig), ich meine für jemanden wie mich:oops:? Blöde Frage. Eigentlich wollte ich nur wissen, ob mir jemand schonmal einen Übersichts-Code basteln könnte, ähm, so nur paar Stichwörter vielleicht...Ihr seid echt lieb!
Vielleicht habt Ihr auch noch nen megatollen SuperGEIL-Link, wo ich mal anklicken kann, zwecks Weiterbildung undso.

Für die Cracks hab ich auch schonmal ne spezielle Frage:
wie bekomme ich so kleine Grafiken (ich meine die Balken) unter den Navigationslinks hin? Ich dachte, als Hintergrundbild funktioniert es nicht, weil es ja links unten erscheinen soll und das Ganze auch skalierbar sein soll (sonst könnte ich wohl auf meine schönen alten Tabellen zurückgreifen)?

Also, für Eure Hilfe bin ich schon jetzt dankbar!
 
Nichts einfacher als das...

Vorab schon einmal: Schönes Layout!

Tabellen sind nicht mehr so gerne gesehen, da sie a) zuviel Traffic verursachen und b) zu unübersichtlich sind (und noch einige andere Punkte), aber das hast du ja schon mitbekommen.

Zu Beginn solltest du dir ein div-Container für den Kopf der Seite anlgen:
Code: 
<div class="header"></div>
In diesen packst du das Logo "ODEK". In der CSS-Datei formulierst du folgendes für den Kopf:
Code: 
.header {
 background-color:#(dein Blauton als Hexadezimalwert); /*Hintergrundfarbe*/
 background-image:url(url/zum/Bild/des/Dirigenten.jpg); /*Hintergrundbild*/
 background-repeat:no-repeat; /*Hintergrundbild wird nicht wiederholt*/
 width:X%; /*für X prozentuellen Wert der Breite eintragen*/
 boder-bottom:Xpx solid gray; /*erzeugt grauen Rahmen nur unterhalb des Headers*/
 text-align:right; /*Schrift rechtsbündig*/
}
Das Bild des Dirigenten sollte den Rahmen beinhalten.

Das mal so zum eingewöhnen. Probier das erst einmal umzusetzen. ;)
 
Vielen Dank, Körnerbrötchen!

Super schnelle Antwort, toll. Danke für die detaillierten Tipps, ich werde mich sogleich an die Arbeit machen, Sir!
 
Tätärätää: der Anfang ist gemacht:
Code: 
<style type="text/css">
.container {
 text-align:center;
}
.header {
 background-color:#90a4a0;
 background-image:url(Dirigent.jpg);
 background-repeat:no-repeat;
 width:80%;
 border-bottom:3px solid gray;
 text-align:right;
 padding:8px;
}
</style>
</head>
<body>
<div class="container">
<div class="header"><img src="homeklein.jpg" alt="Logo" width="280px" height="70px" border="0"></div>
</div>
</body>
</html>
Witzigerweise ist bei dieser Version der Header im Firefox nicht zentriert, im IE6 funktioniert das aber - hätte gedacht, dass andersrum!
Nun habe ich schon das erste Problem (vielleicht der Layoutidee?) festgestellt:
Wenn ich das "Dirigentenbild" rechts als Hintergrund einrichte, und der Benutzer die Schrift skaliert, dann hat es nicht mehr dieselbe Breite wie der darunterliegende Navigationsbereich, oder? Ich fand die "Design"-Idee mit vier Rechtecken (zwei oben, zwei größere unten) irgendwie nett.
Ich könnte ja einen neuen div-Bereich nur für das Bild erstellen, dann müsste es doch möglich sein, dass das Bild mit skaliert - bis zu einer gewissen Größe?
Für weitere Tipps bin ich sehr dankbar.
Lg, the0dor.
 
Hintergrundbilder skalieren nicht mit. Finde ich auch weniger sinnvoll, da die Qualität dann ja verloren geht.

Zu deinem Problem mit dem Zentrieren:
Erst einmal würde ich den div-Container ".container" weglassen. Den brauchst du nicht. In der CSS-Datei kannst du sozusagen standardmäßig body und html verwenden. Die Lösung des zentrieren sähe so aus:
Code: 
.header {
 margin-left:auto;
 margin-right:auto;
}
Achja:
Code: 
<div class="header"><img src="homeklein.jpg" alt="Logo" width="280px" height="70px" border="0"></div>
better
Code: 
<div class="header"><img src="homeklein.jpg" alt="Logo" style="width:280px; height:70px; border:0"></div>
Oder noch besser direkt in der CSS-Datei definieren:
Code: 
.header img { /* Das Element img in der Klasse .header */
 border:0;
 width:280px;
 height:70px;
}
 
Hallo,

the0dor schrieb:
mein letztes Homepage-Projekt:
Plattenwaschen vor ungefähr 3-4 Jahren ... und dabei habe ich festgestellt dass man jetzt mehr und mehr versucht, Layouts komplett mit CSS zu realisieren (Stichwort "div" und "float", autsch)
Zum Vergrößern anklicken....
Also erstens sind Layouts mit CSS schon seit weit mehr als 3-4 Jahre aktuell, da musst Du bei Deinem letzten Projekt nicht aufgepasst haben :-) (ich habe 2001/2002 umgestellt und war da sicher nicht der erste),
und zweitens ist das "Stichwort div" hier völlig unangebracht. Viele glauben immer, dass bei dieser Vorgehensweise das Tag <div> eine besondere Bedeutung bekommt. Tatsache ist aber, dass das Tag <h1> oder <p> eine sicher größere Bedeutung hat, als <div>. Letzteres ist ein Hilfsmittel, um mehrere Elemente zwecks gleichartiger Formatierung zu gruppieren.

Beim Layouten mit CSS geht es aber auch um semantisch korrektes HTML, nicht nur um CSS. Trennung von Inhalt und Layout. Bei semantischem HTML geht es darum, den Inhalt sinnvoll auszuzeichnen, also genau das zu machen, wofür HTML schon bei seiner Einführung konzipiert war. Da spielt das <div> eine eher untergeordnete Rolle. Wichtiger sind Überschriften und Textabsätze. Adressen kann man als solche auszeichnen, genauso wie Zitate oder Listen. <div> nutzt man nur, um Elemente zu gruppieren (s.o.).
Daraus resultiert dann leider auch immer wieder, dass Leute mit dem Layout beginnen, und dann natürlich eine <div>-Suppe kochen, weil sie noch keinen Inhalt haben. Das wiederum führt dazu, dass die <div>s alle bleiben, wenn der Inhalt kommt, das HTML semantisch nicht korrekt ist und immer geglaubt wird, alle CSS-Eigenschaften könnten nur auf das Element <div> angewendet werden. Da werden dann Block-Elemente wie <h1> nochmal in ein <div> verpackt, nur weil nicht klar ist, dass die selben Eigenschaften, die man nun dem <div> zuweist, auch dem <h1> hätte zuweisen können.

Kurz: Durch die vermeitnliche Wichtigkeit des <div>-Tags gelangen Umsteiger auf die falsche Bahn und laufen völlig an dem Sinn eines CSS-Layouts mit Trennung von Inhalt und Layout vorbei.

Wer Lust hat, kann ja mal die o.g. Seite ansörfen, die ist halt klassisch über Tabellen realisiert.
Zum Vergrößern anklicken....
Klassisch...da rollen sich mir die Zehnägel auf. ;-/

Nun zu meiner Anfrage: könnte sich das jemand mal anschauen und mir sagen, ob das zu realisieren ist (CSS-mäßig)
Zum Vergrößern anklicken....
Problemlos.

Eigentlich wollte ich nur wissen, ob mir jemand schonmal einen Übersichts-Code basteln könnte
Zum Vergrößern anklicken....
Wenn Du es entgegen der allgemeinen Fehltritte (s.o.) richtig machen willst, brauchst Du als allererstes den Inhalt der Seite, den Du mit reinem HTML semantisch korrekt auszeichnest.

Vielleicht habt Ihr auch noch nen megatollen SuperGEIL-Link, wo ich mal anklicken kann, zwecks Weiterbildung undso.
Zum Vergrößern anklicken....
Oh, da hätte ich Warum Layout mit Tabellen dumm ist: Probleme definiert, Lösungen angeboten :-)

wie bekomme ich so kleine Grafiken (ich meine die Balken) unter den Navigationslinks hin?
Zum Vergrößern anklicken....
Mit einem Rahmen? (border)

Körnerbrötchen schrieb:
Tabellen sind nicht mehr so gerne gesehen, da sie a) zuviel Traffic verursachen und b) zu unübersichtlich sind (und noch einige andere Punkte), aber das hast du ja schon mitbekommen.
Zum Vergrößern anklicken....
1. Tabellen sind nach wie vor ein wichtiger Bestandteil von HTML, zum Auszeichnen von tabellarischen Daten sind sie die einzige Wahl.
2. Tabellenlayouts sind nicht nur "nicht gern gesehen", sie sind semantisch nicht korrekt, völlig unnötig und barrierebehaftet. Sie sind außerdem, wie Du auch schreibst, unbequem und umständlich.

Zu Beginn solltest du dir ein div-Container für den Kopf der Seite anlgen:
Zum Vergrößern anklicken....
Ich würde ein <h1> empfehlen. Denn der Header fungiert eigentlich immer als Überschrift. <h1> ist auch ein Block-Element und hat somit die selben EIgenschaften wie <div>, ist aber semantisch aussagekräftig. <div> wird nur dann interessant, wenn es in dem Header mehr als nur eine Überschrift gibt, wenn man mehrere Elemente gruppieren will.

@the0dor: Zu Deinem Code: Der Text im alt-Attribut ist völlig unzureichend. Deaktiviere die Bilder in Deinem Browser und guck Dir das Ergebnis an. Da steht dann nur "Logo". Was soll einem Nutzer das sagen? Sinnvoller wäre es doch, wenn der den Text aus dem Logo hier lesen könnte.
Außerdem verwendest Du in den Attributen für die Größe eine Einheit, die ist in HTML nicht erlaubt.
Entgegen der Aussage von Körnerbrötchen würde ich aber die Größenangaben im img-Tag stehen lassen, weil dann der Platz für die Images gleich beim Aufbau der Seite reserviert wird, und das Seitenlayout nicht "springt". Auch der Qualidator (Qualidator - website quality validation & monitoring - Website testen) empfiehlt, das so zu machen.

Zum Layout allgemein: Du hast ein Element oben (idealerweise <h1>), dann hast Du ein Menu links (idealerweise <ul>), das Du mit "float:left;" an die linke Seite bannst und einen Content, der zwecks zusammengehöriger Formatierung tatsächlich in ein <div> gepackt wird, das dann mit "margin-left:???em;" seinen Abstand zum Menü bekommt. ??? ist dabei die Breite des Menüs (auch in em angegeben) plus vielleicht 1em zusätzlicher Abstand, weil das Block-Element für den Content durch das float "unter" (z-Ebene) dem Menü liegt...zu viel auf einmal? Probier es aus, Du wirst sehen :-) Und dann kommst Du mit Fragen zurück.

Nochmal Layout: Bitte keine festen Größen. Dynamisches Layout, das sich einer Schriftgrößenänderung anpasst. So wie in dem Image nimmt es bei meiner augenblicklichen Fenstergröße zu wenig Platz ein.

Aber mach mal...! :-)

Viel Erfolg,
-Efchen
 
Oh Mann, Ihr seid ja echt klasse:D!

Vielen Dank für die Mühe, ich hab ja jetzt erst mal für ne Weile Stoff zum Arbeiten...
Wenn ich aber daran denke, dass ich schon in so nem Mini-Schnipsel Code locker 2-3 Fehler habe:shock:, das kann ja heiter werden! Aber Übung macht ja schließlich den Meister (Geselle würde mir auch schon reichen).
Ich halt Euch dann auf dem Laufenden, höhö.

Mit dem Bild in der linken Ecke oben hab ich mir überlegt, dass man ja ein etwas größeres nehmen könnte, was bei größerem Format noch bis zum
rechten Rand geht. Bei supergroßer Anzeige ist dann halt ne Lücke, aber die allermeisten ham ja eh Standard eingestellt.
 
the0dor schrieb:
Oh Mann, Ihr seid ja echt klasse
Zum Vergrößern anklicken....
Nun mal nicht übertreiben :-)
Du bist aber auch ein umgänglicher Fragesteller, dann hilft man doch gern!

Mit dem Bild in der linken Ecke oben hab ich mir überlegt, dass man ja ein etwas größeres nehmen könnte, was bei größerem Format noch bis zum
rechten Rand geht. Bei supergroßer Anzeige ist dann halt ne Lücke, aber die allermeisten ham ja eh Standard eingestellt.
Zum Vergrößern anklicken....
Was ist Standard? Der einzige Standard, auf den Du Dich bei allen Deinen Nutzern verlassen kannst, ist dass sie Clients benutzen, die HTML interpretieren können. Alles andere ist variabel.
Die einen können CSS, die anderen nicht, die einen können es gut, die anderen nicht. Die einen nutzen dieses, die anderen jenes Betriebssystem, der eine diesen, der andere jenen Browser. Der einen hat nen großen Bildschirm, der andere nen kleinen, einer hat zwar nen großen Bildschirm, sein Browserfenster trotzdem nur auf 542x988px aufgezogen, der andere hat ein PDA mit 200x320px Auflösung und Vollbild, der nächste hat seine Schriftgröße im Browser auf 8pt eingestellt, ein anderer auf 24pt. Der nächste nutzt nen Textbrowser, der gar keine Images darstellen kann, ein anderer hat mit seinem Modem Images abgestellt.

Undsoweiterundsofort. Aber wenn Du es richtig angehst, können alle Deine Site benutzen, Deine Site kann barrierefrei sein, in Textbrowsern voll nutzbar sein und in modernen Browsern, die CSS annehmbar unterstützen annähernd gleich aussehen und auch bei Schriftskalierung nicht platzen.

Und das beste: Die 100%ige Nutzbarkeit zu gewährleisten ist leichter als ein Tabellenlayout. Das ist eigentlich das leichteste von allem. Das ist nämlich rein mit semantischem HTML gewährleistet.

Also...viel Text, viele Tipps, keiner nimmts Dir übel, wenn Du derzeit noch überfordert bist. Aber wenn Fragen sind: Nachfragen! Nicht scheu sein! Doofe Fragen gibts nicht, nur doofe Antworten :-)

Viel Erfolg,
-Efchen
 
So, habe mir jetzt mal erlaubt, die "nackte" html-Version unter
OdEK - Orchester der Europäischen Künstlervereinigung
einzustellen.
Wollte mit dem Code hier nicht rummachen, ist ja schließlich die CSS-Abteilung!
Von der Struktur her glaube ich nicht, dass noch was groß dazukommt, mit den Texten muss ich halt warten, bis sie vom Eigentümer der Site mal hergestellt werden...
Werde es gleich mal durch nen Validator jagen, und dann muss ich mir wohl Gedanken um mein Design machen.
Bis denne, the0dor
 
Ja,

das sieht doch schon klasse aus. So benutzt man HTML!
Willst Du in Sachen "Lernen" noch einen Schritt weiter gehen? Dann empfehle ich Dir, Dich vom altbackenen HTML 4.01 Transitional zu verabschieden und lieber XHTML 1.0 Strict zu nehmen.

Wenn Du später willst, dass Deine Überschrift <h2> neben dem Menü stehen soll, nicht darüber, dann musst Du die noch unter die Liste packen, denn die wirst Du ja wohl floaten.

Gruß,
-Efchen
 
1. CSS-Versuch ist jetzt online

3 Probleme:

- im IE6 erscheint unter dem Logo ein kleiner Rand der da nicht hingehört, da height definiert ist.

- im Firefox2 ist der Haupttext (#content) trotz padding an das Menü drangeklebt

- das Menü sollte idealerweise so hoch sein wie der Text lang ist. Jetzt hab ich es per Hand eingegeben, geht das auch automatisch (=flexible Höhe)?

- im Firefox verschiebt sich die Navigation nach Eingabe des Bildes links oben um denselben Wert nach rechts, häh?

Über Tipps&Tricks freue ich mich natürlich sehr,
Gruß the0dor.
 
Zuletzt bearbeitet:
Moin,

ich denke nicht, dass jemand helfen kann, denn auf der von Dir verlinkten Seite ist keine Navigation, nur ein "Seite im Aufbau".

Gruß,
-Efchen
 
the0dor schrieb:
- im Firefox2 ist der Haupttext (#content) trotz padding an das Menü drangeklebt
Zum Vergrößern anklicken....
Das liegt daran, weil Du keinen margin definiert hast. Dadurch siehst Du den Abstand durch padding nicht, weil der unterhalb des Menüs liegt.
Nicht verstanden? Dann gib Deinem Content mal einen Rahmen oder eine Hintergrundfarbe (oder besorg Dir "Firebug", ein Plugin für Firefox zum Debuggen). Du wirst sehen, dass der Content ganz links am Rand unterhalb des gefloateten Menüs beginnt. Gibt dem Content einen margin-left in der Breite des Menüs, dann siehst du auch Dein Padding.

- das Menü sollte idealerweise so hoch sein wie der Text lang ist. Jetzt hab ich es per Hand eingegeben, geht das auch automatisch (=flexible Höhe)?
Zum Vergrößern anklicken....
Weil das nur mit display:table-cell geht, und das der IE nicht kann, löst man das "Problem" mit einem Hintergrundbild. Das Menü geht dann zwar nicht bis ganz unten, aber die Farbe an der Stelle des Menüs geht natürlich bis unten. Mit einem margin-left des Content ist es dann perfekt.

- im Firefox verschiebt sich die Navigation nach Eingabe des Bildes links oben um denselben Wert nach rechts, häh?
Zum Vergrößern anklicken....
Ich glaube, ich habe gesehen, dass das Image gefloatet wird. Wenn das Menü dann nicht unter dem Image beginnt, ist es natürlich rechts daneben. Ein clear:left; sollte helfen.

Gruß,
-Efchen
 
Vielen Dank erstmal an Efchen!;Jump

Hab jetzt zusammen mit den Betreibern der Seite eine Layout-Session gemacht, dabei ist dann das hier entstanden.
Habe jetzt immer noch das Problem mit der Spalte (die mittlerweile nach rechts gehuscht ist), dass sie nicht bis unten geht, obwohl ich ´n x-large
Hintergrund-gif eingebaut habe:
Efchen schrieb:
Weil das nur mit display:table-cell geht, und das der IE nicht kann, löst man das "Problem" mit einem Hintergrundbild. Das Menü geht dann zwar nicht bis ganz unten, aber die Farbe an der Stelle des Menüs geht natürlich bis unten. Mit einem margin-left des Content ist es dann perfekt.
Zum Vergrößern anklicken....
.
Das zweite Mini-Problemchen ist im footer die Schrift, sie lässt sich trotz vertical-align nicht zentrieren.
Über Tipps freue ich mich wieder sehr!
Gruß, the0dor

Nachtrag: Wer irgendwelche css/html-Schweinereien entdeckt, bitte melden
 
the0dor schrieb:
Hab jetzt zusammen mit den Betreibern der Seite eine Layout-Session gemacht, dabei ist dann das hier entstanden.
Zum Vergrößern anklicken....
Warum ist das eigentlich so klein? Sieht aus, als wäre es für PDAs oder Handys gemacht. Die Seite (hat eigentlich gar nicht die Bezeichnung "Seite" verdient) nimmt in meinem Fenster vielleicht 30% des verfügbaren Platzes ein, das ist zu wenig! Und die Schrift ist auch so klein, die Menüs kann ich kaum lesen. Das ist nicht die Schriftgröße, die ich in meinem Browser voreingestellt habe.

Das zweite Mini-Problemchen ist im footer die Schrift, sie lässt sich trotz vertical-align nicht zentrieren.
Zum Vergrößern anklicken....
Auch vertical-align funktioniert meines Wissens nur mit display:table-cell oder eben echten Tabellenzellen. Man könnte aber evtl. über die line-height oder die 50%-minus-halbe-Höhe-Zentrierung was drehen.

Gruß,
-Efchen

P.S.: Immerhin passt sich das gesamte Layout perfekt an die Schriftgröße an. Ich persönlich empfehle trotzdem Fließtext in der Größe von 1em, um die Browsereinstellungen zu respektieren.
 
Status
Für weitere Antworten geschlossen.

Neueste Beiträge

Zurück
Oben