Daniel: Layout Probleme... CSS-Freaks an die Front!!!

SELF-Forum

Layout Probleme... CSS-Freaks an die Front!!!

Daniel
– Informationen zu den Bewertungsregeln

Hallo,
hab vor ein paar Tagen schonmal gepostet.
Habe ein Problem mit dem Layout.
Das Menü ragt unten aus dem globalcontainer raus.

Hier der Html-Quelltext:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/transitional.dtd">
<html>
  <head>
    <title>musicfields</title>
    <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
    <link rel="stylesheet" type="text/css" href="xtra/main.css">
  </head>
  <body>
    <div id="globalcontainer">
      <div id="title">
        <img src="gfx/logo_01.jpg" id="logo" alt="" />
      </div>
      <div id="navitop">
        <a href="#" target="_self">Startseite</a>::<a href="#" target="_self">&Uuml;ber Musicfields</a>::<a href="#" target="_self">Hilfe &amp; Kontakt</a>::<a href="#" target="_self">K&uuml;nstlereingang</a>
      </div>
      <div id="menueleft">
        <a href="#" target="_self">Rock &amp; Pop</a>
        <a href="#" target="_self">Rock &amp; Pop</a>
        <p class="menuetitle">&nbsp;</p>
      </div>
      <div id="content">
        &nbsp;
      </div>
    </div>
  </body>
</html>

HIER DAS STYLESHEET:
body {
  font-family: Verdana;
  font-size: 12px;
  background-color: #CCCCCC;
  text-align: center;
  margin: 0px;
  }

#globalcontainer {
  text-align: left;
  margin: 0px auto;
  padding: 0px;
  width: 780px;
  background-color: #FFFFFF;
  border-style: solid;
  border-width: 1px;
  border-color: #000000;
  }

#title {
  background-color: #CCCCCC;
  background-image: url(../gfx/bg_head.gif);
  background-repeat: repeat-x;
  border-bottom-style: solid;
  border-bottom-width: 1px;
  border-bottom-color: #000000;
  }

#logo {
  width: 294px;
  height: 71px;
  }

#navitop {
  height: 15px;
  background-color: #CCCCCC;
  background-image: url(../gfx/bg_leiste.gif);
  background-repeat: repeat-x;
  border-bottom-style: solid;
  border-bottom-width: 1px;
  border-bottom-color: #000000;
  font-size: 10px;
  font-weight: bold;
  vertical-align: middle;
  text-align: right;
  color: #000000;
  }

#navitop a:link {
  font-weight: bold;
  color: #000000;
  text-decoration: none;
  padding-left: 10px;
  padding-right: 10px;
  }

#navitop a:visited {
  font-weight: bold;
  color: #000000;
  text-decoration: none;
  padding-left: 10px;
  padding-right: 10px;
  }

#navitop a:hover {
  font-weight: bold;
  color: #2A3FFF;
  text-decoration: none;
  padding-left: 10px;
  padding-right: 10px;
  }

#navitop a:active {
  font-weight: bold;
  color: #2A3FFF;
  text-decoration: none;
  padding-left: 10px;
  padding-right: 10px;
  }

#menueleft {
  width: 160px;
  float: left;
  background-color: #CCCCCC;
  background-image: url(../gfx/bg_menue.gif);
  background-repeat: repeat-y;
  font-size: 10px;
  font-weight: bold;
  vertical-align: middle;
  text-align: left;
  color: #000000;
  }

.menuetitle {
  height: 15px;
  background-color: #CCCCCC;
  background-image: url(../gfx/bg_leiste.gif);
  background-repeat: repeat-x;
  border-bottom-style: solid;
  border-bottom-width: 1px;
  border-bottom-color: #000000;
  padding: 0px;
  margin: 0px;
  }

#menueleft a:link {
  display: block;
  vertical-align: middle;
  font-weight: bold;
  color: #000000;
  text-decoration: none;
  padding-left: 10px;
  padding-top: 2px;
  padding-bottom: 2px;
  border-bottom-style: solid;
  border-bottom-width: 1px;
  border-bottom-color: #000000;
  }

