Webdesign in Siegen

Navigations-Container vertikal zentrieren

Fragen zum Thema HTML und CSS können hier gestellt werden

Moderatoren: Basti, Ingo

Navigations-Container vertikal zentrieren

Beitragvon SilentStormer am 22.10.2005, 19:23

Hallo Jungs.
Wer zuviel Zeit hat, kann sich ja folgendes Problem ansehen:

Und zwar will ich meinen Navigationscontainer vertikal zentrieren. Viel erklären bringt da nichts, einfach folgenden Quelltext in einen Editor einfügen, sehen und - staunen :D
Mit dem Befehl vertical-align: middle; haut das jedenfalls nicht hin.
Kann jemand helfen?

Code: Alles auswählen
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/Strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <meta name="Author" content="Robert Schenkenfelder" />
    <meta name="description" content="Layout mit Hilfe von CSS" />
    <title>Testdatei CSS-Layout</title>   
    <style type="text/css">
    <!--
/*   ------------------------------------   */
/*               Allgemeine Definitionen                  */
/*   ------------------------------------   */   
  body {
    font-family: Verdana;
    font-size: 12px;
    background-color: #bdbec6;
    text-align: center;
    margin: 0px;
  }
  h1 {
    font-size:18px;
    color: #000000;
    margin-bottom: 0px;
  }
  h2 {
    font-size: 16px;
    color: #000000;
  }
  h3 {
    font-size: 14px;
    color:#000000;
  }
  code {
    font-size: 14px;
    color: #0000ff;
  }
  pre {
    font-size: 14px;
    color: #0000ff;
    padding: 5px;
  }
  a:link, a:visited, a:active, a:hover {
    text-decoration: underline;
    font-weight: normal;
    color: #ff0000;
    font-size: 12px;
  }
  a:active, a:hover {
    color: #009999;
  }
/*   ------------------------------------   */
/*            Navigationseinstellungen                  */
/*   ------------------------------------   */   
  a.menu {
      line-height: 23px;
      height: 23px;
      display: block;
      color: #666666;
      text-decoration: none;
      font-weight: bold;
      background-color: #EEEEEE;
      border: 1px solid #666666;
      border-left-width: 0px;
      border-right-width: 1px;
      border-right-color: #000000;
      border-bottom-color: #000000;
      border-top-color: #fff;
    padding-left: 10px;
  }
  a.menu:link, a.menu:visited {
    color: #666666;
    background-color: #EEEEEE;
    text-decoration: none;
    font-weight: bold;
  }
  a.menu:active, a.menu:hover {
     background-color: #999999;
      color: #FFFFFF;
  }
  .menutitle{
    font-weight: bold;
    font-size: 11px;
    font-family: Verdana,Arial,sans-serif;
    text-align: right;
    margin: 2px;
    background-color: #CCCCCC;
  }
  .menucontainer {
      width: 120px;
      margin: 0px;
      padding: 0px;
      list-style-type: none;
    list-style-position: outside;
      border: 1px solid #666666;
      border-bottom-width: 0px;
      vertical-align: middle;                 // haut da ned hin ... ^^
      background-color: #EEEEEE;
  } 
