Permalänk

css hjälp

Hej alla sweclockare jag går första året på teknik linjen på nti gymnasiet i malmö och jag behöver lite hjälp av er angående css min hemsida ska se ut såhär

och jag har gjort allt vad jag tror jag behöver göra i html koden men jag behöver hjälp med css koden för jag har inte riktigt förstått det än.
såhär ser min html kod ut iaf så jag skulle vilja att någon skrev eller försökte hjälpa mig att skriva css delen

<!DOCTYPE html> <html lang="sv"> <html> <head> <meta charset="utf-8" /> <title>Nyhetssidan</title> <style> #container{ width: 800px; position: relative; } #left{ width: 300px; float: left; margin: 15px; padding: 5px; } #right{ width: 400px; border-left: 2px solid #777; float: right; margin: 5px; padding: 5px; } clearFloat{ clear: both; } #rubrik { margin: 15px; font-size: 20px; } #imgnti { position: absolute; top: -5px; right: 20px; } #bilder1 { margin: 20px; } #bilder2 { margin: 5px; } p { margin: 15px; } #links1 a { color: #690; margin-right: 30px; } h1 { border-bottom: 3px double #000; } </style> </head> <body> <body> <div id="container"> <h1>Nyhetssidan</h1> <img src="Img/nti.jpg" id="imgnti"> <div id="links1"> <a href="förstasidan.html">Förstasidan</a> <a href="förstasidan.html">Inrikes</a> <a href="förstasidan.html">Utrikes</a> <a href="förstasidan.html">Sport</a> <a href="förstasidan.html">Nöje</a> <a href="förstasidan.html">Väder</a> </br> <div id="left"> <text> </text> </br> <p><div id="rubrik">"Nokias smartphone är för dyr"</div> Microsofts webbläsarval kan skapa kaos ute på företag och organisationer. Oron för vad som kan komma att ske stiger nu hos it-administratörerna. Det skriver The Times of India. Analytiker menar att Nokia kan få svårt att motivera den höga prissättningen av Lumia 920, som använder Microsofts nya operativsystem Windows Phone 8 och vars försäljning kan komma att spela en betydande roll för bolagets framtid. <img src="img/lumia.jpg" width="250px;" id="bilder1"> "Hårdvarumässigt är Lumia 920 och Galaxy S III ganska lika. Det blir svårt för Nokia att motivera den extra kostnaden för konsumenterna. Windows Phone är fortfarande ganska okänt för kunderna, de borde rimligtvis vilja ha en rabatt för att ta den risken", sade en analytiker på Nick Dillon. </p></div> <div id="right"></br> <div id="rubrik"><p>Bad piggies är Angry Birds-grisarnas revansch</p> </div> <text> </text> <p>Skaparna av Angry birds ger oss ett spel där vi äntligen får spela ur grisarnas perspektiv! Eller? Nej, men det gör inget. Det här är hur kul som helst. I Bad Piggies ska du hjälpa grisarna att hitta delar av en skattkarta som blivit strimlad av en bordsfläkt. Och naturligtvis är det fåglarnas ägg de är ute efter, den här gången också. Men du ska inte bygga hus stabila nog att motstå fåglar som flyger in i dem. Istället handlar spelet om att bygga farkoster som kan transportera en gris från en punkt på banan fram till den hägrande kartdelen. Till din hjälp har du ett antal delar att bygga med. Det kan vara hjul, fläktar, ballonger, läskflaskor (!) och mycket annat. <img src="img/badpiggies.jpg" width="360px;" id="bilder2"> Spelet har samma sköna fysik som Angry Birds och om du krockar, välter eller kör på en låda dynamit flyger delarna av farkosten all världens väg. Varje bana har tre mål som ska uppnås för att du ska få alla tre stjärnorna. För att komma vidare till nästa bana behöver du dock bara komma fram till kartdelen. Bad Piggies är nästan ännu roligare än Angry Birds. Det är klurigare och du får verkligen tänka till när du konsturerar ditt fordon. Angry Birds kan bli lite tjatigare, men Bad Piggies har potential att ha en längre livslängd. Spelet finns till både iPhone och iPad, men i två olika versioner. Vi har testat den till iPad som kostar 22 kronor, till iPhone kostar spelet bara sju kronor. Köp! </p> </div> </div> </div> </body> </html>

Dold text
Visa signatur

