✔ mitwachsender Verlauf im Menü

t1g3rzz · 22. Dezember 2008

Hallo Leute,

ich habe ein Problem mit einem CSS Template.
Und zwar weiß ich nicht wie ich im linken Menü den Hintergrund so anpassen kann,
dass er immer so hoch ist wie der Content Bereich! Wenn der Inhalt im Content mehr wird, entsteht zwischen den einzelnen Menüpunkten und dem unterem Teil im Footer ein weißer Hintergrund.
Schon mal vielen Dank für Hinweise.

HTML code:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8">
  <title>123456789</title>
  <link rel="stylesheet" type="text/css" href="css/style.css" />
    <!--[if lt IE 7]>
    <link rel="stylesheet"type="text/css"  href="css/ie6.css" />
    <![endif]-->
  </head>
  <body>
    <div class="contentContainer" >
      <div id="page">
        <div class="header">
          <div id="banner"></div>
          <div id="logo"></div>
        </div>
        <div class="navi">
          <ul>
            <li><a href="#Unternehmen">Unternehmen</a></li>
            <li><a href="#Leistungen">Leistungen</a></li>
            <li><a href="#Referenzen">Referenzen</a></li>
            <li><a href="#Aktuelles">Aktuelles</a></li>
            <li><a href="#Kontakt">Kontakt</a></li>
          </ul>
        </div>
        <div class="navi_left">
          <ul>
            <li><a href="#Industrie und Verkehr">Industrie und Verkehr</a></li>
            <li><a href="#Büro und Verwaltung">Büro und Verwaltung</a></li>
            <li><a href="#Krankenhaus und Pflege">Krankenhaus und Pflege</a></li>
            <li><a href="#Einkaufen">Einkaufen</a></li>
            <li><a href="#Wohnungsbau">Wohnungsbau</a></li>
          </ul>
        </div>
        <div class="content">
          <h3>Industrie und Verkehr</h3>
          <p>Projekt 1</p>
          <p>Projekt 2</p>
          <p>GUD Kraftwerk Münster</p>
        </div>
        <div class="right_content"></div>
        <div class="footer">
          <div id="middle">
            Telefon: 0123 - 456789 &nbsp;&nbsp; | &nbsp;&nbsp; Telefax: 0123 - 456789 &nbsp;&nbsp; | &nbsp;&nbsp; E-Mail:<a href="mailto:info@123456789.de">info@123456789.de</a><br />
            <span>&copy; 123456789</span>
          </div>
          <div id="right">
            <a href="#Sitemap">Sitemap</a> | <a href="#Impressum">Impressum</a> | <a href="#Kontakt">Kontakt</a><br />
          </div>
        </div>
      </div>
    </div>
  </body>
</html>

CSS code:

Code:

/* CSS Document */
html, body {
  background: white;
	height: 100%;
}

body {  		
	font-family: arial, verdana, sans-serif;
	text-align: center;
	font-size: 12px;
}

.contentContainer {
	margin: 0 auto;
	padding-bottom: 10px;
	position: relative;
	text-align: left;
	width: 948px;
}

#logo {
  position: relative;
  top: -235px;
  left: 690px;
  background: url(../images/logo.png) no-repeat;
  width: 238px;
  height: 33px;
}

#banner {
  background: url(../images/banner-industrie-verkehr.jpg) no-repeat;
  width: 948px;
  height: 259px;
}

.navi {
  background: url(../images/verlauf-navi.jpg) repeat-x;
  width: 948px;
  height: 28px;
  margin-top: -46px;
}

* html .navi {
  margin-top: -33px;
}

.navi ul {
  margin-left: 135px;
}

* html .navi ul {
  margin-left: 175px;
}

.navi li {
  border-left: 1px solid #003e76;
  border-right: 1px solid #0065c0;
  list-style: none;
  padding: 5px 10px 5px 10px;
  float: left;
}

.navi li a {
  color: white;
  text-decoration: none;
}

.navi_left {
  background: #939393 url(../images/verlauf-navi-oben.jpg) repeat-x;
  height: 410px;
  width: 175px;
  float: left;
}

.navi_left ul {
  margin-top: 10px;
  list-style-image: url(../images/list-style.jpg);
  width: 8px:
  height: 1px;
  margin-left: -24px;
}

.navi_left ul li {
  margin-top: 10px;
}

.navi_left ul li a {
  text-decoration: none;
  color: white;
  height: 20px;
  line-height: 20px;
}

.navi_left ul li:hover {
  background: #969698;
}

/* Formatierung für IE - Anfang */

* html .navi_left ul {
  margin-left: 16px;
}

* html .navi_left ul li {
  height: 20px;
  line-height: 20px;
}

* html .navi_left ul a {
  display: block;
}

* html .navi_left ul a:hover {
  background-color: #969698;
}

/* Formatierung für IE - Anfang */

.content {
  width: 480px;
  float: left;
  padding-top: 7px;
  padding-left: 20px;
}

.right_content {
  background: url(../images/bild-rechts.jpg) no-repeat;
  width: 243px;
  height: 382px;
  margin-top: 20px;
  float: left;
}

.footer {
  clear: left;
}

.footer {
  background: url(../images/verlauf-navi-unten.jpg) no-repeat;
  width: 948px;
  height: 47px;
}

.footer #middle {
  margin-left: 186px;
  padding-top: 10px;
  width: 524px;
  color: #636466;
}

.footer #middle a {
  text-decoration: none;
  color: #636466;
}

.footer #middle span {
  color: #005aab;
  font-weight: bold;
}

.footer #right {
  margin-top: -31px;
  float: right;
  width: 169px;
}

.footer #right a {
  text-decoration: none;
  color: #636466;
}

Steusi · 22. Dezember 2008

Ist es vielleicht, weil du beim Navi für den wiederholten Farbverlauf ein:
margin-top: -46px;
stehen hast?

Kannst es bitte etwas kürzen? Ich verscrolle mich immer

Maik · 28. Dezember 2008

Hi,

der Artikel AnyColumnLongest hält eine umfangreiche Liste an Links zu Techniken bereit, die sog. "Equal-Height-Columns" erzeugen.

Achja, die feste Höhenangabe für .navi_left ist für dein Vorhaben auf jeden Fall schon mal hinderlich.

mfg Maik

✔ mitwachsender Verlauf im Menü

t1g3rzz

Grünschnabel

Steusi

Nasenbär

Maik

Neue Beiträge