---

Hej

Hvordan gør dette mest optimalt ?

Jeg har en standardknap på links:

a.button {
font-weight : bold;
text-decoration: none;
text-align: left;
text-indent: 4px;
display: block;
line-height: 1.4em;
width:100px;
background-color: ButtonFace;
border-top : 2px solid ButtonHighlight;
border-right : 2px solid ButtonShadow;
border-bottom : 2px solid ButtonShadow;
border-left : 2px solid ButtonHighlight;
}

...som stiller knapperne lodret.

Et andet sted skal jeg bruge vandrette (uden display block) og igen andre
steder skal knapbredden være 1/4. Hvordan gør jeg dette uden at lave nye
klasser og gentage definitionen med få rettelser ?

(PS alt skal fortsat kunne autoskaleres til alle skærme)

--
Med venlig hilsen Martin
Nybegynder i html og css - men synes at det er sjovt

---

Martin <martinnielsen@hotmail.com> writes:

> Hej
>
> Hvordan gør dette mest optimalt ?
>
> Jeg har en standardknap på links:
>
> a.button {
> font-weight : bold;
> text-decoration: none;
> text-align: left;
> text-indent: 4px;
> display: block;
> line-height: 1.4em;
> width:100px;
> background-color: ButtonFace;
> border-top : 2px solid ButtonHighlight;
> border-right : 2px solid ButtonShadow;
> border-bottom : 2px solid ButtonShadow;
> border-left : 2px solid ButtonHighlight;
> }
>
> ..som stiller knapperne lodret.
>
> Et andet sted skal jeg bruge vandrette (uden display block) og igen andre
> steder skal knapbredden være 1/4. Hvordan gør jeg dette uden at lave nye
> klasser og gentage definitionen med få rettelser ?

Hvis du vil have dem vandret behøver du ikke skifte display:block, du
kan blot tilføje float:left. For at tilføje kan du blot lave en
betinget style-definition:
div.buttonrow a.button {float:left}
(læses: en a.button der er inde i en div.buttonrow skal have style ...)
og så putte dine vandrette knapper ind i en
<div class="buttonrow"> ... </div>
Det bliver også pænere end at skifte display med
div.buttonrow a.button {display:inline}
i de browsere jeg har tjekket.

Du kan sikkert gøre noget lignende med knapbredden.

> (PS alt skal fortsat kunne autoskaleres til alle skærme)

Jeg kan ikke se hvad du har gjort for at få det til at skalere, ud
over at bruge em som enhed ét sted ... resten bruger "px" som er
absolut.

Håber det hjælper.
/L
--
Lasse Reichstein Nielsen - lrn@hotpop.com
'Faith without judgement merely degrades the spirit divine.'

---

Subject: Re: CSS knapper ?
From: Martin <martinnielsen@hotmail.com>
Newsgroups: dk.edb.internet.webdesign.html

Lasse Reichstein Nielsen <lrn@hotpop.com> wrote in
news:vg46im3j.fsf@hotpop.com:

Hej Lasse - og tak for for svaret

Dit anvisning fungerer ikke, og jeg har nu forsøgt alt.
Jeg har klassificeret linkene med buttonrow, men i stylesheetet er der
ingen reaktion overhovedet på "div.buttonrow a.button {...}"

For at verificere en reaktion har jeg sat diverse style i
".buttonrow {...}"
f.eks kopieret hele ".button {...}"
og så fjernet "display: block" og så ligger knapperne vandret.
"float:left" får alle knapper til at forsvinde.

Jeg får det altså til at fungere ved at kopiere alle .button samt alle
tilhørende tilstande og så omdøbe til .buttonrow. Men hvorledes undgår
denne redundans når eneste ændring i i de vandrette knapper er at fjerne
"display: block" ?

Nyt prob:
----------
Knapperne ligger øverst og siden starter altså med <a href.. osv
dette medfører at første øverste venstre knap er indrykket få pix,
formentlig
svarende til halv karakterafstand. Det ser ikke godt ud når knapperne
autoskaleres lodret ved at brugeren gør siden smallere, for så er kun
første knap
let indrykket i den lodrette kolonne af knapper, mens alle efterfølgende
står over hinanden.

