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

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


 
 
 
 


Try Wrike: fast, easy, and efficient project collaboration software
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

812 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: 387

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 »

IBM leads Call for Code to use cloud, data, AI, blockchain for natural disaster relief
Posted 25-May-2018 14:12


New FUJIFILM X-T100 aims to do better job than smartphones
Posted 24-May-2018 20:17


Stuff takes 100% ownership of Stuff Fibre
Posted 24-May-2018 19:41


Exhibition to showcase digital artwork from across the globe
Posted 23-May-2018 16:44


Auckland tops list of most vulnerable cities in a zombie apocalypse
Posted 23-May-2018 12:52


ASB first bank in New Zealand to step out with Garmin Pay
Posted 23-May-2018 00:10


Umbrellar becomes Microsoft Cloud Solution Provider
Posted 22-May-2018 15:43


Three New Zealand projects shortlisted in IDC Asia Pacific Smart Cities Awards
Posted 22-May-2018 15:14


UpStarters - the New Zealand tech and innovation story
Posted 21-May-2018 09:55


Lightbox updates platform with new streaming options
Posted 17-May-2018 13:09


Norton Core router launches with high-performance, IoT security in New Zealand
Posted 16-May-2018 02:00


D-Link ANZ launches new 4G LTE Dual SIM M2M VPN Router
Posted 15-May-2018 19:30


New Panasonic LUMIX FT7 ideal for outdoor: waterproof, dustproof
Posted 15-May-2018 19:17


Ryanair Goes All-In on AWS
Posted 15-May-2018 19:14


Te Papa and EQC Minecraft Mod shakes up earthquake education
Posted 15-May-2018 19:12



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.