Permalänk
Medlem

Hjälp med kod i css

Hjälp detta är helt nytt för mig har skapat ett html och skapat en tillhörande css.
Dock får jag problem i css när jag efter <li> vill ha en rubrik som ser likadan ut som de andra.
Fast jag har skrivit in alla rubriker likadant så blir det som kommer efter li helt annorlunda. Dessutom så får jag det inte att fungera med bakgrundsfärg:
Koden jag skrivit i css är skulle uppskatta om någon kunde se vad felet är
<!DOCTYPE html>
<html>
<head>
<head> <meta charset="utf-8">
<style>
body {
background-color: pink;
}
h1 {
text-align: center;
}

h2 {
font-family: arial;
font-size: 26px;
margin-left: 150px;
}

h3 {
font-family: arial;
font-size: 26px;
margin-left: 150px;
}

h4 {
font-family: arial;
font-size: 16px;
margin-left: 150px;
}

h5 {
font-family: arial;
font-size: 16px;
margin-left: 150px;
}

h6 {
font-family: arial;
font-size: 26px;
margin-left: 150px;
}

h7 {
font-family: arial;
font-size: 26px;
margin-left: 150px;
}

p {
font-family: arial;
font-size: 16px;
margin-left: 150px;
margin-right: 150px;
}

ul {
font-family: arial;
font-size: 16px;
margin-left: 150px;
}

li {
font-family: arial;
font-size: 16px;
margin-left: 50px;
}

</style>
</head>
<body>

<h1></h1>
<h2></h2>
<p></p>
<h3></h3>
<p></p>
<h4></h4>
<ul></ul>
<li></li>
<h5></h5>
<ul></ul>
<li></li>
<h6></h6>
<p></p>
<h7></h7>
<p></p>

</body>
</html>

Permalänk
Medlem

Känns inte riktigt som att du förstår strukturen eller grunderna, ta en titta på lite grundexempel på t.ex. https://www.w3schools.com/

t.ex. så brukar man väga h1-h6 där h1 är störst och h6 är minst, du sätter font-size till 26px på h6 som är det samma som h1, då bör den rubriken vara h1.

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <style> body { background-color: pink; } h1,h2,h3,h4,h5,h6 { font-family: arial; } h2,h3,h4,h5,h6 { margin-left: 150px; } h1 { text-align: center; } h2 { font-size: 26px; } h3 { font-size: 26px; } h4 { font-size: 16px; } h5 { font-size: 16px; } h6 { font-size: 26px; } p { font-family: arial; font-size: 16px; margin-left: 150px; margin-right: 150px; } ul { font-family: arial; font-size: 16px; margin-left: 150px; } ul li { font-family: arial; font-size: 16px; margin-left: 50px; } </style> </head> <body> <h1>Heading 1</h1> <h2>Heading 2</h2> <p>Test</p> <h3>Headin 3</h3> <p>Test</p> <h4>List #1</h4> <ul> <li>Item #1</li> </ul> <h5>List #2</h5> <ul> <li>Item #1</li> <li>Item #2</li> </ul> <h6>Heading 6</h6> <p>Text</p> </body> </html>

Permalänk
Medlem

Hej

@gonace: Du menar att man ska ha mindre rubriker på de som inte är h1 ?
och att man ska baka in koden för de olika rubrikerna istället för att göra de en och en?
Nej jag ha precis börjat läsa detta så det är helt nytt och förvirrande för mig

Permalänk
Medlem

css...

Detta är lite roligt. Jag har läst webbutveckling i skolan. Men är inte så bra på det. Jag skulle rekommendera att du använder dig av ett externt css dokument, det gör saker och ting mycket lättare. Jag kan inte direkt se något fel i koden men som sagt jag är verkligen inte bra på css.
Kasper

Permalänk
Medlem

Om du tex använt Word så är rubrikerna i storleksordning för att man ska se en logik med dem. h1 störst, sedan h2...och h6 minst. Dock skulle jag personligen säga att det räcker med h1-h4 då jag tror att jag själv aldrig använt fler än 3. Det ska ju finnas ett syfte med att dela in i nivåer.

Visa signatur

ASUS ROG Strix X570-F, AMD Ryzen 9 5900X, ASUS GTX 1080 Ti Strix Gaming OC, 32GB G.Skill Trident Z Neo CL16 3600MHz, Arctic Freezer II 240, Seasonic Prime Titanium 850W, Phanteks Enthoo Evolv X, 2x Samsung 970 EVO Plus 1TB, Seagate Firecuda 2TB, Seagate Ironwolf 4TB, ASUS PG278Q

ASUS ROG Crosshair VI Hero, AMD Ryzen 9 3900X, ASUS RTX 2060 Dual OC, 16GB G.Skill Flare X CL14 3200 MHz @3200 MHz, Arctic Freezer 240, Seasonic Prime Titanium 850W, Phanteks Eclipse P400S Glass, Samsung 960 Pro 512GB, Samsung 850 Pro 512GB, Seagate Ironwolf 4TB, ASUS PG278Q

ASUS Maximus V GENE, Intel i7 3770K @ 4,6 GHz (1.190 V), EVGA GTX 670 FTW SLi, 8GB G.Skill TridentX CL10 2400 MHz, Samsung 850 Pro 512GB, Samsung 840 Pro 256GB, Corsair Hydro H100i, Corsair AX860i, Fractal Design Define R4W, ASUS PG278Q

Permalänk
Medlem

Jag hade helt missauppfattat css fil ! Det det jag ska göra nu men tex istället för att skriva ut varje rubrik kan man skriva h1,h2,h3 tex?
Någon pratade om wrapper ? Vad är det och hur gör jag det isf istället ?

Permalänk
Hedersmedlem

*Tråd flyttad*

Visa signatur

Danskjävel så krattar som en skrivare...

Permalänk
Medlem

För att underlätta för alla som vill hjälpa till så är det bra om du länkar till en "fiddle" eller liknande med det du har skrivit, samt att du omsluter din text i [code]-taggar här på forumet så att man inte får ont i ögonen när man försöker läsa

https://fiddle.jshell.net/

Fiddle är också väldigt smidigt att använda för att snabbt testa olika ändringar, då man får upp resultatet direkt när man klickar på "run".

En "wrapper" är oftast en <div> som omsluter andra element. Användningsområdet kan variera beroende på vad man vill göra. Men som exempel kanske du vill ha 3 rubriker som är omgivna utav en "border".

Har gjort ett fult och snabbt exempel här:
https://fiddle.jshell.net/3xpnb4g4/12/

Visa signatur

Grubblare

Permalänk

En wrapper är något du använder för att omsluta ett element t.ex. <div id"mainWrapper"> för att ha en container som omsluter allt övrigt.
Du skall använda tagarna h1 - h6 samt p (paragraf) när du jobbar med text.