zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Float-Problem?

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 18.10.2010, 16:00
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 18.10.2010
Beiträge: 47
mischaef befindet sich auf einem aufstrebenden Ast
Standard Float-Problem?

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
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 18.10.2010, 16:14
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 28.01.2005
Beiträge: 11.786
fricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz sein
Standard

Zitat:
Zitat von mischaef Beitrag anzeigen
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.
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 18.10.2010, 16:23
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 18.10.2010
Beiträge: 47
mischaef befindet sich auf einem aufstrebenden Ast
Standard

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
Mit Zitat antworten
  #4 (permalink)  
Alt 18.10.2010, 16:26
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 28.01.2005
Beiträge: 11.786
fricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz sein
Standard

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.
Mit Zitat antworten
  #5 (permalink)  
Alt 18.10.2010, 16:32
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 18.10.2010
Beiträge: 47
mischaef befindet sich auf einem aufstrebenden Ast
Standard

Ah..super...werde ich mir anschauen...danke für den Tipp...
Mit Zitat antworten
  #6 (permalink)  
Alt 19.10.2010, 00:28
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 18.10.2010
Beiträge: 47
mischaef befindet sich auf einem aufstrebenden Ast
Standard

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
Mit Zitat antworten
  #7 (permalink)  
Alt 19.10.2010, 06:59
Benutzerbild von hubspe
Eisen 7 ole....
XHTMLforum-Kenner
 
Registriert seit: 22.06.2007
Ort: Passau
Beiträge: 7.086
hubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblick
Standard

Zitat:
Zitat von mischaef Beitrag anzeigen
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.
__________________
Ein mehrfacher Gruß aus dem Südosten
Klaus
Mit Zitat antworten
  #8 (permalink)  
Alt 19.10.2010, 09:14
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 28.01.2005
Beiträge: 11.786
fricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz sein
Standard

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 Beitrag anzeigen
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.

Geändert von fricca (19.10.2010 um 09:19 Uhr)
Mit Zitat antworten
  #9 (permalink)  
Alt 19.10.2010, 09:31
Benutzerbild von hubspe
Eisen 7 ole....
XHTMLforum-Kenner
 
Registriert seit: 22.06.2007
Ort: Passau
Beiträge: 7.086
hubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblick
Standard

Moin Corina,

Zitat:
Zitat von fricca Beitrag anzeigen
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.
__________________
Ein mehrfacher Gruß aus dem Südosten
Klaus
Mit Zitat antworten
Sponsored Links
  #10 (permalink)  
Alt 19.10.2010, 13:56
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 18.10.2010
Beiträge: 47
mischaef befindet sich auf einem aufstrebenden Ast
Standard

Zitat:
Zitat von fricca Beitrag anzeigen
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...
Mit Zitat antworten
Sponsored Links
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


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


Alle Zeitangaben in WEZ +2. Es ist jetzt 23:27 Uhr.