Forum Mjukvara Programmering och digitalt skapande Tråd Inlägg

Frågor om HTML och CSS nybörjare hjälp.

1
Skriv svar
Permalänk
Medlem
●

Frågor om HTML och CSS nybörjare hjälp.

Hejsan
Det är så att jag har tagit en webbteknik kurs på gymnasiet och har lärt mig lite grunder och så är inte färdig med kursen än.

Men nu till frågan jag har försökt att få min layout centrerad men det går inte förstår inte vad jag gör för fel, är ju nybörjare så det blir ju ett antal fel men hoppas ni kan hjälpa mig.
Sidan är tillför Ludvika Rugby tänkte ställa upp frivilligt och göra den då jag är den enda som har lite kunskaper om detta. och nej det ska inte vara dessa färger eller så. Tack i förhand! Jesper

CSS

body {
text-align: center;
}

#container {
margin: 0 auto;
width: xxxpx;
text-align: left;
}

header{
background-color:orange;
position:absolute;
width:800px;
height:200px;
top:0px;
left:400px;
border-radius:30px;
}

.menu{
background-color:blue;
position:absolute;
width:200px;
height:150px;
top:205px;
left:400px;
border-radius:30px;
}

.lowermenu{
background-color:yellow;
position:absolute;
width:200px;
height:150px;
top:360px;
left:400px;
border-radius:30px;
}

.mid{
background-color:#CCFFCC;
position:absolute;
width:595px;
height:700px;
top:205px;
left:605px;
border-radius:30px;
}

footer{
background-color:orange;
position:absolute;
width:800px;
height:60px;
top:910px;
left:400px;
border-radius:30px;
}

Dold text

HTML

<!DOCTYPE html>
<html>

<head>
<title>Rugby i Ludvika, Ludvika Rugbyklubb</title>
<meta charset="utf-8" />
<link rel="stylesheet" href="stilmall.css" />
</head>

<body>

<div id="container">

<header><h1>Ludvika Rugbyklubb</h1></header>

<section class="menu">

<ul>

<h2>Information</h2>

<li> Laget</li>

<li> Träningar</li>

<li> Kontakta oss</li>

</ul>

</section>

<section class="lowermenu"> </section>

<section class="mid">

<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Sed eu ante vitae nisi tincidunt efficitur.
Donec vel est ut lorem porttitor malesuada scelerisque ut ligula.
Donec ultrices odio eu magna dictum semper.
Suspendisse bibendum faucibus placerat. Integer est nulla,
imperdiet a dignissim et, lacinia vitae purus.
Donec egestas nulla id convallis varius. Donec nec scelerisque erat.
Suspendisse justo mi, porta at tellus quis, placerat tempus augue.
Nulla eget dignissim risus.
</p>

</section>

<footer> <h4>© 2014 Ludvika Rugbyklubb. All rights reserved </footer>

</div>

</body>

</html>

Dold text

Bild på hur det ser ut nu.

Dold text
Senast redigerat
Visa signatur

Set-up
NZXT Manta, ASUS ROG STRIX B350-I GAMING, AMD Ryzen 7 1800X 4.0 GHz, NZXT Kraken X62 280mm, Corsair 32GB DDR4, Seasonic FOCUS Plus 850W Platinum, Samsung 850-Series PRO 512GB (2X), ROG-STRIX-GTX1070TI-A8G-GAMING, Samsung 27'' C27FG70F Curved, ASUS 24" MG248QR 144Hz, ZOWIE EC1-A Gaming Mouse, QPAD MK-90 RGB MX Red.

Redigera
Citera flera Citera
Permalänk
Medlem
●

Sätt bredden på #container till vad som helst. Kan inte testa själv då jag är på mobilen.

Skickades från m.sweclockers.com

Visa signatur

Asrock Z77 Extreme4 | i5 3570k | 8 GB Corsair Vengeance LP | MSI HD 7870 TF3 | Samsung 830 128 GB | 2 TB Seagate Barracuda | Optiarc AD-7280S | Antec 650W | Fractal Design Arc | HTC One M8

Redigera
Citera flera Citera
Permalänk
Medlem
●
Skrivet av AtomicPunk:

Sätt bredden på #container till vad som helst. Kan inte testa själv då jag är på mobilen.

Skickades från m.sweclockers.com

Gå till inlägget

Jag har försökt men det funkar ändå inte :/

Visa signatur

Set-up
NZXT Manta, ASUS ROG STRIX B350-I GAMING, AMD Ryzen 7 1800X 4.0 GHz, NZXT Kraken X62 280mm, Corsair 32GB DDR4, Seasonic FOCUS Plus 850W Platinum, Samsung 850-Series PRO 512GB (2X), ROG-STRIX-GTX1070TI-A8G-GAMING, Samsung 27'' C27FG70F Curved, ASUS 24" MG248QR 144Hz, ZOWIE EC1-A Gaming Mouse, QPAD MK-90 RGB MX Red.