Jeg har erfaret at indsætning af <BR> som første kode på HTML-siden får
knapperne til at flugte præcist lodret, men så kommer der jo en tom linie
over knapperne. Hvad kan man gøre ved dette ?

> Jeg kan ikke se hvad du har gjort for at få det til at skalere, ud
> over at bruge em som enhed ét sted ... resten bruger "px" som er
> absolut.
Ville jeg kunne konvertere alle px til em, -knapmargin og hele molevitten
og
hvordan finder jeg de em-mål der gælder for px-målene ?

Håber at du eller en anden kan svare


--
Med venlig hilsen Martin
Nybegynder i html og css - men synes at det er sjovt

---

Martin <martinnielsen@hotmail.com> writes:

> Dit anvisning fungerer ikke, og jeg har nu forsøgt alt.
> Jeg har klassificeret linkene med buttonrow, men i stylesheetet er der
> ingen reaktion overhovedet på "div.buttonrow a.button {...}"
>
> For at verificere en reaktion har jeg sat diverse style i
> ".buttonrow {...}"
> f.eks kopieret hele ".button {...}"
> og så fjernet "display: block" og så ligger knapperne vandret.
> "float:left" får alle knapper til at forsvinde.
>
> Jeg får det altså til at fungere ved at kopiere alle .button samt alle
> tilhørende tilstande og så omdøbe til .buttonrow. Men hvorledes undgår
> denne redundans når eneste ændring i i de vandrette knapper er at fjerne
> "display: block" ?

Jeg kan ikke helt overskue hvad problemets årsag er. Jeg har placeret et
eksempel på <URL:http://www.infimum.dk/privat/knaptest.html>.

Det vigtige er at knapperne stadig bare har class="button", og altså
deler CSS. For de knapper der skal opføre sig specielt laver man så en
ekstra regel for <a class="button"> der kun tæller når den findes
inden i en <div class="buttonrow">.
(Når man bruger float:left skal man nogen gange sørge for at lave en <br>
bagefter for at det hele ikke flyder).

> Nyt prob:
> ----------
> Knapperne ligger øverst og siden starter altså med <a href.. osv
> dette medfører at første øverste venstre knap er indrykket få pix,
> formentlig
> svarende til halv karakterafstand. Det ser ikke godt ud når knapperne
> autoskaleres lodret ved at brugeren gør siden smallere, for så er kun
> første knap
> let indrykket i den lodrette kolonne af knapper, mens alle efterfølgende
> står over hinanden.

Det lyder som whitespace mellem starten af dokumentet (<body>) og
knappen (<a>). Prøv at fjerne al whitespace (inklusive linjeskift!)
før <a> og se om det ændrer noget.

/L
--
Lasse Reichstein Nielsen - lrn@hotpop.com
'Faith without judgement merely degrades the spirit divine.'

---

Lasse Reichstein Nielsen <lrn@hotpop.com> wrote in
news:4rboeov8.fsf@hotpop.com:

Hej Lasse og tusind tak for din hjælp.

> Jeg kan ikke helt overskue hvad problemets årsag er. Jeg har placeret
> et eksempel på <URL:http://www.infimum.dk/privat/knaptest.html>.
Virkelig smukt gjort

> Det vigtige er at knapperne stadig bare har class="button", og altså
> deler CSS. For de knapper der skal opføre sig specielt laver man så en
> ekstra regel for <a class="button"> der kun tæller når den findes
> inden i en <div class="buttonrow">.
> (Når man bruger float:left skal man nogen gange sørge for at lave en
> <br> bagefter for at det hele ikke flyder).
>
Fejlen (hos mig) er nu lokaliseret til en foranstående div med "position:
relative;" og det fik knapperne til at rykke helt ud til højre mellem
margenerne som var nul - og dermed så de ud til at være væk. Frontpage
shared borders og CSS tillader åbenbart ikke begynderfejl, og det hele
fungerer suverænt nu, takket være dig

> Det lyder som whitespace mellem starten af dokumentet (<body>) og
> knappen (<a>). Prøv at fjerne al whitespace (inklusive linjeskift!)
> før <a> og se om det ændrer noget.
>
Og det var det også.

--
Med venlig hilsen Martin
Nybegynder i html og css - men synes at det er sjovt