/ Forside/ Teknologi / Udvikling / HTML / Spørgsmål
Login
Glemt dit kodeord?
Brugernavn 

Kodeord  


Reklame
Top 10 brugere
HTML
#NavnPoint
molokyle 11184
Klaudi 5106
bentjuul 3377
severino 2040
smorch 1950
strarup 1525
natmaden 1396
scootergr.. 1320
e.c 1150
10  miritdk 1110
igen link problemer
Fra : Addicted_to_antrax
Vist : 297 gange
50 point
Dato : 29-03-06 09:52

Hvad er css "tagget" for at lave om på style for det aktive link (ikke a:active den er til når man trykker ned) men at det link der referere til den side man er på ændrer sig? (lidt som faneblade)

 
 
Kommentar
Fra : molokyle


Dato : 29-03-06 10:22

Der findes ingen specielle CSS egenskaber ud over psedoklasserne til dette. Det må du kode dig ud af. Enten som 'breadcrumbs' eller som jeg har gjort her: http://frip.dk/molokyle/temp/pureCSSmenu.html

..hvis du mener det der sker når du skifter mellem menuerne 'Hjem' og 'XHTML/CSS'.

Det er kun et stykke testkode uden nogen egentlig funktionalitet ud over at vise at siden præsenteres forskelligt alt efter hvilken af de 2 menupunkter der er valgt.

Selvom koden validerer fungerer menusystemet ikke helt efter hensigten i IE6 (..jeg betatester IE7 og der virker det ), men i Opera, Firefox, Netscape 8.1 og Safari bliver koden tolket korrekt.

'breadcrumbs' som er en anden/alternativ lokal navigering kan du læse om her: http://www.washington.edu/webguides/guidelines/breadcrumbs.html

</MOLOKYLE>

Kommentar
Fra : molokyle


Dato : 29-03-06 10:31

En anden metode er at udskifte HTML elementets CSS klasse vha. lidt Javascript:
Kode
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Default</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="description" content="Default">
<meta name="keywords" content="Default">
<script type="text/javascript">
function change()
{
var col=Math.round(Math.random()*16777215);
return col;
}
</script>
</head>
<body>
Dette er en side med style's der ændres dynamisk :
<br>
<p>
<a href="http://dmi.dk"><span onmouseout="this.style.color='black';" onmouseover="this.style.color=change();">DMI link</span></a>
</p>
<br>
<span onmouseover="this.style.color=change();">
<pre>




Dette er en tekst der styres af en dynamisk style !!!


Bla bla bla..

Bla bla bla..

Bla bla bla..

Bla bla bla..

Bla bla bla..

Bla bla bla..

Bla bla bla..

Bla bla bla..


</pre>
</span>
</body>
</html>

Man manipulerer DOM elementet direkte med: this.style.CSSegenskaben=NYegenskab

..eller sådan:

Kode
<html>
<title>Rounded corners</title>
<script type="text/javascript" language="JavaScript">
function change(id, newClass) {

identity=document.getElementById(id);

identity.className=newClass;

}
</script>

<style type="text/css">

/* Snazzy Box */

#xsnazzy p {margin:0 10px; letter-spacing:1px; padding-bottom:1em;}
#xsnazzy {display:block;background: transparent;width:25%;}