Redigera
Citera flera Citera
Permalänk
Medlem
●

Din HTML validerar inte, kolla här http://validator.w3.org/
Du använder väldigt mycket position:absolute, skulle inte rekommendera det..

Visa signatur

Main dator: i5 750 4Ghz, GTX 770 4GB, Intel SSD 80GB, 8GB Ram
Servern: Core 2 Duo, 4GB Ram, 4x2TB Lagring, Ubuntu Server 12.04

Redigera
Citera flera Citera
Permalänk
Medlem
●

Du kan använda "margin:auto" istället för position:absolute. då hamnar allting i center men under varandra.
Sedan kan du skapa div element under varandra för att positionera dem bättre. inte tid att skriva mer just nu tyvärr

Visa signatur

Intel Core i7 2600K @ 4,5GHz | EVGA GeForce GTX 780 Ti Superclocked 3GB | Corsair 8GB (2x4096MB) CL9 1600Mhz XMS3 1,5V | MSI Z68A-GD65 G3 REV B3 | Noctua NH-U9B SE2 | Samsung 850 Pro 512GB | Corsair HX 850W 80+ Silver Modulär | Fractal Design Define R3

Redigera
Citera flera Citera
Permalänk
Medlem
●
Skrivet av erCarN:

Din HTML validerar inte, kolla här http://validator.w3.org/
Du använder väldigt mycket position:absolute, skulle inte rekommendera det..

Gå till inlägget

Jo vi använder position:absolute för det är det enda vi fått lärt oss och ska använda av läraren :/ Hmm okej :/

Skrivet av lilja90:

Du kan använda "margin:auto" istället för position:absolute. då hamnar allting i center men under varandra.
Sedan kan du skapa div element under varandra för att positionera dem bättre. inte tid att skriva mer just nu tyvärr

Gå till inlägget

Okej ska ändra det, men kom tillbaka om du har lust och förklara mer när du har tid!

Visa signatur

Set-up
NZXT Manta, ASUS ROG STRIX B350-I GAMING, AMD Ryzen 7 1800X 4.0 GHz, NZXT Kraken X62 280mm, Corsair 32GB DDR4, Seasonic FOCUS Plus 850W Platinum, Samsung 850-Series PRO 512GB (2X), ROG-STRIX-GTX1070TI-A8G-GAMING, Samsung 27'' C27FG70F Curved, ASUS 24" MG248QR 144Hz, ZOWIE EC1-A Gaming Mouse, QPAD MK-90 RGB MX Red.

Redigera
Citera flera Citera
Permalänk
Medlem
●

På #container sätt "display: block;" så ska den centrera. Sen ta bort alla "position: absolute;" helt onödiga om du inte kör något relative.

Redigera
Citera flera Citera
Permalänk
Medlem
●
Skrivet av brittaan:

På #container sätt "display: block;" så ska den centrera. Sen ta bort alla "position: absolute;" helt onödiga om du inte kör något relative.

Gå till inlägget

Sådär tog bort allt som hette "position: absolut;" och la till display: block;. men nu är allt bara till vänster och inte i mitten :/

och är position; absolut; helt värdelöst och vad ska jag använda istället?

Visa signatur

Set-up
NZXT Manta, ASUS ROG STRIX B350-I GAMING, AMD Ryzen 7 1800X 4.0 GHz, NZXT Kraken X62 280mm, Corsair 32GB DDR4, Seasonic FOCUS Plus 850W Platinum, Samsung 850-Series PRO 512GB (2X), ROG-STRIX-GTX1070TI-A8G-GAMING, Samsung 27'' C27FG70F Curved, ASUS 24" MG248QR 144Hz, ZOWIE EC1-A Gaming Mouse, QPAD MK-90 RGB MX Red.

Redigera
Citera flera Citera
Permalänk
Medlem
●
Skrivet av JesperVilgot:

Sådär tog bort allt som hette "position: absolut;" och la till display: block;. men nu är allt bara till vänster och inte i mitten :/

och är position; absolut; helt värdelöst och vad ska jag använda istället?

Gå till inlägget

Skumt att er lärare lär ut "position: absolute" som förstagrej till nybörjare. Anyway jag är inte lärare så vad vet jag

Följande är onödigt och kan tas bort:

  1. På body så behöver du inte "text-align: center"

  2. Alla "position: absolute;" (används endast om du måste positionera objekt i relation till andra objekt.)

  3. Alla "border-radius" visst det kan vara snyggt men funktion före design

För det första så måste du lära dig hur "float" fungerar. Läs igenom den här http://www.w3schools.com/cssref/pr_class_float.asp och den här http://www.w3schools.com/css/css_float.asp eller om du hittar mer på google så kör hårt.

Du vill alltså på din sida har en vänsterspalt och en innehållssektion.

