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:
css:
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&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 © 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;
}
want bij mijn IE worden de icoontjes niet weer gegeven.
)
