Anton: Schnittmenge von Rand links und unten füllen bei CSS

SELF-Forum

Schnittmenge von Rand links und unten füllen bei CSS

Anton
– Informationen zu den Bewertungsregeln

n'abend,

Mein Content floated nach rechts. Meine Navigationsleiste floated ebenfalls nach rechts. Im Browser befindet sich die Navigationsleiste auf der linken Seite. Der Content hat eine größere Höhe als die Navigationsleiste, da er mehr Inhalt hat. Meiner Navigationsleiste würde ich gerne einen linken Rand geben. Das hab ich zunächst so probiert:

#navigation {
  padding: 0;
  margin: 0;
  border-left-width:20px;
  border-left-style:solid;
  border-color:#4c4c4c;
  float: right;
  list-style-type: none;
  width: 140px;
}

Der linke Rand erscheint auch wie gewünscht. Das Problem ist, das der Content eine größere Höhe als die Navigationsleiste hat. Der linke Rand geht also nicht bis ganz nach unten. Genau das will ich allerdings erreichen. Wenn ich zusätzlich dafür sorge, das auch der untere Rand gesetzt wird, dann wird zwar das Quadrat (Schnittmenge zwischen linkem und unterem Rand) links unten gefüllt, es ist aber so das die Navigationsleiste dann auch einen unteren Rand hat.

Was also tun?

Beitrag melden
–
Informationen zu den Bewertungsregeln

  1. Schnittmenge von Rand links und unten füllen bei CSS

    suit Homepage des Autors
    – Informationen zu den Bewertungsregeln

    Was also tun?

    ich weiss zwar nicht, was du genau meinst - aber ggf helfen dir faux columns

    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

    1. Schnittmenge von Rand links und unten füllen bei CSS

      Anton
      – Informationen zu den Bewertungsregeln

      Hi,

      sorry suit du konntest garnicht wissen, was ich meine, da ich es falsch erklärt habe. Hier einfach mal der Code. Dann sollte klar werden was ich meine.

        
<body>  
  <div id="inhalt">  
    <p>Wie man sieht, ist der Text dieses Bereichs so lang, dass die Höhe dieses Bereichs größer ist als die Höhe der Navigation auf der linken Seite. Deshalb ist bei der Navigation auch noch die rote Hintergrundfarbe des bodys zu erkennen. Der linke grüne Rahmen den Navigation soll weiter nach unten gehen, bis zum Ende des grauen Bereichs. Wie kann ich das am besten lösen?  
    </p>  
  </div>  
  <ul id="navigation">  
    <li><a href="#">link 1</a></li>  
    <li><a href="#">link 2</a></li>  
    <li><a href="#">link 3</a></li>  
  </ul>  
  <address id="footer">meine Adresse</address>  
</body>

      und das zugehörige CSS:

        
html {  
  padding: 0;  
  margin: 0;  
  background: yellow;  
}  
  
body {  
  padding: 0;  
  margin: 20px auto;  
  width: 780px;  
  background: red;  
}  
  
#inhalt {  
  background: #4c4c4c;  
  width: 700px;  
  float: right;  
}  
  
#navigation {  
  padding: 0;  
  margin: 0;  
  width: 60px;  
  float: left;  
  list-style-type: none;  
  border-left-width: 20px;  
  border-left-style: solid;  
  border-color: green;  
}  
  
#footer{  
  clear: both;  
}
      Beitrag melden
      –
      Informationen zu den Bewertungsregeln

      1. Schnittmenge von Rand links und unten füllen bei CSS

        Anton
        – Informationen zu den Bewertungsregeln

        Keiner da der mir hier weiterhelfen kann?

        Beitrag melden
        –
        Informationen zu den Bewertungsregeln

        1. Schnittmenge von Rand links und unten füllen bei CSS

          suit Homepage des Autors
          – Informationen zu den Bewertungsregeln

          Keiner da der mir hier weiterhelfen kann?

          doch, faux columns kann - wenn ich dich nun richtig verstanden habe (aber das sagte ich bereits)

          Beitrag melden
          –
          Informationen zu den Bewertungsregeln

          1. Schnittmenge von Rand links und unten füllen bei CSS

            Anton
            – Informationen zu den Bewertungsregeln

            Ich war zunächst etwas abgeschreckt, weil es auf der von dir vorgeschlagenen Seite auf Englisch erklärt wird. Habs jetzt aber gelesen.

            Ich hab mir jetzt eine eine Grafik gebaut mit den Abmessungen (780 x 10) die am linken Rand die gewünschte Farbe hat. Die Grafik hab ich folgendermaßen eingebunden:

            body {
             padding: 0;
             margin: 20px auto;
             width: 780px;
             background: #373e44 url(../images/background.jpg) repeat-y;
            }

            Es klappt jetzt tabellos.

            Naja hätte halt gedacht, das es für sowas eine elegantere Lösung gibt, aber wie auch immer Hauptsache es klappt.

            Beitrag melden
            –
            Informationen zu den Bewertungsregeln

            1. Schnittmenge von Rand links und unten füllen bei CSS

              suit Homepage des Autors
              – Informationen zu den Bewertungsregeln

              abgeschreckt, weil es auf [...] Englisch erklärt wird.

              und dann schreibst du sowas:

              body
              padding
              margin
              auto
              width
              background
              images
              repeat

              versteh ich nicht ;)

              Naja hätte halt gedacht, das es für sowas eine elegantere Lösung gibt, aber wie auch immer Hauptsache es klappt.

              es gibt noch die möglichkeit das ganze über einen rahmen zu steuern (wenn die spalten einfärbig sind) - aber die hintergrundgarfikvariante ist imho eindeutig die beste

              Beitrag melden
              –
              Informationen zu den Bewertungsregeln