Hoe laat je een website zich aan passen op elke resolutie?

Ik ben bezig met een website en wil graag dat de website ook bestendig is voor mobiel tablet enz.

dit is de code van css:

*
{
margin:0px;
padding:0px;
width:auto;
height:auto;
}

body
{
background-color:#f0e7c7;
}

.header
{
width:100%;
height:200px;
background-color:white;
}

li
{
display:inline;
}
li
{
float:left;
}
a
{
text-decoration: none;
width:90px;
color:grey;
font-family:arial;
font-size:15px;
margin-top:100px;
margin-left:15px;

}
.menu a {
text-decoration: none;
color: #grey;
padding:1px 1px 1px 1px;

}
.menu a:hover {
color: black;
background-color: #FFF;
}

h3
{
font-family:Streetwear;
font-size:48px;

}
h4
{
font-family:arial;
font-size:10px;
margin-left:600px;
color:grey;
}

.rondje
{

margin-top:600px;
margin-left:100px;
}

.talkcloud
{
margin-left:100px;
margin-top:100px;
}

.font
{
font-family:BigNoodleTitling;
font-size:20px;
}

.box
{
width:400px;
height:500px;
background-color:white;
margin-top:10px;
margin-left:1100px;
border-style:solid;
border-color:grey;
}

h2
{
font-family:BigNoodleTitling;
font-size:40px;


}






.footer
{
background-color:#2b2d37;
margin-top:950px;



}




Hopelijk kunnen jullie me helpen! :)

Weet jij het antwoord?

/2500

Het beste antwoord

Tabellen is een slechte oplossing. De techniek die je zoekt heet responsive webdesign. een tutorial: http://learn.shayhowe.com/advanced-html-css/responsive-web-design/

Een website geschikt maken voor alle resoluties begint bij het maken van het ontwerp van de pagina. Een scherm op een mobiel heeft nu eenmaal veel minder ruimte dan een scherm op een widescreen monitor. Over het algemeen is je pagina in een aantal kolommen ingedeeld (zelfs al heb je maar 1 kolom, dan heb je nog een kantlijn links en rechts) Je zult een ontwerpbeslissing moeten maken welke kolommen mogen groeien en krimpen en wat hun minimale en maximale groottes mogen worden. Dat kun je in een maximaal aantal pixels vastleggen en ook in percentages (33% is dan 33% van de breedte van het scherm) De simpelste oplossing is dan met tabellen te werken en de kolommen de betreffende breedtes te geven. Een andere oplossing is diverse eigenschappen aan verschillende

-elementen te geven. Maar een algemene maak-geschikt-voor-alle-resoluties-optie voor in je CSS, die bestaat (helaas) niet. Je zult als mens eerst zelf het ontwerp moeten bepalen. Toegevoegd na 9 minuten: Tabellen kun je op vele manieren stylen. Hier een mooie stite voor beginners: http://www.w3schools.com/css/css_table.asp

Ik heb enkele bronnen toegevoegd waar je meer info kan vinden. Hetgeen wat jij zoekt is responsive design. Een google zoektocht op onderstaande termen leveren de bronnen op: - responsive design - responsive design how to - responsive design tutorial

Stel zelf een vraag

Ben je op zoek naar het antwoord die ene vraag die je misschien al tijden achtervolgt?

/100