---

Jeg vil gerne lave nogle knapper til mine websider, så jeg har
maximal indflydelse på udseendet og kan justere det henad vejen.
Indstillingerne for knappernes udseende skal kunne styres
centralt fra eksternt stylesheet.
Hvordan kan jeg gøre dette? - Findes der evt. nogle fleksible
skabeloner/layouts, som jeg kan bearbejde?

I Frontpage 2000 kan man lave "pegefølsomme knapper". Kan disse
knappers udseende (størrelse, farve, hover-effekt) styres fra
stylesheet? (Jeg er dog lidt skeptisk overfor disse knapper,
fordi de er appletter, som jeg går ud fra vil gøre indlæsning af
websiderne langsom - er det korrekt?)

Almindelige standard windows knapper er for kedelige. Jeg søger
noget med et mere personligt udtryk.

--
Dette indlæg er sendt fra http://www.html.dk
* Søg og læs i de danske nyhedsgrupper om webdesign
* Tutorials og artikler om webdesign på dansk

---

Preben Nielsen wrote in dk.edb.internet.webdesign.html:
> Almindelige standard windows knapper er for kedelige. Jeg søger
> noget med et mere personligt udtryk.

Du kan sagtens give de almindelige windowsknapper et personligt
præg med CSS. F.eks. sådan her:

<input type="button" id="b1">

#b1
{
background: red;
border: 2 px groove red;
color: yellow;
height: 20px;
width:300px;
}

Osv. osv. - alternativt kan du jo lave dine knapper med
almindelige <div> elementer:

<div id="b1"><a href="dok.htm">tekst</a></div>

#b1
{
background: red;
border: 2 px groove red;
color: yellow;
height: 20px;
width:300px;
}

Jeg ville foretrække den sidste løsning. Fordi det er mest
korrekt at benytte formularelementer til formularer - ikke til
navigation.

Mht. FrontPage java knapperne - så lad være med at bruge dem -
man bør aldrig benytte java eller javascript til noget så kritisk
som navigation. Dels udelukker det en stor del at brugerne fra at
benytte siden, dels har søgemaskinerne også problemer med den
slags clientside teknologier.

Håber det gav dig lidt inspiration?

Mvh
Jonas

--
Dette indlæg er sendt fra http://www.html.dk
* Søg og læs i de danske nyhedsgrupper om webdesign
* Tutorials og artikler om webdesign på dansk

---

Jonas Astrup - html.dk wrote in dk.edb.internet.webdesign.html:

> - alternativt kan du jo lave dine knapper med
> almindelige <div> elementer:
>
> <div id="b1"><a href="dok.htm">tekst</a></div>
>
> #b1
> {
> background: red;
> border: 2 px groove red;
> color: yellow;
> height: 20px;
> width:300px;
> }

Hej Jonas

Jeg arbejder videre med dit sidste forslag - der skal dog stå 2px
uden mellemrum i CSS-koden for border: for at det virker.

Jeg har centreret teksten på knappen v.hj.a. text-align: center.
Hvis knappen har en højde på fx 50 px ses teksten oppe i toppen af
knappen. Kan man få teksten til også at være centreret vertikalt
(hedder det vist - jeg kan aldrig huske forskel på horisontal og
vertikal)?

Jeg har brug for andre linkfarver på knapperne end dem der bruges på
almindelig tekst. Og har så prøvet med class - efter dine
anvisninger i tutorial kap 7 på html.dk. Men jeg kan ikke få det til
at virke. I stylesheet har jeg prøvet af lave en class:

a.link1   { color: yellow   }

på websiden:

<div id="b1"><a href="dok.htm" class="link1">Tekst</a></div>

Hvad er der galt her?

Jeg har desuden brug for at kunne definere nye farver både for
:link, :visited, :active og :hover. Hvordan gør man det?

Tak for inspiration - og også for din advarsel mod java knapperne.

Preben

--
Brug Validator service: http://www.html.dk/validator
- Tast din URL én gang, og validér dokumentet hos 12 validatorer
- Understøtter HTML, CSS og søgemaskineoptimering

---

Jeg har nu fået linkfarve på knappen ændret v.hj.a. class. Jeg må
have lavet en eller anden banal fejl, ved ikke hvilken.

Jeg har dog stadig ingen anelse om, hvordan jeg kan få lavet et sæt
farvekoder for også besøgt link, active og hover tilknyttet knappen
og altså forskelligt fra almindelige tekstlinks' farver.
Kan det sammenskrives på en elegant måde til én class, så man ikke
skal have en class for hver?
HELP!