Ponera att #container är 800px bred.

Lägg då:
<section class="menu"> och <section class="lowermenu">
i en ny sektion, div eller <span>

Låt säga att vi döper den till <span class="left">, det kommer då att se ut så här:

<span class="left">
  <section class="menu">INNEHÅLL</section>
  <section class="lowermenu"></section>
</span>

<section class="mid">blablablabla</section>

och i din CSS skriver du:

#container{
  width: 800px;
  height: auto;
  margin: auto;
  display: block;
}

.left{
  float: left;
  width: 200px;
  background: yellow; 
}

.mid{
  float: left;
  width: 600px;
  background: pink; 
}

Resultatet blir något sånt här http://codepen.io/anon/pen/zqvyx

Sedan för att få rätt avstånd mellan .left och .mid så måste du läsa på om marginaler. http://www.w3schools.com/cssref/pr_margin.asp

Värt att tänka på med marginaler är att de "lägger på" bredd vid sidorna av dina sektioner. Om sektioner inte "floatar" bredvid varandra längre så betyder det att din marginal + bredden på objekt är bredare än sin parent-div och därför läggs det under varandra. Du förstår efter lite experimenterande.

TL;DR Läs allt på W3schools

Redigera
Citera flera Citera
Permalänk
Medlem ★
●

Sätt en bredd. (wdith: xxxPX;)
Sätt margin: 0 auto;
Bam, klart.

Varför display: block? En DIV är väl redan ett block?

Visa signatur

Min Hemsida

Canon 70D | 2x Dell Ultrasharp 24" | Ryzen 3700X | 32B | GTX 1080Ti

Redigera
Citera flera Citera
Permalänk
Medlem
●
Skrivet av Florrpan:

Varför display: block? En DIV är väl redan ett block?

Gå till inlägget

Sant, tänkte fel vid första inlägget. Men lika bra att ha med det så han lär sig hur display fungerar.

Redigera
Citera flera Citera
Permalänk
Medlem
●
Skrivet av brittaan:

Skumt att er lärare lär ut "position: absolute" som förstagrej till nybörjare. Anyway jag är inte lärare så vad vet jag

Följande är onödigt och kan tas bort:

  1. På body så behöver du inte "text-align: center"

  2. Alla "position: absolute;" (används endast om du måste positionera objekt i relation till andra objekt.)

  3. Alla "border-radius" visst det kan vara snyggt men funktion före design

För det första så måste du lära dig hur "float" fungerar. Läs igenom den här http://www.w3schools.com/cssref/pr_class_float.asp och den här http://www.w3schools.com/css/css_float.asp eller om du hittar mer på google så kör hårt.

Du vill alltså på din sida har en vänsterspalt och en innehållssektion.

Ponera att #container är 800px bred.

Lägg då:
<section class="menu"> och <section class="lowermenu">
i en ny sektion, div eller <span>

Låt säga att vi döper den till <span class="left">, det kommer då att se ut så här:

<span class="left">
  <section class="menu">INNEHÅLL</section>
  <section class="lowermenu"></section>
</span>

<section class="mid">blablablabla</section>

och i din CSS skriver du:

#container{
  width: 800px;
  height: auto;
  margin: auto;
  display: block;
}

.left{
  float: left;
  width: 200px;
  background: yellow; 
}

.mid{
  float: left;
  width: 600px;
  background: pink; 
}

Resultatet blir något sånt här http://codepen.io/anon/pen/zqvyx

Sedan för att få rätt avstånd mellan .left och .mid så måste du läsa på om marginaler. http://www.w3schools.com/cssref/pr_margin.asp

Värt att tänka på med marginaler är att de "lägger på" bredd vid sidorna av dina sektioner. Om sektioner inte "floatar" bredvid varandra längre så betyder det att din marginal + bredden på objekt är bredare än sin parent-div och därför läggs det under varandra. Du förstår efter lite experimenterande.

TL;DR Läs allt på W3schools

Gå till inlägget

tack som bara den! du är värld guld!

Visa signatur

Set-up
NZXT Manta, ASUS ROG STRIX B350-I GAMING, AMD Ryzen 7 1800X 4.0 GHz, NZXT Kraken X62 280mm, Corsair 32GB DDR4, Seasonic FOCUS Plus 850W Platinum, Samsung 850-Series PRO 512GB (2X), ROG-STRIX-GTX1070TI-A8G-GAMING, Samsung 27'' C27FG70F Curved, ASUS 24" MG248QR 144Hz, ZOWIE EC1-A Gaming Mouse, QPAD MK-90 RGB MX Red.

Redigera
Citera flera Citera
1
Skriv svar
Senaste nyheterna
Hårdvara
Mjukvara
Övrigt
Nytt i forumet
Datorkomponenter
System
Ljud, bild och kommunikation
Spel och mjukvara