/*   ------------------------------------   */
/*               Containereinstellungen                   */
/*   ------------------------------------   */   
  .main {
    width: 760px;
    margin: 0px auto;
    text-align: left;
    background-color: #D5EBFF;
    border: 1px solid #000000;
  }
  .header {
    height: 34px;
    padding: 5px;
    background-color: #D5EBFF;
    border-bottom: 1px solid #000;
  } 
  .banner {
    float: right;
    width: 300px;
    height: 31px;
    margin-left: 3px;
    border: 0px;
  }   

  .left {
    background-color: #FFFFFF;
    width: 128px;
    height: 463px;
    float: left;
  }
  .content {
    border: 0px solid #efeff7;
    background-color: #ffffff;
    width: 612px;
    height: 442px;
    overflow: auto;
    float: right;
    padding: 10px 10px;
    display: block;
  }
  .logo {
    float: none;
    text-align: center;
    width: 400px;
    height: 400px;
    margin-left: 20%;
    border: 0px;
  } 
    //-->
    </style>
  </head>
  <body>
    <div class="main">
      <div class="header">
        <img src="header.jpg" class="banner" alt="krensche.design" />
        <h1>Startseite</h1>
      </div>
      <div class="left">
        <div class="menucontainer">
          <p class="menutitle">.main</p>
          <a class="menu" href="#">Home</a>
          <a class="menu" href="#">News</a>         
          <a class="menu" href="#">About</a>
          <a class="menu" href="#">Guestbook</a>
          <a class="menu" href="#">Forum</a>                   
          <a class="menu" href="#">Links</a>
          <a class="menu" href="#">Impressum</a>
          <a class="menu" href="#">Disclaimer</a>
        </div>
        <div class="menucontainer">
          <p class="menutitle">.work</p>
          <a class="menu" href="#">Projects</a>
          <a class="menu" href="#">Designing</a>
          <a class="menu" href="#">Layouts</a>
          <a class="menu" href="#">Vorlagen</a>
          <a class="menu" href="#">Helping</a>
        </div>
      </div>
      <div class="content">
        <img src="logo-ringe.jpg" class="logo" alt="krensche.design" /><br />
        dies ist ein text ohne jeden sinn. genau aus diesem grund, und keinem andrem, ist dies ein sinnloser text. ein sinnloser blindtext ohne jeglcihe art von irgendeinem nutzen ausser sinnlos den inhalt von irgendwas zu füllen. natürlcih darf jeder selbst entscheiden ob er/sie in diesem text einen sinn findet. ich muss aber sagen das dieser text ohne jeglcihen sinn und zweck geschrieben wurde. also bringt das suchen auch nichts. lückenfüllende texte, eben die blindtexte, sollen auch keinen sinn haben, denn sonst wären es ja schließlich keine sinnlosen, lückenfüllenden texte ohne jeglcihe absicht für irgendwas. ich weiß nicht wie lang ich diesen sinnlosen text noch weiterschreiben soll, denn so sinnlos wie er ist, fällt mir auch nich wirklich ein was noch sinnloses unbedingt hier reinsollte. vielleicht sollte man auch bedenken das dieser text für jede art von lückenfüllung freigegeben ist, den ich Papa Noah ( dies sollte bestandteil des textes sein) distanziere mich vollkommen von diesem text und es ist mir egal was damit gemacht wird, hauptsache mein name steht, unverändert im sinn, hier drin. da es sich eben gereimt hat, hör ich jetzt damit auf. mal scheun welche sinnlosen blindtexte ihr schreiben könnt. dies ist ein text ohne jeden sinn. genau aus diesem grund, und keinem andrem, ist dies ein sinnloser text. ein sinnloser blindtext ohne jeglcihe art von irgendeinem nutzen ausser sinnlos den inhalt von irgendwas zu füllen. natürlcih darf jeder selbst entscheiden ob er/sie in diesem text einen sinn findet. ich muss aber sagen das dieser text ohne jeglcihen sinn und zweck geschrieben wurde. also bringt das suchen auch nichts. lückenfüllende texte, eben die blindtexte, sollen auch keinen sinn haben, denn sonst wären es ja schließlich keine sinnlosen, lückenfüllenden texte ohne jeglcihe absicht für irgendwas. ich weiß nicht wie lang ich diesen sinnlosen text noch weiterschreiben soll, denn so sinnlos wie er ist, fällt mir auch nich wirklich ein was noch sinnloses unbedingt hier reinsollte. vielleicht sollte man auch bedenken das dieser text für jede art von lückenfüllung freigegeben ist, den ich Papa Noah ( dies sollte bestandteil des textes sein) distanziere mich vollkommen von diesem text und es ist mir egal was damit gemacht wird, hauptsache mein name steht, unverändert im sinn, hier drin. da es sich eben gereimt hat, hör ich jetzt damit auf. mal scheun welche sinnlosen blindtexte ihr schreiben könnt. dies ist ein text ohne jeden sinn. genau aus diesem grund, und keinem andrem, ist dies ein sinnloser text. ein sinnloser blindtext ohne jeglcihe art von irgendeinem nutzen ausser sinnlos den inhalt von irgendwas zu füllen. natürlcih darf jeder selbst entscheiden ob er/sie in diesem text einen sinn findet. ich muss aber sagen das dieser text ohne jeglcihen sinn und zweck geschrieben wurde. also bringt das suchen auch nichts. lückenfüllende texte, eben die blindtexte, sollen auch keinen sinn haben, denn sonst wären es ja schließlich keine sinnlosen, lückenfüllenden texte ohne jeglcihe absicht für irgendwas. ich weiß nicht wie lang ich diesen sinnlosen text noch weiterschreiben soll, denn so sinnlos wie er ist, fällt mir auch nich wirklich ein was noch sinnloses unbedingt hier reinsollte. vielleicht sollte man auch bedenken das dieser text für jede art von lückenfüllung freigegeben ist, den ich Papa Noah ( dies sollte bestandteil des textes sein) distanziere mich vollkommen von diesem text und es ist mir egal was damit gemacht wird, hauptsache mein name steht, unverändert im sinn, hier drin. da es sich eben gereimt hat, hör ich jetzt damit auf. mal scheun welche sinnlosen blindtexte ihr schreiben könnt.
      </div>
      <br style="clear:both;" />
    </div>
  </body>
