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
8085 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 Announces Galaxy AI
Posted 28-Nov-2023 14:48


Epson Launches EH-LS650 Ultra Short Throw Smart Streaming Laser Projector
Posted 28-Nov-2023 14:38


Fitbit Charge 6 Review 
Posted 27-Nov-2023 16:21


Cisco Launches New Research Highlighting Gap in Preparedness for AI
Posted 23-Nov-2023 15:50


Seagate Takes Block Storage System to New Heights Reaching 2.5 PB
Posted 23-Nov-2023 15:45


Seagate Nytro 4350 NVMe SSD Delivers Consistent Application Performance and High QoS to Data Centers
Posted 23-Nov-2023 15:38


Amazon Fire TV Stick 4k Max (2nd Generation) Review
Posted 14-Nov-2023 16:17


Over half of New Zealand adults surveyed concerned about AI shopping scams
Posted 3-Nov-2023 10:42


Super Mario Bros. Wonder Launches on Nintendo Switch
Posted 24-Oct-2023 10:56


Google Releases Nest WiFi Pro in New Zealand
Posted 24-Oct-2023 10:18


Amazon Introduces All-New Echo Pop in New Zealand
Posted 23-Oct-2023 19:49


HyperX Unveils Their First Webcam and Audio Mixer Plus
Posted 20-Oct-2023 11:47


Seagate Introduces Exos 24TB Hard Drives for Hyperscalers and Enterprise Data Centres
Posted 20-Oct-2023 11:43


Dyson Zone Noise-Cancelling Headphones Comes to New Zealand
Posted 20-Oct-2023 11:33


The OPPO Find N3 Launches Globally Available in New Zealand Mid-November
Posted 20-Oct-2023 11: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.







Backblaze unlimited backup