#menueleft a:visited {
  font-weight: bold;
  color: #000000;
  text-decoration: none;
  padding-left: 10px;
  padding-top: 2px;
  padding-bottom: 2px;
  border-bottom-style: solid;
  border-bottom-width: 1px;
  border-bottom-color: #000000;
  }

#menueleft a:hover {
  font-weight: bold;
  color: #2A3FFF;
  text-decoration: none;
  padding-left: 10px;
  padding-top: 2px;
  padding-bottom: 2px;
  border-bottom-style: solid;
  border-bottom-width: 1px;
  border-bottom-color: #000000;
  }

#menueleft a:active {
  font-weight: bold;
  color: #2A3FFF;
  text-decoration: none;
  padding-left: 10px;
  padding-top: 2px;
  padding-bottom: 2px;
  border-bottom-style: solid;
  border-bottom-width: 1px;
  border-bottom-color: #000000;
  }

#content {
  width: 620px;
  }

BITTE UM HILFE!!! ICH VERZWEIFLE

Beitrag melden
–
Informationen zu den Bewertungsregeln

  1. Posting Probleme... Weniger ist mehr!

    Götz Homepage des Autors
    – Informationen zu den Bewertungsregeln

    Hallo Daniel!

    Das Menü ragt unten aus dem globalcontainer raus.

    Hier der Html-Quelltext:
    [...]

    HIER DAS STYLESHEET:
    [...]

    BITTE UM HILFE!!! ICH VERZWEIFLE

    Weniger ist manchmal mehr.

    Wie wärs denn, wenn Du Deine Seite einfach verlinkst, dann würde sich vielleicht auch irgendjemand das mal anschauen.
    Aber ich les mir doch nicht im Forum irgendwelche ewig langen Quelltexte durch.

    MfG
    Götz

    --
    Losung für Sonntag, 28. November 2004
    Die Israeliten sprachen zum Herrn: Wir haben gesündigt, mache du es mit uns, wie dir's gefällt; nur errette uns heute! (Richter 10,15)
    Der Engel sprach zu Maria: Siehe, du wirst schwanger werden und einen Sohn gebären, und du sollst ihm den Namen Jesus geben. Der wird groß sein und Sohn des Höchsten genannt werden; und Gott der Herr wird ihm den Thron seines Vaters David geben. (Lukas 1,30-32)
    (Losungslink)
    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

    1. Posting Probleme... Weniger ist mehr!

      Daniel
      – Informationen zu den Bewertungsregeln

      ok hier die url des HTML-Quelltextes:
      http://test.rockload.de/main_ger.html

      und der STYLESHEET:
      http://test.rockload.de/xtra/main.css

      Beitrag melden
      –
      Informationen zu den Bewertungsregeln

      1. Posting Probleme... Weniger ist mehr!

        Götz Homepage des Autors
        – Informationen zu den Bewertungsregeln

        Hallo Daniel!

        ok hier die url des HTML-Quelltextes:
        http://test.rockload.de/main_ger.html

        und der STYLESHEET:
        http://test.rockload.de/xtra/main.css

        Du meintest bestimmt http://test.rockload.de/main_ger.html und http://test.rockload.de/xtra/main.css, oder?
        (Naja, Copy&Paste geht auch, aber anständige Links sind benutzbarer finde ich)

        Aber genau das meinte ich ;)

        Vielleicht bringt es was, wenn Du beiden "Spalten" ne min-height gibst.
        Ansonsten frag ich mich: Ist das überhaupt wichtig, denn wenn im Inhaltsfeld mehr als 2-3 Zeilen stehen sollte das Problem in der Form ja nicht mehr auftreten, oder?

        MfG
        Götz

        --
        Losung für Sonntag, 28. November 2004
        Die Israeliten sprachen zum Herrn: Wir haben gesündigt, mache du es mit uns, wie dir's gefällt; nur errette uns heute! (Richter 10,15)
        Der Engel sprach zu Maria: Siehe, du wirst schwanger werden und einen Sohn gebären, und du sollst ihm den Namen Jesus geben. Der wird groß sein und Sohn des Höchsten genannt werden; und Gott der Herr wird ihm den Thron seines Vaters David geben. (Lukas 1,30-32)
        (Losungslink)
        Beitrag melden
        –
        Informationen zu den Bewertungsregeln

        1. Posting Probleme... Weniger ist mehr!

          Daniel
          – Informationen zu den Bewertungsregeln

          Ansonsten frag ich mich: Ist das überhaupt wichtig, denn wenn im Inhaltsfeld mehr als 2-3 Zeilen stehen sollte das Problem in der Form ja nicht mehr auftreten, oder?

          Das Menü wird noch erheblich länger. Aber irgendwas muss ich doch falsch machen.
          Bei anderen geht es doch auch.

          Und deine Lösung wäre ja auch ein bisschen geschummelt. Ich weiß nämlich nicht wieviel text da immer stehen wird.

          aber trotzdem danke

          Beitrag melden
          –
          Informationen zu den Bewertungsregeln

  2. Layout Probleme... CSS-Freaks an die Front!!!

    daniel84
    – Informationen zu den Bewertungsregeln

    Hallo Daniel,

    overflow:visible für den #globalcontainer ?!

    Gruss aus Luzern,
    Daniel

    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

    1. Layout Probleme... CSS-Freaks an die Front!!!

      Daniel
      – Informationen zu den Bewertungsregeln

      overflow:visible für den #globalcontainer ?!

      hab ich. klappt aber leider nicht.
      danke

      Beitrag melden
      –
      Informationen zu den Bewertungsregeln

  3. Layout Probleme... CSS-Freaks an die Front!!!

    Detlef G.
    – Informationen zu den Bewertungsregeln

    Hallo  Daniel

    #menueleft {
      width: 160px;
      float: left;

    nimmst du hier aus dem Elemetfluss.
    (Seine Höhe hat keinen Einfluss mehr auf umschließende Elemente, die sich im
    normaken Fluss befinden.)

    Ich finde kein claerendes Element, welches das float wieder aufhebt.
    clear (Fortsetzung bei Textumfluss)
    Controlling flow next to floats: the 'clear' property

    Auf Wiederlesen
    Detlef

    --
    - Wissen ist gut
    - Können ist besser
    - aber das Beste und Interessanteste ist der Weg dahin!
    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

    1. Layout Probleme... CSS-Freaks an die Front!!!

      Daniel
      – Informationen zu den Bewertungsregeln

      Wo muss ich das denn setzen ???

      gruß,
      daniel

      Beitrag melden
      –
      Informationen zu den Bewertungsregeln

      1. Layout Probleme... CSS-Freaks an die Front!!!

        Detlef G.
        – Informationen zu den Bewertungsregeln

        Hallo daniel

        Wo muss ich das denn setzen ???

        Daniel überlege selbst!
        Was soll um #menueleft fließen?
        (also nach diesem Element)
        Was soll nicht mehr fließen bzw. welches Element soll mindestens genau so hoch
        wie #menueleft sein?
        (also innerhalb dieses Elementes)

        Auf Wiederlesen
        Detlef

        --
        - Wissen ist gut
        - Können ist besser
        - aber das Beste und Interessanteste ist der Weg dahin!
        Beitrag melden
        –
        Informationen zu den Bewertungsregeln

        1. Layout Probleme... CSS-Freaks an die Front!!!

          Daniel
          – Informationen zu den Bewertungsregeln

          ok, danke für die hilfe.
          jetzt klappt es.
          mir war nur nicht klar,
          auf welches element sich
          dann das clear bezieht.

          gruß,
          Daniel

          Beitrag melden
          –
          Informationen zu den Bewertungsregeln

          1. Layout Probleme... CSS-Freaks an die Front!!!

            Ingo Turski Homepage des Autors
            – Informationen zu den Bewertungsregeln

            Hi,

            mir war nur nicht klar,
            auf welches element sich
            dann das clear bezieht.

            auf alle zuvor entsprechend gefloateten - jedenfalls in der Theorie ;-)

            freundliche Grüße
            Ingo

            Beitrag melden
            –
            Informationen zu den Bewertungsregeln