CPU:Intel Core I7 2600K (Socket 1155) MOBO:Asus P8P67 Deluxe GPU:Asus gtx 780 ti RAM:Kingston HyperX 2400 MHz 8GB (Dual channel) SSD:Force 3 120GB, OCZ Revodrive x2 HDD:Samsung Spinpoint F3 1TB Chassi:Corsair 750D PSU:Corsair Tx650 v2Ljud:Pro-Ject HeadBox II Hörlurar: Sennheiser hd600+ATH-M50 Högtalare: Dali Ikon 2 Mikrofon: Samson go mic Mus: Logitech G700 Matta: steelseries Qck+ Skärmar: en Asus Ve247h x3| citera mig för svar.

Permalänk
Medlem

Det är väl meningen att du ska skriva all kod själv så att du lär dig något?

Visa signatur

2500k @ 4Ghz - H80 | GTX 970 DCII | 8 GB ram
Qpad MK-50, Qpad 5k, Qpad QH-85, Qck+
voff | voff voff

Permalänk
Inaktiv

Linus Eriksson
Lärare i Databashantering, Multimedia, Webbdesign
040-20 66 93
linus.eriksson@malmo.ntig.se

För den som har lust.

Permalänk
Entusiast

Där är en jäkla massa css i html filen, men jag antar att ni inte har kommit till att skilja dem åt än. Men den ser ju hyfsat mycket ut som ditt mål, så vad är det du behöver hjälp med?

Permalänk

Det är det jag inte vet för jag vet inte riktigt vad jag behöver göra nu för att få den att se ut som den ska

Visa signatur

CPU:Intel Core I7 2600K (Socket 1155) MOBO:Asus P8P67 Deluxe GPU:Asus gtx 780 ti RAM:Kingston HyperX 2400 MHz 8GB (Dual channel) SSD:Force 3 120GB, OCZ Revodrive x2 HDD:Samsung Spinpoint F3 1TB Chassi:Corsair 750D PSU:Corsair Tx650 v2Ljud:Pro-Ject HeadBox II Hörlurar: Sennheiser hd600+ATH-M50 Högtalare: Dali Ikon 2 Mikrofon: Samson go mic Mus: Logitech G700 Matta: steelseries Qck+ Skärmar: en Asus Ve247h x3| citera mig för svar.

Permalänk
Medlem

Helt ärligt så vet jag inte vad du vill ha hjälp med..

Citat:

skulle vilja att någon skrev eller försökte hjälpa mig att skriva css delen

Men du har redan skrivit en CSS kod.. Så var är det egentligen du behöver ha hjälp med?
Vill du ha åsikter om designen?

Vad jag skulle säga att du borde ladda in CSS koderna från en extern CSS fil, tex:

<link rel="stylesheet" type="text/css" href="style.css">

Där du skapar en CSS fil vid namn style.css och lägger all din CSS kod där istället för i HTML dokumentet.

Visa signatur

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

Permalänk
Entusiast
Skrivet av martin-96:

Det är det jag inte vet för jag vet inte riktigt vad jag behöver göra nu för att få den att se ut som den ska

Så du vet inte vad nästa steg är? Vi listar upp det uppenbara:

  • Indentera!

  • Laga koden, du har massor med spill taggar

  • Centrera sidan

  • Bakgrundsfärger

  • Margins och paddings

De två första stegen behöver du Notepad++ till, eller ja, du behöver inte men det är den bästa texteditorn jag känner till för ändamålet. Där kan du klicka på en tagg och få en liten markering på sluttaggen. Med hjälp av det kan du både veta vad du ska indentera och hitta alla extrataggar. (Det mest uppenbara är den extra <body> taggen)

Centrera sidan är enkelt, jag testade att googla det men det kommer upp en jäkla massa konstiga resultat, och vet du inte hur man gör så vet du inte vilket som är rätt för ändamålet. Men oavsett, försök att lista ut hur man gör på egen hand, lyckas du inte så finns svaret här:

margin: 0 auto;

Dold text

Bakgrundsfärger är till synes lätt, men du kommer åka på problem. Bakgrundsfärgen på container kommer bara täcka den översta boxen när den borde täcka allt. Det är float attributen som spökar. För att motverka det så behöver du en div under de båda floatade divarna med with:100%; och clear:both;. Den behöver varken ha höjd eller innehåll, allt den gör är visar var sidan tar slut eftersom den inte vet riktigt vad som är vad när man har floatat dem.

Margin och padding är ganska klyddigt att förstå i början. Jag ser att du har använt det men det är på konstiga sätt, vanligtvis sätter man padding på text för att skapa rum.
Här har du en kort beskrivning som borde hjälpa http://www.digizol.org/2006/12/margin-vs-padding-css-properti...

När allt detta är klart så får du göra en jämförelse till för att se det sista som saknas. Lycka till!

Permalänk

