Nybörjarhjälp med .html och .css

2018-04-17, 14:32 #13

Medlem

Reg: Feb 2011

Inlägg: 14 555

Citat:

Ursprungligen postat av Drogo

Hmmm.. får det inte riktigt att fungera. Både Jörgen och Göran får färgen grön

Börja med att testa exakt det du fick av mig.
Försök sedan förstå hur det fungerar.
Sedan kommer det att vara lätt för dig att fixa det du ska göra.

–

Citera

2018-04-17, 14:32 #14

Medlem

Reg: Jan 2013

Inlägg: 852

Citat:

Ursprungligen postat av Drogo

Om någon vet hur man "buntar" ihop #bob och #billy under samma (term?) så vore jag tacksam.
Har försökt med #billy , #bob {
text
}

Då kör du med en klass istället:

Kod:

.schnubbe {
        background-color: rgb(204, 229, 255);
        border-color: darkred;
        border-width: 2px;
        margin: 10px;
        padding: 10px;
        border-style: solid;
}


<div id="bob" class="schnubbe"></div>
<div id="billy" class="schnubbe"></div>

Citera

2018-04-17, 14:41 #15

Medlem

Reg: Jan 2013

Inlägg: 852

Citat:

Ursprungligen postat av Drogo

Hmmm.. får det inte riktigt att fungera. Både Jörgen och Göran får färgen grön

Problemet är att "nth-child()" funkar bara om elementen är barn till _samma_ förälder.
Följande funkar t.ex. inte, då varje <p class="two"> är ensamt barn till sin föräldradiv...

Kod:

<html>
<head><meta charset="UTF-8">
<style>
.two:nth-child(1) { font-family: sans-serif; font-size: 120%; color:red;}
.two:nth-child(2) { font-family: sans-serif; font-size: 120%; color:green;}
.two:nth-child(3) { font-family: sans-serif; font-size: 120%; color:blue;}
</style>
</head>
<body>

<div><p class="two">Göran</p></div>
<div><p class="two">Jörgen</p></div>
<div><p class="two">Hans</p></div>


</body>
</html>

__________________
Senast redigerad av kodsnickrarn 2018-04-17 kl. 14:46.

Citera

2018-04-17, 14:51 #16

Medlem

Reg: Maj 2007

Inlägg: 112

Citat:

Ursprungligen postat av lasternassumma

Börja med att testa exakt det du fick av mig.
Försök sedan förstå hur det fungerar.
Sedan kommer det att vara lätt för dig att fixa det du ska göra.

–

Problemet är nog att class="two" ligger under en <div>, vilket jag var ouppsåtligt oärlig med dig om

Citera

2018-04-17, 14:53 #17

Medlem

Reg: Maj 2007

Inlägg: 112

Citat:

Ursprungligen postat av kodsnickrarn

Problemet är att "nth-child()" funkar bara om elementen är barn till _samma_ förälder.
Följande funkar t.ex. inte, då varje <p class="two"> är ensamt barn till sin föräldradiv...

Kod:

<html>
<head><meta charset="UTF-8">
<style>
.two:nth-child(1) { font-family: sans-serif; font-size: 120%; color:red;}
.two:nth-child(2) { font-family: sans-serif; font-size: 120%; color:green;}
.two:nth-child(3) { font-family: sans-serif; font-size: 120%; color:blue;}
</style>
</head>
<body>

<div><p class="two">Göran</p></div>
<div><p class="two">Jörgen</p></div>
<div><p class="two">Hans</p></div>


</body>
</html>

Det är nog det som spökar, men istället för nth-child vad kan jag istället använda? Detta är ju första uppgiften i kursen så jag tror ju inte jag ska använda mig av allt för komplicerade metoder.

Citera

2018-04-17, 15:07 #18

Medlem

Reg: Jan 2013

Inlägg: 852

Exakt hur löd uppgiften?

Citera

2018-04-17, 15:23 #19

Medlem

Reg: Jan 2013

Inlägg: 852

Om du kan utgå från att css:en endast måste fungera mot _exakt_ denna html så kan
du ju ta helt andra genvägar:

Kod:

#billy>p.two { color: red;}
#bob>p.two { color: green;}

eller

Kod:

#billy>p:nth-child(2) { color: red; }
#bob>p:nth-child(2) { color: green; }

Citera

2018-04-17, 15:23 #20

Medlem

Reg: Maj 2007

Inlägg: 112

Citat:

Ursprungligen postat av kodsnickrarn

Exakt hur löd uppgiften?

Har en bild som jag ska efterlikna, sedan fick jag en färdig .html-fil och en påbörjad .css-fil.
Uppgiften är att bara förändra i .css för att få koden att efterlikna bilden.

Kod:

.schnubbe {
        
        background-color: rgb(204, 229, 255);
        border-color: darkred;
        border-width: 2px;
        margin: 10px;
        padding: 10px;
        border-style: solid;
                
}

<div id="bob" class="schnubbe"></div>
<div id="billy" class="schnubbe"></div>

Fungerade inte heller, förstår inte vad jag gör för fel.

Citera

2018-04-17, 15:27 #21

Medlem

Reg: Maj 2007

Inlägg: 112

Citat:

Ursprungligen postat av kodsnickrarn

Om du kan utgå från att css:en endast måste fungera mot _exakt_ denna html så kan
du ju ta helt andra genvägar:

Kod:

#billy>p.two { color: red;}
#bob>p.two { color: green;}

eller

Kod:

#billy>p:nth-child(2) { color: red; }
#bob>p:nth-child(2) { color: green; }

Hm, ja det där fungerade!

Citera

2018-04-17, 15:28 #22

Medlem

Reg: Jan 2013

Inlägg: 852

Okej, om du inte får ändra i htmlfilen så funkar det ju inte med ".schnubbe".
Men, du kan absolut slå ihop #billy och #bob med

#billy, #bob
{
}

Gjorde en plunkr som funkar hos mig, andra paragrafen (med class="two" blir för #billy röd och för #bob grön

https://plnkr.co/edit/ZcRf4AiUQzaKX3HQIKIS?p=preview

Citera

2018-04-17, 15:43 #23

Medlem

Reg: Maj 2007

Inlägg: 112

Citat:

Ursprungligen postat av kodsnickrarn

Okej, om du inte får ändra i htmlfilen så funkar det ju inte med ".schnubbe".
Men, du kan absolut slå ihop #billy och #bob med

#billy, #bob
{
}

Gjorde en plunkr som funkar hos mig, andra paragrafen (med class="two" blir för #billy röd och för #bob grön

https://plnkr.co/edit/ZcRf4AiUQzaKX3HQIKIS?p=preview

Ah, nu faller några pusselbitar på plats.
Tack ska ni ha, och titta gärna in då och då för det lär komma mer nödrop i denna tråd , hah

Citera

2018-04-17, 15:56 #24

Medlem

Reg: Jan 2013

Inlägg: 852

Såg att koden i plnkr blev lite felkopierad - fixad nu.

/K

Citera

Nybörjarhjälp med .html och .css

Skapa ett konto eller logga in för att kommentera

Skapa ett konto

Logga in