onderin, gecentreerd en meerdere div's

Status
Niet open voor verdere reacties.

RowanP

Gebruiker
Lid geworden
21 feb 2007
Berichten
78
ik ben aan mijn nieuwe portfolio bezig en het leek me een gaaf idee om er een soort van OS twist aan te geven.
Daarom wil ik zwevende divs (verplaatsbaar) en een soort van dock.
Tot op heden lukt alles, maar ik zit met een probleem...

ik wil graag mijn dock onderin het scherm in het midden hebben, maar dat lukt niet. Mijn div's staan wel onderin en in het midden (de iconen zijn div's vanwege de javascriptfuncties), maar opgestapeld. De bedoeling is dus dat ze naast elkaar komen.

website: http://rowanpreesman.nl/v3/

de code is nog vrij rommelig, maar dat komt omdat ik er nog aan werk ;)

wat ik getracht heb:
Ik heb ze allemaal in een aparte div gegooid "navigation" die absolute is en gecentreerd. Daar heb ik dus de andere divs in gegooid. Nou kan ik de "icoondivs" met float:left en position:relative best naast elkaar krijgen, maar dan komen ze weer helemaal links terecht.

Ik hoop dat iemand hier een oplossing voor heeft :)

index:
HTML:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<link href="css/silver/style.css" rel="stylesheet" type="text/css">
	<script src="js/jquery-latest.js"></script>
	<script src="js/effects.core.js"></script>
	<script src="js/effects.bounce.js"></script>
	<script src="js/ui.core.js"></script>
	<script src="js/ui.draggable.js"></script>
<title>R O W A N P R E E S M A N - clean&amp;simple</title>
<META NAME="description" lang="nl" CONTENT="Dit is de portfolio van Rowan Preesman">
<META NAME="description" lang="en" CONTENT="This is the portfolio of Rowan Preesman">
<META NAME="keywords" lang="nl" CONTENT="Portfolio Design Rowan Preesman HTML website css style php">
<META NAME="keywords" lang="en" CONTENT="Portfolio Design Rowan Preesman HTML website css style php">
    <script type="text/javascript">
  // blok bounce
  
  $(document).ready(function(){
    
    $(".blok").click(function () {
      $(this).effect("bounce", { times: 3 }, 300);
    })
	
	//blok toggle
	
	.end()
	$(".blok").click(function () {
      $(".block").toggle("", {}, 1000);
    })
   .end();

  });
  
  //block drag 
  
    $(document).ready(function(){
    $(".block").draggable();
  });
  
  //home toggle
  
    $(document).ready(function(){
    
    $("a.home").click(function () {
      $(".block").toggle("", {}, 1000);
    });
	
  });
  
  // bio
  
  $(document).ready(function(){
    
    $(".bio").click(function () {
      $(this).effect("bounce", { times: 3 }, 300);
    })
	
	.end()
	$(".bio").click(function () {
      $(".block").toggle("", {}, 1000);
    })
   .end();

  });
  
    // work
  
  $(document).ready(function(){
    
    $(".work").click(function () {
      $(this).effect("bounce", { times: 3 }, 300);
    })
	
	.end()
	$(".work").click(function () {
      $(".block").toggle("", {}, 1000);
    })
   .end();

  });
  
      // download
  
  $(document).ready(function(){
    
    $(".download").click(function () {
      $(this).effect("bounce", { times: 3 }, 300);
    })
	
	.end()
	$(".download").click(function () {
      $(".block").toggle("", {}, 1000);
    })
   .end();

  });
  
        // mail
  
  $(document).ready(function(){
    
    $(".mail").click(function () {
      $(this).effect("bounce", { times: 3 }, 300);
    })
	
	.end()
	$(".mail").click(function () {
      $(".block").toggle("", {}, 1000);
    })
   .end();

  });
    </script>
	<style>
	.blok { 
	margin: 0px;
	width: 100px;
	height: 80px;
	background: green;
	border: 1px solid black;
	position: relative;
	top: 20px;
	}
	
	.block { 
    border: 2px solid #0090DF;
    background-color: #68BFEF;
    width: 150px; 
    height: 70px;
    margin: 10px; 
	}
  </style>
</head>

<body>
<div id="container">
	blablabla
	<!-- <div class="blok"></div> --><div class="block"></div>
	
	<div id="navigation" align="center"><div class="bio"></div><div class="work"></div><div class="download"></div><div class="mail"></div></div>
	<div id="clearcopyright"></div>
