CSS absolute position

  • Onderwerp starter Onderwerp starter bn2vs
  • Startdatum Startdatum
Status
Niet open voor verdere reacties.
bn2vs

bn2vs

Terugkerende gebruiker
Lid geworden
18 aug 2007
Berichten
1.705
Ik heb een pagina met daarop een aantal afbeeldingen met absolute positie.
Op de pagina zelf staat alles aan de linkerkant.

De inhoud moet echter gecentreerd staan, en de oplossing die ik ervoor gebruiket was een frameset met cols="*,400,*", maar ik wil het nu zonder frames doen.

ik heb geprobeerd alles in een <div> te steken, die ook een eigen positie heefd, wat lukt voor een resolutie, maar niet voor meerdere. is er een manier om de positie afhankelijk te maken van de schermbrete?
 
bn2vs zei:
is er een manier om de positie afhankelijk te maken van de schermbrete?
Klik om te vergroten...

Ja, je kunt een waarde in procenten invullen i.p.v. in pixels. Bijvoorbeeld:
PHP: 
#plaatje	{ position: absolute;
	            top: 10px;
	            left: 10%; }

:)
 
om te centreten zoe ik dan iets in deze aard moeten doen:

left: 50% - (brete box) / 2;

is dat mogelijk, en zoja hoe?
 
Absolute is geen goed idee.
Relative werkt beter.
Maar werk met vaste waardes, kom je minder problemen tegen.

Heb je wel problemen,
google dan op
float en clear.
De meest gebruikte opties in het maken van een layout met Div's

Voorbeeldje gecentreerd:
HTML: 
		 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
     "http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd">
<html>
	<head>
		<title>
			Pan's Trading Hawaii
		</title>
		
		<style type="text/css">
p {font-family: arial;
color: #000000; 
padding: 13px;
}
A:link
{ text-decoration: underline; color:#000066; }
A:visited
{ text-decoration: underline; color:#000066; }
A:active
{ text-decoration: underline; color:#000066; }
A:hover
{ text-decoration: underline; color:#000066;}


img {
display:block;
}

#wrap {
    background:#CCCC99;
    margin:0 auto;
    width:846px;
     }

body 
{ margin-top: 0;
  margin-bottom: 0;
  margin-left: 0;
  margin-right: 0;
  padding-left: 0;
  padding-right: 0;
  background:#FFFFFF;
background-image: url(http://www.arjatex.nl/images/1-silk-blue-background.jpg);
background-repeat: no repeat;
background-attachment: fixed;

}

#header {	
  background:#000000;
  margin: 0px;
  padding: 0px;
  height: 200px;
}
#menu {
  width: 846px;
  background:#000000;
  padding: 0px;
  height: 100px;
}
#center {
  width:495px;
  background-image: url(http://www.pans-trading.com/centerbg.jpg);
 float: left;
   height: 500px;
  padding: 50px;
}
#left {
  float: left;
  width: 125px;
  background:#000000;
  padding: 0px;
  height: 600px;
}
#right {
  float: right;
  width: 125px;
  background:#000000;
  padding: 0px;
  height: 600px;
}
#footer {
    clear:both;
    }


</style>
	</head>
	
	<body>
		
		<div id="wrap">
			
			<div id="header">
					<div align="center"><img src="http://www.pans-trading.com/banner2.jpg" alt="a">	</div>
				
			</div>
			
			<div id="menu">
				
				<div align="center">
					<IMG SRC="http://www.pans-trading.com/header.jpg" USEMAP="#1" BORDER="0" alt="a">
					<MAP NAME="1">
						<AREA SHAPE="RECT" COORDS=" 159,  11,  285,  53" HREF="index.html" TARGET="_self" alt="a">
						<AREA SHAPE="RECT" COORDS=" 304,  46,  469,  89" HREF="products.html" TARGET="_self" alt="a">
						<AREA SHAPE="RECT" COORDS="484,  14,  679,  70" HREF="company.html" TARGET="_self" alt="a">
						<AREA SHAPE="DEFAULT" NOHREF alt="a">
						<!--  Image map created with Meracl ImageMap Generator, get it for free at http://come.to/meracl  -->
					</MAP>
				</div>
					</DIV>
				
				<div id="left"><div align="center"><img src="http://www.pans-trading.com/left.jpg" alt="a"></div>
					
				</div>
				<div id="center">
											
				</div>
				
				<div id="right">
					<div align="center"><img src="http://www.pans-trading.com/right.jpg" alt="a">	</div>
				</div>
<div style="clear:both;"></div><!-- added a clear DIV -->
				<div id="footer">
					<div align="center"><img src="http://www.pans-trading.com/footer.jpg" alt="a"></div>
				</div>
		
			</div>		<br>
    <a href="http://validator.w3.org/check?uri=referer"><img  src="http://www.w3.org/Icons/valid-html401-blue" alt="Valid HTML 4.01 Transitional" height="31" width="88"></a>
	
	</body>
</html>

Gooi je ontwerp ALTIJD in
http://validator.w3.org/

:cool:
 
Ik heb nu deze code, en die werk perfect voor een div met id 'myDiv' :D

PHP: 
<script>
var winW = 630, winH = 460;
if (parseInt(navigator.appVersion)>3)
	{
	if (navigator.appName=="Netscape")
		{
		winW = window.innerWidth; winH = window.innerHeight;
		}
	if (navigator.appName.indexOf("Microsoft")!=-1)
		{
		winW = document.body.offsetWidth; winH = document.body.offsetHeight;
		} 
	}
document.getElementById('myDiv').style.position='absolute';
document.getElementById('myDiv').style.left=(winW - 360)/2;
</script>
 
als functie:

function centerDiv(elementName, elementWidth)
{
var winW = 630, winH = 460;
if (parseInt(navigator.appVersion)>3)
{
if (navigator.appName=="Netscape")
{
winW = window.innerWidth; winH = window.innerHeight;
}
if (navigator.appName.indexOf("Microsoft")!=-1)
{
winW = document.body.offsetWidth; winH = document.body.offsetHeight;
}
}
document.getElementById(elementName).style.position='absolute';
document.getElementById(elementName).style.left=(winW - elementWidth)/2;
}


centerDiv('myDiv',360);
 
Status
Niet open voor verdere reacties.
                    Steun ons                    

Nieuwste berichten

Terug
Bovenaan Onderaan