Site altijd netjes midden in beeld

  • Onderwerp starter Onderwerp starter wiel
  • Startdatum Startdatum
Status
Niet open voor verdere reacties.
W

wiel

Gebruiker
Lid geworden
15 nov 2000
Berichten
203
Hey mensen,

Hoe krijg ik het voor elkaar dat de inhoud van mijn site netjes in het miden staat maar wel op een manier dat alles verder wel op zijn plek blijft staan? Dus ongeacht de resulutie moet hij in het midden gaan staan maar krijg dat gewoon niet voor elkaar. Iemand die het antwoord weet?

de site: www.divineangelstudios.com
 
Kan alleen door dit NIET te gebruiken:
HTML: 
<div style="position: absolute;

Maar met een container te werken
(en deze een vaste, bv 1000px, waarde te geven),
waarvan je de margin op auto zet.

:cool:
 
<center> site </center> plaats dit bij je script tusen de body's
 
Bedankt jongens :D Alleen ik ben echt een kei blonde dummy, hij wil nog steeds niet. Staat er iets verkeerd?

HTML: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Divine Angel Studio's</title>
</head>

<body bgcolor="#000000" background="Achtergronden/achtergrond%203.jpg"><center>
<div style="position: absolute; width: 100px; height: 100px; z-index: 2; left: 342px; top: 0px" id="laag2">
	<img border="0" src="index.jpg" width="950" height="561"></div>
<div style="position: absolute; width: 949px; height: 720px; z-index: 5; left: 343px; top: 87px" id="laag1" align="center">

	<font color="#FFFF00">

<script language="JavaScript1.2">

/*Multi image slideshow script- by javascriptkit.com
Visit JavaScript Kit ([url]http://javascriptkit.com[/url]) for script
Credit must stay intact for use*/

//#1 SPECIFY number of slideshows
var number_of_slideshows=4

//#2 SPECIFY interval between slide (2000=2 seconds)
var interval=2000

//#3 SHOULD each slide be linked to a unique URL?
var linked=1

var slideshows=new Array(number_of_slideshows)
for (i=0; i <number_of_slideshows; i++)
slideshows[i]=new Array()

//#4 SPECIFY image paths of 1st slideshow
slideshows[0][0]='Afbeeldingen/Retouched1.jpg'
slideshows[0][1]='Afbeeldingen/Retouched2.jpg'
slideshows[0][2]='Afbeeldingen/Retouched3.jpg'
slideshows[0][3]='Afbeeldingen/Retouched4.jpg'

//SPECIFY image paths of 2nd slideshow (remove if number_of_slides less than 2)
slideshows[1][0]='Afbeeldingen/Popart1.jpg'
slideshows[1][1]='Afbeeldingen/Popart2.jpg'
slideshows[1][2]='Afbeeldingen/Popart3.jpg'


//SPECIFY image paths of 3rd slideshow (remove if number_of_slides less than 3)
slideshows[2][0]='Afbeeldingen/Schets1.jpg'
slideshows[2][1]='Afbeeldingen/Schets2.jpg'
slideshows[2][2]='Afbeeldingen/Schets3.jpg'

//SPECIFY image paths of 3rd slideshow (remove if number_of_slides less than 3)
slideshows[3][0]='Afbeeldingen/Children1.jpg'
slideshows[3][1]='Afbeeldingen/Children2.jpg'
slideshows[3][2]='Afbeeldingen/Children3.jpg'

//EXTEND THIS ARRAY if more than 3 slide shows


<!--Remove the below portion if "var linked" above is set to 0-->

var slidelinks=new Array(number_of_slideshows)
for (i=0; i <number_of_slideshows; i++)
slidelinks[i]=new Array()

//#5 SPECIFY urls of 1st slideshow
slidelinks[0][0]='Retouched1.php'
slidelinks[0][1]='Retouched2.php'
slidelinks[0][2]='Retouched3.php'
slidelinks[0][3]='Retouched4.php'


//SPECIFY urls of 2nd slideshow (remove if number_of_slides=1)
slidelinks[1][0]='Popart1.php'
slidelinks[1][1]='Popart2.php'
slidelinks[1][2]='Popart3.php'


