Border & hader plaatsen

[Anton0wns]

hey

ik heb op men site een border aangemaakt maar nu wil ik deze in het midde van men site plaatsen hier is men css van de border genaamt box :

"#box
	{
	position: relative;
	margin-left: auto;
	margin-right: auto;	
	margin-top: 3em;
	padding: 0;
	text-align: left;
	width:80%;				/* <-- use this to tie width to viewport size */
	width: 55em;				/* <-- use this for a set width */
	background-color: #eeeeee;;
	}
 	
#content
	{
	padding:3em;
	}

#content h1
	{
	color:#0354c2;
	font-weight: bold;
	font-size: 1.2em;
	font-family: helvetica, geneva, arial, sans-serif;
	}
		
#content p
	{
	color:#3b3b3b;
	font-size: 1em;
	line-height: 1.3em;
	font-family: arial, helvetica, sans-serif;
	}
		
/* ---=== border code follows ===--- */
/*
	tlc = top left corner
	trc = top right corner
	blc = bottom left corner
	brc = bottom right corner
	lb = left border
	rb = right border
	tb = top border
	bb = bottom border 
*/

#tlc, #trc, #blc, #brc
	{
	background-color: transparent;
	background-repeat: no-repeat;
	}

#tlc
	{
	background-image:url(images/tlc.gif);
	background-position: 0% 0%;
	}

#trc
	{
	background-image:url(images/trc.gif);
	background-position: 100% 0%;
	}
	
#blc
	{
	background-image:url(images/blc.gif);
	background-position: 0% 100%;
	}

#brc
	{
	background-image:url(images/brc.gif);
	background-position: 100% 100%;
	}

#tb, #bb
	{
	background-color: transparent;
	background-repeat: repeat-x;
	}
			
#tb
	{
	background-image:url(images/tb.gif);
	background-position: 0% 0%;
	}

#bb
	{
	background-image:url(images/bb.gif);
	background-position: 50% 100%;
	}
	
#rb
	{
	background-image:url(images/r.gif);
	background-position: 100% 0%;
	background-repeat: repeat-y;
	}

#lb
	{
	background-image:url(images/l.gif);
	background-position: 0% 100%;
	background-repeat: repeat-y;
	}"

en dat staat nu nog aan de linker kant ik wil dar het altijd in het midde staat en mee schuift als je je browser verkleind

en ook bij de header : "#header {
background-image:url('images/header.png');
position : absolute;
z-index : 0;
margin-left: 0px;
margin-top: 0px;
margin-bottom:0px;
padding:0px;
width: 448px;
height: 113px;
}"

wie kan me helpen ?

 

[Anton0wns]

ja en : position: relative;

had ik al geprobeerd maar werkt helaas niet...

 

[peter200]

Hallo Anton,

Voor centeren van bijv div's gebruik ik geen css maar align="center" in de html code. Voorbeeld:
<div align="center" id="header">Header</div>

Mvg,
Peter

 

[csshunter]

Hoi Anton,
Ik zou geen <div align="center"> gebruiken: want dat hoeft voor moderne browsers niet meer, en is al jaar en dag (hé, precies 10 jaar geleden) "deprecated html" (afgekeurde html). - Deze links gaan naar de officiële site van w3.org, de organisatie die vaststelt wat de richtlijnen zijn; alles is in het webjargon-Engels (en is niet altijd zo eenvoudig te snappen, maar voor het vervolg is dat niet nodig).
Als je een site met align="center" er in controleert met de html-validator van W3C, geeft deze dan ook een foutmelding (en behalve voor de #header krijg je ook niet het effect dat je bedoelt).

Tegenwoordig doen we het met:

[FONT="Courier New"][SIZE="2"]#box { 
   margin-left: auto; 
   margin-right: auto;
   }
en
#header {
   margin-left: auto; 
   margin-right: auto;
   }[/SIZE][/FONT]

Door het "auto" verdeelt de browser keurig het van de opgegeven breedte overgebleven deel in twee automatisch even grote partjes links en rechts naast die breedte.

Nu staat dat eigenlijk al in de css van je #box, maar daarmee is iets anders aan de hand. Het zit 'm in de breedte. Er staat:

[FONT="Courier New"][SIZE="2"]width: 80%;    /* <-- use this to tie width to viewport size */
width: 55em;   /* <-- use this for a set width */[/SIZE][/FONT]

In het Nederlands is dat:

[FONT="Courier New"][SIZE="2"]width: 80%;    /* <-- gebruik dit om de breedte te verbinden aan het beeldscherm-formaat */
width: 55em;   /* <-- gebruik dit voor een vastliggende breedte */[/SIZE][/FONT]

Er gebeuren hier twee dingen:

• Er staan twee bevelen voor de breedte: eerst moet die op 80% gezet worden, en in de volgende regel moet die op 55em gezet worden.
  Nu is het zo, dat in css geldt: "de laatste regel wint". Er wordt dus net gedaan of de breedte van 80% van het beeldscherm niet opgegeven was, en alleen de 55em.
• Er staan hier twee soorten maten.
  De 80% is het percentage van de breedte van het beeldscherm. Maar de 55em is een maat die in verhouding staat tot het formaat van de letters, en die staan los van de breedte van het scherm!

Als 55em breedte wint, gaat de pagina in- of uitzoomen als je de lettergrootte verandert in de browser. Dat gaat goed (alles blijft in het midden), totdat de beschikbare beeldscherm-breedte op is. Kom je daar overheen, dan past het er niet meer op, en krijg je onderaan een links-rechts schuifbalk...

Conclusie: wis het regeltje van de 55em, dan wordt de breedte altijd 80% van het scherm.

Verder hoef je niet een speciale #box om alles heen te zetten voor het centreren. Je kunt het ook gewoon regelen met de stijl van de body. Als je "buiten de pagina" een achtergrondkleur (of een achtergrond-plaatje) wilt hebben, dan kan je dit met een stijl html { background-color: ....; } enz. instellen.

• Een voorbeeld voor 80% breedte.
• En ook een voorbeeld van 55em breedte.

Als je in de broncode van deze pagina's kijkt, zie je precies wat de gebruikte css is.

Succes!
CSShunter