Preben

--
Brug Validator service: http://www.html.dk/validator
- Tast din URL én gang, og validér dokumentet hos 12 validatorer
- Understøtter HTML, CSS og søgemaskineoptimering

---

Preben Nielsen wrote in dk.edb.internet.webdesign.html:
> HELP!

<a href="xxx">Almindeligt link</a>
<a href="yyy" class="spec">Specielt link</a>

CSS for almindelige links

a:link {
   color: blue;
   text-decoration:none;
}
a:visited {
   color: purple;
   text-decoration:none;
}
a:active {
   background-color: yellow;
   text-decoration:none;
}
a:hover {
   color:red;
   text-decoration:none;
}


CSS for specielle links:


a.spec:link {
   color: blue;
   text-decoration:none;
}
a.spec:visited {
   color: purple;
   text-decoration:none;
}
a.spec:active {
   background-color: yellow;
   text-decoration:none;
}
a.spec:hover {
   color:red;
   text-decoration:none;
}

Håber det hjælper dig på vej

Mvh
Jonas

--
Brug Validator service: http://www.html.dk/validator
- Tast din URL én gang, og validér dokumentet hos 12 validatorer
- Understøtter HTML, CSS og søgemaskineoptimering

---

Jonas Astrup - html.dk <jonas.usenet@html.dk> wrote:

[snip]

> a.spec:active {
> background-color: yellow;
> text-decoration:none;
> }
> a.spec:hover {
> color:red;
> text-decoration:none;
> }
>

Er der ikke noget med, at hover skal komme før active for at virke
korrekt? Jvf CSS2 specs'ene der dikterer:

'Note that the A:hover must be placed after the A:link and A:visited
rules, since otherwise the cascading rules will hide the 'color'
property of the A:hover rule. Similarly, because A:active is placed
after A:hover, the active color [...] will apply when the user both
activates and hovers over the A element.'

--
MVH/Regards, Jonas
http://go.to/geografi Erase HARDDRIVE to mail me
I'm moving to Mars next week, so if you have any boxes...[Steven Wright]

---

> <a href="xxx">Almindeligt link</a>
> <a href="yyy" class="spec">Specielt link</a>
>
> CSS for almindelige links
>
> a:link {
>    color: blue;
>    text-decoration:none;
> }
> a:visited {
>    color: purple;
>    text-decoration:none;
> }
> a:active {
>    background-color: yellow;
>    text-decoration:none;
> }
> a:hover {
>    color:red;
>    text-decoration:none;
> }
>
>
> CSS for specielle links:
>
>
> a.spec:link {
>    color: blue;
>    text-decoration:none;
> }
> a.spec:visited {
>    color: purple;
>    text-decoration:none;
> }
> a.spec:active {
>    background-color: yellow;
>    text-decoration:none;
> }
> a.spec:hover {
>    color:red;
>    text-decoration:none;
> }
>

Det virker fuldstændig som det skal. Jeg er glad og teknemlig! -
endnu en gang.
Tak, Jonas!

Lige en sidste detalje: Kan man foretage en vertical-align af
teksten? (Text-align tager sig af den horisontale justering.)

Mvh
Preben


--
Brug Validator service: http://www.html.dk/validator
- Tast din URL én gang, og validér dokumentet hos 12 validatorer
- Understøtter HTML, CSS og søgemaskineoptimering

---

Jonas Astrup - html.dk wrote in dk.edb.internet.webdesign.html:

> <div id="b1"><a href="dok.htm">tekst</a></div>
>
> #b1
> {
> background: red;
> border: 2 px groove red;
> color: yellow;
> height: 20px;
> width:300px;
> }
>
I din CSS tutorial lektion 7 (class og id) står der at # bruges om
id -altså om en enkelt forekomst. Den knap-kode, du har givet mig,
hedder
#b1 og #b2.
Det virker (som tidligere nævnt) som det skal, men er det
kode-korrekt at bruge #, hvis det betyder id? - Jeg bruger jo samme
knap-layout adskillige gange.
Jeg har prøvet at udskifte "#" med "." respektive "id" med "class",
og det virker jo også som det skal. Er det ikke mere korrekt?

Preben



--
Brug Validator service: http://www.html.dk/validator
- Tast din URL én gang, og validér dokumentet hos 12 validatorer
- Understøtter HTML, CSS og søgemaskineoptimering