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.


Privoxy

132 posts

Master Geek


#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

dpw
843 posts

Ultimate Geek

ID Verified
Trusted

  #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


 
 
 

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

132 posts

Master Geek


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


BrassBalls
45 posts

Geek


  #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

dpw
843 posts

Ultimate Geek

ID Verified
Trusted

  #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


Privoxy

132 posts

Master Geek


  #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]

Privoxy

132 posts

Master Geek


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

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





News and reviews »

Samsung 9100 Pro NVMe SSD Review
Posted 11-Apr-2025 13:11


Motorola Announces New Mid-tier Phones moto g05 and g15
Posted 4-Apr-2025 00:00


SoftMaker Releases Free PDF editor FreePDF 2025
Posted 3-Apr-2025 15:26


Moto G85 5G Review
Posted 30-Mar-2025 11:53


Ring Launches New AI-Powered Smart Video Search
Posted 27-Mar-2025 16:30


OPPO RENO13 Series Launches in New Zealand
Posted 27-Mar-2025 05:00


Sony Electronics Announces the WF-C710N Truly Wireless Noise Cancelling Earbuds
Posted 26-Mar-2025 20:37


New Harman Kardon Portable Home Speakers Bring Performance and Looks Together
Posted 26-Mar-2025 20:30


Data Insight Launches The Data Academy
Posted 26-Mar-2025 20:21


Oclean AirPump A10 Portable Water Flosser Wins iF Design Award 2025
Posted 20-Mar-2025 12:05


OPPO Find X8 Pro Review
Posted 14-Mar-2025 14:59


Samsung Galaxy Ring Now Available in New Zealand
Posted 14-Mar-2025 13:52


2degrees Announces Partnership With AST SpaceMobile and Plans for NZ Launch
Posted 11-Mar-2025 10:05


Samsung Introduces New Galaxy A56 5G, Galaxy A36 5G and Galaxy A26 5G
Posted 9-Mar-2025 12:18


Cricut Unveils the Next Generation of Smart Cutting Machines
Posted 9-Mar-2025 12:06









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.







GoodSync is the easiest file sync and backup for Windows and Mac