Header full width (CSS) - Softwareontwikkeling

woensdag 28 augustus 2013 22:50

Acties:

Verwijderd

Topicstarter

Hallo mensen,

Ik ben dus bezig met een website, maar er is één groot probleem; de header moet het hele scherm gebruiken: 100%. Ik heb de width op 100% gezet, maar er blijft zowel boven als links en rechts een leeg stuk, zo'n 10px. Met margin-left/right/top zou het zo klaar zijn, maar dit ziet er niet zo mooi uit en is ook niet handig om voor verschillende formaten te zorgen. (meestal ontstaat er zelfs 20px witruimte bij right, maar dan moet ik de header zelf aanpassen naar een width, zoals 1280px net als mijn MacBook pro.)

Hoe zorg ik dat ik gewoon een horizontale div/header krijg, die gewoon de randen aanraakt zonder margin-left/top en right??

Alvast bedankt,

Niels

woensdag 28 augustus 2013 22:57

Acties:

Verwijderd

header {
margin: 0;
padding: 0;
}

[ Voor 25% gewijzigd door Verwijderd op 28-08-2013 22:57 ]

woensdag 28 augustus 2013 23:07

Acties:

Verwijderd

Topicstarter

Nope, gebeurd nog steeds het zelfde (witruimte zit er tussen)

woensdag 28 augustus 2013 23:17

Acties:

Munki

Je <body> een margin van 0 geven. Zie trouwens ook even http://meyerweb.com/eric/tools/css/reset/. Hiermee reset je bepaalde browser "waardes". (Zoals dus bijv. de margin op je body)

**EDIT** Overigens is het niet nodig om je <header> (of elk ander block element) een width van 100% te geven. Dat gebeurd automatisch namelijk, tenzij je een position fixed/absolute meegeeft.

[ Voor 29% gewijzigd door Munki op 28-08-2013 23:18 ]

woensdag 28 augustus 2013 23:37

Acties:

Verwijderd

Topicstarter

Het is gelukt! margin: 0px; dus in de stylesheet van de body, bedankt!

Ik wist dat width 100% niet nodig is

donderdag 29 augustus 2013 00:52

Acties:

Munki

Geen probleem

donderdag 29 augustus 2013 11:26

Acties:

R4gnax

Munki schreef op woensdag 28 augustus 2013 @ 23:17:
ie trouwens ook even http://meyerweb.com/eric/tools/css/reset/. Hiermee reset je bepaalde browser "waardes". (Zoals dus bijv. de margin op je body)

Persoonlijk vind ik het beter om normalize.css te gebruiken dan Meyer's Reset CSS. Waar hij alles op 0 gooit en je zelf alles opnieuw aan mag gaan kleden zorgt normalize.css voor een zinnig genormaliseerde basislijn zodat de basis browser styles in alle browsers (zo goed als mogelijk is) overeen komen. Er zitten ook veel meer fixes voor cross-browser styling issues in normalize.css verwerkt.

donderdag 29 augustus 2013 22:12

Acties:

We Are Borg

Moderator Wonen & Mobiliteit / General Chat

Het is denk ik erg afhankelijk van voorkeur. Ik doe altijd * padding en margin 0. Lekker alles gestript qua marge en padding.

vrijdag 30 augustus 2013 09:41

Acties:

Bosmonster

*zucht*

We Are Borg schreef op donderdag 29 augustus 2013 @ 22:12:
Het is denk ik erg afhankelijk van voorkeur. Ik doe altijd * padding en margin 0. Lekker alles gestript qua marge en padding.

Als ik dat een FE dat hier zie doen gaan we een hartig woordje praten

Resets (al helemaal middels *..) zijn zeer storend, zeker in combinatie met CMS'en. Anders mag je zelf de complete styling van alle elementen weer op gaan bouwen, wat een beetje doelloos werk is. Waarom zou je uberhaupt eerst alles weghalen, om het daarna weer terug te zetten? Zet het dan gewoon gelijk goed (zelf of middels normalize).

Persoonlijk loop ik sowieso al nooit tegen issues aan, zonder reset of normalize, maar als je beperkte kennis hebt en je toch een hulpmiddel wilt, neem dan idd normalize.

vrijdag 30 augustus 2013 16:52

Acties:

Niet Henk

Als je je body verder wel normaal wilt houden, kan je ook voor dit gaan:
position: absolute; top:0; right:0; left:0; voor de div rondom je header.
Dit trekt hem buiten de body, en zet hem altijd bovenaan de pagina. Noot dat je ook position:fixed kan gebruiken om de header mee te laten bewegen als je scrollt. Afhankelijk van je header kan dit een mooi effect zijn.

vrijdag 30 augustus 2013 17:04

Acties:

incaz

Zou niet mijn voorkeur hebben, Niet_Henk. Het haalt de header buiten de flow en moet je dat dus corrigeren met margin/padding op de elementen eronder wat makkelijk tot vreemde problemen kan leiden, vooral bij niet-standaard instellingen/schermen.
Bij position: fixed heb je al vrij snel dat er teveel horizontale ruimte wordt ingenomen. Er zijn heel wat sites die ik nu door een brievenbusje begluur omdat de website zo nodig tamelijk onnuttige informatie in mijn beeld wil forceren (eervolle vermelding voor wetten.overheid.nl, al gebruiken die een wat andere techniek, het is echt ongelofelijk irritant.)

En ik dacht dat niet alle mobiele browsers al jofel met position: fixed kunnen omgaan - maar dat verandert vrij snel dus wie weet loop ik achter.

Never explain with stupidity where malice is a better explanation

vrijdag 30 augustus 2013 19:53

Acties:

BramVroy

Bosmonster schreef op vrijdag 30 augustus 2013 @ 09:41:
[...]

Persoonlijk loop ik sowieso al nooit tegen issues aan, zonder reset of normalize, maar als je beperkte kennis hebt en je toch een hulpmiddel wilt, neem dan idd normalize.

Dus lees ik dit goed als ik denk dat je zegt "Het maakt mij niet uit of mijn website er in elke browser hetzelfde uitziet"? Iets simpel als een verschillende basis margin op een list of de line-height van een span kan héél wat designinconsistenties met zich meebrengen.