Problem med utökning av hemsida på höjden.

Permalänk
Skrivet av Perrablerra:

Gick det bra?

vet inte, ska testa idag så lägger upp ikväll.

Visa signatur

Chassi: FD Define R4 / Mobo: Gigabyte MSI Z87-G45 / CPU: Intel Core i7-4770K / RAM: 8GB Corsair Vengeance LP / HDD: 1TB WD Caviar Blue / SSD: 240GB Samsung 850 PRO / GPU: Sapphire R9 280X 3GB / Nätagg: FD Integra R2 650W

Permalänk

Har nu gjort grunden till den nya hemsidan och försökte här fixa så den fyllde ut och lyckades med det men det blev en glipa då mellan menyn och headern. Som ni kan se här:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <link rel="stylesheet" type="text/css" href="css/main.css"/> <title>ByggDinDator.se</title> </head> <body> <div id="container"> <div id="header"> </div> <div id="centrering"> <div id="menucontainer"> <ul id="menu"> <li><a class="aktiv" href="index.htm">Hem</a></li> <li><a href="butik.htm">Butik </a></li> <li><a href="om.htm">Om oss</a></li> <li><a href="support.htm">Support</a></li> <li><a href="minasidor.htm">Mina sidor</a></li> </ul> </div> <div id="content"> swgsdfgsdfgdsfg </div> </div> <div id="footer"> <table width="100%" border="0"> <tr></tr> <td width="888" align="right">Arpo & jonataan.host</td> </tr> </table> </div> </div> </body> </html>

main.css

html { height: 100%; } body { text-align: center; background-image: url(images/background.png); background-repeat: no-repeat; background-position: top center; background-attachment: fixed; height: 100%; } #container { margin-left: auto; margin-right: auto; margin-top: 0; margin-bottom: 0; height: 100% } #header { height: 250px; width: 100%; background-color: #FF0000; } #centrering { width: 960px; height: 100%; margin: 0 auto 0 auto; } #menucontainer { width: 960px; height: 35px; text-align: center; padding:0; margin:0; background-color: #00FF00; } #menu li { display: inline; font-size: 20px; font-family: Arial; } #menu li a { width: 180px; float: left; text-decoration: none; font-weight: bold; line-height: 35px; height: 35px; } #menu a:link{color: #C0C0C0; background-image: url(images/Button.png);} #menu a:visited{color: #C0C0C0; background-image: url(images/Button.png);} #menu a:hover{background-image: url(images/ButtonHover.png);} #content { width: 960px; height: 100%; background-color: #0000FF; } #footer { height: 150px; width: 100%; background-color: #C0C0C0; }

Visa signatur

Chassi: FD Define R4 / Mobo: Gigabyte MSI Z87-G45 / CPU: Intel Core i7-4770K / RAM: 8GB Corsair Vengeance LP / HDD: 1TB WD Caviar Blue / SSD: 240GB Samsung 850 PRO / GPU: Sapphire R9 280X 3GB / Nätagg: FD Integra R2 650W

Permalänk
Medlem

Lägg till en reset så försvinner det, t.ex:

body, div, h1, h2, h3, h4, h5, h6, ul, ol, dl, li, dt, dd, p, blockquote, pre, form, fieldset, table, th, td { margin: 0; padding: 0; }

Permalänk
Skrivet av crake:

Lägg till en reset så försvinner det, t.ex:

body, div, h1, h2, h3, h4, h5, h6, ul, ol, dl, li, dt, dd, p, blockquote, pre, form, fieldset, table, th, td { margin: 0; padding: 0; }

Tack, kan man ha den koden alltid där eller det kommer bli ett problem?

Visa signatur

Chassi: FD Define R4 / Mobo: Gigabyte MSI Z87-G45 / CPU: Intel Core i7-4770K / RAM: 8GB Corsair Vengeance LP / HDD: 1TB WD Caviar Blue / SSD: 240GB Samsung 850 PRO / GPU: Sapphire R9 280X 3GB / Nätagg: FD Integra R2 650W

Permalänk
Medlem
Skrivet av jonataan.host:

Tack, kan man ha den koden alltid där eller det kommer bli ett problem?

Den kan du absolut ha kvar. Det enda just denna reset gör är att ta bort margin och padding från alla element...

Permalänk
Medlem
Skrivet av crake:

Den kan du absolut ha kvar. Det enda just denna reset gör är att ta bort margin och padding från alla element...