</div>
<div id="copyright">
	<div id="sitemap"><a class="home">HOME</a> <font color="#e1e1e1">/</font> BIO <font color="#e1e1e1">/</font> WORK <font color="#e1e1e1">/</font> DOWNLOADS <font color="#e1e1e1">/</font> CONTACT</div>
	<div id="rights">Copyright &copy; 2006-2008 Rowan Preesman. All rights reserved</div>
</div>
</body>
</html>

css:
Code:
html, body {
	margin: 0;
	padding: 0;
	height: 100%;
	width: 100%;
	background: #bd2323 url(../../images/bg_red.gif) no-repeat;
	font: normal small Verdana, Arial, Helvetica, sans-serif;
	color: #000000;
}

#container {
	position: relative;
	min-height:100%;
	margin-bottom:-20px;
	height:auto;
	min-width:100%;
}

* html #container {height:100%; width:100%;} /* for ie to resize */

/* Navigation */

#navigation {
	position:absolute;
	bottom: 20px;
	margin-right: auto;
	margin-left: auto;
	width: 100%;
}

.bio {
	width: 48px;
	height: 48px;
  /* Mozilla ignores crazy MS image filters, so it will skip the following */
    filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale, src='images/bio.png');
}

/* IE ignores styles with [attributes], so it will skip the following. */
.bio[class] {
  background-image:url(../../images/bio.png);
}

	
.work {
	width: 48px;
	height: 48px;
  /* Mozilla ignores crazy MS image filters, so it will skip the following */
    filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale, src='images/work.png');
}

/* IE ignores styles with [attributes], so it will skip the following. */
.work[class] {
  background-image:url(../../images/work.png);
}


.download {
	width: 48px;
	height: 48px;
  /* Mozilla ignores crazy MS image filters, so it will skip the following */
    filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale, src='images/download.png');
}

/* IE ignores styles with [attributes], so it will skip the following. */
.download[class] {
  background-image:url(../../images/download.png);
}


.mail {
	width: 48px;
	height: 48px;
  /* Mozilla ignores crazy MS image filters, so it will skip the following */
    filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale, src='images/mail.png');
}

/* IE ignores styles with [attributes], so it will skip the following. */
.mail[class] {
  background-image:url(../../images/mail.png);
}

/* Copyright */

#clearcopyright{
	clear:both;
	height:20px;
}

#copyright {
	width: 100%;
	height: 20px;
	padding: 0;
	background: #FFFFFF url(../../images/bg_copyright.gif) repeat-x ;
	position: relative;
	bottom: 0px; 
	color: #b3b3b3;
	font-size: 11px;
}

#sitemap {
	padding: 5px 0 0 5px;
	top: 0px;
	float: left;
}

a.home {
	text-decoration: none;
}

a.home:hover {
	color: #696969;
	text-decoration: none;
}

#rights {
	padding: 5px 5px 0 0;
	text-align: right;
	float: right;
}
 
ik ben even verder gaan klooien en heb gekeken of het misschien niet mogelijk was om met een table te werken.
Nu werkt hij helemaal goed in FF, maar helaas geeft IE nog kuren.

bij IE zet hij hem alsnog aan de zijkant en verspringt hij naar rechts als je op de icoontjes drukt.

Weet iemand hoe dit opgelost kan worden?
voorbeeld: http://rowanpreesman.nl/v3/

index:
HTML:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<link href="css/silver/style.css" rel="stylesheet" type="text/css">
	<script src="js/jquery-latest.js"></script>
	<script src="js/effects.core.js"></script>
	<script src="js/effects.bounce.js"></script>
	<script src="js/ui.core.js"></script>
	<script src="js/ui.draggable.js"></script>
