Grootte aanpassen aan monitor

Status
Niet open voor verdere reacties.
J

jappertjeh

Gebruiker
Lid geworden
2 jan 2006
Berichten
432
Ik weet dat je de weergave van je pagina aan kan passen aan de grootte va de monitor van de gene die de pagina bekijkt. Ik heb namelijk zojuist een pagina gemaakt voor 800px zodat niemand een horizontale balk krijgt, maar in mijn scherm is de site nu heel klein en alleen links, omdat ik een erg groot scherm heb. Hoe verwerk ik in mijn html/css dat de pagina zich moet aanpassen aan het scherm?
 
je kan een breedte aangeven in procenten in plaats van pixels:
HTML: 
<div id='test'></div>
PHP: 
/* css */


div#test
{
   width: 90%;
   /* eventueel */ min-width: 800px;
}


:thumb:
 
ahh dus wat ik nu met mn 800px heb gedaan, stel ik heb een div die is 200px nu, dan maak ik er dus van 25%. En van die hele pagina div 100%?
 
Proberen is weten! :D
Alleen, als je met de div van 100% bedoelt: de buitenste (omvattende) <div> waar de hele rest in zit: dan hoeft dat niet, want een gewone div is altijd 100% breed van de paginabreedte.
Als je géén breedte opgeeft voor de <body>, dan is de <body> automatisch de volle 100% breed, en heb je daarbinnen niet nog een div nodig voor de totale breedte van je pagina, als die ook 100% moet zijn.
En als de totale breedte bv. 90% moet worden, dan heb je zo'n omsluitende div ook niet nodig: dan geef je gewoon de <body> een breedte van 90%. Met tegelijk een linker- en rechtermargin op "auto" wordt de overige 10% keurig verdeeld tussen links 5% en rechts 5%. Oftewel: dan staat je pagina mooi gecentreerd:
Code: 
[FONT="Courier New"][SIZE="2"]body {
     width: 90%;
     margin: 0 auto;
     }[/SIZE][/FONT]
Met zo'n flexibele ("liquid") layout moet je wel in de gaten houden, hoe je de images op de pagina plaatst, zodat die zowel voor smalle als brede beeldschermen toonbaar zijn (en niet de rest van de layout kunnen afbreken als ze te groot zijn voor een bepaalde breedte).
Maar met een beetje inventiviteit kan de pagina zo gemaakt worden dat de pagina het niet begeeft als je gaat rekken en trekken en duwen aan de breedte:
Succes!
Met vriendelijke groet,
CSShunter
 
Laatst bewerkt:
bedankt, het is aardig gelukt!
Ondertussen is er nog een vraagje ontstaan. Ik heb een menu gemaakt met onderstaande code. Als je nu op een titel gaat staan, kleurt die. Is het ook mogelijk om de pagina waar je op bent, die kleur te laten houden?Mijn kleuren zijn geel en roze, geel de basis en roze als je op een link gaat staan. dus als ik op contact druk en op de pagina contact kom, dat contact dan roze blijft?

CSS:
Code: 
#menu{width:167px;
float:left;
background-color:#fbf9de;
margin:5px;
padding-bottom:26px;
border:2px #db2d52 solid;}

#menu ul{list-style:none;
margin:5px;
padding:0px;
font-family:Georgia;
padding-top:10px 0px 0px 0px;}

#menu ul a{
	display:block;
	height:25px;
	padding-top:3px;
		padding-left:25px;
text-decoration:none;
color:#000;}

#menu ul a:hover{
	background-color:#db2d52;}

HTML:

HTML: 
<div id="menu">
<ul>
<li><a href="index.html"><b>Home</b></a></li>
<li><a href="wie.html"><b>Wie</b></a></li>
<li><a href="wat.html"><b>Wat</b></a></li>
<li><a href="waarom.html"><b>Waarom</b></a></li>
<li><a href="visie.html"><b>Visie</b></a></li>
<li><a href="hoe.html"><b>Hoe</b></a></li>
<li><a href="contact.html"><b>Contact</b></a></li>
</ul></div>
 
Laatst bewerkt:
Ik heb inmiddels zelf een oplossing gevonden *proud*, namelijk de volgende:
je geeft alle links een class, zo dus:
HTML: 
<li><a href="index.html" class="index"><b>Home</b></a></li>
<li><a href="wie.html" class="wie"><b>Wie</b></a></li>
<li><a href="wat.html" class="wat"><b>Wat</b></a></li>
<li><a href="waarom.html" class="waarom"><b>Waarom</b></a></li>
<li><a href="visie.html" class="visie"><b>Visie</b></a></li>
<li><a href="hoe.html" class="hoe"><b>Hoe</b></a></li>
<li><a href="contact.html"class="contact"><b>Contact</b></a></li>

