Float-Problem?

mischaef · #1 (**permalink**) 18.10.2010, 17:00

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

fricca · #2 (**permalink**) 18.10.2010, 17:14

Zitat:

Zitat von mischaef

Ich denke mal dass man sofort erkennt worin das Problem besteht.

Nicht wirklich, denn wir wissen doch nicht, was du erreichen willst. Bitte beschreib dein Problem.

Zitat:

Habe auch mit clear ein wenig rumprobiert, aber keine Lösung gefunden.

Was hast du probiert? Ich sehe im Moment nur ein Element, das Clear heißt, aber nicht cleart.

mischaef · #3 (**permalink**) 18.10.2010, 17:23

Au man, dass ist ja ein Einstand...so schnell kann man sich blamieren...

Das Problem WAR dass der Text unten über den Footer ging. Nur irgendwie ist mir in meiner CSS-Vorlage das clear abhanden gekommen. Normaleweise habe ich das immer drinn und habe daher nicht drauf geachtet.

Auch wenn ich nicht genau beschrieben habe wo das Problem lag (mein Fehler, ich gelobe Besserung) hast Du mir schon geholfen..

Wie ich oben schon schrieb: Manchmal sieht man den Wald vor lauter Bäumen nicht..

Besten dank

Michael

fricca · #4 (**permalink**) 18.10.2010, 17:26

Na, wenn's das schon war.

Ich sehe aber noch so einiges, was verbesserungswürdig ist. Allen voran die Navigation, die keine ist. Da ist nur ein Haufen von leeren Links.
Schau doch mal in die [FAQ]FAQ[/FAQ]. heiko_rs hat sehr ausführlich beschrieben, wie man eine sinnvolle, benutzbare grafische Navigation erstellen kann.

mischaef · #5 (**permalink**) 18.10.2010, 17:32

Ah..super...werde ich mir anschauen...danke für den Tipp...

mischaef · #6 (**permalink**) 19.10.2010, 01:28

So, habe es mal ausprobiert, aber irgendwie komme ich nicht wirklich weiter.

habe es jetzt einmal an einem Link ausprobiert:

..:: Feger-Kühlung GmbH - Kälte-Klima-Kompetenz - Seit 1950 ::..

HTML-Code:

<ul id="navigation">

    <li id="home"><a href="index.php"><strong>Home<span></span></strong></a></li>
    <li><a href="index.php" id="ueber_uns"></a></li>
    <li><a href="index.php" id="service"></a></li>
    <li><a href="index.php" id="dienstleistungen"></a></li>
    <li><a href="index.php" id="referenzen"></a></li>
    <li><a href="index.php" id="kontakt"></a></li>
    <li><a href="index.php" id="impressum"></a></li>

</ul>

Das dazugehörige css:

HTML-Code:

#navigation
{
    padding: 0 0 0 14px;
}

#navigation li
{
    float: left;
    list-style-type: none;
}

#navigation a, #navigation strong
{
	display: block;
	height: 40px;
	width: 100%;
	position: relative;
}

#navigation span 
{
	position: absolute;
	width: 100px;
	height: 40px;
	top: 0;
	left: 0;
    background: url(../images/nav.png);
}

#navigation #home a span
{
	display: block;
	background: url(../images/nav-home.png);
    background-position: 0 0;
	width: 83px;
	height: 40px;
	float: left;	
}


#navigation #home a:hover span,
#navigation #home strong span
{
	background: url(../images/nav-home.png);
	background-position: -83px 0;
	float: left;
}

Folgendes Problem habe ich aber noch:

Das normale Bild wird nicht angezeigt, immer nur das für hover.

Das mit dem Link bei angeschalteter Grafik funzt...

Ich blicke bei der ganzen Sache noch nicht so wirklich durch, daher sehe ich nicht was ich falsch gemacht habe...kann mir das jemand von euch sagen?

Besten dank

Michael

hubspe · #7 (**permalink**) 19.10.2010, 07:59

Zitat:

Zitat von mischaef

So, habe es mal ausprobiert, aber irgendwie komme ich nicht wirklich weiter.

Heikos Beispiel für ein grafische navi in der FAQ ist eine vollgrafische navi, d.h. der Text ist im Bild.
Bei dir ist das nur eine teilgrafische Navi, d.h. die Grafik bildet nur den HG zum Text.
In dem Fall brauchst du das span nicht. Hier ist ein Beispiel dazu.

fricca · #8 (**permalink**) 19.10.2010, 10:14

Zitat:

Das normale Bild wird nicht angezeigt, immer nur das für hover.

Es wird das Bild für das strong-Element angezeigt, das den aktiven Menüpunkt kennzeichnen soll und kein Link ist. Lies doch nochmal ganz genau, was Heiko über Links und den Zweck des strong-Elements schreibt.

Zitat:

Zitat von hubspe

Heikos Beispiel für ein grafische navi in der FAQ ist eine vollgrafische navi, d.h. der Text ist im Bild.
Bei dir ist das nur eine teilgrafische Navi, d.h. die Grafik bildet nur den HG zum Text.

Klaus, schau nochmal genau hin. Der Text ist in der Grafik.
Ob das so sein muss, wenn der Text nur Verdana ist -- wohl nicht. Aber wenn man z.B. bei Schriftvergrößerung das Überlaufen vermeiden will kann man das sinnvoll sein.

hubspe · #9 (**permalink**) 19.10.2010, 10:31

Moin Corina,

Zitat:

Zitat von fricca

Klaus, schau nochmal genau hin. Der Text ist in der Grafik.

oh, stimmt.

Da hätte ich mir mit Firebug erst mal die HG-Grafik anzeigen lassen sollen, statt sie einfach nur auszuschalten.

mischaef · #10 (**permalink**) 19.10.2010, 14:56

Zitat:

Zitat von fricca

Es wird das Bild für das strong-Element angezeigt, das den aktiven Menüpunkt kennzeichnen soll und kein Link ist. Lies doch nochmal ganz genau, was Heiko über Links und den Zweck des strong-Elements schreibt.

Klaus, schau nochmal genau hin. Der Text ist in der Grafik.
Ob das so sein muss, wenn der Text nur Verdana ist -- wohl nicht. Aber wenn man z.B. bei Schriftvergrößerung das Überlaufen vermeiden will kann man das sinnvoll sein.

Hallo Corina,

ich habs jetzt sicherlich 20mal durchgelesen, aber ich blicke einfach nicht durch. Ich frage mich z.B. warum ich im span noch eine dritte Grafik brauche, wenn ich doch schon zwei haben die den Text-Link verdecken? Dann kam der Gedanke, das Grund- oder Hover-Bild in den span zu legen, was aber nicht geht da diese Grafik ja nur einmal ausgewählt werden kann.

Oder ich bin zu blöd dafür...

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Ansicht
Linear-Darstellung Zur Hybrid-Darstellung wechseln Zur Baum-Darstellung wechseln

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
Problem mit CSS Style	flo007	CSS	3	25.01.2009 18:08
Problem mit float und margin	raz	CSS	4	11.12.2008 15:58
Problem mit wiederholenden Hintergrundbild bei 'float'	aHofer	CSS	2	07.12.2007 01:02
Problem im IE7: div hinter input platzieren per float	Heavenfighter	CSS	2	19.06.2007 16:50
Float Problem, 4 Inhalts Elemente nebeneinander	denny	CSS	0	23.08.2004 15:59