...

View Full Version : absolute positioning causing list items to overlap



johnmerlino
11-19-2009, 12:16 AM
Hey all,

absolute positioning is causing the list items (which contain buttons) to overlap, so the buttons are now stacked on top of each other. What I really want is the buttons to sit next to each other, but display:inline is not working with the absolute positioning:


<style type="text/css">
<!--
#page_container {
width: 980px;
background: url(bg-tile.png) repeat-y;
background-color: #fff;
}

#page_container h2 {
background: url(bg-top.png) no-repeat left top;
padding-top: 200px;
}

#page_container .last {
background: url(bg-bottom.png) no-repeat left bottom;
padding-top: 10px;
padding-bottom: 10px;
color: #fff;
}

#page_container h2, #page_container .last, p {
padding-left: 20px;
padding-right: 20px;
}

#navlinks ul {
position: relative;
}

#navlinks li {
display: inline;
position: absolute; top:120px;
float: left;
}

-->
</style>

<body>
<div id="navlinks">
<ul>
<li><img src="l-button.png" /></li>
<li><img src="md-button.png" /></li>
<li><img src="r-button.png" /></li>
</ul>
</div>
<div id="page_container">
<h2>Welcome</h2>
<p>RoR home; full stack, Web application framework optimized for sustainable programming productivity, allows writing sound code by favoring convention over RoR home; full stack, Web application framework optimized for sustainable programming productivity, allows writing sound code by favoring convention over RoR home; full stack, Web application framework optimized for sustainable programming productivity, allows writing sound code by favoring convention over RoR home; full stack, Web application framework optimized for sustainable programming productivity, allows writing sound code by favoring convention over </p>
<p class="last">Copyright</p>
</div>
</body>


Any advice would be greatly appreciated!

Excavator
11-19-2009, 12:23 AM
Hello johnmerlino,
When you ap your li items top:120px; they assume left:0;
You will either need to give each li an id/class and postion it top and left or, even better, don't use ap at all.

Lots of menu examples here. (http://nopeople.com/design/CSS%20tips/index.html)


.

johnmerlino
11-19-2009, 12:53 AM
If I don't apply absolute positioning, then the relative positioning pushes the entire div container down from the top of the page.

drhowarddrfine
11-19-2009, 01:11 AM
Then display the ul absolutely but remove ap from the li

johnmerlino
11-19-2009, 06:37 PM
Hey all,

Well, there is a problem when I apply the absolute positioning to the ul and remove it from the li. When I resize the screen, everything adjusts, but the list elements remain fixed to the page because the parent is now the body. I would like the list to resize along with the rest of the page when resizing the screen. Thanks for all your advice.

johnmerlino
11-19-2009, 06:51 PM
Nevermind, I just added a div around it to constrain it in place. Thanks for your replies.

Excavator
11-19-2009, 06:52 PM
Hey all,

Well, there is a problem when I apply the absolute positioning to the ul and remove it from the li. When I resize the screen, everything adjusts, but the list elements remain fixed to the page because the parent is now the body. I would like the list to resize along with the rest of the page when resizing the screen. Thanks for all your advice.

I'm still going with my original suggestion that ap is not needed here. Did you look at those menu examples I linked you to?

If you still have your ul inside #navlinks like the code you originally posted, making #navlinks position relative will make your #navlinks ul take it's position from #navlinks. Did that make any sense at all?
Like this -
#navlinks {
position: relative;
}



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum