Help me position elements in my div please
Regular
Posted: Fri, 2008-05-16 19:47
Hi Guys,
Sorry for a duh question, but can someone guide me into how I can position my buttons as per my image. I have posted the code I have created so far, but all the position, margins are not working - perhaps I'm using them incorrectly.
Thankyou in advance.
| Attachment | Size |
|---|---|
| whatIwant.gif | 1.39 KB |
Regular
Posts: 17
Joined: 2008-05-16
Sorry, my code did not
Posted: Fri, 2008-05-16 19:50
Sorry, my code did not appear.
I have attached it as a text file.
Many Thanks
Enthusiast
Posts: 201
Joined: 2008-03-16
how you make your code
Posted: Fri, 2008-05-16 20:49
how you make your code visible is described under the textarea.
You gave your ul the id #navlist, but can't find it in your CSS. Get rid of the div wrapping your ul and use the id #navigation on your ul
Regular
Posts: 17
Joined: 2008-05-16
Hi Caposoft, Im Sorry, not
Posted: Fri, 2008-05-16 21:28
Hi Caposoft,
Im Sorry, not quite sure what you mean. How will that position my ol list.
Thanks for informing about the code tags
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style type="text/css">
<!--
#container {
margin:auto;
width: 800px;
background: #ffffff;
}
#header {
background: #fDDDDD;
height:100px;
}
#navigation ul li
{
list-style-type: none;
display: block;
float: left;
font: 10px/20px "Lucida Grande", verdana, sans-serif;
text-align: center;
}
#navigation a
{
color: #000;
text-decoration: none;
display: block;
width: 70px;
border: 1px solid #A8B090;
}
-->
</style>
</head>
<body>
<div id="container">
<div id="header">
<div id="navigation">
<ul id="navlist">
<li id="active"><a href="#" id="current">New</a></li>
<li><a href="#">Edit</a></li>
<li><a href="#">Delete</a></li>
<li><a href="#">Search</a></li>
<li><a href="#">Show All</a></li>
</ul>
</div>
</div>
</div>
</body>
</html>
Regular
Posts: 17
Joined: 2008-05-16
Sorry double post...cant
Posted: Fri, 2008-05-16 21:35
Sorry double post...cant delete
Enthusiast
Posts: 201
Joined: 2008-03-16
with ul id=navlist you are
Posted: Sat, 2008-05-17 01:22
with ul id=navlist you are overriding the values of div id=navigation. There is no such #navlist in your CSS, so there is nothing to apply to the ul. Since your div is obsolete, delete it and exchange ul id=navlist with ul id=navigation, if #navigation is how you want your list being formated.
Regular
Posts: 17
Joined: 2008-05-16
Thanks Caposoft, To get the
Posted: Sat, 2008-05-17 10:32
Thanks Caposoft,
To get the spacing for my buttons, I have added a margin-top command in my #navigation li ul css. I could not use margin-left, or padding-left command as it would space my buttons out and not move "just" the bit on the left, so I've added a new header-div with a width set to 125px and the height set to the same as the header. Is this the only way I can achieve the positioning of my buttons (Can I optimise my css so I dont need the aditional header-div?)
Thanks
Jalz
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style type="text/css">
<!--
#container {
margin:auto;
width: 800px;
background: #ffffff;
}
#header {
background: #fDDDDD;
height:100px;
}
#header-left {
width:125px;
height:100px;
float:left;
}
#navigation ul li
{
margin-top:35px;
display: block;
list-style-type: none;
float: left;
font: 10px/20px "Lucida Grande", verdana, sans-serif;
text-align: center;
}
#navigation a
{
color: #000;
text-decoration: none;
display: block;
width: 70px;
border: 1px solid #A8B090;
}
-->
</style>
</head>
<body>
<div id="container">
<div id="header">
<div id="header-left">
</div>
<div id="navigation">
<ul id="navigation">
<li id="active"><a href="#" id="current">New</a></li>
<li><a href="#">Edit</a></li>
<li><a href="#">Delete</a></li>
<li><a href="#">Search</a></li>
<li><a href="#">Show All</a></li>
</ul>
</div>
</div>
</div>
</body>
</html>