html - Ved aktiv side, andet billede end ved ikke-aktiv - Udvikleren.dk

Tags: css html navigationsbar

<< < 1 2 > >>

Bruger #16833 @ 27.10.11 19:57

Hej.
Jeg har bygget min navigationsbar op således:

HTML kode

 <body>
 <center>
 <div id="logo"></div>
 <div>
 <ul id="ulnav">    
 <li id="linav" class="forside"><a href="#" class="forside">Forside</a></li>
 <li id="linav" class="jakobnissen"><a href="#" class="jakobnissen">Jakob Nissen</a></li>
 <li id="linav" class="produkter"><a href="#" class="produkter">Produkter</a></li>
 <li id="linav" class="referencer"><a href="#" class="referencer">Referencer</a></li>
 <li id="linav" class="kontakt"><a href="#" calss="kontakt">Kontakt</a></li>
 </ul>
 </div>
 <div id="content"><p>&nbsp;</p>
   <p>Hej :-)</p>
 </div>
 <div id="copyright">Copyright © Jakob Nissen</div>
 </center>
 </body>

Med følgende CSS:

CSS kode

 @charset "UTF-8";
 /* CSS Document */
 
 body {
     
     background-color:#FFF;
     font-family:Tahoma, Geneva, sans-serif;
     font-size:12px;
 }
 
 #logo {
     width:800px;
     height:80px;
     background-image:url(logo.gif);
     background-repeat:no-repeat
 }
 
 #content {
     width:800px;
     height:500px;
     background-image:url(content.png);
     margin-bottom:5px;
     margin-top:67px;
     text-align:left;
     text-indent:10px;
     color:#000;
 }
 
 #copyright {
     width:800px;
     height:17px;
     background-image:url(copyright.png);
     text-align:center;
     color:#000;
 }
 #ulnav {
     list-style-type: none;
     width: 800px;
 }
 #linav {
     float:left;
     width:150px;
     margin-right:2px;
 }
 a.forside:LINK, a.forside:visited {
     text-align: left;
     text-decoration: none;
     color:#fe9936;
 }
 a.jakobnissen:LINK,a.jakobnissen:visited {
     text-align: left;
     text-decoration:none;
     color:#fe9936;
 }
 a.produkter:LINK, a.produkter:visited {
     text-align: left;
     text-decoration: none;
     color:#fe9936;
 }
 a.blog:LINK, a.blog:visited {
     text-align: left;
     text-decoration: none;
     color:#fe9936;
 }
 a.kontakt:LINK, a.kontakt:visited {
     text-align: left;
     text-decoration: none;
     color:#fe9936;
 }
 a.forside:hover {
     color:#999;
 }
 a.jakobnissen:hover {
     color:#999;
 }
 a.produkter:hover {
     color:#999;
 }
 a.blog:hover {
     color:#999;
 }
 a.kontakt:hover {
     color:#999;
 }
 
 .forside {
     display:block;
     width:160px;
     height:50px;
     text-indent:-9999px;
 }
 .forside a {
     display:block;
     width:100%;
     height:100%;
     background:url(nav_forside.png) no-repeat top left;
     outline:none;
 }
 .forside a:hover {
     background-position:0 -50px;
 }
 
 .jakobnissen {
     display:block;
     width:160px;
     height:50px;
     text-indent:-9999px;
 }
 .jakobnissen a {
     display:block;
     width:100%;
     height:100%;
     background:url(nav_jakobnissen.png) no-repeat top left;
     outline:none;
 }
 .jakobnissen a:hover {
     background-position:0 -50px;
 }
 
 .produkter {
     display:block;
     width:160px;
     height:50px;
     text-indent:-9999px;
 }
 .produkter a {
     display:block;
     width:100%;
     height:100%;
     background:url(nav_produkter.png) no-repeat top left;
     outline:none;
 }
 .produkter a:hover {
     background-position:0 -50px;
 }
 
 .referencer {
     display:block;
     width:160px;
     height:50px;
     text-indent:-9999px;
 }
 .referencer a {
     display:block;
     width:100%;
     height:100%;
     background:url(nav_referencer.png) no-repeat top left;
     outline:none;
 }
 .referencer a:hover {
     background-position:0 -50px;
 }
 
 .kontakt {
     display:block;
     width:160px;
     height:50px;
     text-indent:-9999px;
 }
 .kontakt a {
     display:block;
     width:100%;
     height:100%;
     background:url(nav_kontakt.png) no-repeat top left;
     outline:none;
 }
 .kontakt a:hover {
     background-position:0 -50px;
 }

Siden kan ses her: Jakob Nissen

Det jeg gerne vil have er:
Når jeg står på siden velkommen, altså min index.html skal navigationsbaren være fuldstændig som den er nu, den eneste ændring skal være at "Velkommen"-teksten inde i navigationsbaren skal være sort. Det samme skal gælde når man trykker på de andre punkter. Det er 5 forskellige billeder og dermed skal jeg også have lavet 5 billeder med sort skrift, men hvordan får jeg det kodet, så billederne med sort skrift vises når "deres" side er aktiv.

Håber i forstår mit spørgsmål. :-)

Jakob

12 svar postet i denne tråd vises herunder
1 indlæg har modtaget i alt 2 karma

Sorter efter stemmer Sorter efter dato

Bruger #10216 @ 28.10.11 09:48

4.283

@Brian,

Jeg bliver altid budt at optimere et system mest muligt, uanset om det er hjemmeside eller et større system. Eksempelvis sad jeg med Gratis Danmark portalen, som både var grafisk tung og kodemæssigt et enormt system. Kodeoptimering er jo lige til, men det viste sig også at de mange requests til grafikfiler forårsagede et tidsmæssigt load.

Men lad os bare tage et regnestykke på Jakobs side.

Nu bruger min computer ca. 117ms på at hente og rendere et enkelt menupunkt. Ser vi på IE og Firefox kun kan åbne to requests af gangen (ved ikke om dette er ændret i de seneste versioner), og kigger på jakobs fem menupunkter. Så når vi frem til at skulle gange ovenstående med tre. Altså ca. 350ms. Havde vi ti billeder, ganger vi med fem og når 585ms. Altså et halvt sekund.

Samler vi alle billederne til en fil - skal vi kun bekymre os om denne. Det kan godt blive lidt større, så lad os bare gætte på at requested nu ta'r 150ms. Jeg ville ikke skyde det højere og det er grundet at der bl.a. spares på meta informationer. Ligeledes er der nu også et request ledigt til et hente et andet vigtigt billede, eller et stylesheet.

Jakobs side bruger allerede 400ms bare det indhold der er. 200ms går til server respons.
Til sammenligning bruger eb.dk 300ms på serverrespons, og de sidste 5.9sekunder bruges på billeder...

sek hvis man kunne skære ned på de ca. 316 requests.

Bruger #16833 @ 28.10.11 14:51

Hej alle.
Tak for jeres hjælp og råd. Jeg brugte scootergrisens eksempel og det spiller 100% nu. :-)

Jakob

<< < 1 2 > >>

Ved aktiv side, andet billede end ved ikke-aktiv

Karma barometer (30 dage)

Modtaget

Givet

Favorit hos
Forum tråde
Artikler