zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Aktive Menüelemente markieren

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 08.08.2012, 10:43
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 08.08.2012
Beiträge: 1
Makasia befindet sich auf einem aufstrebenden Ast
Standard Aktive Menüelemente markieren

Hallo, ich stehe vor dem folgendem Problem:

Ich will auf der Homepage zur besseren Orientierung im Menü sichtbar machen, auf welchem Teil der Seite man sich befindet, sprich der Aktive Menüteil soll zB. farblich hervorgehoben sein.

Ich habe mittlerweile einiges versucht, leider reagiert mein code nicht auf active. Änderungen im hover-Bereich werden Problemlos umgesetzt. Sogar wenn ich die code Blöcke, die active behandeln entferne, ändert sich an der Seite nichts.

Code:
html {
height: 100%;

}

body{
margin:0;
padding:0;
text-align:center;
background:#252525 url(../images/bg.jpg) 0 0% repeat;
font-size:15px;
color:#34332a;
font-family: "Helvetica MS", Arial, Helvetica, sans-serif;
font-weight:normal;

}

/*texte*/
p {
font-size: 80%;

}

h1 {
font-size: 200%;

}

h2 {
font-size: 150%;

}

h3 {
font-size: 125%;

}

h4, h5, h6 {
font-size: 100%;

}

/* liens hypertextes*/ 
a:link, a:visited {
text-decoration:none;
font-weight:normal;
color:#000;

}

a:hover {
color:#34332a;

}



ul {
margin:0;
padding-left:20px;

}

li {
list-style-type:square;
background:transparent;
margin: 4px;

}

img {
border:none;
margin: 5px 10px 5px 5px;
padding:0;

}

img .caption {
text-align: left;

}

.highlight{
background:#ffc77e;
padding: 0px 2px 0px 2px;
color:#424240;

}

.button {
background:#424240;
border:none;
color:#eeeeee;
font-weight:bold;
padding:4px;

}

 .inputbox {
color:#fff;
background:#424240;
border:none;
padding:4px;
font-weight:normal;

} 

.pagewidth{
width:990px;
text-align:center;
background:transparent;
margin-left:auto;
margin-right:auto;
margin-top:0px;
margin-bottom:0px;

}

fieldset {
margin:0px 5px 5px 5px;
padding:10px;
border:none;

}

.clr {
clear:both;

}

/**********************/
#sitename {
float:left;
width:453px;
height:184px;
background:transparent;
margin-top:0px;
margin-left:40px;

}

/*********************/

	
#topmenu {
float:left;
width:909px;
height:100px;
background: url(../images/topmenu.png) 0 0 no-repeat;
margin-top:-55px;
margin-left:49px;

}

#resizer{

width:350px;
height:60px;
margin-right:80px;
margin-top:5px;

}

/***********************/
#tool {
float:left;
width:160px;
height:40px;
background:transparent;
margin-top:41px;
text-align:left;
font-weight:bold;

}

.jqmWindow {
display: none;
position: fixed;
top: 17%;
left: 50%;
margin-left: -300px;
width: 200px;
background:#eeeeee  url(../images/bg.jpg) 0 0% repeat;
color: #fff;
padding: 12px;
text-align:left;
font-weight:bold;

}

.jqmClose {
background:#fff;
float:right;
font-weight:bold;
padding:5px;

}


background:#ffc77e;
}


.jqmOverlay { background-color: #000; }

/***********************/
#wrapper-main {
float:left;
width:908px;
background:#fff;
margin-left:50px;

}

/**************************/
#main {
float:left;
background:transparent;
width:640px;
padding:0;
text-align:left;
margin-bottom:20px;
margin-top:0px;
margin-left:25px;

}

#main-full {
float:left;
width:880px;
text-align:left;
margin-bottom:20px;
background:transparent;
margin-top:30px;
margin-left:25px;

}

#main-content {
float:left;
background:transparent;
width:620px;
padding:0;
text-align:left;
margin-bottom:20px;
margin-top:30px;

}

#main-content-full {
float:left;
background:transparent;
width:880px;
padding:0;
text-align:left;
margin-bottom:20px;
margin-top:30px;

}


/******RIGHT*********/

#right {
float:left;
width:223px;
text-align:left;
padding-right:0px;
padding:0;
background: url(../images/right.jpg) 0 0 repeat-y;
margin-left:20px;

}
#right h3 {
font-size:17px;
text-transform:capitalize;
text-align:left;
font-weight:normal;
color:#ffffff;
background: url(../images/left-h3.jpg) 0 0 no-repeat;
height:39px;
margin-left:-24px;
padding-left:15px;
padding-top:6px;}

#right ul {padding-left:10px;color:#ffffff;}



#right .moduletable_menu,
#right .moduletable {
margin-bottom:30px;
padding-left:20px;
background:transparent;
padding-top:0;
color:#ffffff;}




#right .moduletable_menu a,
#right .moduletable a,
#right a {color:#ffffff;}



#right .moduletable_menu a:hover,
#right .moduletable a:hover,
#right a:hover {color:#393d3c;}

#right .moduletable_menu a:active;		
#right .moduletable a:active;
#right a:active {color:#393d3c;}

Dabei geht es um das Menü RIGHT.


Vielen Dank
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 08.08.2012, 11:19
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,

:active gilt nur im Moment des Mausklicks. Mit dem aktiven Menüpunkt hat das nicht so viel zu tun.

Am besten man tauscht beim aktiven Menüpunkt zur Vermeidung des Deppenlinks das a gegen strong aus und formatiert entsprechend.
Damit das nicht in Arbeit ausartet (sonst muss man bei Änderungen jede Seite wieder anfassen) kannst du z.B. die navi nach diesem Beispiel includen.

Bei einem CMS ist das evtl. anders zu lösen, bzw. wird beim aktiven Menüpunkt meist eine Klasse mit ausgegeben, die man formatieren kann.
__________________
Ein mehrfacher Gruß aus dem Südosten
Klaus
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 12.08.2012, 09:07
Benutzer
neuer user
 
Registriert seit: 14.09.2009
Beiträge: 88
Hook befindet sich auf einem aufstrebenden Ast
Standard

Hi,

ich würde dir auch raten, das Menü auszulagern. Es gibt einige gute Scripte, die dir jede Arbeit abnehmen (Vergabe von id und class; Vermeidung des erwähnten Deppenlink etc.).
Ich bevorzuge dieses: http://www.die-seite.eu/wm-phpscript-navi02.php

Hook
Mit Zitat antworten
Antwort

Stichwörter
active, aktive elemente, aktiver link, menü

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
Aktive Seite markieren polysick CSS 4 20.11.2009 08:41
Markieren von Inhalten verhindern marius Javascript & Ajax 3 29.08.2009 16:17
textarea - teilbereich markieren opa-rudi Javascript & Ajax 2 13.07.2007 13:22
Dieses Forum als gelesen markieren Loïs Bégué Fragen, Konstruktive Kritik, Lob / Bekanntmachungen 3 06.07.2007 15:49
aktive Links farblich markieren ?! aaron CSS 1 19.09.2005 14:02


Alle Zeitangaben in WEZ +2. Es ist jetzt 14:22 Uhr.