Website laten aanpassen aan browsergroote

Status
Niet open voor verdere reacties.

rambomambo

Gebruiker
Lid geworden
9 dec 2012
Berichten
163
ik zou eindelijk willen als ik mijn browser verklein mijn site mee verkleint.
Als ik dit nu doe gebeurt dit niet en krijg ik dus een overflow in mijn

Code:
* { padding: 0; margin: 0; }

body {
 font-family: Arial, Helvetica, sans-serif;
 font-size: 13px;

}
#wrapper { 
 margin: 0 auto;
 width: 922px;

}
#header {
 width:100%;
 float: left;
 padding: 10px;
 border: 1px solid #ccc;
 height: 100px;
 margin: 10px 0px 0px 0px;
 background: #BD9C8C;
}
#leftcolumn { 
 color: #333;
 border: 1px solid #ccc;
 background: #E7DBD5;
 margin: 0px 0px 0px 0px;
 padding: 10px;
 height: 350px;
  width:25%;
 float: left;
}
#rightcolumn { 
 float: right;
 color: #333;
 border: 1px solid #ccc;
 background: #F2F2E6;
 margin: 0px 0px 0px 0px;
 padding: 10px;
 height: 350px;
 width: 678px;
 display: inline;
}
#footer { 
 width: 900px;
 clear: both;
 color: #333;
 border: 1px solid #ccc;
 background: #BD9C8C;
 margin: 0px 0px 10px 0px;
 padding: 10px;
}

HTML:
<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title></title>
    <link href="layout.css" rel="stylesheet">
    <link href="uiterlijk.css" rel="stylesheet">
</head>
<!-- Begin Wrapper -->
   <div id="wrapper">
   
         <!-- Begin Header -->
         <div id="header">
		 
		       <h1>ContactFormulier</h1>	 
			   
		 </div>
		 <!-- End Header -->
		 
		 <!-- Begin Left Column -->
		 <div id="leftcolumn">
		 
		       Left Column
		 
		 </div>
		 <!-- End Left Column -->
		 
		 <!-- Begin Right Column -->
		 <div id="rightcolumn">
		       
	          
		 
		 </div>
		 <!-- End Right Column -->
		 
		 <!-- Begin Footer -->
		 <div id="footer">
		       
			   This is the Footer		
			    
	     </div>
		 <!-- End Footer -->
		 
   </div>
   <!-- End Wrapper -->
</body>
</html>
 
Laatst bewerkt:
Dit zou je kunnen oplossen door in de CSS de #wrapper inplaats van width max-width te gebruiken hiermee maak je hem schaalbaar.
 
Dan moet je geen vaste waarden gebruiken maar liquid programmeren. Dus niet #wrapper {width: 922px;} maar #wrapper {width: 100%;} gebruiken. Je kunt dan alsnog een max-width instellen zoals rv94 hierboven al zegt, dan wordt de totale code voor de breedte #wrapper {width: 100%; max-width: 922px;}.

Met die code neemt de wrapper altijd 100% van de schermbreedte (ik zou persoonlijk wel wat margin aanhouden, dus bijvoorbeeld 90% ipv 100%) maar wordt hij nooit breder dan 922px.

Als je nog een stapje verder wilt gaan kun je ook eens kijken naar responsive design. Ik heb daar een tijdje geleden een artikel over geschreven op mijn blog.
 
Laatst bewerkt:
Status
Niet open voor verdere reacties.
Terug
Bovenaan Onderaan