|
|
|
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>
| |
|
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>
| |
|
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 |
| | |
 | Du har følgende muligheder | |
|
Dette spørgsmål er blevet annulleret, det er derfor ikke muligt for at tilføje flere kommentarer.
| |
|
|