spørsmål om nav bar laget i ps.

[kakesjef]

Jeg prøver å lære meg litt photoshop og leser div. tutorials...

 

Kom over denne og klarte det sånn greit.

http://pscloud.com/navigation-bar/web-20-nav-bar/

 

Men jeg forstår ikke hvordan jeg kan få de 3 ordene til å bli linker når de er på bildet og ikke er satt på over bildet i html fila...

 

kan noen hjelpe? takker

[pedsti]

du må slice de opp, slik at hvert enkelt ord eller link da kommer i et eget bilde.

 

PS har en egen innebygget funksjon som heter nettopp slice til det.

[Ståle]

Det jeg ville gjort, var a ta vekk teksten fra bildet. Sa lagre hele bar-en som et bilde. Sa lager du en div med det bilde som bakgrunn, og har vanlige linker inni.

 

<div id="navbar">

| <a href="http://stale.nl">Stale Nestas</a> | <a href="http://opera.com">Opera</a> |

</div>

 

forutsatt at du ikke bruker en egendefinert skrifttype. Det er ogsa bedre a gjore det pa denne maten, for hvis blinde bruker en tekstoppleser, sa har de linkene dine som tekst. Ellers matte du hatt tittelen i alt-taggen pa bildene.

[kakesjef]

Ja takker for svar..

 

Det du sier ståle er jo det enkleste selvfølgelig, men hvis jeg har lyst på litt mer en bare vanlig skrift som link så går jo

ikke det.

 

Men uans. så slo jeg vekk den ideen og prøvde noe anent.

 

Jeg har nå ingen slik bakgrunn i navbaren, men jeg har buttons som jeg har laget i photos.

Disse skal skifte farge når jeg har hover og det går greit, men jeg får bare til å vise en om gange.

 

Det man ser på bilde er navbaren hvor jeg prøver og sette buttons inn som linker.

Jeg har nå gjort baren ekstra høy bare for å se at den var der den andre, men jeg vil ha annet buttonen ved siden av

Hjem buttonen.... Hvordan gjør jeg det?

 

Har det noe med align å gjøre?

 

HTML

 

<div id="nav">

		<a href="http://www.vg.no" id="imagelink"></a>
		<a href="http://www.vg.no" id="imagelinkto"></a>

   </div>

 

css

 

#imagelink

{
  display: block;
  width: 100px;
  height: 40px;
  background: url("bilder/hjembutton2.jpg");

}


#imagelink:hover

{ 
background: url("bilder/hjembutton2hover.jpg");
}

#imagelink span
{
 display: none;
}

#imagelinkto

{
  display: block;
  width: 100px;
  height: 40px;
  background: url("bilder/annetbutton2.jpg") no-repeat 0 0;
}

#imagelinkto:hover

{ 
background: url("bilder/annetbutton2hover.jpg");
}

#imagelinkto span
{
 display: none;
}

Endret 18. november 2007 av kakesjef

[Ståle]

ville hatt en meny-klasse pa alle menyelementene.

 

.meny {

display: block;

width: 100px;

height: 40px;

float: left;

}

 

prov med float:left; for a fa de pa linje.

[kakesjef]

Takker så meget!

 

har strevd lenge med å få det til og float: left; gikk

 

bøyer meg i støvet

[kakesjef]

Nå trodde jeg alt var i orden, men når jeg satte firefox til full skjerm så flyttet plutselig linkene seg slik

at de ble helt feilplassert i forhold til resten... når jegminimerer firefox er alt greit igjen...

 

 

Noen som kan tenke seg hva grunnen er?

 

EDIT: løst.

Endret 18. november 2007 av kakesjef