<title>R O W A N P R E E S M A N - clean&amp;simple</title>
<META NAME="description" lang="nl" CONTENT="Dit is de portfolio van Rowan Preesman">
<META NAME="description" lang="en" CONTENT="This is the portfolio of Rowan Preesman">
<META NAME="keywords" lang="nl" CONTENT="Portfolio Design Rowan Preesman HTML website css style php">
<META NAME="keywords" lang="en" CONTENT="Portfolio Design Rowan Preesman HTML website css style php">
    <script type="text/javascript">
  // blok bounce
  
  $(document).ready(function(){
    
    $(".blok").click(function () {
      $(this).effect("bounce", { times: 3 }, 300);
    })
	
	//blok toggle
	
	.end()
	$(".blok").click(function () {
      $(".block").toggle("", {}, 1000);
    })
   .end();

  });
  
  //block drag 
  
    $(document).ready(function(){
    $(".block").draggable();
  });
  
  //home toggle
  
    $(document).ready(function(){
    
    $("a.home").click(function () {
      $(".block").toggle("", {}, 1000);
    });
	
  });
  
  // bio
  
  $(document).ready(function(){
    
    $(".bio").click(function () {
      $(this).effect("bounce", { times: 3 }, 300);
    })
	
	.end()
	$(".bio").click(function () {
      $(".block").toggle("", {}, 1000);
    })
   .end();

  });
  
    // work
  
  $(document).ready(function(){
    
    $(".work").click(function () {
      $(this).effect("bounce", { times: 3 }, 300);
    })
	
	.end()
	$(".work").click(function () {
      $(".block").toggle("", {}, 1000);
    })
   .end();

  });
  
      // download
  
  $(document).ready(function(){
    
    $(".download").click(function () {
      $(this).effect("bounce", { times: 3 }, 300);
    })
	
	.end()
	$(".download").click(function () {
      $(".block").toggle("", {}, 1000);
    })
   .end();

  });
  
        // mail
  
  $(document).ready(function(){
    
    $(".mail").click(function () {
      $(this).effect("bounce", { times: 3 }, 300);
    })
	
	.end()
	$(".mail").click(function () {
      $(".block").toggle("", {}, 1000);
    })
   .end();

  });
    </script>
	<style>
	.blok { 
	margin: 0px;
	width: 100px;
	height: 80px;
	background: green;
	border: 1px solid black;
	position: relative;
	top: 20px;
	}
	
	.block { 
    border: 2px solid #0090DF;
    background-color: #68BFEF;
    width: 150px; 
    height: 70px;
    margin: 10px; 
	}
  </style>
</head>

<body>
<div id="container">
	blablabla
	<!-- <div class="blok"></div> --><div class="block"></div>
	
	<div id="navigation" align="center"><table align="center"><tr><td><div class="bio"></div></td><td><div class="work"></div></td><td><div class="download"></div></td><td><div class="mail"></div></td></tr></table></div>
	<div id="clearcopyright"></div>
</div>
<div id="copyright">
	<div id="sitemap"><a class="home">HOME</a> <font color="#e1e1e1">/</font> BIO <font color="#e1e1e1">/</font> WORK <font color="#e1e1e1">/</font> DOWNLOADS <font color="#e1e1e1">/</font> CONTACT</div>
	<div id="rights">Copyright &copy; 2006-2008 Rowan Preesman. All rights reserved</div>
</div>
</body>
</html>

css
Code:
html, body {
	margin: 0;
	padding: 0;
	height: 100%;
	width: 100%;
	background: #bd2323 url(../../images/bg_red.gif) no-repeat;
	font: normal small Verdana, Arial, Helvetica, sans-serif;
	color: #000000;
}

#container {
	position: relative;
	min-height:100%;
	margin-bottom:-20px;
	height:auto;
	min-width:100%;
}

* html #container {height:100%; width:100%;} /* for ie to resize */

/* Navigation */

#navigation {
	position:absolute;
	bottom: 20px;
	text-align: center;
}

.navigation {
	width: 192px;
	text-align: center;
}

.bio {
	width: 48px;
	height: 48px;
  /* Mozilla ignores crazy MS image filters, so it will skip the following */
    filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale, src='images/bio.png');
}

/* IE ignores styles with [attributes], so it will skip the following. */
.bio[class] {
  background-image:url(../../images/bio.png);
}

	
.work {
	width: 48px;
	height: 48px;
  /* Mozilla ignores crazy MS image filters, so it will skip the following */
    filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale, src='images/work.png');
}

/* IE ignores styles with [attributes], so it will skip the following. */
.work[class] {
  background-image:url(../../images/work.png);
}


.download {
	width: 48px;
	height: 48px;
  /* Mozilla ignores crazy MS image filters, so it will skip the following */
    filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale, src='images/download.png');
}

/* IE ignores styles with [attributes], so it will skip the following. */
.download[class] {
  background-image:url(../../images/download.png);
}


.mail {
	width: 48px;
	height: 48px;
  /* Mozilla ignores crazy MS image filters, so it will skip the following */
    filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale, src='images/mail.png');
}

/* IE ignores styles with [attributes], so it will skip the following. */
.mail[class] {
  background-image:url(../../images/mail.png);
}