Men det fixar ingenting egentligen. Man vill ju ha marginaler på sina element och då kommer gliporna komma tillbaka igen. Collapsing margins går att lösa på bättre sätt, exempelvis med overflow:hidden eller padding som inte är 0.

Visa signatur

Kom-pa-TI-bilitet

Permalänk
Medlem
Skrivet av Teknocide:

Men det fixar ingenting egentligen. Man vill ju ha marginaler på sina element och då kommer gliporna komma tillbaka igen. Collapsing margins går att lösa på bättre sätt, exempelvis med overflow:hidden eller padding som inte är 0.

Nu använder iofs jag reset för att jag vill att alla webbläsare ska visa samma sak i defaullt - och inte för att lösa collapsing margins. Tänkte mest att han lika gärna kan köra en reset från början så att han slipper fler "överraskningar".

Använder du själv aldrig någon form av reset?

Permalänk
Medlem
Skrivet av crake:

Nu använder iofs jag reset för att jag vill att alla webbläsare ska visa samma sak i defaullt - och inte för att lösa collapsing margins. Tänkte mest att han lika gärna kan köra en reset från början så att han slipper fler "överraskningar".

Använder du själv aldrig någon form av reset?

Det som är inkonsekvent webbläsarvarianter emellan är mestadels CSS-buggar och hacks (äldre varianter av IE). Det kan även förekomma plattformsrelaterade avvikelser där ett typsnitt inte återfinns och ersätts med närmast lämpliga.

CSS-resets löser inget av dessa problem.

I dag är nästan samtliga webbläsare helt överens om vad HTML 4.01 och CSS2.1 handlar om, bortsett från IE 7 som haltande dröjer sig kvar på vissa XP-burkar.
CSS-resets hjälper inte här heller.

Jag är mer tekniskt än grafiskt lagd. När jag utvecklar en webbsida brukar jag börja med ett väldigt luddigt koncept och sedan känner jag mig fram. Standardreglerna för elements marginaler är här en stor fördel då de webbläsare som jag känner till tycker att stycken och rubriker ska vara luftiga, listor skjutas in från vänsterkanten och så vidare, som standard. Att nollställa dessa marginaler hjälper mig inte, snarare får jag viss panik när stycken faller samman med varandra till solida block av text. Om jag sätter p, ul { margin:1em 0; } så vet jag att dessa två element nu har en topp– och bottenmarginal på 1 em. Att sätta dem till 0 innan jag ens har använt dem på sidan hjälper mig inte heller — jag upplever inte heller att en reset underlättar mitt arbete om jag vid senare tillfälle lägger in ett av mig ostylat ol-block som är marginalbefriat; det får bara listan att se ful ut.

Marginaler är en webbdesigners goda vänner om han vet hur de fungerar. Rätt applicerade ger de en sida naturligt flöde, med stycken som avgränsas av jämnt och behagligt vitutrymme.

Visa signatur

Kom-pa-TI-bilitet

Permalänk
Medlem
Skrivet av Teknocide:

Det som är inkonsekvent webbläsarvarianter emellan är mestadels CSS-buggar och hacks (äldre varianter av IE). Det kan även förekomma plattformsrelaterade avvikelser där ett typsnitt inte återfinns och ersätts med närmast lämpliga.

CSS-resets löser inget av dessa problem.

I dag är nästan samtliga webbläsare helt överens om vad HTML 4.01 och CSS2.1 handlar om, bortsett från IE 7 som haltande dröjer sig kvar på vissa XP-burkar.
CSS-resets hjälper inte här heller.

Jag är mer tekniskt än grafiskt lagd. När jag utvecklar en webbsida brukar jag börja med ett väldigt luddigt koncept och sedan känner jag mig fram. Standardreglerna för elements marginaler är här en stor fördel då de webbläsare som jag känner till tycker att stycken och rubriker ska vara luftiga, listor skjutas in från vänsterkanten och så vidare, som standard. Att nollställa dessa marginaler hjälper mig inte, snarare får jag viss panik när stycken faller samman med varandra till solida block av text. Om jag sätter p, ul { margin:1em 0; } så vet jag att dessa två element nu har en topp– och bottenmarginal på 1 em. Att sätta dem till 0 innan jag ens har använt dem på sidan hjälper mig inte heller — jag upplever inte heller att en reset underlättar mitt arbete om jag vid senare tillfälle lägger in ett av mig ostylat ol-block som är marginalbefriat; det får bara listan att se ful ut.

Marginaler är en webbdesigners goda vänner om han vet hur de fungerar. Rätt applicerade ger de en sida naturligt flöde, med stycken som avgränsas av jämnt och behagligt vitutrymme.

