Layouten ganz einfach! [TEIL 1] & [TEIL 2]

  • Vorwort


    Mir ist aufgefallen das immer wieder die Frage nach zentrierten (dynamischen) Layouts und der Positionierung einzelner Elemente auftaucht. Also habe ich mich dafür entschieden ein kleines Tutorial zu schreiben um den Umstieg auf CSS zu erleichtern. Wer seine Layouts mit CSS gestalltet schafft sich grosse Vorteile wie z. B. übersichtlichen HTML-Code, mehr gestalterische Möglichkeiten, Barrierefreiheit, Templatefunktion, geringere Ladezeiten und viele weitere Vorteile. Leider gibt es auch einen kleinen (grossen) Nachteil von der Browserseite, denn nicht jeder Browser rendert ein Stylesheet auf die gleiche Art. D. h. es kann in unterschiedlichen Browsern zu unterschiedlicher Darstellung kommen und genau deshalb sollte man sich vor dem erstellen eines Layouts überlegen für welche Benutzergruppe man seine Hompepage erstellen möchte. Aber für Anfänger ist es empfehlenswert das Layout für den Internet Explorer (IE) und/oder für Firefox (FF) zu erstellen.


    Für dieses Tutorial sind keine Vorkenntnisse erforderlich. Ich werde im Groben auf die wichtigsten HTML-Elemente eingehen die für die Erstellung eines Layouts mit CSS unbedingt notwendig sind. Danach schauen wir uns an wie man ein Stylesheet erstellt und in eine externe Datei auslagert, was uns die Möglichkeit bietet das Stylesheet als Template zu verwenden. Im ersten Teil werde ich lediglich auf Positionierung von Boxen und weniger auf gestalterische Möglichkeiten eingehen.


    Wir erstellen ein Dynamisches Layout (Header, Topnavigation, Menü links und rechts, Content, Footer) das bequem in eine 1024x768 Auflösung passen und mit dem Inhalt wachsen soll.


    ...und los geht´s.



    HTML (HyperText Markup Language)


    Ganz am Anfang eines HTML-Dokumetes steht ein DOCTYPE . Das brauchen wir damit der Browser weiss mit welcher Art von Dokument er es zu tun hat. Um CSS zu üben ist es sinnvoll ein strict Doctype zu wählen, denn dieses lässt viele Attribute zur Visualisierung in HTML nicht mehr zu, was einen dazu zwingt evt. Visualisierungsprobleme mit CSS anstatt mit HTML zu lösen.


    Nach dem Doctype wird HTML mit dem <html>Tag eingeleitet.


    Als nächstes brauchen wir einen Header (Kopf) der Meta-Angaben und Titel des jeweiligen Dokumentes beinhaltet. Darüberhinaus werden die Stylesheets in den Header geschrieben. Alles was im Header verzeichnet ist kann der Anwender nicht im Browserfenster sehen.


    Auf den Header folgt der Body (Körper) in dem wir unsere Elemente positionieren die der Anwender im Browserfenster sehen kann.


    Und zu guter letzt wird das <html>Tag wieder geschlossen mit </html>.


    Schauen wir uns nun mal so ein HTML-Dokument an.



    Und nun brauchen wir noch ein Div (allgemeines Block-Element) das im body verarbeitet wird. Div steht für division (Bereich). Um so ein Div mit CSS verarbeiten zu können, müssen wir dem Div noch eine Identität (id) zuweisen mit der wir später dann die Verbindung zu einem Selektor herstellen.


    Code
    1. <div id="Container">Hier steht der Inhalt des Divs</div>


    Wieviele Divs brauchen wir also nun für unser Vorhaben? Wir erinnern uns. Das Layout soll Header, Topnavigation, Menü links und rechts, Content und Footer haben. Demnach brauchen wir 6 Divs!? Fast richtig, nun fehlt uns nur noch ein Div in das wir alles reinpacken. Ich gebe diesem Div einfach mal die "id" Container und packe alles zusammen in den body. Um das ganze noch etwas übersichtlicher zu gestallten kann man Kommentare <!--Kommentar--> benutzen. Diese werden im Browserfenster nicht angezeigt sonder dienen lediglich dem Programmierer zur besseren Übersicht.



    So, das war´s auch schon mit dem nötigsten an HTML. Nun schauen wir uns endlich CSS an.



    CSS (Cascading Stylesheet)


    Um eine Verbindung zwischen CSS und den Elementen im body herstzustellen, brauchen wir Selektoren . In diesem Tutorial bafassen wir uns mit Universal-Selektoren, Typ-Selektoren und ID-Selektoren. Um ein Element zu bearbeiten brauchen wir ein Selektor, danach öffnen wir eine geschweifte Klammer, Stylesheetangaben (Attribut, Doppelpunkt, Wert, Semikolon) und geschweifte Klammer wieder schliessen.
    Hier ein Beispiel mit dem Typ-Selektor html.

    Code
    1. html {height:100%;}


    Um nun unsere Elemente (divs oder auch Boxen genannt) mit CSS positionieren zu können, sollten wir uns zuerstmal das Boxmodell anschauen. Um das Boxmodell zu verstehen müssen wir uns etwas näher mit den Attributen margin, padding und border beschäftigen.


    Margin ist der Aussenabstand einer Box zu der danebenliegenden oder übergeordneten Box.


    margin-top:10px;
    margin-right:10px;
    margin-bottom:10px;
    margin-left:10px;


    Mit diesen Attributen würde eine Box mit 10px Abstand zu jeder Seite der darüberliegenden Box positioniert.
    Eine andere Schreibweise ist margin:10px 10px 10px 10px. Es wird von top im Uhrzeigersinn zu left gelesen. Oder auch margin:10px 10px. Der erste Wert seht für top und bottom und der zweite für left und right.


    Padding bewirkt das Gegenteil von margin, also der Innenabstand zu der darunterliegenden Box.


    padding-top:10px;
    padding-right:10px
    padding-bottom:10px
    padding-left:10px;
    oder padding:10px 10px 10px 10px;
    oder padding:10px 10px;


    Um sich nun mit diesen beiden Attributen etwas vertraut zu machen, habe ich hier eine kleine Aufgabe für euch. Wir habe in folgendem Text eine grosse gelbe Box in welcher in der rechten Ecke oben eine kleine rote Box positioniert ist.
    - Die erste Aufgabe ist es die kleine rote Box mit dem Attribut margin in der unteren rechten Ecke der gelben Box zu positionieren.
    - Die zweite Aufgabe ist es die kleine rote Box mit dem Attribut padding in der Ecke rechts unten zu positionieren.
    Die zweite Aufgabe ist nicht ganz so einfach zu lösen wie die erste. Ich wünsche euch viel Spass beim rätseln und rumprobieren. Einfach den Quelltext in einen Editor kopieren und los geht´s...



    Nun aber kommen wir zum Layout. Zuerst müssen wir CSS einleiten. Das machen wir mit <style type="text/css">. Mit </style> schliessen wir das Tag dann wieder und anschliessend setzen wir mit dem Universal-Selektor alle margins und paddings auf 0. Danach setzen wir die Höhe (height) für html fest und geben dem body noch eine Breite (width), eine Hintergrundfarbe (background-color), Schriftart mit font-family und eine Schriftgrösse .



    Nun positionieren wir den Container in dem wir alle unsere Elemente drin haben. Wir geben dem Container eine Breite von 960px, damit er in die 1024er Auflösung passt. Mit margin:0 auto legen wir fest das der Abstand des Containers von oben und unten des bodys gleich Null ist und von links und rechts automatisch definiert wird. Somit erreicht man das sich das Layout immer in der Mitte des Bilschirms befindet.

    Code
    1. #container {
    2. width:960px;
    3. margin:0 auto;
    4. }


    Als nächsten kommen Header und Topnavigation an die Reihe die wir genau so breit machen wie das Content. Dem Header habe ich spontan mal eine Höhe von 100px und der Topnavigation von 25px gegeben. Damit wir nun endlich mal ein Ergebniss sehen können, weisen wir den beiden Elementen noch eine Hintergrundfarbe zu und jetzt ist auch endlich im Browserfenster was sichtbar.


    Die nächste Aufgabe ist es die Menüs und das Content nebeneinander zu positionieren. Hierzu müssen wir floaten und wer floatet muss auch clearen . Das Linke Menü wird mit float:left und das Rechte, wie soll es auch anders sein wird mit float:right gefloatet. Um diese Elemente nun zu clearen verwende ich overflow:auto; in dem darüberliegenden Element, also im Container. Es gibt allerdings mehrere Möglichkeiten zu floaten aber Näheres dazu findet ihr hier. Nun brauchen die Elemente noch eine Breite und eine Hintergrundfarbe, fertig.


    Zuletzt kommt dann noch der Footer dem wir ebenfalls eine Breite, eine Höhe und eine Hintergrundfarbe geben. Man könnte nun schon Anfangen das ganze mit Inhalt zu füllen, was aber über HTML geschieht und nicht über CSS. Der Inhalt wird in die HTML-Tags geschrieben. Wenn ihr nun in das Content eine Text schreibt, könnt ihr sehen das sich das Layout in der Höhe mitverändert. Damit der Text nun aber nicht über das Content hinauswächst benutzen wir ebenfalls das Attribut overflow.
    Nun höre ich den einen oder anderen schon klagen, ...aber die Menüs wachsen doch gar nicht mit dem Inhalt des Content mit. Eine Lösung dafür ist, dem Container die gleiche Hintergrundfarbe zu geben wie den Menüs. Man muss aber beachten das die Menüs nicht mitwachsen sonder das ist lediglich eine Trick fürs Optische. Die Menüs wachsen ebenfalls nur mit Inhalt. Die Elemente in denen keine Höhe angegeben wurden können mit dem Inhalt wachsen.


    Aber hier nun der vollständige Quelltext für das ganze Layout.


    Damit nun das ganze aber auch als Template Verwendung findet, müssen wir den CSS-Teil in eine exteren Datei auslagern in der die Einleitung von CSS mit <style> nicht nötig ist, da wir diese Datei als CSS-Datei abspeichern. Kopiere das Sheet in eine neue Datei und nenne diese z. B. dateiname.css und schreibe in den Header <link rel="stylesheet" type="text/css" href="dateiname.css">. Hierbei ist zu beachten das die ausgelagerte Datei im selben Wurzelverzeichniss liegen muss.


    Das war´s schon. Nun habt ihr ein (noch sehr bescheidenes) Layout das sich bei jeder Auflösung immer in der Mitte des Bilschirms befindet und darüber hinaus noch einen aufgeräumten HTML-text. Wunderbar, oder??? Im Anhang findet ihr noch ein Bildchen von der Margin- Paddingübung und noch eines von unserem Layout.


    ...und die Moral von der Geschichte
    Aller Anfang ist gar nicht mal so schwer und mit etwas Geduld und Übung kann man schon recht schnell ohne Tabellensuppe ein Layout erstellen. Für den Anfang sollte genügend Info und Links vorhanden sein. Ich wünsche noch viel Spass beim Layouten.:)


    Hier geht es zum zweiten Teil von Layouten ganz einfach!


    Links
    www.css4you
    Clearen - Viele Wege führen nach Rom
    www.ohne-css.gehts-gar.net/
    de.selfhtml.org/css/index.htm

    Das Leben ist schön - :D
    Lehren ist die schönste Methode zu lernen.

    2 Mal editiert, zuletzt von Sascha79 ()

  • Hallo Sascha79,


    das hab ich auch eben erst gefunden, Hut ab....


    Da steckt wieder jede Menge Arbeit dahinter.


    Nen großes I-Tüpfelchen wär noch, wenn zu den einzelnen Entwicklungsstadien ein Bildchen vorhanden wäre. Damit man gleich sieht ob man richtig kopiert und eingefügt hat :D


    Grüße zulu

  • Vielen Dank für das Lob. Ich werde aber hir und da noch einige kleine Änderungen vornehmen in denen ich dann auch eure Verbesserungsvorschläge miteinbeziehen werde. Aber das mach ich dann alles auf einmal. Freut mich wenn euch das Tutorial gefällt.:) Bin schon in Gedanken beim zweiten Teil. Aber der muss vorerst noch warten, da ich mit meiner eigenen Site auch noch viel Arbeit vor mir habe.

    Das Leben ist schön - :D
    Lehren ist die schönste Methode zu lernen.

  • Wow, 1000 Dank, jetzt habe ich endlich kapiert, wie ich die css-Daten in eine Datei auslagere, und mit der Anwendung der Vorlage klappt's jetzt auch.

  • Vorwort


    Hallo und herzlich willkommen zum zweiten Teil meines Tutorials "Layouten ganz einfach!" Wer sich den ersten Teil aufmerksam durchgelesen hat sollte nun in der Lage sein, ein zentriertes Layout das sich immer in der Mitte des Bildschirms positioniert, zu erstellen. Für den zweiten Teil setze ich eigentlich nur den ersten Teil voraus. Wir werden uns nochmals das Boxmodell im Bezug auf das Attribut Border anschauen und des weiteren werden wir eine Navigation erstellen, welche ja auf keiner Homepage fehlen sollte. Natürlich gibt es in CSS noch viele weitere Attribute von denen ich euch hier noch einige weitere vorstellen werde. Was ich im Bezug auf das Programmieren mit CSS für sehr wichtig halte ist, das Sheet so klein und übersichtlich wie möglich zu halten. Mir ist nämlich des öfteren aufgefallen das sich grundlegende Probleme, in der Anwendung von CSS, auf zugemüllte Sheets zurückzuführen sind, was soviel bedeutet, das in so einem Fall unnötig mit Selektoren und Attributen jongliert wird. Wer Selektoren und Attribute gezielt und bewusst einsetzt hat nachher auch weniger Probleme, nicht nur mit den verschiedenen Browsern sonder auch mit der Übersicht des Sheets.


    Im ersten Teil von "Layouten ganz einfach" habe ich krurz beschrieben was HTML ist und für unser Layout auch ein HTML - Doctype verwendet. An dieser Stelle möchte ich noch kurz auf XHTML eingehen, welches wir dann auch in unserem Layout anwenden werden.


    Lange Rede, kurzer Sinn und los geht´s.


    XHTML (Extensible Hypertext Markup Language)


    XHTML ist W3C-Standart und bedeutet soviel wie erweiterbares HTML. Es ist eine textbasierte Auszeichnungsprache zur Darstellung von Inhalten wie Texten, Bilder und Hyperlinks. Mit XHTML wurde HTML 4 in XML 1.0 neu definiert. Einfach gesagt XHTML ist eine neue Version von HTML. Was ist nun für uns wichtig wenn wir mit XHTML arbeiten wollen.
    1. Die Gross- und Kleinschreibung wird in XML nicht ignoriert, daher sollten bei XHTML alle Tag-Namen klein geschrieben werden. Also so <b></b> und nicht so <B></B>.
    2. Tags ohne Inhalt sollten in XHTML unbediengt geschlossen werden oder mit einem leeren Element-Tag versehen werden. Z. B. so <br></br> oder bevorzugt aus Gründen der Kompatibilität so <br />.
    3. In HTML ist das weglassen von End-Tags noch teilweise erlaubt. In XHTML sollte man immer beide (Start- und End-Tag) angeben.
    4. Boolesche Attribute, Attributname als Attributwert angeben wie z. B. <input type="radio" checked="checked" />


    Es gibt noch mehr Wissenswertes über XHTML. Aber das würde den Rahmen dieses Tutorials sprengen. Mehr Information über XHTML findet ihr bei SELFHTML .


    Wer auch hier ein Strict Doctype wählt lernt besser CSS.


    CSS


    In diesem Tutorial werden wir uns noch einige wichtige Attribute zur Positionierung und Gestaltung des Layouts ansehen. Als Grundlage dafür nehmen wir das Layout aus Teil 1.
    Aber zuvor noch zwei kleine Übungen um etwas Routine zu gewinnen.


    1. Nimm Papier und Stift zur Hand und schau dir folgenden Quelltext an. Nun versuch mal zu zeichnen wie dieses im Fenster eines Browsers aussehen könnte. Ihr müsst kein Kunstwerk daraus machen lediglich eine kleine Skizze. Um zu prüfen ob ihr richtig gezeichnet habt findet ihr im Anhang ein Bild von dem Script.


    2. Baue die folgende Figur nach. Welche Höhen, Breiten oder Farben verwendet werden, spielt keine Rolle solange das Endprodukt das Selbe ist. Es kann aber auch das Sheet aus der ersten Übung als Grundlage verwendet werden.


    [Blockierte Grafik: http://www.traum-projekt.com/forum/attachments/40594d1231632420-layouten-ganz-einfach-teil-2-ueben2.jpg]



    Nun kommen wir aber zu dem Attribut border, das wie margin und paddin ebenfalls eine sehr wichtige Rolle des Boxmodells spielt. Aber vorher nochmal der Quelltext des Layouts (Vorsicht: dieses mal in einer XHTML-Strict Version.)



    Nun basteln wir mal einen Rahmen um den #header. Das machen wir mit dem Attribut border , dann braucht der Rahmen noch eine Breite, eine Art und eine Farbe und das in dieser Reihenfolge. Die Deklaration sieht dann z. B. so aus: { border:10px solid #000000; }. Mit solid teilen wir CSS mit das der Rahmen eine durchgezogenen Linie sein soll. Es gibt verschiedene Arten einen Rahmen zu gestalten. Hier eine kleine Übersicht.


    1. none -> kein Rahmen
    2. dotted -> gepunktet
    3. dashed -> gestrichelt
    4. solid -> durchgezogen
    5. double -> doppelt durchgezogen
    6. groove -> 3D-Effekt
    7. ridge -> 3D-Effekt
    8. inset -> 3D-Effekt
    9. outset -> 3D-Effekt


    Ich habe hier einen extra breiten Rahmen zur besseren Darstellung gewählt. In der Praxis ist ein 10px breiter Rahmen eher selten der Fall, aber das ist letzten Endes Geschmacksache. Nun sehen wir das hier irgendetwas mit dem Rahmen nicht stimmt, denn er steht auf der rechten Seite über. Das liegt daran das links und rechts sowie oben und unten vom Element #header 10px mehr vorhanden sind, was soviel bedeutet das horizontal sowie vertikal insgesamt 20px mehr vorhanden sind. Wenn wir nun dem header in Höhe und Breite 20px abziehen dann passt es wieder nur diesmal mit einem Rahmen. Das Selbe probieren wir nun einmal im #content aus. Wir setzen auch hier ein border von 10px und siehe da, komischerweise wird hier nichts verschoben, denn der Rahmen wächst im Element nach innen. Die Antwort ist ganz einfach. Für den #content haben wir ja schon ein overflow:auto definiert damit die Schrift nicht über die Box hinauswächst und genau das Selbe passiert nun mit dem Rahmen. Denn mit dem Attribut overflow etablieren wir einen eigenständigen Bereich, der seine Inhalte unabhängig von der Umgebung einschliesst.


    Nun ist aber gut mit Boxmodell, kommen wir nun zur Navigation. Dazu brauchen wir zuerstmal eine Liste im Topnavi Div. Das ganze könnte dann folgendermassen aussehen.


    <div id="topnavi">
    <ul id="tp_nav">
    <li>Link 1</li>
    <li>Link 2</li>
    <li>Link 3</li>
    <li>Link 4</li>
    <li>Link 5</li>
    </ul>
    </div><!--end topnavi-->


    Wer sich das nun im Browser anschaut wird feststellen das dies alles andere als eine Topnavigation ist. Um nun auf die Liste mittels CSS zuzugreifen brauchen wir den Selektor ul#tp_nav, mit dem wir CSS mitteilen das wir auf die Liste mit der Identität tp_nav zugreifen wollen. Um nun die Auflistungspunkte der einzelnen Listenpunkte zu entfernen benutzt man list-style-type welchem wir den Wert "none" zuweisen und dann sollten wir die Liste noch mit text-align und dem Wert "center" mittig vom Div platzieren. Nun müssen wir auf die einzelnen Listenpunkte zugreifen um diese in eine Reihe zu bekommen. Dazu verwenden wir den Selektor ul#tp_nav li und geben das Attribut display mit dem Wert "inline" an, dann das ganze noch left floaten (nicht vergessen zu clearen) und nun den einzelnen Listenpunkten noch eine Breite verpassen. Das Div "topnavi" hat eine Breite von 960px und wir haben 5 Listenpunkte, demnach eine einfache Rechnung. 960px geteilt durch 5 Listenpunkte ergibt 192px Breite für jeden Listenpunkt und nun befindet sich die Liste mittig im Div. Um nun auch wirklich noch einen Link aus der ganzen Geschichte zu machen, braucht ihr in HTML noch einenVerweis.


    Noch eine kleiner Hinweis. Der IE sollte bis zur Version 6 ein Problem mit overflow:auto haben. Wer sich einmal näher mit Browsern auseinandersetzt wird schnell feststellen das der IE Sonderansprüche stellt, welche man z. B. mit Browserweichen oder einem Crack beheben könnte. Das ist aber ein anderes Kapitel. Eine schnelle Lösung für unser Layout im IE6 ist, das #content mit einer Breite von 554px zu deklarieren, fertig. Eigentlich müssten es ja 560px sein, aber auch hier hat der IE6 Sonderwünsche. Aber Vorsicht. Solltet ihr mit border oder margin im #content arbeiten ändert sich der Wert der Breite wieder.


    Nun zum Ende des Zweiten Teil des Tutorials nochmal der Vollständigkeit halber, das ganze Sheet.


    Ich wünsche euch noch viel Spass mit eurer Homepage. Bis zum nächsten Tutorial.:)

    Das Leben ist schön - :D
    Lehren ist die schönste Methode zu lernen.

    6 Mal editiert, zuletzt von Sascha79 ()

  • Einen kleinen Verbesserungsvorschlag hätte ich anzubringen:

    Code
    1. <div id="topnavi">
    2. <ul id="tp_nav">


    Hier ist der div #topnavi überflüssig. Dessen Eigenschaften können ebenso dem ul id #tp_nav zugewiesen werden.


    Im Hinblick auf die Vermeidung einer "Div-Suppe" sollte man stets versuchen, mit so wenig wie möglich Elementen auszukommen. Dort, wo es spezielle Elemente gibt (hier ul) sollte man diese entsprechend formatieren und kann so auf zusätzliche allgemeine Elemente verzichten.

  • Einen kleinen Verbesserungsvorschlag hätte ich anzubringen:

    Code
    1. <div id="topnavi">
    2. <ul id="tp_nav">


    Hier ist der div #topnavi überflüssig. Dessen Eigenschaften können ebenso dem ul id #tp_nav zugewiesen werden.


    Das ist richtig. Das ganze sieht dann so aus.

    Code
    1. ul#tp_nav {
    2. width:960px;
    3. height:25px;
    4. background-color:#ff9900;
    5. list-style-type:none;
    6. text-align:center;
    7. overflow:auto;
    8. }


    Ich werde darauf aber noch näher im dritten und letzten Teil eingehen, wenn es dann allgemein um das Thema Navigation geht.

    Das Leben ist schön - :D
    Lehren ist die schönste Methode zu lernen.

  • Ich hab den Workshop zwar noch nicht gelesen, aber dennoch mal oben angepinnt.


    In jedem Fall dafür, dass Du dir die Zeit genommen hast den Workshop zu schreiben. [Blockierte Grafik: http://www.traum-projekt.com/forum/images/icons/icon14.gif]

  • Hallo...


    bzgl der Übung aus dem ersten Teil.
    Wenn ich die kleine Box mittels margin-right:500px; und margin-top:500px; in die rechte untere Ecke bewegen möchte dann rutscht die große Box auch 500px vom body runter.Wieso das?
    Außerdem ist die kleine Box bei mir oben links und nicht oben rechts. :/

  • Die kleine Box ist ursprünglich in der Tat links oben.


    Wenn du sie rechts unten haben wilsst, dann darft du als margin-Werte jeweils nur 450px nehmen, denn du musst ja die Breite und Höhe der kleinen Box selbst noch berücksichtigen.


    Dass sich dadurch die große Box nach unten verschiebt, kann ich nicht nachvollziehen.


    Das ganze funktioniert allerdings nur, solange die Boxen keinen Inhalt haben, sonst verschiebt sich dadurch wieder alles.
    Mit Inhalt wäre in diesem Fall ausnahmsweise eine absolute Positionierung besser, siehe hier

  • Vielleicht kannst du mir auch sagen:
    warum sich die kleine blaue box nicht in der großen grünen zentriert.
    hab sie mit margin:auto auto zwar in die
    horizontale mitte gebracht aber vertikal ist sie noch immer am oberen rand.




    Der Code dazu ist hier :


    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Test mit den Boxen</title>
    <style type="text/css">
    * {
    margin:0;
    padding:0;
    font-family: Verdana, Geneva, sans-serif;
    font-size: 9px;
    text-decoration: none;
    color: #C0F;
    }



    #wrap {
    float:left;
    height:300px;
    width:300px;
    }



    #ol {
    height:150px;
    width:150px;
    background-color:#99cc00;
    }


    #inol {
    height:75px;
    width:75px;
    margin:auto;
    background-color:#0099cc;
    }
    #clr {
    clear:both;
    }



    </style>



    </head>


    <body>


    <div id="wrap">
    <div id="ol">
    <div id="inol">
    <p>das ist der kleine blaue Block</p>
    <p>&lt;div id=inol&gt;</p>
    </div>
    </div>



    </body>
    </html>

  • Sascha, Danke für die tolle Arbeit, dein Tutorial. [Blockierte Grafik: http://www.youmonster.de/froggy/thumbsup.gif]
    Ich hab Dir mal ein paar grüne Renomee Punkte reingedrückt. In der Hoffnung das bald drei Ampeln da sind.


    [edit]
    Ich hoffe dieser Website Workshop (Teil 1 - 7) ist ebenfalls hilfreich.
    [/edit]

    Gruß HMV

    Einmal editiert, zuletzt von His.Master's.Voice () aus folgendem Grund: Link ergänzt

  • Hallo,
    ich muss schon zugeben, dass das sehr gut gelungen ist deine Arbeit. Es muss dir wohl viel Mühe gekostet haben um sowas anzufertigen.

  • Eine Frage
    ich zentriere meine divs immer mit margin auto
    vermehrt finde ich den code
    position: absolut;
    right 50%;
    left 50%;
    beides führ zum gleichen Ergebnis. Welche Lösung ist zu bevorzugen?
    Danke vorab für eine Antwort

  • ^ Kommt drauf an…


    Generell ist margin: auto; aber durchaus die krisensichere Variante. Position: absolute; zu vermeiden, wo's geht, ist ebenfalls nicht die schlechteste Strategie. Meist ist die left: 50%; Variante ja auch noch mit negativem margin-left gekoppelt, was das Element bei zu kleinem Viewport verschwinden lässt. Das heisst aber nicht, dass sie grundsätzlich schlechter ist, es gibt auch sinnvolle Einsatzmöglichkeiten dafür.