Slog mig ner en stund och kollade igenom din kod. Du använder dig av tomma <text> taggar som jag inte förstår och du avslutar fler divar än du har.
Separera gärna CSS och HTML i olika filer så blir det lättare att felsöka, tabba fram taggar också så det blir lättare att urskilja allt och få en snyggare kod.

Detta kanske var lite vad du var ute efter (Jag har bara skimmat din CSS då den verkade fungera, har dock inte tagit bort något onödigt därifrån!):

HTML

<!DOCTYPE html> <html lang="sv"> <html> <head> <meta charset="utf-8" /> <title>Nyhetssidan</title> <link href="css/style.css" rel="stylesheet" type="text/css"> </head> <body> <body> <div id="main"> <h1>Nyhetssidan</h1> <img src="/img/nti.jpg" id="imgnti"> <div id="links1"> <a href="förstasidan.html">Förstasidan</a> <a href="förstasidan.html">Inrikes</a> <a href="förstasidan.html">Utrikes</a> <a href="förstasidan.html">Sport</a> <a href="förstasidan.html">Nöje</a> <a href="förstasidan.html">Väder</a> </div> <div id="left"> <div id="rubrik">"Nokias smartphone är för dyr"</div> <p> Microsofts webbläsarval kan skapa kaos ute på företag och organisationer. Oron för vad som kan komma att ske stiger nu hos it-administratörerna. Det skriver The Times of India. Analytiker menar att Nokia kan få svårt att motivera den höga prissättningen av Lumia 920, som använder Microsofts nya operativsystem Windows Phone 8 och vars försäljning kan komma att spela en betydande roll för bolagets framtid. <img src="img/lumia.jpg" width="250px;" id="bilder1"> "Hårdvarumässigt är Lumia 920 och Galaxy S III ganska lika. Det blir svårt för Nokia att motivera den extra kostnaden för konsumenterna. Windows Phone är fortfarande ganska okänt för kunderna, de borde rimligtvis vilja ha en rabatt för att ta den risken", sade en analytiker på Nick Dillon. </p> </div> <div id="right"></br> <div id="rubrik">Bad piggies är Angry Birds-grisarnas revansch</div> <p>Skaparna av Angry birds ger oss ett spel där vi äntligen får spela ur grisarnas perspektiv! Eller? Nej, men det gör inget. Det här är hur kul som helst. I Bad Piggies ska du hjälpa grisarna att hitta delar av en skattkarta som blivit strimlad av en bordsfläkt. Och naturligtvis är det fåglarnas ägg de är ute efter, den här gången också. Men du ska inte bygga hus stabila nog att motstå fåglar som flyger in i dem. Istället handlar spelet om att bygga farkoster som kan transportera en gris från en punkt på banan fram till den hägrande kartdelen. Till din hjälp har du ett antal delar att bygga med. Det kan vara hjul, fläktar, ballonger, läskflaskor (!) och mycket annat. <img src="img/badpiggies.jpg" width="360px;" id="bilder2"> Spelet har samma sköna fysik som Angry Birds och om du krockar, välter eller kör på en låda dynamit flyger delarna av farkosten all världens väg. Varje bana har tre mål som ska uppnås för att du ska få alla tre stjärnorna. För att komma vidare till nästa bana behöver du dock bara komma fram till kartdelen. Bad Piggies är nästan ännu roligare än Angry Birds. Det är klurigare och du får verkligen tänka till när du konsturerar ditt fordon. Angry Birds kan bli lite tjatigare, men Bad Piggies har potential att ha en längre livslängd. Spelet finns till både iPhone och iPad, men i två olika versioner. Vi har testat den till iPad som kostar 22 kronor, till iPhone kostar spelet bara sju kronor. Köp! </p> </div> </div> </body> </html>

CSS

@charset "UTF-8"; /* CSS Document */ #main{ width: 800px; margin:0 auto; } #left{ width: 300px; float: left; margin: 15px; padding: 5px; } #right{ width: 400px; border-left: 2px solid #777; float: right; margin: 5px; padding: 5px; } clearFloat{ clear: both; } #rubrik { margin: 15px; font-size: 20px; } #imgnti { position: absolute; top: -5px; right: 20px; } #bilder1 { margin: 20px; } #bilder2 { margin: 5px; } p { margin: 15px; } #links1 a { color: #690; margin-right: 30px; } h1 { border-bottom: 3px double #000; }

Visa signatur

Är en jobbig jävel. Lev med det.

| GA-X79-UP4 | i7-3930K @4.7GHz | ASUS GXT 680 4Gb | 2x ADATA 128Gb SSD RAID0 | 28TB mekaniska diskar (en fin häxblandning) | Corsair H100i | Fractal Design Define R4 | Corsair VENGEANCE 32Gb | Corsair HX850 80+ Gold |