//SPECIFY urls of 3rd slideshow (remove if number_of_slides less than 3)
slidelinks[2][0]='Schets1.php'
slidelinks[2][1]='Schets2.php'
slidelinks[2][2]='Schets3.php'

slidelinks[3][0]='Children1.php'
slidelinks[3][1]='Children2.php'
slidelinks[3][2]='Children3.php'

function clickredir(){
window.location=slidelinks[maininc][subinc]
}

<!-- END removal ---------------------------------->

var maininc=0
var subinc=0

if (linked)
document.write('<a href="javascript:clickredir()"><img src="'+slideshows[0][0]+'" name="multislide" border=0></a>')
else
document.write('<img src="'+slideshows[0][0]+'" name="multislide">')

function slideit(){
subinc= (subinc<slideshows[maininc].length-1)? subinc+1: 0
document.images.multislide.src=slideshows[maininc][subinc]
}

function setslide(which){
clearInterval(runit)
maininc=which
subinc=0
runit=setInterval("slideit()",interval)
}

runit=setInterval("slideit()",interval)

</script>

	</font>

&nbsp;<p align="center">
&nbsp;<p align="center">
<font color="#003300" face="Comic Sans MS">- <a href="javascript:setslide(0)"><font color="#003300">
Retouched</font></a><br />
- <a href="javascript:setslide(1)"><font color="#003300">Popart</font></a><br />
- <a href="javascript:setslide(3)"><font color="#003300">Speciaal voor de kinderen</font></a><br />
- <a href="javascript:setslide(2)"><font color="#003300">Schets</font></a> </font>
	<p align="center">
<font face="Comic Sans MS" color="#003300">Welkom op onze site. Bij ons kun je 
terecht voor de bewerking van je foto's. Ook bieden wij kant en klare producten 
aan. Wij werken voor zowel particulieren als in samenwerking met bedrijven. 
Bijna alles is mogelijk aan bewerkingen dus als je een wens hebt of een idee 
voor je foto en je wil graag weten of het te maken is, neem dan gerust 
vrijblijvend contact met ons op. </font>
	<p align="center">
&nbsp;<p align="center">
<font face="Comic Sans MS" color="#003300">
<a href="mailto:info@divineangelstudios.com"><font color="#003300">
[email]info@divineangelstudios.com[/email]</font></a>|kvk-nummer: 17235049 | Copyright
<a href="http://www.divineangelstudios.com"><font color="#003300">
www.divineangelstudios.com</font></a> 2005-2008 All rights reserved</font><p align="center">
&nbsp;</div>
<div style="position: absolute; width: 950px; height: 523px; z-index: 3; left: 342px; top: 522px; background-color: #8BF6B0" id="laag3">
&nbsp;</div>
<div style="position: absolute; width: 521px; height: 348px; z-index: 4; left: 561px; top: 86px; background-color: #000000" id="laag4">
&nbsp;</div>
<p align="center">&nbsp;</p></center>
</body>
</html>
 
Laatst bewerkt door een moderator:
peter vazed zei:
Kan alleen door dit NIET te gebruiken:
HTML: 
<div style="position: absolute;
Klik om te vergroten...

Als je de post van Peter Vazed leest: je mag geen position:absolute gebruiken. Dit doe je wel:
HTML: 
<div style="position: absolute; (...) align="center">



:thumb:


[edit]Oh, Peter was me al voor :p [/edit]
 
Laatst bewerkt:
Ik heb een 22 inch.

