Söker feedback på html och css kod och berätta om jag kan förbättra något i koden eller hur jag kan tänka istället?

Trädvy Permalänk
Avstängd
Registrerad
Apr 2016

Söker feedback på html och css kod och berätta om jag kan förbättra något i koden eller hur jag kan tänka istället?

Hej. Jag har nyligen blivit klar med min sida. Första versionen av designen är klar och ska förbättra designen hade jag tänkt. Jag undrar om ni skulle vilja kolla i min kod om det är några fel eller om det är något jag kan förbättra då jag vill bli en bättre programmerare. Jag är faktiskt nöjd med sidan hittills och ska jobba mer med designen bara.

HTML

<!DOCTYPE HTML > <?xml version="1.0" encoding="UTF-8"?> <?php include "db/db.php"; session_start(); error_reporting(E_ALL & ~E_NOTICE); $page = isset($_GET['site']) ? $_GET['site'] : null; switch($page) { case 'home': $page = ('pages/home.php'); $site = ('home'); break; case 'about': $page = ('pages/about.php'); $site = ('about'); break; case 'cv': $page = ('pages/cv.php'); $site = ('cv'); break; case 'twitch': $page = ('pages/twitch.php'); $site = ('twitch'); break; case 'games': $page = ('pages/games.php'); $site = ('games'); break; case 'contact': $page = ('pages/contact.php'); $site = ('contact'); break; default: $page = ('pages/home.php'); break; } ?> <html> <head> <title>Site - screenwriter, programmer, gamer and streamer</title> <meta charset="ISO-8859-1" /> <meta http-equiv="Content-Type" content="text/html; charset=UTf-8" /> <link href="css/stylesheet.css" type="text/css" rel="stylesheet"/> <link rel="shortcut icon" href="favicon.ico" type="image/x-icon" /> <link rel="icon" href="favicon.ico" type="image/x-icon" /> <meta charset="UTF-8" /> <meta name="description" content="Screenwriter, Programmer, Webdesigner, Moviemaker, Stream, Streamer, Gamer, Gaming, site, zippiex" /> <meta name="keywords" content="Screenwriter, Programmer, Webdesigner, Moviemaker, Stream, Streamer, Gamer, Gaming, site, zippiex" /> <meta name="author" content="site, Zippiex" /> </head> <body> <script type="text/javascript" id="cookieinfo" src="//cookieinfoscript.com/js/cookieinfo.min.js"> </script> <div class="wrapper"> <header> <div id="wrapper-inside"> <h1><a href="?site=<?php echo $site; ?>" style="text-decoration: none;">site </a> </h1> <b><a href="?site=<?php echo $site; ?>" style="text-decoration: none;">Screenwriter / Web developer / Gamer / Streamer</a></b> <div class="menu"> <ul> <li><a href="?site=home">Home</a></li> <li><a href="?site=cv">Cv</a></li> <li><a href="?site=about">About</a></li> <li><a href="?site=contact">Contact</a></li> </ul> </div> </header> <div id="content"> <p><?php include $page; ?></p> </div> </div> </div> <div class="footer"> <div class="footerindex"> <p>© SITE 2016.</p> <ul> <li><a href="#">Twitter</a></li> <li><a href="#">Youtube</a></li> <li><a href="?site=twitch">Twitch</a></li> <li><a href="#">Instagram</a></li> </ul> </div></div> <div id="clearfix"></div> </body> </html>

CSS