/* Copyright */

#clearcopyright{
	clear:both;
	height: 20px;
}

#copyright {
	width: 100%;
	height: 20px;
	padding: 0;
	background: #FFFFFF url(../../images/bg_copyright.gif) repeat-x ;
	position: relative;
	bottom: 0px; 
	color: #b3b3b3;
	font-size: 11px;
}

#sitemap {
	padding: 5px 0 0 5px;
	top: 0px;
	float: left;
}

a.home {
	text-decoration: none;
}

a.home:hover {
	color: #696969;
	text-decoration: none;
}

#rights {
	padding: 5px 5px 0 0;
	text-align: right;
	float: right;
}
 
@Rowan,
Kijk eens naar onderstaande code, ik heb de css in het html document gezet, was voor mij makkelijker werken.
Als je dit test moet je ook nog het url path in de css veranderen van .bio .work .download en .mail want deze verwijzen nu naar images .Bij u is dat ../../images/download.png
De fakediv is om het verspringen tegen te gaan in IE
Uw code was nogal rommelig, dus ik heb die wat opgekuist :D
Succes
Poppoll
Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<link href="css/silver/style.css" rel="stylesheet" type="text/css">
	<script src="js/jquery-latest.js" type="text/javascript"></script>
	<script src="js/effects.core.js" type="text/javascript"></script>
	<script src="js/effects.bounce.js" type="text/javascript"></script>
	<script src="js/ui.core.js" type="text/javascript"></script>
	<script src="js/ui.draggable.js" type="text/javascript"></script>
<title>R O W A N P R E E S M A N - clean&amp;simple</title>
<META NAME="description" lang="nl" CONTENT="Dit is de portfolio van Rowan Preesman">
<META NAME="description" lang="en" CONTENT="This is the portfolio of Rowan Preesman">
<META NAME="keywords" lang="nl" CONTENT="Portfolio Design Rowan Preesman HTML website css style php">
<META NAME="keywords" lang="en" CONTENT="Portfolio Design Rowan Preesman HTML website css style php">
    <script type="text/javascript">
  // bio
   $(document).ready(function(){
      $(".bio").click(function () {
      $(this).effect("bounce", { times: 3 }, 300);
	  $("#bioblock").toggle();
	  $("#bioblock").draggable();
    })
	.end()
	});
  
    // work
   $(document).ready(function(){
      $(".work").click(function () {
      $(this).effect("bounce", { times: 3 }, 300);
	  $("#workblock").toggle();
	  $("#workblock").draggable();
    })
	.end()
	 });
  
    // download
    $(document).ready(function(){
      $(".download").click(function () {
      $(this).effect("bounce", { times: 3 }, 300);
	  $("#downloadblock").toggle();
	   $("#downloadblock").draggable();
    })
	
	.end()
	
  });
  
    // mail
  
  $(document).ready(function(){
      $(".mail").click(function () {
      $(this).effect("bounce", { times: 3 }, 300);
	  $("#mailblock").toggle();
	  $("#mailblock").draggable();
    })
	
	.end()
	

  });
    </script>
<style type="text/css">
html, body {
	margin: 0;
	padding: 0;
	height: 100%;
	width: 100%;
	background: #bd2323 url(images/bg_red.gif) no-repeat;
	font: normal small Verdana, Arial, Helvetica, sans-serif;
	color: #000000;
}

#container {
	min-height:100%;
	margin-bottom:-20px;
	height:auto;
	min-width:100%;
}

* html #container {height:100%; width:100%;} /* for ie to resize */

/* Navigation */

