Geekzone: technology news, blogs, forums
Guest
Welcome Guest.
You haven't logged in yet. If you don't have an account you can register now.




132 posts

Master Geek
+1 received by user: 2


Topic # 86053 30-Jun-2011 09:54
Send private message

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

Create new topic

dpw

808 posts

Ultimate Geek
+1 received by user: 13

Trusted

  Reply # 487723 30-Jun-2011 10:30
Send private message

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



132 posts

Master Geek
+1 received by user: 2


  Reply # 487740 30-Jun-2011 10:51
Send private message

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...


 
 
 
 


45 posts

Geek


  Reply # 487743 30-Jun-2011 10:54
Send private message

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

808 posts

Ultimate Geek
+1 received by user: 13

Trusted

  Reply # 487831 30-Jun-2011 13:29
Send private message

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



132 posts

Master Geek
+1 received by user: 2


  Reply # 487832 30-Jun-2011 13:32
Send private message

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]



132 posts

Master Geek
+1 received by user: 2


  Reply # 487840 30-Jun-2011 13:42
Send private message

Problem solved I think...

CSS Reset code was added and it seems to work now

8020 posts

Uber Geek
+1 received by user: 386

Trusted
Subscriber

  Reply # 487983 30-Jun-2011 17:06
Send private message

Good to hear it worked

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

Create new topic



Twitter »

Follow us to receive Twitter updates when new discussions are posted in our forums:



Follow us to receive Twitter updates when news items and blogs are posted in our frontpage:



Follow us to receive Twitter updates when tech item prices are listed in our price comparison site:





News »

New Zealand government to create digital advisory group
Posted 16-Dec-2017 08:47


Australia datum changes means whole country moving 1.8 metres north-east
Posted 16-Dec-2017 08:39


UAV Traffic Management Trial launching today in New Zealand
Posted 12-Dec-2017 16:06


UFB connections pass 460,000
Posted 11-Dec-2017 11:26


The Warehouse Group to adopt IBM Cloud to support digital transformation
Posted 11-Dec-2017 11:22


Dimension Data peeks into digital business 2018
Posted 11-Dec-2017 10:55


2018 Cyber Security Predictions
Posted 7-Dec-2017 14:55


Global Govtech Accelerator to drive public sector innovation in Wellington
Posted 7-Dec-2017 11:21


Stuff Pix media strategy a new direction
Posted 7-Dec-2017 09:37


Digital transformation is dead
Posted 7-Dec-2017 09:31


Fake news and cyber security
Posted 7-Dec-2017 09:27


Dimension Data New Zealand strengthens cybersecurity practice
Posted 5-Dec-2017 20:27


Epson NZ launches new Expression Premium Photo range
Posted 5-Dec-2017 20:26


Eventbrite and Twickets launch integration partnership in Australia and New Zealand
Posted 5-Dec-2017 20:23


New Fujifilm macro lens lands in New Zealand
Posted 5-Dec-2017 20:16



Geekzone Live »

Try automatic live updates from Geekzone directly in your browser, without refreshing the page, with Geekzone Live now.



Are you subscribed to our RSS feed? You can download the latest headlines and summaries from our stories directly to your computer or smartphone by using a feed reader.

Alternatively, you can receive a daily email with Geekzone updates.