CSS hvordan center stiller man en webside med brug af CSS

Fra Varde

Tilmeldt 30. Oct 07

Indlæg ialt: 250

Rasmus Henriksen Fra RH Freelance Skrevet 13-12-2010 kl. 12:14

Hvor mange stjerner giver du? :

m2w_kenneth:

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

Yes, og hvis man nu endelig er gået i gang med css reduction, kan man lige så godt gøre det fuldt ud og skrive margin: auto; og droppe 0'et.. :)

Tilmeldt 30. May 10

Indlæg ialt: 22

m2w_kenneth Skrevet 13-12-2010 kl. 12:24

Hvor mange stjerner giver du? :

Ja igen det er dårlig vane, med de nyere HTML standarder. Det havde faktisk noget at sige førhen med f.eks. ældre udgaver af Opera etc.

Tilmeldt 10. Nov 09

Indlæg ialt: 0

slettet_bruger Skrevet 13-12-2010 kl. 14:24

Hvor mange stjerner giver du? :

m2w_kenneth:

Ja igen det er dårlig vane, med de nyere HTML standarder. Det havde faktisk noget at sige førhen med f.eks. ældre udgaver af Opera etc.

dvs med margin: auto så er der lige meget luft til hver side eller hvordan

Tilmeldt 30. May 10

Indlæg ialt: 22

m2w_kenneth Skrevet 13-12-2010 kl. 14:47

Hvor mange stjerner giver du? :

Ja margin:auto; angiver at den automatisk centrerer elementet så vidt muligt.

Tilmeldt 4. Nov 10

Indlæg ialt: 2

MathiasGS Skrevet 13-12-2010 kl. 14:55

Hvor mange stjerner giver du? :

HTML:

Sidens indhold...

</div>

CSS:

#wrapper{

width: 1000px;

margin: 0 auto;

}

Width kan sikkert udelades, men det er en god ide at kontrollere bredden med enten width, min-width eller max-width.

Håber det kunne hjælpe :)

Tilmeldt 30. May 10

Indlæg ialt: 22

m2w_kenneth Skrevet 13-12-2010 kl. 15:09

Hvor mange stjerner giver du? :

MathiasGS:

HTML:

<div id="wrapper">

Sidens indhold...

</div>

CSS:

#wrapper{

width: 1000px;

margin: 0 auto;

}

Width kan sikkert udelades, men det er en god ide at kontrollere bredden med enten width, min-width eller max-width.

Håber det kunne hjælpe :)

Width kan absolut ikke udelukkes, da den i så fald vil have en bredde på 100%, som er default value for div tag i alle browsere.

Tilmeldt 4. Nov 10

Indlæg ialt: 2

MathiasGS Skrevet 13-12-2010 kl. 15:11

Hvor mange stjerner giver du? :

m2w_kenneth:

MathiasGS:

HTML:

<div id="wrapper">

Sidens indhold...

</div>

CSS:

#wrapper{

width: 1000px;

margin: 0 auto;

}

Width kan sikkert udelades, men det er en god ide at kontrollere bredden med enten width, min-width eller max-width.

Håber det kunne hjælpe :)

Width kan absolut ikke udelukkes, da den i så fald vil have en bredde på 100%, som er default value for div tag i alle browsere.

There you go... Har aldrig benyttet det uden såe..

Tilmeldt 10. Nov 09

Indlæg ialt: 0

slettet_bruger Skrevet 13-12-2010 kl. 16:23

Hvor mange stjerner giver du? :

MathiasGS:

m2w_kenneth:

MathiasGS:

HTML:

<div id="wrapper">

Sidens indhold...

</div>

CSS:

#wrapper{

width: 1000px;

margin: 0 auto;

}

Width kan sikkert udelades, men det er en god ide at kontrollere bredden med enten width, min-width eller max-width.

Håber det kunne hjælpe :)

Width kan absolut ikke udelukkes, da den i så fald vil have en bredde på 100%, som er default value for div tag i alle browsere.

There you go... Har aldrig benyttet det uden såe..

css ser sådan ud

@charset "utf-8";
/* CSS Document */

wrapper{

width: 1000px;
margin: 0 auto;

}

h1
{
color: #333;
font-size: 36px;
}

h2
{
color: #333;
font-size: 20px;
}

h3
{
color: #333;
font-size: 20px;
}
a:link
{
color:#000;
font:Arial, Helvetica, sans-serif;
font-size:14px;
font-style: normal;

}

side ser sådan ud og det virker ikke :

<img src="images/forsidepic.jpg" width="300" height="200" alt="Webdesign logo opti-web.dk" longdesc="http://www.opti-web.dk" style="float:right; overflow:auto;"/>
<h1>Webdesign og SEO optimering</h1><p></p>

<a href="index.html" title="Forsiden fra Opti-web.dk">Opti-web.dk</a> | <a href="index.html" title="Forsiden fra Opti-web.dk">Webdesign og webshops</a> | <a href="index.html" title="Forsiden fra Opti-web.dk">SEO optimering</a>
| <a href="index.html" title="Forsiden fra Opti-web.dk">SEO artikler</a> | <a href="index.html" title="Forsiden fra Opti-web.dk">Online marketing</a> | <a href="index.html" title="Forsiden fra Opti-web.dk">Kontakt</a>

<div style="background-color:#CCC; padding: 20px; margin-top: 105px; width: 450px; float:left; border:solid;">
<h2>Webdesign:</h2>

</div>

jeg fatter det ikke

Fra Varde

Tilmeldt 30. Oct 07

Indlæg ialt: 250

Rasmus Henriksen Fra RH Freelance Skrevet 14-12-2010 kl. 08:07

Hvor mange stjerner giver du? :

Fireball:

wrapper{

width: 1000px;
margin: 0 auto;

}

Som jeg sagde, det måtte være et andet problem - du mangler # foran wrapper :) Wrapper er ikke et element som h1, h2, a, osv (hvor man derfor kan definere globalt på dem ved blot at skrive det uden punktum eller havelåge foran), men angives som en class eller et ID. Så:

#wrapper{

width: 1000px;
margin: auto;

}

Drop også det 0 som jeg har gjort her.