zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Menü und Footerproblem

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 09.02.2007, 00:46
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 28.09.2006
Beiträge: 38
Xtremo befindet sich auf einem aufstrebenden Ast
Standard Menü und Footerproblem

Hallo alle zusammen. Habe da ein kleines Problem. Ich hoffe, dass mir Jemand dabei helfen kann. Es geht um folgende Webseite.

Problem 1: Die Navigation:

Wenn ich auf der Startseite bin, dann möchte ich auch, dass der Hover aktiv bleibt. Habe es schon mit einer Klasse ausprobiert, aber ohne Erfolg.

Problem 2: Footer Content:

Dieses Bild soll rechts den Content abschließen. Jedoch wird der Abschluß nicht richtig angezeigt. Dieser wird jedes Mal abgeschnitten und es lässt sich in dem Bereich auch kein Text mehr einfügen.

Schon mal vielen Dank im Voraus.

Geändert von Xtremo (14.03.2007 um 15:24 Uhr)
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 09.02.2007, 09:04
Benutzerbild von LineMan
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 09.08.2006
Ort: Mülheim an der Ruhr
Beiträge: 211
LineMan befindet sich auf einem aufstrebenden Ast
Standard

also um den ausgewählten zustand stehen zu lassen brauchst du eine klasse z.B. class="active" und überschreibst damit die Styles fürden a-Tag. Aber warum hast Du bei der Navgation nicht ein Listenmenü benutzt und warum diese vielen IDs für jeden container und link?

Wegen Deines Backgrounds: Ich kann keinen Tag mit der ID "#contentbottom" entdecken in Deinem Quelltext, habe mir aber auch nicht alle Seiten angesehen... Warum gibts Du dieses Hintergrundbild nicht einfach dem Container "contenttext"?

Code:
#contenttext {
    padding-top: 20px;
    padding-right: 45px; 
    padding-bottom: 20px;
    padding-left: 35px;
    background: url('../img/content_bottom.jpg') no-repeat left bottom;
}
Ausserdem würde ich Dir raten Deine Seiten mal zu validieren... zumindest die Kontaktseite ist gruselig
__________________
Mein Bug, Dein Bug, Bugs sind für uns alle da...
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 09.02.2007, 11:53
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 28.09.2006
Beiträge: 38
Xtremo befindet sich auf einem aufstrebenden Ast
Standard

Yep, die Kontaktseite wird noch angepasst. Ist nur ein Beispiel.
Mit der Klasse active hatte ich bereits schon probiert, aber darauf reagiert der nicht. Wie ist das mit den vielen IDs gemeint? Ist das etwa falsch? Eine ID nehme ich doch nur, wenn diese nur einmal in einem Dokument benötigt wird.
Mit Zitat antworten
  #4 (permalink)  
Alt 09.02.2007, 12:29
Benutzerbild von LineMan
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 09.08.2006
Ort: Mülheim an der Ruhr
Beiträge: 211
LineMan befindet sich auf einem aufstrebenden Ast
Standard

nein du musst eine klasse vergeben für den aktuellen menüpunkt... nicht einen style... z.B.

Code:
<div id="navigation">
  <a href="index.html" id="startseite"><span>Startseite</span></a>
  <a href="ueberuns.html" id="ueberuns"><span>Über uns</span></a>
  <a href="service.html" id="service" class="active"><span>Service</span></a>
  <a href="bad.html" id="bad"><span>Bad</span></a>
  ...
</div>
__________________
Mein Bug, Dein Bug, Bugs sind für uns alle da...

Geändert von LineMan (09.02.2007 um 12:32 Uhr)
Mit Zitat antworten
  #5 (permalink)  
Alt 09.02.2007, 16:29
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 28.09.2006
Beiträge: 38
Xtremo befindet sich auf einem aufstrebenden Ast
Standard

Ah, verstehe, so hast du das mit dem bottom gelöst. Man man, wie simpel. Hätte ich auch drauf kommen müssen, aber man versucht es irgendwie kompliziert zu machen.
Zu der Navigation. Das active war ja das Erste, was ich probiert hatte. Hat aber darauf nicht reagiert, was ich ja selbst nicht verstehen kann, da ich es bei einer anderen Seite, nur in veränderter Form, bereits eingesetzt hatte. Als Listenmenü werde ich es auch fertig machen. Waren meine Anfänge und hatte es auch so übernommen.

