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
9 jaar geleden
977

Heb je meer informatie nodig om de vraag te beantwoorden? Reageer dan hier.

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/
(Lees meer...)
Verwijderde gebruiker
9 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
(Lees meer...)
Verwijderde gebruiker
9 jaar geleden
En hoe doe ik dit ?
Ozewiezewozewiezewallakristallix
9 jaar geleden
Tabellen kun je op vele manieren stylen. Hier een mooie site voor beginners: http://www.w3schools.com/css/css_table.asp
Verwijderde gebruiker
9 jaar geleden
Tabellen zijn geen goede oplossing voor een responsive website! Kijk liever eens bij de bronnen van Casper 91.
Tabellen worden gewoon in zijn geheel kleiner, terwijl responsive webdesign ervoor zorgt dat de inhoud die langs elkaar staat op een gewone computer, mooi onder elkaar komt op een smartphone.
Het gebruik van tabellen is al lang voorbijgestreefd in webdesign. Tegenwoordig wordt met divs gewerkt. Tabellen worden enkel nog gebruikt voor informatie die je normaal ook in een tabel zou zetten.
Responsive webdesign is niet zo simpel. Je zal er redelijk wat moeite voor moeten doen om het goed te krijgen.
Ozewiezewozewiezewallakristallix
9 jaar geleden
De DIV'jes heb ik ook in mijn antwoord genoemd. Ik geef alleen aan dat het werken met het tabellen simpeler is waarna de vragensteller zelf doorvraagt in die richting.. Voor een beginner die het allemaal zelf uit moet zoeken is meteen de stap naar Responsive webdesign vaak net effe te hoog gegrepen. Ik denk dat 'ie een goede beslissing neemt door het eerst op de eenvoudige manier te doen. "Eerst kruipen, dan lopen en dan pas rennen !"

Weet jij het beter..?

Het is niet mogelijk om je eigen vraag te beantwoorden Je mag slechts 1 keer antwoord geven op een vraag Je hebt vandaag al antwoorden gegeven. Morgen mag je opnieuw maximaal antwoorden geven.

0 / 2500
Gekozen afbeelding