[CSS][HTML] Div's mee laten rekken met schermresolutie - Softwareontwikkeling

zaterdag 27 oktober 2012 12:03

Acties:

Verwijderd

Topicstarter

Hallo allemaal,

Ik ben bezig met een website en daar heb ik even een vraagje over. Ik heb de layout nu klaar en die hak ik altijd in stukkies met photoshop en zet de website met behulp van divjes in HTML en CSS in elkaar. Nu is de bedoeling dat de layout over de gehele pagina komt en dus helemaal aansluit op de browser. Ik heb alleen geen idee hoe ik dat moet doen, aangezien iedereen een andere schermresolutie heeft en ik niet wil dat je soms een horizontale scrolbalk hebt of dat mensen met een reuzescherm de website zien in lelijke pixels.

Dus ik had even twee vraagjes:
- Welke code moet ik in HTML / CSS gebruiken om de Divjes mee te laten rekken met de schermresolutie?
- Welke afmetingen moet ik in photoshop voor de layout gebruiken zonder dat de site in kwaliteit minder word?

Ik ben een noob in websites maken, dus excuus als het een rare vraag is. Maar heb al gegoogled en kon zo gauw geen oplossing vinden!

zaterdag 27 oktober 2012 12:13

Acties:

3dfx

Ik ben ook geen webdesignkei (understatement

), maar is er niet iets met percentages voor width e.d. te doen (ipv. vast aantal pixels)?

Of evt. stylesheets voor afzonderlijke resoluties danwel automagische aanpassingen icm. stukje Javascript (daarvan zijn wel voorbeelden te vinden op het interweb).

zaterdag 27 oktober 2012 18:15

Acties:

Verwijderd

Topicstarter

Dankjewel voor je reactie! Denk maar dat ik die tweede optie doe! Is een goed idee en ik heb inderdaad al wat voorbeelden kunnen vinden! Is misschien wat meer werk dan percentages, maar werkt denk ik ook wat beter!

zaterdag 27 oktober 2012 21:12

Acties:

Barryvdh

Ehhh dat is wel heel erg basic ja. Je kan gewoon percentages gebruiken (fluid grid), maar je kan ook een fixed grid, in combinatie met media queries (om op basis van de resolutie andere breedtes te gebruiken)
Fluid is wel makkelijker hoor als je gewoon wil dat het meeschaalt. Verschillende formaten kan ook, maar dat is vooral makkelijk als je de indeling wil aanpassen bij een andere resolutie.

En wat betreft pixelige plaatjes, probeer zo weinig mogelijk plaatjes te gebruiken, maar gebruik liever CSS3 voor kleuren/effecten etc, dat schaalt altijd netjes mee.

dinsdag 30 oktober 2012 04:30

Acties:

jmxd

Bijvoorbeeld zo:

Cascading Stylesheet:

 body {
   padding: 10px 20px;
   }

#container {
   width: 100%;
   }

HTML:

<body>
   <div id="container">
      Hier je content
   </div>
</body>

Wat bovenstaande doet:
Maakt een container div over de volle breedte van de webbrowser waarbij hij 20 pixels van de zijkanten af blijft en 10 pixels van de boven- en onderkant.

dinsdag 30 oktober 2012 08:07

Acties:

Verwijderd

LayoutGala

dinsdag 30 oktober 2012 10:35

Acties:

Loadichus

Twylight schreef op dinsdag 30 oktober 2012 @ 04:30:
Bijvoorbeeld zo:
Cascading Stylesheet:
1
  stukje code 
Wat bovenstaande doet:
Maakt een container div over de volle breedte van de webbrowser waarbij hij 20 pixels van de zijkanten af blijft en 10 pixels van de boven- en onderkant.

Ik heb de code in een Fiddle gedaan, dan kun je de werking zien
http://jsfiddle.net/TCvQk/

Houd er wel rekening mee dat je images bij verandering niet automatisch mee groeien, in ieder geval niet zonder kwaliteit te verliezen. Beter is na te denken over een vaste image met bijvoorbeeld een herhalend patroon of met CSS3 een gradient te maken.

Zo bijvoorbeeld : http://jsfiddle.net/TCvQk/1/

[ Voor 3% gewijzigd door Loadichus op 30-10-2012 10:41 ]