Avatar billede ngr Praktikant
29. december 2012 - 03:04 Der er 12 kommentarer og
1 løsning

Kan jeg lave en ul-definiton, så den kun gælder i eet div

Jeg har en ul-definition som den nederst på siden, men jeg ønsker kun, at den skal virke i min div.menu - og så skal jeg bruge en anden i min div.content. Kan det ikke lade sig gøre?



ul
{
list-style-type:none;
margin:0;
padding:0;
}
a:link,a:visited
{
display:block;
font-weight:bold;
line-height: 1.5;
color:#84e4f8;
width:300px;
text-align:center;
padding:4px;
text-decoration:none;
text-transform:uppercase;
}
a:hover,a:active
{
color: #FFFFFF;
background-color:#27c8ea;
}
Avatar billede ngr Praktikant
29. december 2012 - 04:13 #1
Om igen: Det er ikke ul-en, der skal omdefineres. Det er kun stylingen af linksene - altså nedenstående, som skal være anderledes inden for div.content

a:link,a:visited
{
display:block;
font-weight:bold;
line-height: 1.5;
color:#84e4f8;
width:300px;
text-align:center;
padding:4px;
text-decoration:none;
text-transform:uppercase;
}
a:hover,a:active
{
color: #FFFFFF;
background-color:#27c8ea;
}
Avatar billede keysersoze Guru
29. december 2012 - 10:07 #2
div.content a:link, div.content a:visited
{ ... }

div.content a:hover, div.content a:active
{ ... }
Avatar billede keysersoze Guru
29. december 2012 - 10:09 #3
rammer det ikke specifikt nok kan du altid gøre definitionen mere specifik - fx

div.content ul li a:link
Avatar billede ngr Praktikant
30. december 2012 - 01:07 #4
#2: Jeg forstår ikke - skal det stå inden i den her:
div.center{
margin-left: 340px;
padding-left: 20px;
padding-top: 30px;
padding-right: 20px;
background-color: #27c8ea;
font-family: Times New Roman;
font-size: 1.8em;
text-align:left;
line-height: 1.5;
}
Avatar billede keysersoze Guru
30. december 2012 - 09:45 #5
nej - du skal bare angive dine styles fra #2 mere specifikt, altså i stedet for bare "a:link, a:visited" så fx "div.content a:link, div.content a:visited".
Avatar billede ngr Praktikant
30. december 2012 - 14:33 #6
Så prøver jeg at lægge nedenstående ind, men det duer ikke


div.content a:visited
{
font-family: Times New Roman;
font-size: 1.8em;
}
Avatar billede keysersoze Guru
30. december 2012 - 14:46 #7
Som nævnt i #3 afhænger det også af din nærmere struktur hvorfor stien let kan se anderledes ud (fx som netop i #3) for at ramme præcis. Hvis du er i tvivl om hvad der tager præcedens så benyt din browsers udviklingsværktøj http://www.web-dev.dk/post/2012/06/17/Bliv-en-hurtigere-webudvikler-med-browservc3a6rktc3b8jer.aspx
Avatar billede ngr Praktikant
30. december 2012 - 15:28 #8
Det hele ser ud som herunder:

body {
margin:0px;
padding:0;
background-color: #57d1eb;
height:100%;
background-image: url(aaa.gif);
color: #000000;
font-size: 11px;
font-family: Verdana, Arial, Helvetica, Sans-Serif;
font-style: normal;
line-height: 150%;
}
div.top{
height: 170px;
margin: auto;
background-color: #1a9db9;
color: #000000;
font-size: 40px;
font-family: Verdana, Arial, Helvetica, Sans-Serif;
text-align:center;
padding-top: 2px;
line-height: 1.5;
}
div.content{
margin-left: 340px;
padding-left: 20px;
padding-top: 30px;
padding-right: 20px;
background-color: #27c8ea;
font-family: Arial;
font-size: 1.8em;
text-align:left;
line-height: 1.5;
}
div.menu{
width: 300px;
float: left;
font-family: Verdana, Arial, Helvetica, Sans-Serif;
padding-left: 0px;
padding-top: 30px;
padding-bottom: 22px;
font-size: 16px;
background-color: #1a9db9;
}

ul
{
list-style-type:none;
margin:0;
padding:0;
}
a:link,a:visited
{
display:block;
font-weight:bold;
line-height: 1.8;
color:#84e4f8;
width:300px;
text-align:center;
padding:4px;
text-decoration:none;
text-transform:uppercase;
}
a:hover,a:active
{
color: #FFFFFF;
background-color:#27c8ea;
}
Avatar billede ngr Praktikant
30. december 2012 - 15:29 #9
Og så bruger jeg ul i menuen, men har brug for at bruge en anden styling af links i content
Avatar billede keysersoze Guru
30. december 2012 - 15:39 #10
Din øvrige CSS er irrelevant - det er jo din markup der er relevant for hvordan stylingen skal være. Kom med et link og hvor du har forsøgt ud fra hvad jeg har skrevet i #2 og #3 ellers er det umuligt for os at gætte hvis du ikke selv gennemskue se din markup-struktur.
Avatar billede ngr Praktikant
30. december 2012 - 15:47 #11
Hvad er markup?
Det ligger ikke på nettet, men skal koden til de nye links ikke lægges ind i den, jeg viser herover?
Avatar billede keysersoze Guru
30. december 2012 - 16:04 #12
HTML = Hypertext Markup Language. Din markup er altså din HTML...

Jeg har absolut ingen idé om hvordan jeg skal forklare det meget nærmere. Jo, selvfølgelig skal dine styles ind i din style-kode - men på samme måde som din markup har et hieraki så skal dine styles også såfremt du skal ramme elementer mere specifikt end bare fx "a" og det er det du gør ved at skrive fx ".content ul li a", hvor du rammer et a tag, der ligger inde i en li, der ligger inde i en ul, der ligger inde i et element med klassen content.

Virker din CSS ikke, er din markup hemmelig og kan du ikke se fejl vha developer toolbars så må du give dine a hver en klasse så du kan ramme dem på den måde.

a.klasse:hover
Avatar billede ngr Praktikant
30. december 2012 - 17:03 #13
Glemt det. Må jeg få et svar til points.
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

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.

Du kan også logge ind via nedenstående tjenester