#navigation {
	position:absolute;
	bottom: 20px;
	width: 100%;
	clear: both;
}
.bio {
	 /* Mozilla ignores crazy MS image filters, so it will skip the following */
    filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale, src='images/bio.png');
}
/* IE ignores styles with [attributes], so it will skip the following. */
.bio[class] {
  background-image:url(images/bio.png);
}
.work {
	 /* Mozilla ignores crazy MS image filters, so it will skip the following */
    filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale, src='images/work.png');
}
/* IE ignores styles with [attributes], so it will skip the following. */
.work[class] {
  background-image:url(images/work.png);
}
.download {
	 /* Mozilla ignores crazy MS image filters, so it will skip the following */
    filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale, src='images/download.png');
}
/* IE ignores styles with [attributes], so it will skip the following. */
.download[class] {
  background-image:url(images/download.png);
}
.mail {
	 /* Mozilla ignores crazy MS image filters, so it will skip the following */
    filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale, src='images/mail.png');
}
/* IE ignores styles with [attributes], so it will skip the following. */
.mail[class] {
  background-image:url(images/mail.png);
}
/* Copyright */
#clearcopyright{
	clear:both;
	height:20px;
}
#copyright {
	width: 100%;
	height: 20px;
	padding: 0;
	background: #FFFFFF url(images/bg_copyright.gif) repeat-x ;
	bottom: 0; 
	color: #b3b3b3;
	font-size: 11px;
}
#sitemap {
	padding: 5px 0 0 5px;
	top: 0px;
	float: left;
	color: #b3b3b3
}
a, a:visited {text-decoration: none; color: #b3b3b3}
a:hover {color: #696969;text-decoration: none;}

#rights {
	padding: 5px 5px 0 0;
	text-align: right;
	float: right;
}
#fakeblock { 
	margin: 0px;
	width: 1px;
	height: 1px;
	top: 20px;
	}
#bioblock { 
    border: 2px solid #0090DF;
    background-color: #68BFEF;
    width: 400px; 
    height: 300px;
    top: 50px;
	left:150px;
	display:none;
	position:absolute
	}
#workblock { 
	border: 1px solid black;
	background: green;
	width: 400px;
	height: 300px;
	top: 60px;
	left:160px;
	display:none;
	position:absolute
	}
#downloadblock { 
	border: 1px solid black;
	background: #fff;
	width: 400px;
	height: 300px;
	top: 70px;
	left:170px;
	display:none;
	position:absolute
	}
#mailblock { 
	border: 1px solid black;
	background: #000;
	width: 400px;
	height: 300px;
	top: 80px;
	left:180px;
	display:none;
	position:absolute
	}
#center {width: 200px; margin: 0 auto;}
.bio, .work, .download, .mail {width:50px; height:50px;float:left;}	
  </style>
</head>

<body>
<div id="container">
	blablabla
	<div id="fakeblock"></div>
	<div id="bioblock"></div>
	<div id="workblock"></div>
	<div id="downloadblock"></div>
	<div id="mailblock"></div>
	<div id="navigation">
	<div id="center"><div class="bio"></div><div class="work"></div><div class="download"></div><div class="mail"></div></div></div>
	<div id="clearcopyright"></div>
</div>
<div id="copyright">
	<div id="sitemap"><a href="#">HOME</a> / <a href="#">BIO</a> / <a href="#">WORK</a> / <a href="#">DOWNLOADS</a> / <a href="#">CONTACT</a> </div>
	<div id="rights">Copyright &copy; 2006-2008 Rowan Preesman. All rights reserved</div>
</div>
</body>
</html>
 
bedankt voor je hulp poppoll!
Ja ik weet dat hij nogal rommelig was, ik begin altijd met opruimen als ik de "template" af heb. Bedankt dat je me daarin ook geassisteerd hebt ;)

er is alleen wel een probleem :( want bij mijn IE worden de icoontjes niet weer gegeven.
Verder is hij helemaal top in FF! (waarom stapte niet gewoon heel de wereld van IE af:confused:)

Ik zie ook dat je alvast de aparte blokken hebt gemaakt:thumb:, had niet gehoeven, maar wederom heb je me weer tijd bespaard aangezien ik dat hierna ging doen!

(oh en de plaatjes waren 48x48px dus dat heb ik alvast even aangepast:D)
 
Rowan,
Vraag ik me ook wel eens af wat betreft FF.

De code is getest in IE6 op XP en IE7 met Vista beiden werkende.

Met welke IE en welk besturingssyteem test jij??

Het zal waarschijnlijk hier aan liggen:
Code:
.download {
	  /* Mozilla ignores crazy MS image filters, so it will skip the following */
    filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale, [COLOR="Blue"]src='images/download.png');[/COLOR]
}

/* IE ignores styles with [attributes], so it will skip the following. */
.download[class] {
  [COLOR="Red"]background-image:url(../../images/download.png);[/COLOR]
}
Het blauwe moet je behouden.
Het rode moet je wijzigen.
PP
 
Laatst bewerkt:
yes hij doet t!
Ik had er nog aan gedacht aangezien dat het verschil tussen IE en FF was, maar het leek me onlogisch dat die zonder ../../ moest.

Bedankt voor de goede hulp!:thumb:

status verandert naar: opgelost
 
Status
Niet open voor verdere reacties.
Terug
Bovenaan Onderaan