Tekst etc. in het midden plaatsen, lukt niet.

**Stijn Adams** · 02-12-2009, 19:46

Dag

Ik heb een probleem.
Hier de HTML code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="nl" lang="nl">
<head>
<title>Stijn Adams | Internet diensten</title>

<link rel="stylesheet" type="text/css" href="opmaak.css" />
</head>

<body>
<div id="header"></div>
<ul id="menu">
<li><a href="#">Home</a></li>
<li><a href="#">Diensten</a></li>
<li><a href="#">Portfolio</a></li>
<li><a href="#">Contact</a></li>
</ul>
<div align="center"><div id="content"><p><b>Lorem Ipsum</b> is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
<div class="rc">
<h2 class="why"><span>Why do we use it?</span></h2>
<p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).</p>
</div>
<p> </p></div></div>

<div id="footer"><span lang="nl-be"> </span>Design: <a href="#">Stijn Adams | Internet diensten</a></div>
</body>

</html>

CSS:

html
{
background-color: #FFFFFF;
}
body
{
width: 320px;
border-left: 1px solid #FFFFFF;
border-right: 1px solid #FFFFFF;
margin: 0px auto;
}
div#header
{
background-image: url('images/stijnadams.jpg');
background-repeat: repeat-x;
width: 325px;
height: 100px;
}
ul#menu
{
margin: 0px;
padding-left: 10px;
list-style: none;
height: 25px;
width: 279px;
background-color: #CBCBCB;
}
ul#menu li
{
float: left;
height: 25px;
}
ul#menu li a
{
display: block;
overflow: hidden;
height: 25px;
padding: 5px 8px 0px 8px;
font-family: Verdana;
color: #ffffff;
font-size: 11px;
text-decoration: none;
font-weight: bold;
}
ul#menu li.active a:hover
{
padding: 5px 8px 0px 8px;
background-color: #ffffff;
color: #000000;
height: 20px;
}
ul#menu li.active a
{
padding: 5px 8px 0px 8px;
background-color: #ffffff;
color: #000000;
height: 20px;
}
ul#menu li a:hover
{
padding: 5px 8px 0px 8px;
background-color: #ffffff;
color: #000000;
height: 20px;
}
// content //
div#content
{
margin: 0 auto;
width: 250px;
}
div#contentfooter
{
padding-top: 10px;
font-family: Verdana;
font-size: 25px;
color: #F00;
font-weight: normal;
margin: 0 0 9px 0;
border-bottom: 1px dotted #333333;
}
div#footer
{
width: 89%;
background-color: #CBCBCB;
text-align: center;
padding: 2px 0px 2px 0px;
clear: both;
margin:0;
float: left;
font-family: Verdana;
font-size: 11px;
color: #ffffff;
}

div#footer a
{
color: red;
text-decoration: none;
}

Hier zit u hoe het nu is:

En hoe ik het zou willen:

Ook als ik in de css eigenschappen aan "content" wil geven veranderen er andere dingen.
Hulp a.u.b.!
Ik hoop dat jullie mij kunnen helpen!

Stijn

**Daan V.** · 02-12-2009, 19:49

Beide zijn hetzelfde? Ik zie het probleem niet zo goed eigenlijk. kun je misschien iets grotere plaatjes uploaden en nog wat duidelijker zijn met het probleem?

Op dit moment zou ik toch echt zweren dat beide screenshots hetzelfde zijn.

**Aeilko Bos** · 02-12-2009, 19:51

geef het logo en de footer een vaste width, dus niet auto
En geef ze dan alelbei margin-left:auto; en margin-right:auto;

**Stijn Adams** · 02-12-2009, 19:52

Klopt, maar in het ene staat hoe ik het zou willen. ;)

Hier grotere:
http://www.flsadams.v3host.be/sitedeals/sanormaal.jpg
http://www.flsadams.v3host.be/sitedeals/sa.jpg
Aanvullend bericht:
Maar, ik zou het gewoon altijd op elke pc in het midden hebben.

**gast8208** · 02-12-2009, 20:16

