CSS Help please...

Forums › IT Pro and developers › CSS Help please...

Privoxy

132 posts

Master Geek

#86053 30-Jun-2011 09:54

So websites are not what I do, they are not something I have any interest in doing but none the less I have ended up needing to do one for a frontend for the database we use.

I cannot for the life of me get the toolbar to centre in horizontally inside its div tag... I have tried everything posted all over the web and it still will not go into the middle.

I want it to be able to keep its auto width as the number and length of buttons will change a lot (This is a template for many frontends in all sorts of departments)

Is anyone able to point me where and why it will not centre? I am sure this is a simple thing I am just over looking...

HTML
http://pastebin.com/875cNQtx

CSS
http://pastebin.com/vFsJn3es

Thanks for any help

dpw

843 posts

Ultimate Geek

ID Verified

Trusted

#487723 30-Jun-2011 10:30

You don't actually need the in line 60, which wraps around the div#toolbar. Just give the for the menu items style attributes similar to:

margin-left: auto;
margin-right: auto;
width: 80%;

And it should float to the middle. I'm guessing just from eye-balling your code at pastebin - haven't actually tested it. You may need to add "text-align: center" for div#toolbar - not sure... something to experiment. Hope you get the general gist...

Sorry, just noticed you asked for the "why" also. From what I can tell an element can overflow its container. You kinda need to constrain the <ul> within the container, which is div#wrapper. The other option is to style #wrapper to not allow its children controls to overflow. Giving the toolbar <ul> a percentage width will in effect contain it within the #wrapper. It will still size up/down and wrap as you add/remove the <li> items, but will do so within #wrapper.

Hope that makes sense - I am not a web guru so YMMV and someone may need to correct me.

Android user, software developer, a semi-typical (not a gamer) geek, and a Bernese Mountain Dog nut!

http://savitarbernese.com | https://nz.linkedin.com/in/danywu

Sharesies

Trade NZ and US shares and funds with Sharesies (affiliate link).

Privoxy

132 posts

Master Geek

#487740 30-Jun-2011 10:51

Thanks for the explination, however adding

width: 80%;

into the #toolbar ul tag did nothing... I get the feeling something else is overriding everything but I can't seem to work out what it is

#wrapper {
margin: 0px auto;
padding: 20px 0 0 0;
border: 2px solid black;
width: 750px;
height: 300px;
}
#toolbar {

padding: 0;
height: 28px;
background:#CCC;
padding-top:5px;
}

#toolbar ul {
width: 80%;
}

#toolbar li {
list-style: none;
float: left;
font: bold 11px arial;

}
#toolbar li a {
display: block;
width: auto;
background: #5970B2;
color: #F0F0F0;
text-align: left;
text-decoration: none;
padding-top: 4px;
padding-right: 10px;
padding-bottom: 4px;
padding-left: 10px;
}
#toolbar li a:hover {
background: #0588BC
}
#toolbar div {
position: absolute;
visibility: hidden;
margin: 0;
padding: 0;
background: #EAEBD8;
border: 1px solid #5970B2
}
#toolbar div a {
position: relative;
display: block;
margin-left: 0 auto;
margin-right: 0 auto;
padding: 5px 10px;
width: auto;
white-space: nowrap;
text-align: left;
text-decoration: none;
background: #EAEBD8;
color: #2875DE;
font: 11px arial
}
#toolbar div a:hover {
background: #49A3FF;
color: #F0F0F0
}

As you can see the actual div called toolbar sits where it should, but its the blue toolbar itself that will not center inside the gray box...

BrassBalls

45 posts

Geek

#487743 30-Jun-2011 10:54

Just a thought but maybe not much help. I also struggled with div alignment and switched to using tables as opposed to 'divs'....much easier to get the alignment sorted.

dpw

843 posts

Ultimate Geek

ID Verified

Trusted

#487831 30-Jun-2011 13:29

I didn't get a chance to look at your stuff carefully, but here's something I whipped up quickly to illustrate my point. Hope it will help a bit...

<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
body
{
text-align: center;
}
#container
{
text-align: left;
width: 580px;
margin: 0 auto;
border: 1px solid #333;
height: 800px;
}
#toolbar
{
text-align: center;
margin-right: auto;
margin-left: auto;
padding: 0px 0px 0px 0px;
}
#toolbar ul
{
display: inline;
list-style: none;
margin: 0;
padding: 0;
border: none;
}
#toolbar li
{
display: inline;
margin: -3px;
margin: 2px 5px 2px 5px;
border-bottom: 1px dotted #000;
}
</style>
</head>
<body>
<div id="container">
<div id="toolbar">
<ul id="menuList">
<li>Menu Item 1</li>
<li>Menu Item 2</li>
<li>Menu Item 3</li>
</ul>
</div>
</div>
</body>
</html>

DISCLAIMER: This worked in FF - haven't checked others...

Android user, software developer, a semi-typical (not a gamer) geek, and a Bernese Mountain Dog nut!

http://savitarbernese.com | https://nz.linkedin.com/in/danywu

Privoxy

132 posts

Master Geek

#487832 30-Jun-2011 13:32

have made some movment... This is what shows when I load the page onto the server. This is also how it looks inside Dreamweavers design view

This is what it should be and is what I get when I view it via Dreamweaver (F12 - preview in IE)

Based on this, I think its possibly the docType that is wrong? But I have no idea how to confirm that or what it should be, currently it is

[code]
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

[/code]

Privoxy

132 posts

Master Geek

#487840 30-Jun-2011 13:42

Problem solved I think...

CSS Reset code was added and it seems to work now

Ragnor

8185 posts

Uber Geek

Trusted

#487983 30-Jun-2011 17:06

Good to hear it worked

It seems I'm alternating my replies on your GZ and GPForum threads, just to keep it interesting heh