Seneste forumindlæg
Køb / Salg
 * Uofficiel Black/White liste V3
Login / opret bruger

Forum \ Programmering og webdesign \ Programmering
Denne tråd er over 6 måneder gammel

Er du sikker på, at du har noget relevant at tilføje?

Hjælp til hjemmeside html og css

Af Junior Supporter sebastian192 | 20-02-2015 11:26 | 2015 visninger | 18 svar, hop til seneste
Hej Hol. Et par venner og jeg har i et par uger været i gang med et hjemmesideprojekt for en bowlinghal som en del af min uddannelse. Vi er relativ nye til henholdsvis HTML og CSS. Derfor ville vi gerne spørge, om i måske kunne tjekke vores kode igennem og se om der eventuelt er overflødige stykker kode og/eller kode, der "går ind over hinanden". HTML: http://pastebin.com[...] CSS: http://pastebin.com[...] Et andet problem er, at vi simpelthen ikke kan få centreret hjemmesiden. Det skal være sådan, at det er dynamisk på tværs af forskellige opløsninger. Vi har tjekket internettet for hjælp og fandt frem til dette: #wrapper { position: absolute; left: 0; right: 0; top: 0; bottom: 0; } body { margin-top: 20px; margin-bottom: auto; margin-left: auto; margin-right: auto; position: relative; } Det får vi ikke rigtig til at virke. Alt hjælp påskønnes :)
--
AMD Phenom X4 II 3,4GHz - GTX 570 - 120GB SSD - 1000GB HDD - GA-990FXA-UD3 - Corsair Vengeance 8GB RAM
#1
Azakiel
Skribent
20-02-2015 11:36

Rapporter til Admin
Jeres hjemmeside ser umiddelbart centreret ud. http://jsfiddle.net[...]
--
Veni, Vidi, Vici. dimidium facti qui coepit habet
#2
sebastian192
Junior Supporter
20-02-2015 11:47

Rapporter til Admin
Den virker bare ikke rigtig for mig. http://peecee.dk[...]
--
AMD Phenom X4 II 3,4GHz - GTX 570 - 120GB SSD - 1000GB HDD - GA-990FXA-UD3 - Corsair Vengeance 8GB RAM
#3
Azakiel
Skribent
20-02-2015 11:49

Rapporter til Admin
#2 Du bør nok sætte baggrundens vidde til at passe med dit indhold.
--
Veni, Vidi, Vici. dimidium facti qui coepit habet
#4
Lindquist
Nørd
20-02-2015 11:52

Rapporter til Admin
#1 Desværre. Hvis du trækker lidt i vindue, så du udnytter den fulde bredde, så er placeret til venstre. Fejlen består i, at I har lavet wrapperen som absolut placering. Hvis den har en absolut placering, så er den ikke dynamisk. Derudover, så vil du gerne have margen til siderne dynamisk og bredden af siden som dynamisk (hvis resten af jeres indhold ellers understøtter responsiveness). Jeg har lavet rettelsen her: http://jsfiddle.net[...] Alt er udført med forbehold om, at jeg ikke ved noget af betydning om html og css.
--
[Mere] Kaffe; Net-etikette; Saglighed [Mindre] Skjult reklame; Hysteri; Fanboy-isme.
#5
nuxx
Maxi Nørd
20-02-2015 11:54

