hoe kan ik de achtergrond van mijn webpagina, voor iedereen t zelfde krijgen, of je nou met 800x600 of 1024x768 kijkt.
Geef maten van tabellen en cellen, frames etc… in % op ipv van pixels.
Dan past alles zich aan aan de resolutie van de bezoekers.
Hoe:
<body>
<table border=0 width=100% height=100%>
<tr>
<td>
<center>
je pagina zoals je die wilt, maar nu gecentreerd, zowel horizontaal, als verticaal
ook hierin kan je gewoon weer tabellen, iframes etc toepassen
</td>
</tr>
</table>
</center>
</body>
suc6
Als je praat over de achtergrond van een pagina vrees ik dat je dat helaas niet aan de ingestelde resolutie van de gebruiker aan kunt passen.
Je foto/plaatje heeft tenslotte een van te voren ingestelde resolutie (‘grootte’) en de browser herhaalt dat formaat.
Als iemand nog een idee heeft hoor ik dat ook graag!
Mvg.
Misshien heb je hier wat aan per resolutie een andere stylesheet laden met een andere background.
<HTML>
<HEAD>
<!-- standaard Style Sheet voor Netscape gebruikers met een resolutie van 800 x 600 –>
<link rel=“stylesheet” type=“text/css” href=“netscape.css”>
<!-- hieronder het script met de verschillende mogelijkheden voor de Internet Explorer gebruikers –>
<SCRIPT LANGUAGE=“JavaScript”>
document.write('Uw resolutie is ’ + screen.width + ’ x ’ + screen.height + ‘’);
if (screen.width == 640) {
document.write(‘<link rel=“stylesheet” type=“text/css” href=“640.css”>’);
alert(“Style Sheet voor een scherm met een 640 x 480 resolutie wordt nu geladen.”);
}
if (screen.width == 800) {
document.write(‘<link rel=“stylesheet” type=“text/css” href=“800.css”>’);
alert(“Style Sheet voor een scherm met een 800 x 600 resolutie wordt nu geladen.”);
}
if (screen.width == 1024) {
document.write(‘<link rel=“stylesheet” type=“text/css” href=“1024.css”>’);
alert(“Style Sheet voor een scherm met een 1024 x 768 resolutie wordt nu geladen.”);
}
if (screen.width == 1280) {
document.write(‘<link rel=“stylesheet” type=“text/css” href=“1280.css”>’);
alert(“Style Sheet voor een scherm met een 1280 x 960 resolutie wordt nu geladen.”);
}
if (screen.width == 1600) {
document.write(‘<link rel=“stylesheet” type=“text/css” href=“1600.css”>’);
alert(“Style Sheet voor een scherm met een 1600 x 1200 resolutie wordt nu geladen.”);
}
</script>
<BODY>
</BODY>
</HTML>
Suc6
Rebel
Wanneer je met dreamweaver werkt, zijn er wel extensions (soort plugins) te krijgen waarmee je een “background that fits” gemakkelijk kunt instellen.
Indien de bezoeker dan 800x600 heeft, pakt hij je 800x600 background, etc. etc.
(zoals rebel87 schreef)
te verkrijgen onder deze link ![]()
Mijn bovenstaande posting,zal ervoor zorgen dat er rond een bestaande site bvb. gemaakt in 800*600 er een leeg frame rond gezet wordt,zodanig als deze geopent wordt door een bezoeker met een hogere schermresolutie…deze ook mooi gecentreerd wordt weergeven op dit scherm.
Ik heb hier hetzelfde probleem heb ook al vanalles geprobeerd.
maar met aanpassen van de resolutie ben ik nog niet tot het gewenste resultaat gekomen.
ik heb nu het volgende gedaan in (dreamweaver)kies view/visual aids/frame borders.als je nu in de design sheet buiten het frame klikt kun je hier vanalles rondom nog toevoegen
dus de witte ruimte om je site heen kun je nu ook gebruiken.
misschien niet de ideale oplossing maar ik ben er zeer tevreden mee.
De vraag is natuurlijk wat je precies bedoelt.
Wil je een achtergrond die automatisch resized? Zoiets als dit?
ja, zoiets bedoel k nou en hoe krijg ik zoiets nou voor elkaar.
Met layers.
Je ‘misbruikt’ een layer om daarin een foto te plaatsen met hoogte 100% en breedte 100%. Zo wordt de foto geresized met het formaat van je browser window.
Hier is de html code van die pagina:
Code:
<html><head><title>test</title><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"><script language="JavaScript" type="text/JavaScript"><!-- // Dit script heb je nodig om tijdens het resizen de dimensies van je layer niet te verliezenfunction MM_reloadPage(init) { //reloads the window if Nav4 resized if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) { document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }} else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();}MM_reloadPage(true);//--></script><!-- De stylesheet voor het zetten van de marges en de achtergrond- en tekstkleur --><style type="text/css">body { background:transparent; color:#ffffff; margin-left:0px; margin-right:0px; margin-top:0px; }</style></head><body> <!-- Dit is de achtergrondlayer. Hier plaats je een foto op met een hoogte en breedte van 100% --><div id="Layer1" style="position:absolute; left:1px; top:1px; width:100%; height:100%; z-index:1; visibility: visible;"><img src="btn-screensize.png" width="100%" height="100%"></div> <!-- Dit is de voorgrondlayer die je er overheen legt en waarop je je site ontwerpt --><div id="Layer2" style="position:absolute; left:1px; top:1px; width:100%; height:100%; z-index:2; visibility: visible;"> <table width="100%" cellpadding="7"> <tr> <td>Hier plaats je je tekst en foto's</td> </tr> </table> <!-- Einde van de voorgrondlayer --></div> </body></html>
Is het ook mogelijk de scrollbars weg te laten
Rebel
Jazeker, met “overflow: hidden”:
<style type=“text/css”>
body {
background:transparent;
color:#ffffff;
margin-left:0px;
margin-right:0px;
margin-top:0px;
overflow: hidden;
}
</style>
Kijk nog maar eens in het voorbeeld dat ik gemaakt heb. Nu zijn de scrollbars daar verdwenen.
Dankjewel
![]()
Thanks Duwgati
![]()
Rebel
Houd er wel rekening mee dat dit een probleem kan geven.
Als je je site ontwerpt voor bijv. 800x600 of groter, dan krijgen mensen die op een lagere resolutie werken of niet full-screen werken, niet de hele pagina te zien.
Ben dus altijd erg voorzichtig met dat soort “oplossingen”.