Tanken med att sätta 0 på alla marginaler (och ev. även padding) är ju inte att man ska fortsätta ha den på 0 för alla element, utan för att man ska ha kontroll på marginalerna genom att själv få sätta dem. Lite mer jobb, mycket mindre klientberoende. Jag menar hur ofta vill man sitta och spendera timme efter timme med någonting som sedan kan se helt fel ut bara för att någon annan bestämt sig för att det skall vara extra marginaler på olika ställen.

Bättre då att sätta allt till 0 så vet man vart man börjar och sedan lägga till det man vill ha istället för att förlita sig på att utvecklarna av webläsaren tycker likadant som en själv alla gånger.

Visa signatur

Xbox Live - Firaphex
Jag har inte alltid rätt, men jag utgår från det tills jag ser bevis på annat. Citera för svar
2008-06-18, Dagen då integriteten ställdes tå mot tå med maktmissbruket och förlorade.

Permalänk
Medlem
Skrivet av belga:

Tanken med att sätta 0 på alla marginaler (och ev. även padding) är ju inte att man ska fortsätta ha den på 0 för alla element, utan för att man ska ha kontroll på marginalerna genom att själv få sätta dem. Lite mer jobb, mycket mindre klientberoende. Jag menar hur ofta vill man sitta och spendera timme efter timme med någonting som sedan kan se helt fel ut bara för att någon annan bestämt sig för att det skall vara extra marginaler på olika ställen.

Bättre då att sätta allt till 0 så vet man vart man börjar och sedan lägga till det man vill ha istället för att förlita sig på att utvecklarna av webläsaren tycker likadant som en själv alla gånger.

I slutändan kommer du ju i så fall (hoppas jag verkligen, om du vill ha en någorlunda läsbar layout) ändå "skriva över" hela reseten med andra stilar. Eller så glömmer du något, typ <ol>, och vips så ser det oläsbart ut när du ett halvår senare vill ha en punktlista i någon text. Vad tillför då en reset?

Nej, antingen så vet man exakt hur man vill ha det, och då täcker man alla baser med nya marginaler själv, eller så är det inte jätteviktigt och då räcker det med att ändra de element man verkligen måste, och låter webbläsaren göra jobbet på resten. Det finns aldrig någonsin någon anledning att ha noll marginal på till exempel hX-elementen; det kommer göra din text oläsbar.

Permalänk
Medlem
Skrivet av You:

I slutändan kommer du ju i så fall (hoppas jag verkligen, om du vill ha en någorlunda läsbar layout) ändå "skriva över" hela reseten med andra stilar. Eller så glömmer du något, typ <ol>, och vips så ser det oläsbart ut när du ett halvår senare vill ha en punktlista i någon text. Vad tillför då en reset?

Nej, antingen så vet man exakt hur man vill ha det, och då täcker man alla baser med nya marginaler själv, eller så är det inte jätteviktigt och då räcker det med att ändra de element man verkligen måste, och låter webbläsaren göra jobbet på resten. Det finns aldrig någonsin någon anledning att ha noll marginal på till exempel hX-elementen; det kommer göra din text oläsbar.

Jo men sen kommer man till alla defekta renderingar av sidor som ibland dyker upp. Som t.ex. när en 2px margin på en lista blir default-margin plus 2px extra istället för exakt 2px (host host, IE). Då hjälper det rätt mycket om man redan innan tvingat den till att ha 0 som default. Nu för tiden är ju inte liknande saker något större problem eftersom de flesta fattat att "egna" varianter inte uppskattas. Men det är inte obefintligt.

Kort sagt: Heller ha det och det inte behövs än tvärt om.

Och visst finns det anledningar till att ha noll marginal på hX-element. Det beror helt på hur man bygger upp designen på sidan. De ska inte sitta ihop med texten, men det kan finnas tillfällen då top/botten-marginal på texten istället fungerar bättre.

Visa signatur

Xbox Live - Firaphex
Jag har inte alltid rätt, men jag utgår från det tills jag ser bevis på annat. Citera för svar
2008-06-18, Dagen då integriteten ställdes tå mot tå med maktmissbruket och förlorade.

Permalänk
Medlem
Skrivet av belga:

Jo men sen kommer man till alla defekta renderingar av sidor som ibland dyker upp. Som t.ex. när en 2px margin på en lista blir default-margin plus 2px extra istället för exakt 2px (host host, IE). Då hjälper det rätt mycket om man redan innan tvingat den till att ha 0 som default. ( ... och annat ... )