Probeer de gehele website eens in een container te plaatsen. Ongeveer zo:

#container
{
margin: 0px auto;
}

dan zo invoegen:

<html><head></head>
<body>
<div id="container">

rest van je header/content/footer

</div>
</body>
</html>

**Stijn Adams** · 02-12-2009, 21:28

Hoe bedoelt u Stefan?

De tekst kan ik nu niet over heel de site plaatsen, dit is el de bedoeling, de balken moet blijven staan waar ze staan, in het midden.

**gast8208** · 02-12-2009, 21:35

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="nl" lang="nl">
<head>
<title>Stijn Adams | Internet diensten</title>

<link rel="stylesheet" type="text/css" href="opmaak.css" />
</head>

<body>

<div id="container">   <-- Hier begint de container

<div id="header"></div>
<ul id="menu">
<li><a href="#">Home</a></li>
<li><a href="#">Diensten</a></li>
<li><a href="#">Portfolio</a></li>
<li><a href="#">Contact</a></li>
</ul>

<div align="center">

<div id="content"><p><b>Lorem Ipsum</b> is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>

<div class="rc">

<h2 class="why"><span>Why do we use it?</span></h2>
<p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).</p>
</div>
<p>&nbsp;</p>
</div></div>


<div id="footer"><span lang="nl-be">&nbsp;</span>Design: <a href="#">Stijn Adams | Internet diensten</a></div>
</div>  <-- Hier eindigd de container
</body>

</html>

Geef dan in de .css een nieuw id in, namelijk:

#container
{
margin: 0px auto;
}

Dan stelt de gehele website zich in het midden van de browers in. Note: gebruik nooit <div align="center">, altijd met die margins werken dan. Als het niet lukt stuur me een PM, dan doe ik het morgen even voor je voor. Maar zoals het bovenstaat moet het lukken.

**Lukas Van Orshoven** · 02-12-2009, 21:36

Ik heb de code die je plaatste even getest in FF, IE 8 en 7 & Chrome, en overal wordt de tekst perfect in het midden weergegeven..

Op je afbeelingen lijkt het alsof er een stuk van het scherm niet opstaat, kan je eens geen volledige printscreen maken?

Op welke resolutie zit je btw?

**gast8208** · 02-12-2009, 21:39

zo dus : http://stefan.ideas4design.nl/stijn/henk.html

**s.maas** · 02-12-2009, 21:39

<head>
<title>Stijn Adams | Internet diensten</title>
<link rel="stylesheet" type="text/css" href="opmaak.css" />
</head>
<body>
<div id="header">
<p align="center"></div>
<ul id="menu">
<li>
<p align="center"><a href="#">Home</a></li>
<li>
<p align="center"><a href="#">Diensten</a></li>
<li>
<p align="center"><a href="#">Portfolio</a></li>
<li>
<p align="center"><a href="#">Contact</a></li>
</ul>
<div align="center"><div id="content"><p><b>Lorem Ipsum</b> is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
<div class="rc">
<h2 class="why"><span>Why do we use it?</span></h2>
<p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).</p>
</div>
<p> </p></div></div>

<div id="footer">
<p align="center"><span lang="nl-be"> </span>Design: <a href="#">Stijn Adams | Internet diensten</a></div>
</body>
</html>

Is dit iets?

**Stijn Adams** · 02-12-2009, 21:48

Dit begin er op te lijken, de tekst moet over heeel de pagina komen te staan.
Aanvullend bericht:
@s.maas

De tekst is ongeveer goed.
De rest niet.
Aanvullend bericht:
In feite moet de tekst over bijna heel de pagina komen.

**Cédric Siroux** · 02-12-2009, 23:13

In je css staat dit:

Code:

body
    {
        width: 320px;
        border-left: 1px solid #FFFFFF;
        border-right: 1px solid #FFFFFF;
        margin: 0px auto;
    }

dus je hele website is maar 300px breed en gecentreerd (door de margin).
dan is het me redelijk logisch dat je iets niet over de hele breedte krijgt...