Hij wil alleen nergen de site gewoon netjes altijd in het midden zetten ongeacht de resolutie. Heb hem expres 950px breed gehouden zodat hij op de meeste beeldschermen past zit en alsnog een scrolbalk aan de onderkant bij de kleinere schermen, schiet niet echt op :(
 
Het begin is er, 1 plaatje gaat nu netjes altijd in het midden staan.
 
Site altijd netjes midden in beeld deel 2

Dankzij de hulp hier is het me gelukt de site netjes in het midden te krijgen. Althans, de eerste pagina. Nu probeer ik het op pagina 2 toe te passen en opeens gaat hij rechts staan in plek van in het midden. Ben al een tijdje aan het uitproberen geweest en waarschijnlijk is het een klein foutje maar ik zie het niet. Heb hetzelfde gedaan als de eerste keer.

Dit is de code:

<html>

<head>
<meta http-equiv="Content-Language" content="nl">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Divine Angel Studio's</title>
<script type="text/javascript">
<!--
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a.indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a;}}
}
//-->
</script>
</head>

<body background="Achtergronden/achtergrond%204.jpg"><center>Staat er netjes

<p></p>

<div style="position: absolute; Deze moest ik weg halen en heb ze ook allemaal weg gehaald behalve bij het werken met lagen. Want als ik hem weg haal dan is het geen laag meer en gooit hij alles in de war. Op de begin pagina heb ik deze ook gewoon laten staan en daar doet hij het wel gewoonwidth: 950px; height: 100px; z-index: 3; background-color:#881A24" id="laag1">
<img border="0" src="Afbeeldingen/Retouched1GrootB.jpg" width="450" height="600"><br>
<font color="#170200" face="Comic Sans MS">Beweeg met de muis over de afbeelding
heen om de bewerkte foto te zien. </font>
<p>&nbsp;</p>
<p><img border="0" src="Home.jpg" width="128" height="47"></div>

<p align="center">&nbsp;</p>

</center>Staat er ook netjes</body>

</html>

Op internet staat hij op: http://www.divineangelstudios.com/Retouched1.php (kun je zelf zien wat hij doet. http://www.divineangelstudios.com heb ik op dezelfde manier gedaan en die doet het wel. :confused: Weet iemand wat er fout gaat, ik weet het gewoon echt niet meer .....
 
Beter is om het met CSS op te lossen in plaats van <center> over je hele site te zetten.

HTML: 
<html>

<head>
<meta http-equiv="Content-Language" content="nl">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Divine Angel Studio's</title>
<script type="text/javascript">
<!--
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}
//-->
</script>
<style>
#wrapper {
  margin: 0px auto;
  width: 950px;
}
</style>
</head>

<body background="Achtergronden/achtergrond%204.jpg">
<div id="wrapper">
<p></p>

<div style="height: 100px; z-index: 3; background-color:#881A24" id="laag1">
<img border="0" src="Afbeeldingen/Retouched1GrootB.jpg" width="450" height="600"><br>
<font color="#170200" face="Comic Sans MS">Beweeg met de muis over de afbeelding 
heen om de bewerkte foto te zien. </font>
<p>&nbsp;</p>
<p><img border="0" src="Home.jpg" width="128" height="47"></div>

<p align="center">&nbsp;</p>

</div>
</body>
</html>
 
Ik heb je 2 vragen samengevoegd en verplaatst naar de CSS sectie. 1 vraag over hetzelfde onderwerp is voldoende :)
 
css

Hieronder even een klein stukje van de css en html de eerste site die ik maak.

ik heb dit in mijn css staan:

#container{
width: 852px;
height: 790px;
position: absolute;
top: 10%;
left: 50%;
margin: 0px -426px;
}
Klik om te vergroten...

en dit in mijn html:
<body>
<div id="container">
</div>
</body>
Klik om te vergroten...

mijn content begint dus 10% vanaf de top gezien en ik heb het gecentreerd door left:50% en vervolgens in de margin de helft van de breedte van mijn content te pakken.
Dus als je content 950 pixels breed is dan zet je dat bij width neer en pak je in je margin de helft, dus 475px
 
Positie is nooit absoluut wanneer je wilt gaan centreren.

Gebruik gewoon de code welke ik gaf. Die geeft altijd het midden aan.
 
Oja! Thanks ik heb het meteen uitgeprobeerd en het werkt prima!
Is mij toch iets omslachtigs aangesmeerd op één of andere website :shocked:
 
Status
Niet open voor verdere reacties.
                    Steun ons                    

Nieuwste berichten

Terug
Bovenaan Onderaan