Hallo zusammen,
ich bin der neue und habe euer Forum gefunden nachdem ich nach einer Lösung für mein Problem gesucht habe. Ich denke mal dass es sich hier um ein Float-Problem handelt.
Es geht um diese Seite:
..:: Feger-Kühlung GmbH ::..
Ich denke mal dass man sofort erkennt worin das Problem besteht.
Der html-Code wäre das hier:
HTML-Code:
<body>
<div id="wrapper">
<div id="header_oben"></div>
<div id="header_unten">
<div id="navigation">
<a href="index.php" id="home" title="Feger-Kühlung - Startseite"></a>
<a href="feger-kuehlung-ueber-uns.php" id="ueber_uns_aktiv" title="Feger-Kühlung - Wir über uns..."></a>
<a href="feger-kuehlung-service.php" id="service" title="Feger-Kühlung - Unser Service..."></a>
<a href="feger-kuehlung-dienstleistungen.php" id="dienstleistungen" title="Feger-Kühlung - Erfahren Sie mehr über unsere Dienstleistungen..."></a>
<a href="feger-kuehlung-referenzen.php" id="referenzen" title="Feger Kühlung - Unsere Referenzen..."></a>
<a href="feger-kuehlung-kontakt.php" id="kontakt" title="Feger-Kühlung - Ihr Kontakt zu uns..."></a>
<a href="feger-kuehlung-impressum.php" id="impressum" title="Feger-Kühlung - Unser Impressum..."></a>
<div class="clear"></div>
</div>
</div>
<div id="content_wrapper">
<div id="col1">
</div>
<div id="col3">
Text
</div>
<div class="clear"></div>
</div>
</div>
<div id="footer">
<div id="adresse">
<ul>
<li>Karstraße 23</li>
<li>●</li>
<li>41068 Mönchengladbach</li>
<li>●</li>
<li>Tel.: 02161 - 833188</li>
<li>●</li>
<li>Fax: 02161 - 833134</li>
</ul>
</div>
</div>
</body>
Das CSS schaut so aus:
HTML-Code:
/* ==============================================================================================================
Stylesheet: Vorlage
Stand: 12.08.2008
Datei: style.css
Aufbau:
1. Kalibrierung
2. Allgemeine Styles
3. Styles für Layoutbereiche
4. Sonstige Styles
================================================================================================================= */
/* ==============================================================================================================
1. Kalibrierung
================================================================================================================= */
* {margin: 0; padding: 0;}
html { margin: 0 auto; height: 100%; min-height: 101%;}
/*===============================================================================================================
2. Allgemeine Styles (z.B body, h1, h2, p, links, welche nicht in Klassen oder IDs sind)
=================================================================================================================*/
body
{
font-family: Arial, Verdana, Helvetica, sans-serif;
font-size: 12px;
margin: 0 auto;
color: #545454;
}
p
{
line-height: 130%;
padding-bottom: 10px;
}
img
{
border: none;
}
/*===============================================================================================================
3. Styles für Layoutbereiche (Wrapper, Header, Footer, Spalten, Navigation, Bilder, ect...)
=================================================================================================================*/
#wrapper
{
width: 886px;
margin: 0 auto;
}
/* ================== Header ================== */
#header_oben
{
background: url('../images/header-oben.png') no-repeat;
width: 886px;
height: 288px;
}
#header_unten
{
background: url('../images/header-unten.png') no-repeat;
width: 886px;
height: 66px;
}
/* ================== Header ende ================== */
/* ================== Navigation ende ================== */
#navigation
{
padding: 0 0 0 28px;
}
#home
{
display: block;
background: url(../images/nav-home.png) 0 0 no-repeat;
width: 83px;
height: 40px;
float: left;
}
#home:hover
{
background: url(../images/nav-home.png);
background-position: -83px 0;
float: left;
}
#ueber_uns
{
display: block;
background: url(../images/nav-ueber-uns.png) 0 0 no-repeat;
width: 109px;
height: 40px;
float: left;
}
#ueber_uns:hover
{
background: url(../images/nav-ueber-uns.png);
background-position: -109px 0;
float: left;
}
#service
{
display: block;
background: url(../images/nav-service.png) 0 0 no-repeat;
width: 96px;
height: 40px;
float: left;
}
#service:hover
{
background: url(../images/nav-service.png);
background-position: -96px 0;
float: left;
}
#dienstleistungen
{
display: block;
background: url(../images/nav-dienstleistungen.png);
width: 180px;
height: 40px;
float: left;
}
#dienstleistungen:hover
{
background: url(../images/nav-dienstleistungen.png);
background-position: -180px 0;
float: left;
}
#referenzen
{
display: block;
background: url(../images/nav-referenzen.png);
width: 130px;
height: 40px;
float: left;
}
#referenzen:hover
{
background: url(../images/nav-referenzen.png);
background-position: -130px 0;
float: left;
}
#kontakt
{
display: block;
background: url(../images/nav-kontakt.png);
width: 100px;
height: 40px;
float: left;
}
#kontakt:hover
{
background: url(../images/nav-kontakt.png);
background-position: -100px 0;
float: left;
}
#impressum
{
display: block;
background: url(../images/nav-impressum.png);
width: 130px;
height: 40px;
float: left;
}
#impressum:hover
{
background: url(../images/nav-impressum.png);
background-position: -130px 0;
float: left;
}
#home_aktiv
{
display: block;
background: url(../images/nav-home.png) 0 0 no-repeat;
background-position: -83px 0;
width: 83px;
height: 40px;
float: left;
}
#home_aktiv:hover
{
background: url(../images/nav-home.png);
background-position: -83px 0;
float: left;
}
#ueber_uns_aktiv
{
display: block;
background: url(../images/nav-ueber-uns.png) 0 0 no-repeat;
background-position: -109px 0;
width: 109px;
height: 40px;
float: left;
}
#ueber_uns_aktiv:hover
{
background: url(../images/nav-ueber-uns.png);
background-position: -109px 0;
float: left;
}
#service_aktiv
{
display: block;
background: url(../images/nav-service.png) 0 0 no-repeat;
background-position: -96px 0;
width: 96px;
height: 40px;
float: left;
}
#service_aktiv:hover
{
background: url(../images/nav-service.png);
background-position: -96px 0;
float: left;
}
#dienstleistungen_aktiv
{
display: block;
background: url(../images/nav-dienstleistungen.png);
background-position: -180px 0;
width: 180px;
height: 40px;
float: left;
}
#dienstleistungen_aktiv:hover
{
background: url(../images/nav-dienstleistungen.png);
background-position: -180px 0;
float: left;
}
#referenzen_aktiv
{
display: block;
background: url(../images/nav-referenzen.png);
background-position: -130px 0;
width: 130px;
height: 40px;
float: left;
}
#referenzen_aktiv:hover
{
background: url(../images/nav-referenzen.png);
background-position: -130px 0;
float: left;
}
#kontakt_aktiv
{
display: block;
background: url(../images/nav-kontakt.png);
background-position: -100px 0;
width: 100px;
height: 40px;
float: left;
}
#kontakt_aktiv:hover
{
background: url(../images/nav-kontakt.png);
background-position: -100px 0;
float: left;
}
#impressum_aktiv
{
display: block;
background: url(../images/nav-impressum.png);
background-position: -130px 0;
width: 130px;
height: 40px;
float: left;
}
#impressum_aktiv:hover
{
background: url(../images/nav-impressum.png);
background-position: -130px 0;
float: left;
}
/* ================== Navigation ende ================== */
/* ================== Content ================== */
#content_wrapper
{
width: 794px !important;
min-height: 400px;
height: auto !important; /* für moderne Browser */
height: 400px; /*für den IE */
margin: 0 0 0 45px;
}
#col1
{
float: left;
width: 150px;
}
#col3
{
float: right;
width: 620px;
min-height: 400px;
height: auto !important; /* für moderne Browser */
height: 400px; /*für den IE */
border-left: 1px solid #b8b8b8;
padding: 0 0 0 20px;
}
#col3 h1
{
color: #545454;
font-weight: bold;
font-size: 20px;
padding-bottom: 10px;
}
/* ================== Content ende ================== */
/* ================== Footer ================== */
#footer
{
background: url(../images/footer-background) repeat-x;
width: 100%;
height: 53px;
margin: 10px 0 0 0;
}
#adresse
{
margin: 0 auto;
width: 794px;
color: #003e90;
}
#adresse ul
{
margin: 0 auto;
width: 615px;
padding: 30px 0 0 0
}
#adresse li
{
padding: 10px;
display: inline;
}
/* ================== Footer ende ================== */
/*===============================================================================================================
4. Sonstige Styles
=================================================================================================================*/
#bild_service
{
margin: 20px auto;
width: 508px;
}
#bild_service img
{
border: 1px solid #b8b8b8;
padding: 3px;
}
Ich sitze jetzt schon eine Weile hier und sehe den Wald vor lauter Bäumen nicht. Habe auch mit clear ein wenig rumprobiert, aber keine Lösung gefunden. Das HTML und CSS sind 100% valide. Wahrscheinlich ist es - wie immer - nur eine winzige Kleinigkeit...
Daher wäre ich sehr dankbar wenn jemand da mal schauen kann. Ich kann mir gut vorstellen dass jemand anderem das Problem sofort auffällt...
Besten dank schon mal für die Mühe...
Lieben Gruß
Michael