je geeft je body beter geen breedte of hoogte of iets waardoor het niet de hele pagina in neemt. Op je body kan je bvb je achtergrond instellen, als je dan een breedte of hoogte gegeven hebt dan is die achtergrond maar op een deel van de pagina...
Indien je toch maar op een deel van de pagina een achtergrond wil, gebruik dan een div

**Stijn Adams** · 03-12-2009, 14:35

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="nl" lang="nl">
<head>
<title>Stijn Adams | Internet diensten</title>
<link rel="stylesheet" type="text/css" href="opmaak.css" />
</head>
<body>
<div id="container">
<div align="center">
<div id="header"></div>
<ul id="menu">
<li><a href="#">Home</a></li>
<li><a href="#">Diensten</a></li>
<li><a href="#">Portfolio</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
<div align="center">
<div id="content">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</div>
</div>
</div>

<div id="footer" style="width: 100%"><span lang="nl-be"> </span>Design: <a href="#">Stijn Adams |
Internet diensten</a></div>
</div>
</body>
</html>

CSS:

html
{
background-color: #FFFFFF;
}
body
{
width: 1000px;
border-left: 1px solid #FFFFFF;
border-right: 1px solid #FFFFFF;
margin: 0px auto;
}
div#header
{
background-image: url('images/stijnadams.jpg');
background-repeat: repeat-x;
width: 325px;
height: 100px;
}
ul#menu
{
margin: 0px;
padding-left: 10px;
list-style: none;
height: 25px;
width: 279px;
background-color: #CBCBCB;
}
ul#menu li
{
float: left;
height: 25px;
}
ul#menu li a
{
display: block;
overflow: hidden;
height: 25px;
padding: 5px 8px 0px 8px;
font-family: Verdana;
color: #ffffff;
font-size: 11px;
text-decoration: none;
font-weight: bold;
}
ul#menu li.active a:hover
{
padding: 5px 8px 0px 8px;
background-color: #ffffff;
color: #000000;
height: 20px;
}
ul#menu li.active a
{
padding: 5px 8px 0px 8px;
background-color: #ffffff;
color: #000000;
height: 20px;
}
ul#menu li a:hover
{
padding: 5px 8px 0px 8px;
background-color: #858585;
color: #ff7e00;
height: 20px;
}
// content //
#container
{
margin: 0px auto;
}

div#contentfooter
{
padding-top: 10px;
font-family: Verdana;
font-size: 25px;
color: #F00;
font-weight: normal;
margin: 0 0 9px 0;
border-bottom: 1px dotted #333333;
}
div#footer
{
width: 89%;
background-color: #CBCBCB;
text-align: center;
padding: 2px 0px 2px 0px;
clear: both;
margin:0;
float: left;
font-family: Verdana;
font-size: 11px;
color: #ffffff;
}

div#footer a
{
color: #ff9000;
text-decoration: none;
}

Alles is zoals ik het wil.
Maar, ik wil de tekst in het midden een kleur zn lettertype geven, maar het warkt niet echt mee.
Dus: ik vraag nog eens jullie hulp!

SA

**gast8208** · 03-12-2009, 15:55

Je moet wel de #content invullen, dat heb je niet gedaan. Je kan dus bijvoorbeeld dit doen:

Code:

#content
{
       background-color: #FFFFFF;  
       color: #A52A2A;
       font-family: Verdana;
       font-size: 12px;
}

Nog even een tip, lees hier eens wat, het is wel in het engels, maar hier staat een hoop over css. http://w3schools.com/css/default.asp

Stefan

**Stijn Adams** · 03-12-2009, 16:05

@Stefan

Ik ken CSS hoor. ;) (Heb thuis een boek liggen)
Aleen, kan iemand juist even alles simpel over div, padding, margin uitleggen.
Dacht aleen als de kleur aleen goed was.
Ik had dit eerst gedaan, maar het werkte niet, eruit gehaald en dan geplaatst. ;)

Met uw aanpassing geeft het geen kik. :s
En waarom gebruik ik eigelijk overal div#blablabla en u gewoon blablabla in de CSS?

Tekst etc. in het midden plaatsen, lukt niet.