* { margin: 0; padding: 0; } html, body { color: black; font-family: Arial, Helvetica, sans-serif; height: 100%; } .wrapper{ min-height: 100%; margin-bottom: -52px; /* Footer height*/ } .wrapper:after{ content:""; display: block; } header{ background-color: #DC0707; height: 85px; border-bottom: 2px solid black; } header h1 a {color: white; position: absolute; margin-top: 10px; margin-left: 80px;} header b a {color:white; position: absolute; margin-top: 50px;} #wrapper-inside { max-width: 800px; margin-left: auto; margin-right: auto; } .menu a:link {color: white; text-decoration: none;} .menu a:visited {color: white; text-decoration: none;} .menu a:hover {color: white; text-decoration: none;} .menu a:active {color: white; text-decoration: none;} .menu ul { float: right; } .menu li { float: left; list-style-type: none; } .menu ul li:hover{ background-color: black; } .menu li a { display: block; width: 85px; height: 50px; text-align: center; margin-top: 35px; } #content { max-width: 800px; margin-left: auto; margin-right: auto; margin-top: 10px; } .footer, .wrapper:after{ height: 50px; } .footer { background-color: #DC0707; border-top: 2px solid black; height: 50px; color: white; } .footer a { color: white; text-decoration: none; padding: 8px; float: right; margin-top: -25px; } .footerindex { max-width: 800px; margin-left: auto; margin-right: auto; margin-top: 17px; } .footerindex li { display: inline; margin-top: -10px; } #clearfix{ clear:both; }

Trädvy Permalänk
Medlem
Plats
127.0.0.1
Registrerad
Apr 2010
Skrivet av Ikasera:

Hej. Jag har nyligen blivit klar med min sida. Första versionen av designen är klar och ska förbättra designen hade jag tänkt. Jag undrar om ni skulle vilja kolla i min kod om det är några fel eller om det är något jag kan förbättra då jag vill bli en bättre programmerare. Jag är faktiskt nöjd med sidan hittills och ska jobba mer med designen bara.

HTML

<!DOCTYPE HTML > <?xml version="1.0" encoding="UTF-8"?> <?php include "db/db.php"; session_start(); error_reporting(E_ALL & ~E_NOTICE); $page = isset($_GET['site']) ? $_GET['site'] : null; switch($page) { case 'home': $page = ('pages/home.php'); $site = ('home'); break; case 'about': $page = ('pages/about.php'); $site = ('about'); break; case 'cv': $page = ('pages/cv.php'); $site = ('cv'); break; case 'twitch': $page = ('pages/twitch.php'); $site = ('twitch'); break; case 'games': $page = ('pages/games.php'); $site = ('games'); break; case 'contact': $page = ('pages/contact.php'); $site = ('contact'); break; default: $page = ('pages/home.php'); break; } ?> <html> <head> <title>Site - screenwriter, programmer, gamer and streamer</title> <meta charset="ISO-8859-1" /> <meta http-equiv="Content-Type" content="text/html; charset=UTf-8" /> <link href="css/stylesheet.css" type="text/css" rel="stylesheet"/> <link rel="shortcut icon" href="favicon.ico" type="image/x-icon" /> <link rel="icon" href="favicon.ico" type="image/x-icon" /> <meta charset="UTF-8" /> <meta name="description" content="Screenwriter, Programmer, Webdesigner, Moviemaker, Stream, Streamer, Gamer, Gaming, site, zippiex" /> <meta name="keywords" content="Screenwriter, Programmer, Webdesigner, Moviemaker, Stream, Streamer, Gamer, Gaming, site, zippiex" /> <meta name="author" content="site, Zippiex" /> </head> <body> <script type="text/javascript" id="cookieinfo" src="//cookieinfoscript.com/js/cookieinfo.min.js"> </script> <div class="wrapper"> <header> <div id="wrapper-inside"> <h1><a href="?site=<?php echo $site; ?>" style="text-decoration: none;">site </a> </h1> <b><a href="?site=<?php echo $site; ?>" style="text-decoration: none;">Screenwriter / Web developer / Gamer / Streamer</a></b> <div class="menu"> <ul> <li><a href="?site=home">Home</a></li> <li><a href="?site=cv">Cv</a></li> <li><a href="?site=about">About</a></li> <li><a href="?site=contact">Contact</a></li> </ul> </div> </header> <div id="content"> <p><?php include $page; ?></p> </div> </div> </div> <div class="footer"> <div class="footerindex"> <p>© SITE 2016.</p> <ul> <li><a href="#">Twitter</a></li> <li><a href="#">Youtube</a></li> <li><a href="?site=twitch">Twitch</a></li> <li><a href="#">Instagram</a></li> </ul> </div></div> <div id="clearfix"></div> </body> </html>

CSS

* { margin: 0; padding: 0; } html, body { color: black; font-family: Arial, Helvetica, sans-serif; height: 100%; } .wrapper{ min-height: 100%; margin-bottom: -52px; /* Footer height*/ } .wrapper:after{ content:""; display: block; } header{ background-color: #DC0707; height: 85px; border-bottom: 2px solid black; } header h1 a {color: white; position: absolute; margin-top: 10px; margin-left: 80px;} header b a {color:white; position: absolute; margin-top: 50px;} #wrapper-inside { max-width: 800px; margin-left: auto; margin-right: auto; } .menu a:link {color: white; text-decoration: none;} .menu a:visited {color: white; text-decoration: none;} .menu a:hover {color: white; text-decoration: none;} .menu a:active {color: white; text-decoration: none;} .menu ul { float: right; } .menu li { float: left; list-style-type: none; } .menu ul li:hover{ background-color: black; } .menu li a { display: block; width: 85px; height: 50px; text-align: center; margin-top: 35px; } #content { max-width: 800px; margin-left: auto; margin-right: auto; margin-top: 10px; } .footer, .wrapper:after{ height: 50px; } .footer { background-color: #DC0707; border-top: 2px solid black; height: 50px; color: white; } .footer a { color: white; text-decoration: none; padding: 8px; float: right; margin-top: -25px; } .footerindex { max-width: 800px; margin-left: auto; margin-right: auto; margin-top: 17px; } .footerindex li { display: inline; margin-top: -10px; } #clearfix{ clear:both; }

Dold text

Kör CSS-Minify (https://cssminifier.com/) för att spara lite utrymme bara (på den publika varianten). I din "dev" eller den varianten du utvecklar i (om du kommer separera dem) så kör du inte det, jobbigt att läsa då. Hade varit kul att se den i action.
Du kan köra $_SESSION för att slippa hämta variabeln site från URL.

Borde inte default i switch-sats vara till 404? Eftersom från hemsidans perspektiv kommer vi ju aldrig göra fel, men om användaren ändrar innehållet kommer dem ju alltid få en sida. Det är ju såklart valfritt :). Vilken lösning har du om $page är null?

Citera om du vill ha svar, hjälpte jag dig, gilla svaret!
AzireVPN - Felkod40

Trädvy Permalänk
Avstängd
Registrerad
Apr 2016

@freddyfresh: Just PHP har jag inte pillat så mycket på ännu tyvärr man kommer pilla mer på PHP när jag känner att HTML och CSS sitter. Jag har faktiskt inte funderat så mycket över vad som händer ifall användaren ändrar url men jag ska sitta på det. Nu var ju frågan html och css duger den som den är? Får jag ett godkänd där?

Trädvy Permalänk
Medlem
Plats
127.0.0.1
Registrerad
Apr 2010
Skrivet av Ikasera:

@freddyfresh: Just PHP har jag inte pillat så mycket på ännu tyvärr man kommer pilla mer på PHP när jag känner att HTML och CSS sitter. Jag har faktiskt inte funderat så mycket över vad som händer ifall användaren ändrar url men jag ska sitta på det. Nu var ju frågan html och css duger den som den är? Får jag ett godkänd där?

Jag har inget att tillägga ser bra ut.

Citera om du vill ha svar, hjälpte jag dig, gilla svaret!
AzireVPN - Felkod40

Trädvy Permalänk
Medlem
Plats
i din garderob
Registrerad
Sep 2007
Skrivet av Ikasera:

@freddyfresh: Just PHP har jag inte pillat så mycket på ännu tyvärr man kommer pilla mer på PHP när jag känner att HTML och CSS sitter. Jag har faktiskt inte funderat så mycket över vad som händer ifall användaren ändrar url men jag ska sitta på det. Nu var ju frågan html och css duger den som den är? Får jag ett godkänd där?

Om du ska använda en xml-deklaration (<?xml version=…) måste den ligga absolut först i dokumentet, men jag gissar att du inte kommer ha nån större nytta av att kunna tolka ditt dokument som XML så du kan ta bort den helt. <!DOCTYPE …> ska däremot ligga kvar (och först om du inte har en xml-deklaration)

Bilanaloger är som Volvo — varenda svenne kör med dem

Trädvy Permalänk
Medlem
Plats
Sundsvall
Registrerad
Dec 2006

Lite svårt att få en överblick på hur allt fungerar rakt av. Men det första jag reagerade på är att du nollställer all margin & padding. Det fungerar delvis, men inte rekommenderat.

Ladda ner https://necolas.github.io/normalize.css/
Sen kör du @import url('normalize.css')
istället för
* {margin, padding...}

Canon 70D | 2x Dell Ultrasharp 24" | i7 3770k | 16B | GTX 780

Trädvy Permalänk
Avstängd
Registrerad
Apr 2016

@Florrpan: Varför är inte det rekommenderat? Vill inte ladda ner massa bootstrap filer och importera det eftersom jag inte lär mig något då. Vill jag har något som bootstrap gör så skriver jag kod för det svårare än så är det ju inte?

Trädvy Permalänk
Medlem
Plats
Sundsvall
Registrerad
Dec 2006
Skrivet av Ikasera:

@Florrpan: Varför är inte det rekommenderat? Vill inte ladda ner massa bootstrap filer och importera det eftersom jag inte lär mig något då. Vill jag har något som bootstrap gör så skriver jag kod för det svårare än så är det ju inte?

Vart får du boostrap ifrån? Detta är inte bootstrap.. och den strular inte med din kod direkt.
Detta är en CSS fil som normaliserar alla element så att dom beter sig likadant på alla webbläsare.

Läste du på sidan?

Citat:

Normalize.css makes browsers render all elements more consistently and in line with modern standards. It precisely targets only the styles that need normalizing.

Genom att köra * padding, margin 0; så tar du bor alla marginaler från ALLT, t.o.m sådant du inte vill ta bort standardmarginaler från, som vissa webbläsare hanterar olika.

Visst, det är helt okey att göra på det sättet, jag gjorde så förut, men har börjat gått över till att köra normalize eller liknande "CSS reset" för att inte bråka med allt och alla webbläsare.

Du kan läsa några punkter här:
https://css-tricks.com/margin-0-padding-0-no-longer-cool/

Canon 70D | 2x Dell Ultrasharp 24" | i7 3770k | 16B | GTX 780

Trädvy Permalänk
Avstängd
Registrerad
Apr 2016

@Florrpan: Sorry trodde det var bootstrap fil. Ska läsa på sidan. Tack där.

EDIT: Funderar faktiskt på att göra en egen sån och testa alla webbläsare och då kan jag alltid använda min egna

Trädvy Permalänk
Medlem
Plats
Sundsvall
Registrerad
Dec 2006
Skrivet av Ikasera:

@Florrpan: Sorry trodde det var bootstrap fil. Ska läsa på sidan. Tack där.

EDIT: Funderar faktiskt på att göra en egen sån och testa alla webbläsare och då kan jag alltid använda min egna

Varför återuppfinna hjulet?
Din slutsats borde bli densamme som deras, men deras är väl testad och utvärderad redan.

Canon 70D | 2x Dell Ultrasharp 24" | i7 3770k | 16B | GTX 780

Trädvy Permalänk
Avstängd
Registrerad
Apr 2016

@Florrpan: Varför inte återuppfinna det? Man kanske lär sig något nytt

Trädvy Permalänk
Medlem
Plats
Sundsvall
Registrerad
Dec 2006
Skrivet av Ikasera:

@Florrpan: Varför inte återuppfinna det? Man kanske lär sig något nytt

Det är upp till dig.. Jag skulle hålla med dig om t.ex bootstrap. Där kan man lära sig själv, eller lära hur dom gör. Men personligen tänker jag inte lägga min tid åt att lära mig varenda hörn av att "normalisera" varenda HTML element efter alla webbläsare. Ibland är genvägar bättre, så man kan fokusera på det viktiga.

Canon 70D | 2x Dell Ultrasharp 24" | i7 3770k | 16B | GTX 780

Trädvy Permalänk
Avstängd
Registrerad
Apr 2016

@Florrpan: Får min kod godkänt ?

Trädvy Permalänk
Medlem
Plats
Malmö
Registrerad
Maj 2004

Där är väldigt många charset's satta...

Trädvy Permalänk
Avstängd
Registrerad
Apr 2016

@thulin82: Det kan jag hålla med om. Får behålla en ISO och en utf 8 bara. Bra där.

Trädvy Permalänk
Medlem
Plats
Stockholm
Registrerad
Maj 2009

varför kör du iso encodning på sidan och inte utf-8?

Min dator: Silent Base 600 | 1700X @ 3.9Ghz | MSI Gaming X 1080TI | RM750X | 512Gb M2 | 16Gb 3200mhz Ram | S34E790C @ 3440x1440
Tjejens dator: Define r4 | i5 3570k @ 4.2ghz | GTX Titan | 750w Supernova | 240gb SSD | 32gb ram
Citera/Tagga för svar!

Trädvy Permalänk
Avstängd
Registrerad
Apr 2016

@Christley: Jag hade krångel med databasen som visade åäö på ett konstigt sätt och trodde att det var pågrund av UTF-8 så jag provade lägga till ISO och skicka min sträng med åäö till databasen men dem blev konstiga ändå sen märkte jag att det var en språkinställning som fixade det och jag glömde ta bort ISO och bara behålla UTF-8. Båda är väl också bra att använda samtidigt så att det blir ordentligt eller räcker det med 1?

Trädvy Permalänk
Medlem
Plats
Malmö
Registrerad
Maj 2004

Du ska bara ha en charset, med den berättar du ju hur ditt dokument ska tolkas, hur ska det gå till om du anger två olika?

Trädvy Permalänk
Avstängd
Registrerad
Apr 2016

@thulin82: Den informationen visst inte jag tack så mycket. Du ser nu lärde jag mig något nytt idag.

Trädvy Permalänk
Medlem
Plats
Malmö
Registrerad
Maj 2004

Du har även två länkar till din favicon i form av:

<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" /> <link rel="icon" href="favicon.ico" type="image/x-icon" />

Borde räcka med en, ta reda på vilken du ska använda och plocka bort den andra. Här bör det dock inte vara någon fara med att ha kvar båda, men är inte så snyggt

Trädvy Permalänk
Avstängd
Registrerad
Apr 2016

@thulin82: Allt som blev nämnt i tråden är nu fixat

Trädvy Permalänk
Medlem
Plats
Arboga
Registrerad
Jan 2002

Kör din html i https://validator.w3.org så vet du om den är OK.

Skickades från m.sweclockers.com

Intel Core i7 6700K | Gigabyte Z170X-UD3 | Corsair Vengeance LPX 16GB DDR4 2400Mhz | EVGA GTX 980Ti Hybrid | Samsung 950 PRO 256GB | Noctua NH-D15 | EVGA G2 750 | Fractal Design Define R5

Trädvy Permalänk
Avstängd
Registrerad
Apr 2016

@Zajin: Smart tack där. Finns det en likadan för css också?

Trädvy Permalänk
Medlem
Plats
Linköping
Registrerad
Mar 2010
Trädvy Permalänk
Avstängd
Registrerad
Apr 2016

@Magnetize: Gratulerar! Inga fel har hittats sa den!