</html>
Benutzeravatar
SilentStormer
Mitglied
 
Beiträge: 384
Registriert: 24.09.2005, 18:37
Wohnort: Österreich

Beitragvon Manuel am 22.10.2005, 22:59

Hi Silent!

Hast du mal

Code: Alles auswählen
valign="middle"


ausprobiert? Wichtig dabei ist natürlich, dass der div-layer oder worin es auch liegen mag höher als die Schriftart ist. Mach dazu einfach ne Border drum, dann weisst du ja wo es eigentlich liegen müsste ;)

Lg,
Manuel ;-]
Benutzeravatar
Manuel
Site Admin
 
Beiträge: 9085
Registriert: 10.12.2004, 19:29
Wohnort: Asbach

Beitragvon SilentStormer am 22.10.2005, 23:06

Hallo Manuel.
Erstmal danke für die Antwort.

Alles schon probiert. Hilft auch nichts.

Bild

Wie man sieht, habe ich den beiden Div-Körper einen 10 Pixel Rand verpasst. Die Navigation will einfach nicht runter, auch mit valign und vertical-align nicht :(

Any Ideas further?
Benutzeravatar
SilentStormer
Mitglied
 
Beiträge: 384
Registriert: 24.09.2005, 18:37
Wohnort: Österreich

Beitragvon Manuel am 22.10.2005, 23:15

Es sollen also beide Menüs dann insgesamt mittig sein, ja? margin-top reicht dir da nicht, ja?

Probier mal folgendes:

Code: Alles auswählen
<div class="navi">
  Dies ist ein hoffentlich mittiger Text.
</div>


Code: Alles auswählen
.navi
{
    height: 500px;
    vertical-align: middle;
    display: table-cell;
}


Einziger Nachteil: Der IE macht es leider nicht.

Alternative: Hau die beiden Menüs zusammen in eine Tabellenzelle und mach da dann mal valign. Da müsste es dann auf jeden Fall gehen und auch im IE soweit ich weiss. Unschön, aber was will man machen?!

Lg,
Manuel ;-]
Benutzeravatar
Manuel
Site Admin
 
Beiträge: 9085
Registriert: 10.12.2004, 19:29
Wohnort: Asbach

Beitragvon SilentStormer am 22.10.2005, 23:46

Danke Manu, hast mir unabsichtlich geholfen :D

Mir ist die margin-Methode noch nicht eingefallen, die reicht vollkommen :)
Benutzeravatar
SilentStormer
Mitglied
 
Beiträge: 384
Registriert: 24.09.2005, 18:37
Wohnort: Österreich

Beitragvon Manuel am 22.10.2005, 23:47

Na das ist ja wunderbar :)

Dachte nur wenn du es mittig haben willst, dass du es relativ zu einer bestimmten Größe brauchst. Aber wieso einfach, wenns auch kompliziert geht? *g*
Benutzeravatar
Manuel
Site Admin
 
Beiträge: 9085
Registriert: 10.12.2004, 19:29
Wohnort: Asbach

Beitragvon SilentStormer am 22.10.2005, 23:53

Ja eh *g*
So, jetzt aber im Laufschritt weiter .... wenn ich fertig mit dieser Homepage bin, wird sie hier vorgestellt ;)
Benutzeravatar
SilentStormer
Mitglied
 
Beiträge: 384
Registriert: 24.09.2005, 18:37
Wohnort: Österreich


Zurück zu HTML/CSS

Wer ist online?

Mitglieder in diesem Forum: 0 Mitglieder und 2 Gäste