Zu deinem Kommentar: Aber warum hast Du bei der Navgation nicht ein Listenmenü benutzt und warum diese vielen IDs für jeden container und link?

Wollte wissen, was du damit meinst. Die IDs sind ja in dem Link dazu da, damit ich den hover Effekt nutzen kann. Mit den Containern meinst du wohl das Restliche.

Code:
#navigation {
    float: left;
    width: 240px;
    height: 209px; 
    background-image: url('../img/menu_left.jpg'); 
}

#navigation a {
    display: block;
    width: 240px;
    height: 30px;
    float: left;
    margin-right: -3px;
}

#navigation a#startseite:hover {
    background: url('../img/menu_01.jpg') no-repeat;
}  

#navigation a#ueberuns:hover {
    background: url('../img/menu_02.jpg') no-repeat;
}

#navigation a#service:hover {
    background: url('../img/menu_03.jpg') no-repeat;
}

#navigation a#bad:hover {
    background: url('../img/menu_04.jpg') no-repeat;
}

#navigation a#heizung:hover {
    background: url('../img/menu_05.jpg') no-repeat;
}

#navigation a#leckortung:hover {
    background: url('../img/menu_06.jpg') no-repeat;
}

#navigation a#dachufach:hover {
    background: url('../img/menu_07.jpg') no-repeat;
}

#navigation span {
    display: none;
}
So hätte ich es gemacht.

Code:
#navigation a#startseite:active {
    background: url('../img/menu_01.jpg') no-repeat;
}
Noch Mal dicken Dank.

Geändert von Xtremo (09.02.2007 um 16:36 Uhr)
Mit Zitat antworten
  #6 (permalink)  
Alt 09.02.2007, 16:38
Benutzerbild von LineMan
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 09.08.2006
Ort: Mülheim an der Ruhr
Beiträge: 211
LineMan befindet sich auf einem aufstrebenden Ast
Standard

kein problem...

naja, dann liegt es daran dass eine id eben stärker ist als eine klasse und deinen klassenwert überschreibt.

ersetze doch die ids gegen klassen, zumal alle deine menüpunkte gleich aussehen, brauchst du hier eigentlich gar keine ids oder klassen... sondern nur ein umschließendes div mit einer id oder klasse oder eben ein listenmenü (einfach mal nach suchen)...
__________________
Mein Bug, Dein Bug, Bugs sind für uns alle da...
Mit Zitat antworten
  #7 (permalink)  
Alt 09.02.2007, 16:43
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 28.09.2006
Beiträge: 38
Xtremo befindet sich auf einem aufstrebenden Ast
Standard

Stimmt, CSS arbeitet ja nach einem Punkteregelsystem. Hatte es mal vor einiger Zeit gelesen, aber überhaupt nicht daran gedacht. Werde mal nachschauen. Gibt es sonst noch etwas, was du bemängeln oder besser machen würdest?

Habe es auf die Schnelle folgendermaßen gelöst. Simpel. Jedoch nicht, das was ich mir gewünscht hatte, aber die Seite muß online gehen. Werde es später anpassen.

Navigation oben HTML:

Code:
            <div id="link">

	        <ul id="navigationtop">
		        <li class="service" id="service"><a href="service.html" title="Beckumer Bäder erhalten Sie beim Fachmann">Service</a></li>
		        <li class="kontakt"><a href="kontakt.php" title="Bau von Heizungs- und Lüftungsanlagen">Kontakt</a></li>
		        <li class="impressum"><a href="impressum.html" title="Die gezielte Leckortung erfordert Erfahrung">Impressum</a></li>
	        </ul>

            </div><!-- End link -->
Navigation oben CSS:

Code:
#navigationtop li {
    float: left;
	list-style: none;
	display: inline;
	margin-right: 1px;
}

#navigationtop li a {
    height: 30px;
	display: block;
	text-indent: -9999px;
}

#navigationtop li.service a {
	background: url('../img/link_service.jpg') top left no-repeat;
	width: 80px; 
}

