Breedte website aanpassen naar schermresolutie

Overzicht Reageren

Sponsored by: Vacatures door Monsterboard

06/03/2013 05:17:09
Quote Anchor link
Ik ben momenteel bezig met mijn persoonlijke website, maar loop al een poosje tegen een uitdaging aan. Ik wil graag dat de breedte van mijn website zich aanpast naar de schermresolutie van de bezoeker.
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)
PHP script in nieuw venster Selecteer het PHP script
1
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>


Stylesheet
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
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;}


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
 
PHP hulp

PHP hulp

11/05/2021 16:26:38
 
Joakim Broden

Joakim Broden

06/03/2013 10:33:39
Quote Anchor link
Niet met vaste breedtes werken maar met %
 
Bas Kreleger
Beheerder

Bas Kreleger

06/03/2013 11:33:43
Quote Anchor link
Kijk hier eens naar: http://twitter.github.com/bootstrap/. Je bent op zoek naar een responsive layout.
 
Erik Jansen

Erik Jansen

06/03/2013 11:37:38
Quote Anchor link
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
 
Keizer Webdesign

Keizer Webdesign

06/03/2013 16:05:15
Quote Anchor link
of google is op "responsive design"
 

06/03/2013 16:42:48
Quote Anchor link
Ik vraag me af of bootstrap en ik vrienden zullen worden :(
 
Jordi Kroon
Redacteur

Jordi Kroon

06/03/2013 16:51:21
Quote Anchor link
Wat lukt er dan niet? Heb je de (sourcecode van de) voorbeelden al bekeken?
 

06/03/2013 17:22:46
Quote Anchor link
Dat is mij echt te ingewikkeld. Ik heb inderdaad de sourcecode bekeken en het bestand gedownload, daarna de Javascript al in mijn index gezet, maar toen ik aan de stylesheet begon...
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?
 
Keizer Webdesign

Keizer Webdesign

06/03/2013 19:45:40
Quote Anchor link
Kijk hier anders is naar

http://black-dog.co/http://black-dog.co/wp-content/uploads/2012/03/responsive.png

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!
 

06/03/2013 20:52:14
Quote Anchor link
Het zou een goede oplossing kunnen zijn, maar de informatie die ik zonet heb doorgelezen zegt mij dat ik hiervoor een webdesignbureau in de arm moet nemen?
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?
 
Jasper DS

Jasper DS

06/03/2013 22:33:13
Quote Anchor link
Je sprak daar over een javascript / jquery tool dat een andere stylesheet inlaad. Gebruik dat (want dat snap je?) maar gebruik gewoon de css media-queries. Dat is zonder js, puur css en dan ben je stiekem ook al met responsive design bezig. ;-)
 

06/03/2013 22:43:42
Quote Anchor link
De laatste reactie snap ik niet Jasper DS. Ik was inderdaad bezig met zo'n jQuery-script dat de schermresolutie detecteert en vervolgens aan de hand daarvan een stylesheet detecteert.
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.
 
Reshad F

Reshad F

06/03/2013 23:15:16
Quote Anchor link
google is op media queries :)
 

07/03/2013 02:58:26
Quote Anchor link
Laten we eens helemaal afstappen van die media queries, fluid designs, responsive designs en Javascript, etc. Wat is een andere mogelijkheid om ervoor te zorgen dat ALLEEN DE HEADER de schermbreedte aanneemt?
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)
PHP script in nieuw venster Selecteer het PHP script
1
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>


Stylesheet
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
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;}


- 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
 
Tim S

Tim S

07/03/2013 12:47:07
Quote Anchor link
Waarom zet je de header niet buiten de page div?
 



Overzicht Reageren

 
 

Om de gebruiksvriendelijkheid van onze website en diensten te optimaliseren maken wij gebruik van cookies. Deze cookies gebruiken wij voor functionaliteiten, analytische gegevens en marketing doeleinden. U vindt meer informatie in onze privacy statement.