Rapporter til Admin
Det du leder efter er "Responsive Design" ...og den optimale måde at lykkes med det er ved 1. at bruge media queries ( https://developer.mozilla.org[...] ) og 2. relative størrelser på alting ( http://webdesignerwall.com[...] ) Media queries er vigtige da du aldrig får optimalt layout på tværs af mobile/tablet/laptop/desktop med den samme værdi i din CSS... du er derfor nødsaget til at definere individuelle værdier for forskellige skærmformater. Typisk 3 (small / medium / large ...nogle gange også en extra large) En genvej til dette (som kan anbefales) er at bruge et grid-layout system som f.eks Bootstrap, Pure eller et at de mange andre... læs mere generelt om responsive design her: http://blog.teamtreehouse.com[...]
--
Fun: 3770K, Asus Z77-ITX, 780Ti SC, 8GB CL8, NCASE M1 #193, 840 Evo 500GB, ST45SF Gold, DELL 30" U3011 Work: MBPro Retina + ASUS N55SF
#6
sebastian192
Junior Supporter
20-02-2015 11:55

Rapporter til Admin
#3 Noget i stil med? width: x px height: x px Baggrunden skal bare gerne passe på forskellige skærmopløsninger. Det gør den også nu, men hvis jeg sætter en fast højde og bredde på, bliver resten hvid, hvis de har en højere opløsning end billedet. Det vil jeg helst gerne undgå.
--
AMD Phenom X4 II 3,4GHz - GTX 570 - 120GB SSD - 1000GB HDD - GA-990FXA-UD3 - Corsair Vengeance 8GB RAM
#7
nuxx
Maxi Nørd
20-02-2015 11:59

Rapporter til Admin
#6 For at få baggrunden til at dække det hele altid: html { background: url(bg.jpg) no-repeat center center fixed; background-size: cover; }
--
Fun: 3770K, Asus Z77-ITX, 780Ti SC, 8GB CL8, NCASE M1 #193, 840 Evo 500GB, ST45SF Gold, DELL 30" U3011 Work: MBPro Retina + ASUS N55SF
#8
sebastian192
Semi Supporter
20-02-2015 12:01

Rapporter til Admin
#4 og #5 Mange tak. Vil kigge på det når jeg kommer hjem.
--
AMD Phenom X4 II 3,4GHz - GTX 570 - 120GB SSD - 1000GB HDD - GA-990FXA-UD3 - Corsair Vengeance 8GB RAM
#9
sebastian192
Semi Supporter
20-02-2015 12:03

Rapporter til Admin
#7 Det vil jeg prøve. Mange tak :)
--
AMD Phenom X4 II 3,4GHz - GTX 570 - 120GB SSD - 1000GB HDD - GA-990FXA-UD3 - Corsair Vengeance 8GB RAM
#10
yoggil
Elitebruger
20-02-2015 14:05

Rapporter til Admin
Du kunne også prøve med noget BootStrap, det fungerer super godt og er dejligt let at bruge, samtidig med at det virker super på tværs af stort set alle skærm størrelser. Jeg har leget med det i små 2 uger og det super bruger venligt. Der kan man wrappe sit indhold i en container, som gøre det centreret. Det kan hentes på getbootstrap.com, men man kan også linke til CSS og JS filerne som eksterne links.
--
#11
Azakiel
Skribent
20-02-2015 14:07

Rapporter til Admin
Generelle CSS frameworks er rare at arbejde i, Foundation, Purecss, Bootstrap osv. Personligt kan jeg anbefale Purecss hvis man blot sigter efter det responsive design uden alt for meget andet.
--
Veni, Vidi, Vici. dimidium facti qui coepit habet
#12
sebastian192
Semi Supporter
20-02-2015 15:24

Rapporter til Admin
#10 og #11. Nu har jeg kigget lidt på det, men kan ikke rigtig finde ud af, hvad det egentlig er. Er det bare forud-kodet CSS kode man copy-paster ind i sin egen kode, eller er der faktisk mere i det? Hvis nogen kunne give en simpel forklaring på det, ville det være super :)
--
AMD Phenom X4 II 3,4GHz - GTX 570 - 120GB SSD - 1000GB HDD - GA-990FXA-UD3 - Corsair Vengeance 8GB RAM
#13
Laust
Mega Nørd
20-02-2015 16:57

Rapporter til Admin
Nu er jeg ikke kode ekspert, men jeg vil da blande mig med lidt brugbart ift. SEO. Skriv dine img alt tags så de beskriver indholdet på billedet, eller ord du gerne vil findes på. Dem du har i koden pt. er jo bare billednavnet som går igen.
--
Tips og Tricks til din Mac - http://screenshot-mac.com[...]
#14
Azakiel
Skribent
20-02-2015 18:40

Rapporter til Admin
#12 Det er forudkodet CSS der anvender sig af et 12-punkts grid-system til dine Div's. Du behøver altså derfor kun smide et par classes på dine Div's for at de kan anvende det (eller billeder, buttons osv.). Jeg vil dog anbefale lige at kigge nogle youtube film, eller tilsvarende, igennem der forklarer hvordan 12-punkts grid systemet fungerer. Det er samme system der kører i stort set alle store CSS framework, herunder også Bootstrap, PureCSS og Foundation.
--
Veni, Vidi, Vici. dimidium facti qui coepit habet
#15
sebastian192
Semi Supporter
20-02-2015 19:59

Rapporter til Admin
#14 Tak for forklaringen. Det sætter jeg pris på :) #13 Det vil jeg tage til eftertanke i fremtiden :)
--
AMD Phenom X4 II 3,4GHz - GTX 570 - 120GB SSD - 1000GB HDD - GA-990FXA-UD3 - Corsair Vengeance 8GB RAM
#16
PHhansen
Ultrabruger
20-02-2015 20:37

Rapporter til Admin
#14 Ingen tvivl om at større CSS frameworks og grid-systemer er fine at benytte sig af. Dog virker det til, som #0 selv siger, at det er i forbindelse med uddannelse. Og så syntes jeg egentligt det er fint at bygge det fra bunden af. Så får man erfaringen med :)
--
#17
sebastian192
Semi Supporter
20-02-2015 23:07

Rapporter til Admin
#16 Det er nemlig det. Derfor vil jeg hellere kode det selv end "bare" at kopiere andres værk :)
--
AMD Phenom X4 II 3,4GHz - GTX 570 - 120GB SSD - 1000GB HDD - GA-990FXA-UD3 - Corsair Vengeance 8GB RAM
#18
PHhansen
Ultrabruger
20-02-2015 23:47

Rapporter til Admin
#17 Fornuftigt nok :) Dog er der ingen skam i at bruge frameworks. Længere frem kan de være med til en bedre og hurtigere arbejdsgang, samt vedligeholdelsen er ofte nemmere
--

Opret svar til indlægget: Hjælp til hjemmeside html og css

Grundet øget spam aktivitet fra gæstebrugere, er det desværre ikke længere muligt, at oprette svar som gæst.

Hvis du ønsker at deltage i debatten, skal du oprette en brugerprofil.

Opret bruger | Login
NYHEDSBREV
Afstemning