Beiträge von Laerik

  • Holy Grail Layout

    Moin,


    ich bin momentan dabei mir ein Design für Drupal zu basteln, und zwar soll es vom Prinzip her dem Holy Grail Layout entsprechen.


    So ungefähr stelle ich mir das ganze vor:


    weiß == freie Flächen
    [Blockierte Grafik: http://laerik.de/upload/getfile/d7e62ac904530ce6bf1312b54e52e963.png]



    So ungefähr habe ich das auch schon hinbekommen, und zwar ungefähr (vereinfacht) so:



    Aktuell weise ich dem Header (bzw. dem Wrapper) eine Breite von 900px zu und zentriere diese via margin: 0 auto.
    Der page-content div enthält die sidebars und artikel und hat eine Breite von 1500px, ich zentriere diesen ebenfalls mit margin: 0 auto;
    Beim Footer gilt das gleiche wie beim Header.


    Problem ist nun, dass die Breite von Header und Footer nicht mit der des page-content Containers übereinstimmen und somit anders zentriert wird (siehe folgendes Bild)
    Ein weiteres Problem ist, dass wenn ich via Drupal eine Sidebar deaktiviere, die fixe Breite von 1500px bleibt, also eine freie Fläche entsteht, die das Design noch mehr "verrutschen" lässt.


    [Blockierte Grafik: http://laerik.de/upload/getfile/2031a34a063b9e6d55920202849dc8e7.png]



    Hat jemand vielleicht einen Ansatz für mich?



  • Float - Parent vermasselt Floating?

    Ähm.
    Der HTML-CSS-Mix war nur zu Testzwecken.
    Du hast meine Frage anscheinend falsch verstanden, denn ich suchte nicht nach einer Möglichkeit ein Nachrutschendes Element zu verhindern. (dafür verwende ich einen clearfix)

  • Float - Parent vermasselt Floating?

    Zitat von lauras

    Float nimmt Elemente aus dem normalen Fluss der Seite heraus und ordnet sie unabhängig vom normalen Fluss auf der entsprechenden Seite, in deinem Fall links, an.
    Wenn du dann ein nachfolgendes Element hast was kein float hat ordnet es sich so an, als ob das gefloatete Element nicht vorhanden wäre (deshalb ist die blaue Box in deinem Fall über die komplette Breite gestreckt).
    Danach schiebt sich lediglich der Inhalt des Elements nach rechts, weil der Inhalt des gefloateten Elements immer noch Platz einnimmt.#


    Gibst du beiden Elementen ein float ordnen sich beide außerhalb des normalen Seitenflusses "normal" nebeneinander an.


    Und wieso ist der zweite Absatz denn dann leicht "über" dem ersten, wenn er eigentlich nur nach rechts verschoben wird?
    Und wieso geht es, wenn ich einfach folgendes in ein leeres HTML Dokument einfüge:


    HTML
    <p style="float:left; background-color:red;">
					Anschrift
				</p>
				<p style="background-color:blue;">
					Max Mustermann
				</p>

  • Float - Parent vermasselt Floating?

    Moin,


    ich habe gerade ein Problemchen mit Float, und zwar habe ich zwei Textabsätze (p) und diese möchte ich nebeneinander floaten.


    Also:

    HTML
    <p style="float:left; background-color:red;">
					Anschrift
				</p>
				<p style="background-color:blue;">
					Max Mustermann
				</p>


    Das ganze funktioniert auch, aber wenn ich es nun in meiner Website einfüge, sieht es so aus:


    [Blockierte Grafik: http://laerik.de/img/hu/5335b544ed1a1.png]


    Auszug aus dem Quelltext:


    [Blockierte Grafik: http://laerik.de/img/hu/5335b566c4826.png]



    Wenn ich beide Absätze auf float:left stelle, geht es, aber ich verstehe nicht wieso es nicht normal geht.