herwig: spaltenlayout: text-float-problem

SELF-Forum

spaltenlayout: text-float-problem

herwig
– Informationen zu den Bewertungsregeln

Hallo zusammen,

Folgende Frage:

Um dazuzulernen versuche ich gerade, ein Spaltenlayout mittels css zu basteln, wobei ich mich nicht an vorhandenen tipps und layouts orientieren möchte, weil ich denke, ich verstehe schneller, wenn ich selbst dieverse workarounds erarbeite. aber jetzt stehe ich an:

könnt ihr mir sagen, ob der untere zugang überhaupt zielführend ist?
problem im moment: der text rechts verschiebt sich um die pixelbreite der linken spalte nach rechts. ist der linke div zu ende, floatet er nach links. kann ich das umgehen?

hier der code:

<?xml version="1.0" encoding="ISO-8859-1" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="de" xml:lang="de">
<head>

<title>Spaltenlayout</title>
<style type="text/css">
  body {
    color: black; background-color: white;
    font-size: 100.01%;
    font-family: Helvetica,Arial,sans-serif;
    margin: 0; padding: 1em 0;

}

div#Haupt {

border: 1px solid ;
  border-left:200px solid coral;
  background-color:blue;
  }

div#Links {
  background-color: red;
  position: relative; left:-200px;
  float:left;
  width:200px;
  }

</style>
</head>
<body>
<div id="Haupt">
<div id="Links">
links <br />
links links links <br />
</div>
rechts <br />
rechts <br />
rechts <br />
rechts <br />
</div>
</body>
</html>

danke!

herwig

Beitrag melden
–
Informationen zu den Bewertungsregeln

  1. spaltenlayout: text-float-problem

    wahsaga Homepage des Autors
    – Informationen zu den Bewertungsregeln

    hi,

    problem im moment: der text rechts verschiebt sich um die pixelbreite der linken spalte nach rechts. ist der linke div zu ende, floatet er nach links. kann ich das umgehen?

    Was umgehen?
    Ersteres? Das dürfte ja wohl so gewollt sein, sonst müsstest du nicht floaten.
    Zweiteres? Stecke den Text in ein eigenes Element, und verpasse diesem ein entsprechendes Margin.

    gruß,
    wahsaga

    --
    /voodoo.css:
    #GeorgeWBush { position:absolute; bottom:-6ft; }
    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

    1. spaltenlayout: text-float-problem

      herwig
      – Informationen zu den Bewertungsregeln

      Was umgehen?
      Ersteres? Das dürfte ja wohl so gewollt sein, sonst müsstest du nicht floaten.

      ja, ersteres: ich möchte den text rechts direkt neben dem linken div stehen haben, und nicht mit 200 px. abstand.
      wenn ich nicht floate,fängt der rechte text ja erst auf der höhe der unterkante des linken divs an.

      mach ich da einen denkfehler?

      Beitrag melden
      –
      Informationen zu den Bewertungsregeln

      1. spaltenlayout: text-float-problem

        wahsaga Homepage des Autors
        – Informationen zu den Bewertungsregeln

        hi,

        ja, ersteres: ich möchte den text rechts direkt neben dem linken div stehen haben, und nicht mit 200 px. abstand.

        Wozu soll denn überhaupt die Konstruktion mit einem 200px breiten Rahmen, und dann Verschiebung des gefloateten Bereiches per relativer Positionierung um -200px nach links dienen?

        Bei relativer Positionierung bleibt der Platz, den das Element ursprünglich eingenommen hätte, reserviert.

        mach ich da einen denkfehler?

        Möglich.
        Wenn du mal exakter beschreiben würdest, welches _Ergebnis_ du erzielen möchtest, könnte man dir vielleicht Alternativen vorschlagen.

        gruß,
        wahsaga

        --
        /voodoo.css:
        #GeorgeWBush { position:absolute; bottom:-6ft; }
        Beitrag melden
        –
        Informationen zu den Bewertungsregeln

        1. spaltenlayout: text-float-problem

          herwig
          – Informationen zu den Bewertungsregeln

          Möglich.
          Wenn du mal exakter beschreiben würdest, welches _Ergebnis_ du erzielen möchtest, könnte man dir vielleicht Alternativen vorschlagen.

          ok, gute idee:

          also: ich hätte gerne links eine spalte für die navigation: breite fix 200px, höhe soll sich anpassen. rechts variable breite und höhe.
          und: rechts und links sollen unterschiedliche hintergrundfarbe, durchgehend von oben bis unten, unabhängig, wieviel content in den divs ist.
          deshalb die idee mit dem linken breiten margin vom rechten div. blöde idee?

          p

          Beitrag melden
          –
          Informationen zu den Bewertungsregeln

          1. spaltenlayout: text-float-problem

            wahsaga Homepage des Autors
            – Informationen zu den Bewertungsregeln

            hi,

            also: ich hätte gerne links eine spalte für die navigation: breite fix 200px, höhe soll sich anpassen. rechts variable breite und höhe.
            und: rechts und links sollen unterschiedliche hintergrundfarbe, durchgehend von oben bis unten, unabhängig, wieviel content in den divs ist.
            deshalb die idee mit dem linken breiten margin vom rechten div. blöde idee?

            Nun ja, zumindest nicht so ganz praxistauglich.

            Leicht anderer Vorschlag: Menü nach links gefloatet, daneben Inhaltscontainer mit (ca.) 200px breitem border-left - sorgt für durchgehende Farbe unterhalb des Menüs unter weiter runter.

            Einem beide umgebenden Container (float nach Inhalt mittels clear wieder aufheben) wiederum die Hintergrundfarbe geben, die rechts zu sehen sein soll.

            gruß,
            wahsaga

            --
            /voodoo.css:
            #GeorgeWBush { position:absolute; bottom:-6ft; }
            Beitrag melden
            –
            Informationen zu den Bewertungsregeln