aanpassende website

[stykurgh]

Hallo,

Ik wil een website maken alleen moet alles automatisch aanpassen aan de resolutie van de gebruiker. Hoe doe ik dit precies? ik heb wel een beetje gezocht op internet enzo, en dan je met % kan werken alleen ik weet niet precies hoe ik dit moet toepassen. kan iemand mij dit uitleggen? Het gaat trouwens wel om een achtergrond die aan moet passen waarbij je als je repeat doet, het heel lelijk wordt omdat er brushes op zitten.

Mvg

 

[morfanaion]

Als je gebruik wil maken van een doctype (wat nodig is om ervoor te kunnen zorgen dat je pagina in alle browsers er hetzelfde uit ziet en zich hetzelfde gedraagt) werkt helaas % alleen voor de breedte. Hoogte is dan alleen met absolute waardes te doen.

Wat je zou kunnen doen om het toch voor elkaar te krijgen is gebruik maken van JavaScript om bij de OnLoad en bij een resize de nieuwe grootte van het canvas op te vragen en de grootte van tabellen/divs of wat je ook maar gebruikt om je pagina in te delen hiermee aan te passen.

Dit is een voorbeeld dat ik zelf gebruik, in mijn geval om een tabel te centreren op het canvas. Dit kun je aanpassen om in plaats daarvan de tabel in grootte te laten veranderen.

 <script language="javascript" type="text/javascript">

	<!--

			function OnLoad ()

			{

				var viewportwidth 

				var viewportheight

				if (typeof window.innerWidth != 'undefined')

				{

					viewportwidth = window.innerWidth

					viewportheight = window.innerHeight

				}

				else if (typeof document.documentElement != 'undefined' && typeof document.documentElement.clientWidth != 'undefined' && document.documentElement.clientWidth != 0)

				{

					viewportwidth = document.documentElement.clientWidth

					viewportheight = document.documentElement.clientHeight

				}

	            

				var top = (((Math.max(viewportheight,600) / 2) | 0) - 300)

				var left = (((Math.max(viewportwidth,1000) / 2) | 0) - 500)

	            

				var table = document.getElementById("mainbody")

				table.style.top = top + "px" ;

				table.style.left = left + "px" ;

	            

				window.onresize = OnResize

			}

	        

			function OnResize ()

			{

	            

				var viewportwidth 

				var viewportheight

				if (typeof window.innerWidth != 'undefined')

				{

					viewportwidth = window.innerWidth

					viewportheight = window.innerHeight

				}

				else if (typeof document.documentElement != 'undefined' && typeof document.documentElement.clientWidth != 'undefined' && document.documentElement.clientWidth != 0)

				{

					viewportwidth = document.documentElement.clientWidth

					viewportheight = document.documentElement.clientHeight

				}

	 

				var table = document.getElementById("mainbody")

				table.style.top = ((Math.max(viewportheight,600) / 2) - 300) + "px" ;

				table.style.left = ((Math.max(viewportwidth,1000) / 2) - 500) + "px" ;

	            

			}

		//-->

		</script>

Let wel, wanneer mensen Javascript uit hebben geschakeld in hun browser zal dit niet werken. Het is daarom verstandig om standaard een grootte voor je tabel te bepalen die gangbaar is.

 

[csshunter]

Hoi stykurgh,
Het maken van een compleet "liquid design" is best lastig, en in de meeste gevallen ook erg onhandig voor de bezoekers.

• Zie dit topic: www.helpmij.nl/forum/showthread.php/601761-Liquid-design-en-inkrimpen

En als ik het goed begrijp heb je een achtergrond-afbeelding die moet meeschalen met de resolutie. Nou, dat is zo mogelijk nog erger: vrijwel onbegonnen werk! In een aantal gevallen kan het wel, maar dan moet de afbeelding en de site zich er (toevallig) goed voor lenen. Anders loop je het risico dat teksten en pagina-onderdelen helemaal uit de achtergrond gaan lopen en dergelijke.

• Zie ook dit topic: www.helpmij.nl/forum/showthread.php/533251-achtergrond-automatisch-aanpassen

Dit is wat je er zo in het algemeen over kunt zeggen. Maar of en hoe er oplossingen of alternatieven zijn, hangt erg af van hoe de pagina er qua afbeeldingen en layout uit gaat komen te zien. Een algemene gebruiksaanwijzing voor een met de resolutie meewandelende site is dus niet zo goed te geven.

Met vriendelijke groet,
CSShunter

 

[stykurgh]

bedankt. dit hier http://www.helpmij.nl/forum/showthread.php/533251-achtergrond-automatisch-aanpassen had ik ook geprobeerd. dat lukt wel met de achtergrond enzo alleen moet er ook tekst en plaatjes op de site hoe kan ik dit aanpasbaar maken? procenten meegeven aan de width van de plaatjes en procenten voor font-size?

 

[csshunter]

Hoi stykurgh,
Zoals ik al zei, hier vallen moeilijk algemene richtlijnen voor te geven: het hangt helemaal af van de layout van de site. Maar om een site compleet bij elke resolutie beeldschermvullend (en identiek!) te krijgen, is een heidens karwei.

Wat ik zou doen:

• Eerst de site maken uitgaande van een resolutie van 1024*768px, dan heb je alvast wat.
• Daarna kijken of het ontwerp zich leent om een auto-aanpasbare site te maken, en oplossingen verzinnen voor de problemen die ongetwijfeld zullen opdoemen

.
Ook een vraag: waarom zou je je veel moeite getroosten om een automatisch zoombare site te maken?

• Alle moderne browsers (Firefox, IE7/IE8, Opera, Safari, Chrome) hebben een zoom-optie aan boord.
• Bezoekers kunnen (bij een hoge resolutie) altijd op de site inzoomen!

Maar als je op dit moment al een testpagina hebt, die liquid zou moeten worden: show us! (linkje?) - Want misschien kan het toch wel eenvoudig.

Met vriendelijke groet,
CSShunter