En dan stel je op de pagina waar je bent bij class de zelfde achtergrondkleur als je hover in, dus in je CSS:
HTML: 
.index{background-color:#db2d52;}
 
Ja, goed uitgevonden: die werkt prima als je in elke pagina opnieuw het css-stijlblok in de <head> van het document zet.
Maar het mooiste is, om van de css een apart algemeen (extern) stylesheet te maken:
  • Dat kan je in elke pagina oproepen met een link (i.p.v. elke keer kopiëren en inplakken), zodat de pagina's zelf veel kleiner worden, en sneller bij de kijker op de buis staan. :)
  • En zodat je bij een verandering van een bepaalde eigenschap alleen maar het stylesheet hoeft aan te passen om die verandering in 1 klap op alle pagina's door te voeren. :)
Op zo'n manier zou het met de kleur van de "huidige pagina link" mis gaan, want die verschilt per pagina. Maar hiervoor bestaat een bijzonder slimme truc, die je even moet weten:
  • Je laat de classes in je html precies zoals ze zijn.
  • Je geeft de <body> van elke pagina een ID met voor het gemak dezelfde naam als de class van de betreffende pagina. Dus bv.:
    HTML: 
    <body id="index">
    voor de homepage, enz.
Nu stappen we over naar het stylesheet. Daarin zet je de regels:
Code: 
[FONT="Courier New"][SIZE="2"]#index .index,
#wie .wie,
#wat .wat,
#waarom .waarom,
#visie .visie,
#hoe .hoe,
#contact .contact {
   background-color: #db2d52;
   cursor: default;
   }[/SIZE][/FONT]
  • Betekent: alléén als de class="index" wordt voorafgegaan in de html door ergens een id="index", dan wordt de achtergrondkleur van die class #db2d52 (en anders niet). En dat voorafgaan gebeurt natuurlijk alleen op de pagina waar je de <body id="index"> in hebt gezet: de index-pagina.
  • Voor de andere pagina's gaat het analoog: alleen de eigen pagina krijgt via de body-ID zijn kleurtje in de link.
  • En omdat de lieve lezer op de link van die pagina niet meer hoeft te klikken (hij/zij is er al), kan je via de css het handje bij hoveren veranderen in het gewone pijltje > alsof er helemaal geen link is. ;)
Met vriendelijke groet,
CSShunter
 
Laatst bewerkt:
Bedankt voor de heldere uitleg:)
aan de externe stylesheets had ik ook al gedacht. Punt is alleen dat er wel een paar dingen hetzelfde zijn op de pagina's zoals het menu, breedte etc, maar ik op sommige pagina's een extra divje heb, etc. Maar terwijl ik dit typ bedenk ik: als ik die div dan niet typ in mijn body,terwijl die wel in de stylesheet staat, geeft ie m niet weer natuurlijk. Toch? Ik leer met de minuut meer door helder na te denken, haha. Wat ik bedoel, stel je hebt de volgende externe stylesheet:

#div1 {float: left; width: 300px}
#div2 {float: left; width: 150px}

Maar op een van je pagina's wil je alleen div 1 en niet div 2 dan typ je in je body gewoon de ene div wel en de andere niet, dus daar heb je geen last van:D right?
 
jappertjeh zei:
Wat ik bedoel, stel je hebt de volgende externe stylesheet:

#div1 {float: left; width: 300px}
#div2 {float: left; width: 150px}

Maar op een van je pagina's wil je alleen div 1 en niet div 2 dan typ je in je body gewoon de ene div wel en de andere niet, dus daar heb je geen last van:D right?
Klik om te vergroten...
Klopt, als een element niet bestaat in de HTML kan de CSS er ook niets mee doen. Je kunt CSS, anders dan Javascript, niet gebruiken om elementen aan te maken.

Trouwens, als je iedere pagina een iets ander uiterlijk wilt geven, andere achtergrond bijvoorbeeld, kan dat nog steeds met één CSS bestand door gebruik te maken van het id van de pagina op eenzelfde manier als CSShunter hierboven liet zien.

EDIT: nog even iets anders; het is in de meeste gevallen een goed idee om ook een maximale breedte aan je pagina mee te geven. Als een paragraaf over de hele breedte van een 24" scherm wordt uitgesmeerd leest dat namelijk helemaal niet prettig.
 
Laatst bewerkt:
Nog 'n kleine tip: als je 'n pagina maakt met 'n vaste breedte, zoals 800 px, moet je 'm iets smaller maken dan de resolutie waar je op mikt. 'n Scherm met 'n resolutie van 800 x 600 heeft ook nog ruimte nodig voor de browser. 770x is redelijk veilig, en bij 1024x768 zo'n 970 px breed.
 
Status
Niet open voor verdere reacties.
                    Steun ons                    

Nieuwste berichten

Terug
Bovenaan Onderaan