Breedte website aanpassen naar schermresolutie
Hoogte maakt niet zoveel uit, het gaat echt om de breedte.
Ik ben zelf al veel op zoek geweest, en kwam een oplossing in de vorm van een Javascript tegen (welke de schermresolutie detecteert en op deze manier met jQuery een stylesheet selecteert), maar deze heeft als nadeel dat deze niet werkt als je Javascript hebt uitgeschakeld in de browser.
Daarnaast kwam ik ook een onderwerp als Liquid Design tegen, maar hier word ik niet echt wijs uit. Als ik naar Hyves kijk dan heeft deze website een fixed width, maar Facebook daarentegen past zich altijd netjes aan. Dat laatste is een beetje hoe ik het graag wil hebben.
Ik heb namelijk net zo'n header als Facebook heeft, volledige schermbreedte en margin:0; vanaf de bovenkant en de zijkanten, maar weet dus niet hoe ik het kan oplossen dat deze header zich ook netjes aanpast aan de schermbreedte van de bezoeker.
Het gaat om: http://(verwijderd)/products/contactform (voorbeeldsite)
index.php
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<body>
<div id="page">
<div id="header"><h1>Mario Geheim Products</h1></div>
<div id="container">
<div id="sidebar"></div>
<div id="content">
<form action="core.php" id="contactform" method="post" name="contactform">
<h1>Contactformulier</h1>
<input type="text" id="name" name="name" value="Uw naam" onfocus="if(this.value=='Uw naam')this.value='';" onblur="if(this.value=='')this.value='Uw naam';"><br>
<input type="text" id="emailaddress" name="emailaddress" value="Uw e-mailadres" onfocus="if(this.value=='Uw e-mailadres')this.value='';" onblur="if(this.value=='')this.value='Uw e-mailadres';"><br>
<input type="text" id="subject" name="subject" value="Een onderwerp" onfocus="if(this.value=='Een onderwerp')this.value='';" onblur="if(this.value=='')this.value='Een onderwerp';"><br>
<textarea id="message" name="message" onfocus="if(this.value=='Uw bericht')this.value='';" onblur="if(this.value=='')this.value='Uw bericht';">Uw bericht</textarea>
<input type="hidden" id="security" name="security">
<input type="submit" id="send" name="send" value="Doorgaan" disabled>
<div class="clear"></div>
</form>
</div>
</div>
</div>
</body>
<div id="page">
<div id="header"><h1>Mario Geheim Products</h1></div>
<div id="container">
<div id="sidebar"></div>
<div id="content">
<form action="core.php" id="contactform" method="post" name="contactform">
<h1>Contactformulier</h1>
<input type="text" id="name" name="name" value="Uw naam" onfocus="if(this.value=='Uw naam')this.value='';" onblur="if(this.value=='')this.value='Uw naam';"><br>
<input type="text" id="emailaddress" name="emailaddress" value="Uw e-mailadres" onfocus="if(this.value=='Uw e-mailadres')this.value='';" onblur="if(this.value=='')this.value='Uw e-mailadres';"><br>
<input type="text" id="subject" name="subject" value="Een onderwerp" onfocus="if(this.value=='Een onderwerp')this.value='';" onblur="if(this.value=='')this.value='Een onderwerp';"><br>
<textarea id="message" name="message" onfocus="if(this.value=='Uw bericht')this.value='';" onblur="if(this.value=='')this.value='Uw bericht';">Uw bericht</textarea>
<input type="hidden" id="security" name="security">
<input type="submit" id="send" name="send" value="Doorgaan" disabled>
<div class="clear"></div>
</form>
</div>
</div>
</div>
</body>
Stylesheet
Code (php)
1
2
3
4
5
6
7
8
9
10
11
2
3
4
5
6
7
8
9
10
11
body{background-color:#ffffff;color:#000000;cursor:default;font-family:Bitter,Verdana,Sans-Serif;font-size:15px;font-weight:700;margin:0;outline:0;padding:0;}
*{cursor:default;margin:0;outline:0;padding:0;}
#page{min-width:100%;width:1349px;}
#header{background-color:#0073c9;padding:50px 25px 25px;}
#header h1{color:#ffffff;font-family:Bitter,Verdana,Sans-Serif;font-size:25px;font-weight:700;}
form{background-color:#ececec;border:1px solid #bcbcbc;color:#000000;margin:25px auto;padding:35px;width:700px;}
form h1{background-color:#bcbcbc;color:#000000;font-size:30px;margin:-35px -35px 35px;padding:10px;text-align:center;}
input[type=text]{background-color:#ffffff;border:1px solid #cccccc;font-family:Bitter,Verdana,Sans-Serif;font-size:12px;font-weight:700;margin:5px 0;padding:10px;width:350px;}
textarea{background-color:#ffffff;border:1px solid #cccccc;font-family:Bitter,Verdana,Sans-Serif;font-size:12px;font-weight:700;height:100px;margin:5px 0;padding:10px;width:678px;}
input[type=submit]{background-color:#0073c9;border:0;color:#ffffff;float:right;font-family:Arial,Sans-Serif;font-size:12px;font-weight:700;padding:10px 15px;}
.clear{clear:both;}
*{cursor:default;margin:0;outline:0;padding:0;}
#page{min-width:100%;width:1349px;}
#header{background-color:#0073c9;padding:50px 25px 25px;}
#header h1{color:#ffffff;font-family:Bitter,Verdana,Sans-Serif;font-size:25px;font-weight:700;}
form{background-color:#ececec;border:1px solid #bcbcbc;color:#000000;margin:25px auto;padding:35px;width:700px;}
form h1{background-color:#bcbcbc;color:#000000;font-size:30px;margin:-35px -35px 35px;padding:10px;text-align:center;}
input[type=text]{background-color:#ffffff;border:1px solid #cccccc;font-family:Bitter,Verdana,Sans-Serif;font-size:12px;font-weight:700;margin:5px 0;padding:10px;width:350px;}
textarea{background-color:#ffffff;border:1px solid #cccccc;font-family:Bitter,Verdana,Sans-Serif;font-size:12px;font-weight:700;height:100px;margin:5px 0;padding:10px;width:678px;}
input[type=submit]{background-color:#0073c9;border:0;color:#ffffff;float:right;font-family:Arial,Sans-Serif;font-size:12px;font-weight:700;padding:10px 15px;}
.clear{clear:both;}
Alvast bedankt!
Toevoeging op 06/03/2013 05:19:21:
En ja, er ontbreken inderdaad nog een paar divs in de stylesheet. Komt nog!
Gewijzigd op 19/07/2013 00:51:06 door Bas IJzelendoorn
Bas Kreleger op 06/03/2013 11:33:43:
Kijk hier eens naar: http://twitter.github.com/bootstrap/. Je bent op zoek naar een responsive layout.
Idd aanrader
Ik denk ook niet dat die bootstrap voor mij geschikt is. Met de bootstrap wordt het voor mij iets te onoverzichtelijk op welke manier de lay-out zich op verschillende schermen aanpast, terwijl je dit met andere lay-outs wel zelf kunt bepalen.
Terugkomend op de lay-out van Facebook zie ik dat de header full-width is, en het logo en het inlogformulier een kleinere breedte hebben met een soort min-width. Enig idee hoe ik dit het beste kan realiseren?
dat is wat ze noemen een "responsive webdesign" ik denk dat je daar wel wat mee kan aangezien je geen bootstrap wil.
http://2012.inspireconf.com/ vergroot en verklein je browser is op die site!
Ik kan niet echt relevante websitebouwgerichte informatie hierover vinden.
Ik ga toch voor de optimalisatie voor 1024*768, dan kan ik later voor mobiele websites een aparte website ontwikkelen mocht ik dat tegen die tijd nodig vinden. En mensen met 800*600 resoluties scrollen maar.
Nu is de vraag hoe. De content is niet zo'n probleem, die kun je vaste breedtes meegeven zodat ze voor 1024*768 geoptimaliseerd zijn en er op grotere resoluties eveneens prima uitzien. Maar de header moet zich wel constant aanpassen aan de breedte van de resolutie.
Je kunt geen width opgeven, maar dat heeft als probleem dat, als je de browser kleiner maakt en je gaat scrollen, je een witruimte krijgt naast de header. Maar ik wil dus ten alle tijde mijn header de volledige breedte laten weergeven. Hoe doe ik dat?
Dit script heb ik in het verleden ook al gebruikt, maar nu kreeg ik 'm door onbekende reden niet werkend. Maar ik snap niet hoe ik dat werkend zou moeten krijgen als ik de Javascript zou weglaten?
Kunnen jullie me helpen met wat voorbeeldjes? Misschien begrijp ik het dan beter. Ben best een noob.
Ik heb niet zoveel aan alles wat ik net opnoemde! Of tenminste, ik heb er misschien wel veel aan, maar het is niet wat ik bedoel.
Toevoeging op 07/03/2013 04:54:35:
Ik heb nu een paar kleine aanpassingen gedaan in de structuur en de stylesheet, en het lijkt alsof het probleem nu even opgelost is. Maar ik ben benieuwd of jullie dit technisch ook kunnen onderbouwen, en of het probleem hiermee definitief opgelost is?
index.php
Code (php)
1
2
3
4
5
6
7
8
9
10
11
2
3
4
5
6
7
8
9
10
11
<body>
<div id="page">
<div id="header">
<div id="logo"><h1>(verwijderd)</h1></div>
</div>
<div id="content">
<div class="title"><h1>Nog even geduld</h1></div>
<p>Deze website gaat binnenkort online. U kunt altijd een e-mail sturen naar <a href="mailto:*****">****</a>.</p>
</div>
</div>
</body>
<div id="page">
<div id="header">
<div id="logo"><h1>(verwijderd)</h1></div>
</div>
<div id="content">
<div class="title"><h1>Nog even geduld</h1></div>
<p>Deze website gaat binnenkort online. U kunt altijd een e-mail sturen naar <a href="mailto:*****">****</a>.</p>
</div>
</div>
</body>
Stylesheet
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
2
3
4
5
6
7
8
9
10
11
12
13
14
15
body{background-color:#ffffff;color:#000000;cursor:default;font-family:Bitter,Verdana,Sans-Serif;font-size:12px;font-weight:700;margin:0;outline:0;padding:0;width:100%;}
*{cursor:default;margin:0;outline:0;padding:0;}
a,a:active,a:visited{color:#3f76d0;text-decoration:none;}
a:hover{color:#000000;text-decoration:none;}
#page{margin:0 auto;min-width:1007px;}
#header{background-color:#0073c9;width:100%;}
#logo{margin:0 auto;padding:50px 25px 25px;width:900px;}
#logo h1{color:#ffffff;font-family:Bitter,Verdana,Sans-Serif;font-size:28px;font-weight:700;}
#content{background-color:#ececec;border:1px solid #bcbcbc;margin:25px auto;padding:25px;width:850px;}
.title{background-color:#bcbcbc;margin:-25px -25px 25px;padding:10px;text-align:center;}
.title h1{font-size:36px;font-weight:700;}
input[type=text],textarea{background-color:#ffffff;border:1px solid #cccccc;font-family:Bitter,Verdana,Sans-Serif;font-size:12px;font-weight:700;margin:5px 0;padding:10px;width:300px;}
textarea{height:100px;width:700px;}
input[type=submit]{background-color:#0073c9;border:0;color:#ffffff;float:right;font-family:Arial,Sans-Serif;font-size:12px;font-weight:bold;padding:10px 15px;}
.clear{clear:both;}
*{cursor:default;margin:0;outline:0;padding:0;}
a,a:active,a:visited{color:#3f76d0;text-decoration:none;}
a:hover{color:#000000;text-decoration:none;}
#page{margin:0 auto;min-width:1007px;}
#header{background-color:#0073c9;width:100%;}
#logo{margin:0 auto;padding:50px 25px 25px;width:900px;}
#logo h1{color:#ffffff;font-family:Bitter,Verdana,Sans-Serif;font-size:28px;font-weight:700;}
#content{background-color:#ececec;border:1px solid #bcbcbc;margin:25px auto;padding:25px;width:850px;}
.title{background-color:#bcbcbc;margin:-25px -25px 25px;padding:10px;text-align:center;}
.title h1{font-size:36px;font-weight:700;}
input[type=text],textarea{background-color:#ffffff;border:1px solid #cccccc;font-family:Bitter,Verdana,Sans-Serif;font-size:12px;font-weight:700;margin:5px 0;padding:10px;width:300px;}
textarea{height:100px;width:700px;}
input[type=submit]{background-color:#0073c9;border:0;color:#ffffff;float:right;font-family:Arial,Sans-Serif;font-size:12px;font-weight:bold;padding:10px 15px;}
.clear{clear:both;}
- In de body{ staat nu een width:100%;
- #page heeft een min-width:1007px; (1024px minus de scrollbar), zodat de website op schermbreedtes vanaf 1024px goed wordt weergegeven
- #header heeft een width:100%;
- #logo, die binnen de #header staat, heeft een vaste width:900px;
- #content heeft nu ook een vaste width:850px;
Zal mijn header nu op alle, zo niet de meeste, schermresoluties (vanaf 1024px dan) de breedte van het scherm aannemen, ook als ik mijn browserscherm verklein? Dus krijg ik dan geen witranden naast de header?
Gewijzigd op 19/07/2013 00:51:54 door Bas IJzelendoorn