PDA

View Full Version : Relatively move div elements


bsmith
Oct-13-2009, 06:45 PM
Good evening everyone...i've been trying to customize my site but turns out it looks like i am making a mess of it. I tried floating my nav bar above my banner using the relative positioning and z-index in css. I got the nav to be located where i want it, but when i tried moving the remainder of my div elements up the page, i couldn't quite figure it out. Would someone mind helping me move these div elements up the page ensuring that the "stretchy" factor remains intact? thanks,

b

http://www.wrimages.smugmug.com

#my_Banner {
width: 919px;
height:178px;
margin: 0 auto;
background: url(http://wrimages.smugmug.com/photos/674571578_Cm5DJ-O.png) no-repeat;
}

#navContainer ul {
margin: 0;
margin-bottom: 120px;
margin-left: 500px;
position: relative;
z-index: 8;
padding: 0 50px;
list-style-type: none;
text-align: center;
}
#navContainer ul li {
display: inline;
}
#navContainer ul li a {
font-size: 18px;
font-family: Georgia;
text-decoration: none;
padding: .2em .3em;
border-right: 2px solid #262626;
color: #7c4141;
}
#navContainer ul li a:hover {
color: #bbbb00;
}

#navContainer .navCurrentPage:visited {color: #bbbb00 !important;}

#underline {
width: 787px;
height:8px;
margin: 0;
margin-bottom: 120px;
position: relative;
z-index: 9;
background: url(http://wrimages.smugmug.com/photos/678849608_RrMqn-O.png) no-repeat;
}

#splashImage {
width: 976px;
height:465px;
display: none;
margin: 0 auto;
border: 4px solid #262626;
background: url(http://wrimages.smugmug.com/photos/679148911_QJbsA-O-1.jpg) no-repeat;
}

bsmith
Oct-14-2009, 08:46 AM
Help a brother out. I'm sure it's a simple fix but i am just css inept.

~Brendan

Allen
Oct-14-2009, 09:07 AM
Good evening everyone...i've been trying to customize my site but turns out it looks like i am making a mess of it. I tried floating my nav bar above my banner using the relative positioning and z-index in css. I got the nav to be located where i want it, but when i tried moving the remainder of my div elements up the page, i couldn't quite figure it out. Would someone mind helping me move these div elements up the page ensuring that the "stretchy" factor remains intact? thanks,

b

http://www.wrimages.smugmug.com
... Try this. Also you need the filter for a png to display correctly in IE browsers.


#my_Banner {
width: 919px;
height:178px;
margin: 0 auto;
background: url(http://wrimages.smugmug.com/photos/674571578_Cm5DJ-O.png) no-repeat;
_background: none;
_filter:progid:DXImageTransform.Microsoft.AlphaIma geLoader (enabled=true,
sizingmethod=image, src='/photos/674571578_Cm5DJ-O.png');
}

#navContainer ul {
margin: 0 auto 20px 600px; /* top right bottom left */
position: relative;
z-index: 8;
padding: 0 50px; /* top/bottom R/L */
list-style-type: none;
text-align: center;
}

#underline {
width: 787px;
height:8px;
margin: 0 auto 20px; /* top R/L bottom */
position: relative;
z-index: 9;
background: url(http://wrimages.smugmug.com/photos/678849608_RrMqn-O.png) no-repeat;
_background: none;
_filter:progid:DXImageTransform.Microsoft.AlphaIma geLoader (enabled=true,
sizingmethod=image, src='/photos/678849608_RrMqn-O.png');
}

bsmith
Oct-14-2009, 09:11 AM
thanks, Allen. I will try this out. much appreciated.

edit: Worked like a charm--just needed to play around with the right margin settings after Allen's help. Thank you thank you.

~Brendan