Det hjälper inte ett skit. Att skriva:

* { margin:0; padding:0; } ul { margin:1em 0; }

är alltid, oavsett plattform, webbläsare och ramverk, exakt samma sak som att skriva

ul { margin: 1em 0; padding:0; }

när det kommer till ul-element.
En margin-/padding-reset nollställer marginaler och paddings (duh..) vilka sedan sätts tillbaks till vad man vill ha. Det är ingen som helst skillnad mot att bara sätta vad man vill ha, direkt, från början.

Visa signatur

Kom-pa-TI-bilitet

Permalänk
Medlem
Skrivet av Teknocide:

Det hjälper inte ett skit. Att skriva:

* { margin:0; padding:0; } ul { margin:1em 0; }

är alltid, oavsett plattform, webbläsare och ramverk, exakt samma sak som att skriva

ul { margin: 1em 0; padding:0; }

när det kommer till ul-element.
En margin-/padding-reset nollställer marginaler och paddings (duh..) vilka sedan sätts tillbaks till vad man vill ha. Det är ingen som helst skillnad mot att bara sätta vad man vill ha, direkt, från början.

Ja skriver man en reset i samma css så är det ju totalt meningslöst.
En reset är ju till för att ta bort dumheter som inte borde vara där. Det innefattar saker som kan ligga i cachen, dumheter från webläsaren och annat. Som jag sa, webbläsare som hittar på saker är inte så vanligt längre. Det har rätt mycket dött ut i takt med att IE5/6 har fasats ut. Men poängen är att även om vi talar om en nästan obefintlig risk, så är det 2 rader kod vi talar om. De kanske 2kb data det handlar om är idag ett mycket mindre problem ändå.

Så visst, i 99.9% av fallen finns det ingen anledning till det. Men inte heller gör det någon skada att göra det.

Visa signatur

Xbox Live - Firaphex
Jag har inte alltid rätt, men jag utgår från det tills jag ser bevis på annat. Citera för svar
2008-06-18, Dagen då integriteten ställdes tå mot tå med maktmissbruket och förlorade.

Permalänk
Medlem
Skrivet av belga:

Ja skriver man en reset i samma css så är det ju totalt meningslöst.
En reset är ju till för att ta bort dumheter som inte borde vara där. Det innefattar saker som kan ligga i cachen, dumheter från webläsaren och annat. Som jag sa, webbläsare som hittar på saker är inte så vanligt längre. Det har rätt mycket dött ut i takt med att IE5/6 har fasats ut. Men poängen är att även om vi talar om en nästan obefintlig risk, så är det 2 rader kod vi talar om. De kanske 2kb data det handlar om är idag ett mycket mindre problem ändå.

Så visst, i 99.9% av fallen finns det ingen anledning till det. Men inte heller gör det någon skada att göra det.

Jag vet inte vad du pratar om för cache för en CSS-reset är Vanlig Jävla CSS™ och laddas ner som all annan Vanlig Jävla CSS. Dessutom, har man stilregler för de element som visas på sidan så är de definierade efter reseten och har då preferens. Den nytta som reseten potentiellt sett skulle kunna ha mot någon mystisk cache går förlorad eftersom man ändå skriver över resetens nollställning med egna värden med andra ord. Slutligen, en reset hjälper inte äldre webbläsare: med risk för att repetera sönder min poäng så görs resetens jobb ogjort i samma stund som man definierar egna stilregler för element som används. Internet Explorer 6 har inte lättare att applicera en marginal på 1 em på godtyckligt element, bara för att man stunden innan satt elementets marginaler till 0. Snarare är äldre webbläsare långsammare och de negativa effekterna av en reset har större impakt.

Visst är prestandaförlusten av den extra HTTP-requesten betydelselös ur ett bredare perspektiv men reseten är totalt onödig så varför ha med den alls. Jag vet inte varför de har blivit så populära, folk tror uppenbarligen att de löser ett problem när problemet i själva verket inte existerar.

Notera: Jag motsätter mig inte en "kontextuell reset", i form av CSS som anger generiska grundinställningar för färger, typsnitt, storlekar, marginaler och dylikt över en hel webbplats. Det är praktiskt, minskar repetition och gör det möjligt att göra stora förändringar genom att modifiera en fil. Vad jag motsätter mig är just lista, av, element, eller, * { nollställ }-reseten, vilket är den som folk vanligtvis menar när de diskuterar resets.

Visa signatur

Kom-pa-TI-bilitet