Tabel aanpassen aan scherm

[Magistro]

Hey,

Ik ben bezig met het maken van een website, nu kom ik het volgende probleem tegen.
Ik wil graag dat de tabel waarin alle content van de pagina staat zich automatisch aanpast aan de resolutie van het scherm.

Ik hoop dat iemand me hier mee kan helpen.

 

[w.sickman]

Beste Magistro,

PHP is een server side taal die eigenlijk helemaal niks weet van hoe de computer van de gebruiker eruit ziet. De resolutie wordt niet mee gestuurd. Wat jij zoekt kan wel, maar moet in een client side taal. Bijvoorbeeld Javascript. Wat jij echter vraagt kan makkelijker in CSS (Cascading Style Sheets). Stel je doet het volgende:

  <div style="width:90%;border:1px solid #000;">
     Een leuke tekst die zich aan moet passen aan de breedte
     van je scherm. (niet resolutie dus, want dat maakt eigenlijk
     helemaal niks uit voor je webpagina. Wat telt is hoe groot
     je browser scherm was). Zo, nu heb ik toch nog wat zinvolle
     informatie getypt in een opvul tekst. Is weer eens wat anders
     dan lorum ipsum. http://www.lipsum.com/
  </div>

Plak bovenstaande code maar eens in een document. Als je de breedte van je browser aanpast (vorig formaat) dan zie je dat alles zich automatisch aanpast.

Meer info op: http://www.w3schools.com/css/

Kun je even bevestigen of dit is wat je bedoelde (@mod: dan kan jij hem vast begeleiden naar de CSS threads).

Wout

 

[Magistro]

Hey w.sickman

Bedankt voor je reactie.

Dit is echter niet wat ik bedoel, wat dit doet is slecht de breedte van een stukje tekst veranderen. Ik ben aan het werk met zowel tekst als plaatjes. Mijn bedoeling van het hele gebeuren is dat als de gebruiker het scherm verkleint of vergroot, dat de content van de hele tabel als het ware ook evenredig wordt vergroot, dus ook een plaatje moet vergroot/verkleind worden.
Dus eigenlijk gewoon zoals bij die voorbeeldsite, maar dan niet in flash, maar in een andere taal.

 

[w.sickman]

In dat geval schakelen we over naar Javascript in combinatie met CSS.

(@mod: kies maar waar deze topic heen mag ).

CSS heeft een leuke eigenschap, en dat je grootte uit kan drukken in vele eenheden die ook relatief kunnen zijn. Percentage is relatief tot het vaderobject en zo hem je ook EM die relatief is tot de lettergrootte van het parent object. Dit geintje kun je heel leuk toepassen:

in de head:

<style type="text/css">
   body {
      font-size: 12px;
  }
</style>

in je body:

<p style="font-size: 1em;">Een test tekst</p>
<div style="width: 40em; border: 1px solid #000;">Een test DIV</div>

Preview even in een browser en let op de grootte van alles. Als je nu het document aanpast en de font-size van je body veranderd in 20px en opnieuw previewed, zie je dat alles is aangepast.

Dat is dus deel één: je drukt alles uit in EM. EM is overigens lettergrootte.

Wat je gata doen in javascript is (ik typ het script nog even niet uit omdat breedte van browser niet zo een twee drie te typen is door de verscihllende browsers. Dus ik wil eerst even weten of dit is wat je zoekt)
- je stopt een event op je browser voor als hij resized
- als event getriggered wordt dan:
- check je de browsers width
- je deelt die width door het getal X waardoor je de lettergrootte op basis van de width krijgt
- je past de body:font-size: aan (document.body.style.fontsize = oid)

Alle object passen zich nu vanzelf aan.

Wout

 

[Magistro]

Krijg je dan zo ongeveer hetzelfde effect zoals bij de voorbeeldsite die ik heb toegevoegd?
Zo ja, dan is het wat ik zoek.

 

[w.sickman]

Hey,

Onderstaande code reageert op de width van het document. Als die aanpast dan past alles wat een EM waarde heeft zich ook aan:

<script type="text/javascript">
	function resize(){
		width = (window.innerWidth) ? window.innerWidth : document.body.innerWidth;
		factor = 90;
		document.body.style.fontSize = measure / factor + "px";	
	}
	window.onload   = resize;
	window.onresize = resize;
</script>

Factor kun je aanpassen als je wilt dat hij groter/kleiner weergegeven wordt bij een bepaalde resolutie.

Let wel dat dit zeer onvriendelijk is voor je gebruiker. Er zijn overigens al lang veel complexere scripts geschreven die bovenstaande veel mooier doen. Ik heb even geen link voor je, maar zoek maar beetje op google naar CSS en Resize.

Wout

 

[Magistro]

Hey w.sickman,

Harstikke bedankt voor je gedane moeite, ik ben met je scriptje aan het experimenteren en het ziet er goed uit