Hét vraag- en antwoordplatform van Nederland

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! :)

Verwijderde gebruiker
10 jaar geleden
Geef jouw antwoord
0 / 2500
Geef Antwoord

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/
Verwijderde gebruiker
10 jaar geleden

Andere antwoorden (1)

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
Deel jouw antwoord
0 / 2500
Geef Antwoord
logo van Kompas Publishing

GoeieVraag.nl is onderdeel van Kompas Publishing