.xtop, .xbottom {display:block; background:transparent; font-size:1px;}
.xb1, .xb2, .xb3, .xb4 {display:block; overflow:hidden;}
.xb1, .xb2, .xb3 {height:1px;}
.xb2, .xb3, .xb4 {background:#eca; border-left:1px solid #fff; border-right:1px solid #fff;}
.xb1 {margin:0 5px; background:#fff;}
.xb2 {margin:0 3px; border-width:0 2px;}
.xb3 {margin:0 2px;}
.xb4 {height:2px; margin:0 1px;}

.xboxcontent
{
display:block;
background:#eca;
border-style:solid;
border-color: #000;
border-width:0 1px;
text-align:center; /* Centering content */
}

/* Inset 3D Raised */
.raised {background: transparent; width:90%;margin:0 auto;}
.raised h1, .raised p {margin:0 10px;}
.raised h1 {font-size:1em; color:#fff; letter-spacing:1px;}
.raised p {padding-bottom:0.5em;}

.raised .top, .raised .bottom {display:block; background:transparent; font-size:1px;}
.raised .b1, .raised .b2, .raised .b3, .raised .b4, .raised .b1b, .raised .b2b, .raised .b3b, .raised .b4b {display:block; overflow:hidden;}
.raised .b1, .raised .b2, .raised .b3, .raised .b1b, .raised .b2b, .raised .b3b {height:1px;}
.raised .b2 {background:#ccc; border-left:1px solid #fff; border-right:1px solid #eee;}
.raised .b3 {background:#ccc; border-left:1px solid #fff; border-right:1px solid #ddd;}
.raised .b4 {background:#ccc; border-left:1px solid #fff; border-right:1px solid #aaa;}
.raised .b4b {background:#ccc; border-left:1px solid #eee; border-right:1px solid #999;}
.raised .b3b {background:#ccc; border-left:1px solid #ddd; border-right:1px solid #999;}
.raised .b2b {background:#ccc; border-left:1px solid #aaa; border-right:1px solid #999;}

.raised .b1 {margin:0 5px; background:#fff;}
.raised .b2, .raised .b2b {margin:0 3px; border-width:0 2px;}
.raised .b3, .raised .b3b {margin:0 2px;}
.raised .b4, .raised .b4b {height:2px; margin:0 1px;}
.raised .b1b {margin:0 5px; background:#999;}

.raised .boxcontent
{
display:block;
background:#ccc;
border-left:1px solid #fff;
border-right:1px solid #999;
text-align:left; /* Align content left */
}

/* Inset 3D Curved */
.inset {background: transparent; width:90%;margin:0 auto;}
.inset h1, .inset p {margin:0 10px;}
.inset h1 {font-size:1em; color:#fff; letter-spacing:1px;}
.inset p {padding-bottom:0.5em;}

.inset .top, .inset .bottom {display:block; background:transparent; font-size:1px;}
.inset .b1, .inset .b2, .inset .b3, .inset .b4, .inset .b1b, .inset .b2b, .inset .b3b, .inset .b4b {display:block; overflow:hidden;}
.inset .b1, .inset .b2, .inset .b3, .inset .b1b, .inset .b2b, .inset .b3b {height:1px;}
.inset .b2 {background:#ccc; border-left:1px solid #999; border-right:1px solid #aaa;}
.inset .b3 {background:#ccc; border-left:1px solid #999; border-right:1px solid #ddd;}
.inset .b4 {background:#ccc; border-left:1px solid #999; border-right:1px solid #eee;}
.inset .b4b {background:#ccc; border-left:1px solid #aaa; border-right:1px solid #fff;}
.inset .b3b {background:#ccc; border-left:1px solid #ddd; border-right:1px solid #fff;}
.inset .b2b {background:#ccc; border-left:1px solid #eee; border-right:1px solid #fff;}

.inset .b1 {margin:0 5px; background:#999;}
.inset .b2, .inset .b2b {margin:0 3px; border-width:0 2px;}
.inset .b3, .inset .b3b {margin:0 2px;}
.inset .b4, .inset .b4b {height:2px; margin:0 1px;}
.inset .b1b {margin:0 5px; background:#fff;}

.inset .boxcontent
{
display:block;
background:#ccc;
border-left:1px solid #999;
border-right:1px solid #fff;
text-align:left; /* Align content left */
}
</style>
</head>
<body>
<div id="xsnazzy">
<b class="xtop"><b class="xb1"></b><b class="xb2"></b><b class="xb3"></b><b class="xb4"></b></b>
<div class="xboxcontent">
<p></p>
<div class="raised" id="item_1" onmouseover="change('item_1','inset');" onmouseout="change('item_1','raised');">
<b class="top"><b class="b1"></b><b class="b2"></b><b class="b3"></b><b class="b4"></b></b>
<div class="boxcontent">
<h1>Button 1</h1>
</div>
<b class="bottom"><b class="b4b"></b><b class="b3b"></b><b class="b2b"></b><b class="b1b"></b></b>
</div>
<p></p>
<div class="raised" id="item_2" onmouseover="change('item_2','inset');" onmouseout="change('item_2','raised');">
<b class="top"><b class="b1"></b><b class="b2"></b><b class="b3"></b><b class="b4"></b></b>
<div class="boxcontent">
<h1>Button 2</h1>
</div>
<b class="bottom"><b class="b4b"></b><b class="b3b"></b><b class="b2b"></b><b class="b1b"></b></b>
</div>
<p></p>
<div class="raised" id="item_3" onmouseover="change('item_3','inset');" onmouseout="change('item_3','raised');">
<b class="top"><b class="b1"></b><b class="b2"></b><b class="b3"></b><b class="b4"></b></b>
<div class="boxcontent">
<h1>Button 3</h1>
</div>
<b class="bottom"><b class="b4b"></b><b class="b3b"></b><b class="b2b"></b><b class="b1b"></b></b>
</div>
<p></p>
<div class="raised" id="item_4" onmouseover="change('item_4','inset');" onmouseout="change('item_4','raised');">
<b class="top"><b class="b1"></b><b class="b2"></b><b class="b3"></b><b class="b4"></b></b>
<div class="boxcontent">
<h1>Button 4</h1>
</div>
<b class="bottom"><b class="b4b"></b><b class="b3b"></b><b class="b2b"></b><b class="b1b"></b></b>
</div>
<p></p>
</div>
<b class="xbottom"><b class="xb4"></b><b class="xb3"></b><b class="xb2"></b><b class="xb1"></b></b>
</div>

Hvor man med dette script kan udskifte en CSS klasse dynamisk:
Kode
<script type="text/javascript" language="JavaScript">
function change(id, newClass) {

identity=document.getElementById(id);

identity.className=newClass;

}
</script>


</MOLOKYLE>

Kommentar
Fra : Addicted_to_antrax


Dato : 29-03-06 10:45

Hehe jeg forstår desværre ikke en skid javascript.... Hmm men ja du har forstået mit spørgsmål, men kan det ikke laves bare i html?

Kommentar
Fra : molokyle


Dato : 29-03-06 11:10

Joda, det er let. Eks.

På hovedsiden (index.html) er menupunktet 'Hovedside' valgt med en blå farve. Resten af menupunkterne hvide.
På undersiden (side1.html) er menuen 'Underside' valgt med blå farve. Resten af menupunkterne hvide. (..også menupunktet 'Hovedside')
osv...

Bruger du CSS kan det laves f.eks. sådan : http://www.cssplay.co.uk/menus/ultimate.html#
..som du ser i menueksemplet til højre på siden er menupunkt 2 valgt. På andre sider vælger man blot det tilhørene menupunkt, når man er på netop denne side.

Det kunne også være et andet billede, hvis det er billeder du bruger som menupunkter.

Der er et eksempel med grafik her : http://www.cssplay.co.uk/menus/menu5teen.html

</MOLOKYLE>

Kommentar
Fra : molokyle


Dato : 29-03-06 11:17

Ps. Hvis du har tænkt dig at lave det på en side, hvor menuen ligger i en frame? Så går hele 'fidusen' med frames af fløjten, da begge frames så skal opdateres når man navigerer med brug af menupunkterne. Bla. derfor anbefaler jeg altid, at man holder sig fra frames.

Pps. flere frames der skal opdateres samtidig kan kun laves med javascript

</MOLOKYLE>

Kommentar
Fra : molokyle


Dato : 29-03-06 11:22

Grafikeksemplet i CSS http://www.cssplay.co.uk/menus/menu5teen.html kan dog godt laves på en side med frames, da det kun er de lokale baggrunde til knapperne der styres af CSS. Framen selv behøver da ikke at blive opdateret, når et menupunkt vælges.

</MOLOKYLE>

Kommentar
Fra : Addicted_to_antrax


Dato : 30-03-06 19:20

Hmm... men de viser jo ikke det bestemte tag eller koderne de viser jo kun hvordan de ser ud? dette er mit stylesheet nu..... hvad skal jeg skrive ind for at gøre det aktive link f.eks. hvidt?

body{
margin:0;
border:0;
padding:0;
height:100%;
background:#ffffff;
font-family:arial,verdana,sans-serif;
font-size:76%;
overflow:hidden;
}
#header{

position:absolute;
top:0;
left:0;
width:100%;
height:110px;
overflow:hidden;
background:#FFCC00;
color:#666;
}
#menu{
postion:absolute;
top:110px;
left:0px;
width:100%;
height:35px;
overflow:hidden;
background:#FFCC00;
color:#000000;
}
#footer{
position:absolute;
bottom:0;
left:0;
width:100%;
height:50px;
overflow:auto;
text-align:right;
background:#FFCC66;
color:#EEE;
}
#contents{
postion:fixed;
top:120px;
left:0;
bottom:50px;
right:0;
overflow:auto;
background:#eeeeee;
}
* html body{
padding:110px 0 50px 0;
}
* html #contents{
height:100%;
width:100%;
}
p{
width:100%px;
}
h1{
margin-top:10px;
margin-right:10px;
margin-bottom:10px;
margin-left:10px;
}
h2{
margin-top:10px;
margin-right:10px;
margin-bottom:10px;
margin-left:10px;
}
h3{
margin-top:10px;
margin-right:10px;
margin-bottom:10px;
margin-left:10px;
font-size: 100%;
}
p{
margin-top:10px;
margin-right:10px;
margin-bottom:10px;
margin-left:10px;
}
a.nav,a.nav:link,a.nav:visited{
width: 150px;
height: 25px;
background: #FFCC00;
border: 1px solid #FFCC00;
margin-top: 2px;
text-align: center;
text-decoration: none;
font-family: verdana, arial, sans-serif;
font-size: 12px;
color: #000000;
line-height: 25px;
overflow: hidden;
margin-top: 10px;
margin-right: 0px;
margin-bottom: 10px;
margin-left: 0px;
align:justify;
}
a.nav:hover{
color: #000;
background: #eee;
border-width: 3px;
border-style: solid;
border-color: #eee;
text-align: center;
}

}
.nav{
margin-top:10px;
margin-right:10px;
margin-bottom:10px;
margin-left:10px;

}

Kommentar
Fra : molokyle


Dato : 31-03-06 12:39

Citat
a:active {color:#ffffff;}


..for alle link. ( Se også: http://www.w3schools.com/css/tryit.asp?filename=trycss_link )

Citat
a.nav:active {color:#ffffff;}


..for anchor markører der har angiver klassen class="nav" som navn.

..eller
Kode
#nav a:active {color:#ffffff;}


..for de anchors der har id="nav" som henvisning (..eller i <div> blokken eller <span> inline afsnittet med denne id.)

..men dette gælder kun 'før' den 'nye' side er indlæst

Læs lige :

1.) http://www.w3schools.com/css/css_pseudo_classes.asp
2.) http://www.w3schools.com/css/css_pseudo_elements.asp

..ellers er løsningen som jeg angav her: http://www.kandu.dk/spg85455.aspx#939283

</MOLOKYLE>

Du har følgende muligheder
Dette spørgsmål er blevet annulleret, det er derfor ikke muligt for at tilføje flere kommentarer.
Søg
Reklame
Statistik
Spørgsmål : 173552
Tips : 31660
Nyheder : 719565
Indlæg : 6383003
Brugere : 218252

Månedens bedste
Årets bedste
Sidste års bedste