|
|||
![]()
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> 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 |
Sponsored Links |
|
|||
![]()
Nicht wirklich, denn wir wissen doch nicht, was du erreichen willst. Bitte beschreib dein Problem.
Zitat:
__________________
Corina Rudel Online-Einsteigerkurs HTML/CSS | Buch: Fortgeschrittene CSS-Techniken |
Sponsored Links |
|
|||
![]()
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 |
|
|||
![]()
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.
__________________
Corina Rudel Online-Einsteigerkurs HTML/CSS | Buch: Fortgeschrittene CSS-Techniken |
|
|||
![]()
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 |
|
||||
![]() Zitat:
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 |
|
|||
![]() Zitat:
Zitat:
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.
__________________
Corina Rudel Online-Einsteigerkurs HTML/CSS | Buch: Fortgeschrittene CSS-Techniken Geändert von fricca (19.10.2010 um 10:19 Uhr) |
Sponsored Links |
|
|||
![]() Zitat:
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... |
Sponsored Links |
![]() |
Themen-Optionen | |
Ansicht | |
|
|
![]() |
||||
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 |