#navigationtop li#service a {
	background: url('../img/link_service_a.jpg') top left no-repeat;
	width: 80px; 
}

#navigationtop li.kontakt a {
	background: url('../img/link_kontakt.jpg') top left no-repeat;
	margin-left: 17px;
	width: 80px; 
}

#navigationtop li#kontakt a {
	background: url('../img/link_kontakt_a.jpg') top left no-repeat;
	margin-left: 17px;
	width: 80px; 
}

#navigationtop li.impressum a {
	background: url('../img/link_impressum.jpg') top left no-repeat;
	margin-left: 17px;
	width: 85px; 
}

#navigationtop li#impressum a {
	background: url('../img/link_impressum_a.jpg') top left no-repeat;
	margin-left: 17px;
	width: 85px; 
}

#navigationtop li a:hover {
	background-position: 0 -58px; 
}
-----

Navigation links HTML:

Code:
            <div id="navigation">

                    <a href="index.html" class="startseite" id="startseite"><span>Startseite</span></a>
                    <a href="ueberuns.html" class="ueberuns"><span>Über uns</span></a>
                    <a href="service.html" class="service"><span>Service</span></a>
                    <a href="bad.html" class="bad"><span>Bad</span></a>
                    <a href="heizung.html" class="heizung"><span>Heizung</span></a>
                    <a href="leckortung.html" class="leckortung"><span>Leckortung</span></a>
                    <a href="dachufach.html" class="dachufach"><span>Dach und Fach</span></a>

            </div><!-- End navigation -->
Navigation links CSS:

Code:
#navigation {
    clear: both;
	width: 240px;
	height: 209px;
	background-color: #fff;
	background-image: url('../img/menu_left.jpg');
	background-repeat: no-repeat;
	background-position: top left;
}

#navigation ul {
	list-style-type: none;
}
	
#navigation a {
    display: block;
    width: 240px;
    height: 30px;
    float: left;
    margin-right: -3px;
}

#navigation a.startseite:hover {
    background: url('../img/menu_01.jpg') no-repeat;
}  

#navigation a#startseite {
    background: url('../img/menu_01.jpg') no-repeat;
}  

#navigation a.ueberuns:hover {
    background: url('../img/menu_02.jpg') no-repeat;
}

#navigation a#ueberuns {
    background: url('../img/menu_02.jpg') no-repeat;
}

#navigation a.service:hover {
    background: url('../img/menu_03.jpg') no-repeat;
}

#navigation a#service {
    background: url('../img/menu_03.jpg') no-repeat;
}

#navigation a.bad:hover {
    background: url('../img/menu_04.jpg') no-repeat;
}

#navigation a#bad {
    background: url('../img/menu_04.jpg') no-repeat;
}

#navigation a.heizung:hover {
    background: url('../img/menu_05.jpg') no-repeat;
}

#navigation a#heizung {
    background: url('../img/menu_05.jpg') no-repeat;
}

#navigation a.leckortung:hover {
    background: url('../img/menu_06.jpg') no-repeat;
}

#navigation a#leckortung {
    background: url('../img/menu_06.jpg') no-repeat;
}

#navigation a.dachufach:hover {
    background: url('../img/menu_07.jpg') no-repeat;
}

#navigation a#dachufach {
    background: url('../img/menu_07.jpg') no-repeat;
}

#navigation span {
    display: none;
}
War die einfachste und schnellste Methode. Wie würdest du es denn sonst noch machen. Auf jeden Fall schon mal großen Dank. Alles funktioniert, wie ich es haben wollte.

Geändert von Xtremo (09.02.2007 um 18:22 Uhr)
Mit Zitat antworten
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
Darstellungsproblem flohpapa CSS 3 16.12.2009 09:55
Vertikale Navigation: IE6 - Whitespace-Bug? b.erry CSS 6 12.02.2009 17:46
Umbruch in einem LI bei horizontalem Menü M4rco CSS 12 13.10.2006 12:26
Navigation - Menü T.S. CSS 6 18.02.2006 19:49


Alle Zeitangaben in WEZ +2. Es ist jetzt 00:53 Uhr.