Søg
Avatar billede stig69 Nybegynder
05. april 2006 - 17:58 Der er 11 kommentarer og
1 løsning

Forenkling af CSS

Hvis jeg nu har tre styles der ser meget ens ud, hvorledes kan jeg forenkle dem? f.eks har jeg følgende hvor kun border farven ændre sig:
#links-no-1 {   
  border:5px solid #4986B3;
  border-top-width:5px;
  border-right-width:0;
  border-bottom-width:0;
  border-left-width:0;
  padding: 3px 1px 0px 1px;
  text-align:right;
  float:right;
}
#links-no-2 { 
  border:5px solid #739056;
  border-top-width:5px;
  border-right-width:0;
  border-bottom-width:0;
  border-left-width:0;
  padding: 3px 1px 0px 1px;
  text-align:right;
  float:right;
}
#links-no-3 { 
  border:5px solid #F06B31;
  border-top-width:5px;
  border-right-width:0;
  border-bottom-width:0;
  border-left-width:0;
  padding: 3px 1px 0px 1px;
  text-align:right;
  float:right;
}

mvh.

Stig
Avatar billede mclemens Nybegynder
05. april 2006 - 18:40 #1
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="content-type" content="text/html; charset=iso-8859-1"><title>Ingen titel</title>

<style type="text/css">

#links-no-1, #links-no-2, #links-no-3{
border-color: #4986B3;
border-style: solid;
border-width:5px 0px 0px 0px;
padding: 3px 1px 0px 1px;
text-align:right;
float:right;
}

#links-no-2 {
  border-color: #739056;
}

#links-no-3 {
  border-color: #F06B31;
}

</style></head>

<body>

<div id="links-no-1" style="width:100px;height:100px;">
1
</div>

<div id="links-no-2" style="width:100px;height:100px;">
2
</div>

<div id="links-no-3" style="width:100px;height:100px;">
3
</div>

</body></html>
Avatar billede jokkejensen Novice
05. april 2006 - 19:47 #2
border-color: #4986B3;
border-style: solid;
border-width:5px 0px 0px 0px;

er vel det samme som :

border-top: 5px solid #4986B3;

mvh
Avatar billede mclemens Nybegynder
05. april 2006 - 19:56 #3
du har ret jokke... jeg sidder og sover - kast et svar vi deler ;)

#links-no-1, #links-no-2, #links-no-3{
border-top: 5px solid #4986B3;
padding: 3px 1px 0px 1px;
text-align:right;
float:right;
}

#links-no-2 {
  border-color: #739056;
}

#links-no-3 {
  border-color: #F06B31;
}
Avatar billede mclemens Nybegynder
05. april 2006 - 19:59 #4
og en forkortelse mere:

#links-no-2 {
  border: #739056;
}

#links-no-3 {
  border: #F06B31;
}
Avatar billede jokkejensen Novice
05. april 2006 - 20:02 #5
heh det er okay, jeg trækker mig ud af point festen :)..
Avatar billede stig69 Nybegynder
06. april 2006 - 09:21 #6
Jeg takker for svar!
Avatar billede mclemens Nybegynder
06. april 2006 - 09:22 #7
- og jeg takker for point :)
Avatar billede milandt Nybegynder
06. april 2006 - 13:15 #8
Du kan ikke bare skrive "border: #739056;" Det korrekte er som du først skrev, at skrive "border-color: #739056;".

IE er ligeglad, men det gør det ikke mere rigtigt.
Avatar billede stig69 Nybegynder
06. april 2006 - 13:17 #9
har skrevet border-color; så meget kendskab har jeg da til CSS ;-)
Avatar billede mclemens Nybegynder
06. april 2006 - 13:37 #10
har skrevet border-color; så meget kendskab har jeg da til CSS ;-)
- det er dit eget valg... gjorde det bare så kort som man må med css ;)
Avatar billede mclemens Nybegynder
06. april 2006 - 13:38 #11
arg.. min fejl du har ret firefox laver bøvl ved det :)
Avatar billede roenving Novice
09. april 2006 - 12:24 #12
-- og hvis man vil være helt sikker på at evt. cascadede properties ikke har indflydelse, skal man sætte border-width til 0, og bagefter sætte den til 5px på den led, man vil have det, altså:

border: 0 solid #4986B3;
border-top-width: 5px;
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview
Kategori
Webudvikling kurser
Vi tilbyder markedets bedste kurser inden for webudvikling
Se alle Webudvikling kurser

Flere spørgsmål fra HTML kategorien

Titel Indlæg Oprettet Seneste aktivitet
Hjælp med HTML og CSS Af Nojsa i HTML 18 10/09/202515:07 17/09/202515:11
CSS 2 x firkanter + tekst på samme linje Af nemlig i HTML 3 19/03/202522:16 20/03/202513:04
Se og ændre html på en webside Af magger i HTML 4 11/03/202513:55 12/03/202506:56
Få input felt, der er med fed skrift og formatteres på linje Af KurtG i HTML 5 02/03/202520:05 04/03/202515:40
Variabler som ikke virker Af Frits Jensen i HTML 3 30/10/202409:37 01/01/202515:27
Se alle spørgsmål i kategorien Opret spørgsmål

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Opret Log ind

Du kan også logge ind via nedenstående tjenester

Alle kategorier på Eksperten
Seneste spørgsmål Seneste aktivitet
I dag 09:38 Microsoft har igen ødelagt mit højreklik Af valby i Windows
30/0714:41 To mails fra YouSee - Jeg tror ikke altid på tilfældigheder Af mort1 i Andet sikkerhed
27/0714:34 Hjælp til at kunne skanne negativer på Plustek 8300i SE Af Mariann i Foto & video
27/0713:58 Mapperne Dokumenter og Overførsler er forsvundet efter geninstallation af Win11 Af bragger i Windows
25/0713:55 Ukendt sender e-mails fra - og til min e-mail adresse Af mort1 i Andet sikkerhed
White papers
Flere white papers »