December 14, 200916 yr Hi All, I'm currently building a new website: http://www.miltonglassuk.co.uk/Milton Glass/ But i'm having a bit of trouble with my CSS: To get the tabs and search box in the middle of the tabs div i use the following padding: padding: 0 0 0 297px; But by applying this a white gap appears to the right the the image and breaks my site (as shown below) Here is the full HTML code for the tabs div: <div id="tabs"> <ul> <li><a href="#"><img src="images/icons/house.png" alt="Portsmouth Branch" class="nohyperlink" title="Portsmouth Branch" /> Portsmouth Branch</a></li> <li><a href="#"><img src="images/icons/house.png" alt="Cosham Branch" class="nohyperlink" title="Cosham Branch" /> Cosham Branch</a></li> <li><a href="#"><img src="images/icons/house.png" alt="Waterlooville Branch" class="nohyperlink" title="Waterlooville Branch" /> Waterlooville Branch</a></li> </ul> <div id="search"> <form method="post" action="?"> <p> <input type="text" name="search" class="search" /> <input type="submit" value="Search" class="button" /> </p> </form> </div> </div> And here is the full CSS for the tabs div: #tabs { background: #fff url(../images/bigbox.gif) no-repeat top left; color: #000; height: 64px; text-align: center; padding: 0 0 0 297px; margin: 0 0 0 5px; width:1090px; } Is there another way i can do this?
December 15, 200916 yr can you not use "position:absolute" for the #search ? and manualy set the top:100px; ect? and then remove the padding, i may have read it wrong? but this could be a good way to solve the gapping..
December 16, 200916 yr Author For the moment i have removed the search box, leaving just the three tabs. Somehow i need to center them, but without using "padding: 0 0 0 297px;" I did try using position:absolute but it just aligned them all to the left..
December 16, 200916 yr you need to add more to the absolute. e.g. position:absolute; left:200px; right:45%; You need to add a length or percentage, I would use the percentage as when the user has a larger / smaller screen than you, it will stay centered
December 16, 200916 yr Will it work if you set a class for tabs called say .menu then position absolute that at top:0px left:297px and define a width, then in the id search div make that position absolute top:100px (or whatever) left:297px or whatever puts it centrally and put in a width. For the absolute position divs you need to set a width. I'm only a css beginner so it may not work but I know I have done something similar over the last week
December 17, 200916 yr Author Its getting there, just need to center the tabs, here is the css code i have now: #tabs { background: #fff url(../images/bigbox.gif) no-repeat top left; color: #000; height: 64px; text-align: center; margin: 0 0 0 5px; width:1090px; padding: 0 0 -40px 0; }
December 17, 200916 yr Make a seperate div just for the 3 button tabs and margin-left: auto; margin-right: auto;
December 17, 200916 yr Author I did try that, but it made no difference, below is the code & css for the affected area, maybe i have the right code, just in the wrong order /conflicting. <div id="tabs"> <div class="autoalign"> <ul> <li><a href="#"><img src="images/icons/house.png" alt="Portsmouth Branch" class="nohyperlink" title="Portsmouth Branch" /> Portsmouth Branch</a></li> <li><a href="#"><img src="images/icons/house.png" alt="Cosham Branch" class="nohyperlink" title="Cosham Branch" /> Cosham Branch</a></li> <li><a href="#"><img src="images/icons/house.png" alt="Waterlooville Branch" class="nohyperlink" title="Waterlooville Branch" /> Waterlooville Branch</a></li> </ul> </div> </div> #tabs { background: #fff url(../images/bigbox.gif) no-repeat top left; color: #000; height: 64px; text-align: center; margin: 0 0 0 5px; width:1090px; padding: 0 0 -40px 0; } .autoalign { margin-left: auto; margin-right: auto; }
December 17, 200916 yr I did try that, but it made no difference, below is the code & css for the affected area, maybe i have the right code, just in the wrong order /conflicting. <div id="tabs"> <div class="autoalign"> <ul> <li><a href="#"><img src="images/icons/house.png" alt="Portsmouth Branch" class="nohyperlink" title="Portsmouth Branch" /> Portsmouth Branch</a></li> <li><a href="#"><img src="images/icons/house.png" alt="Cosham Branch" class="nohyperlink" title="Cosham Branch" /> Cosham Branch</a></li> <li><a href="#"><img src="images/icons/house.png" alt="Waterlooville Branch" class="nohyperlink" title="Waterlooville Branch" /> Waterlooville Branch</a></li> </ul> </div> </div> #tabs { background: #fff url(../images/bigbox.gif) no-repeat top left; color: #000; height: 64px; text-align: center; margin: 0 0 0 5px; width:1090px; padding: 0 0 -40px 0; } .autoalign { margin-left: auto; margin-right: auto; } Your autoalign class has to have a width for the auto margins to work. Try that and let me know.
December 17, 200916 yr Author I just added a width of 100px; and now it has centered the tabs, but put them on top of each other. http://miltonglassuk.co.uk/Milton Glass/
December 18, 200916 yr Hey, Why dont you use CSS to change the <UL> item from List Style to Block Style? this should place them next to eachother horizontally and then you can apply any padding/margins to the individual <LI> elements. HTML //HTML <div> <ul id="navlist"> <li><a href="#">Item one</a></li> <li><a href="#">Item two</a></li> <li><a href="#">Item three</a></li> <li><a href="#">Item four</a></li> <li><a href="#">Item five</a></li> </ul> </div> CSS #navlist li { display: inline; list-style-type: none; padding-right: 20px; } Then just change the CSS stylign to reflect your background images, width and the required padding.. Chris
December 18, 200916 yr Just had a play about on my comp, try this: <html> <head> <title>CSS Navigation</title> <style> #topnav { background: #fff url(http://www.miltonglassuk.co.uk/Milton%20Glass/images/bigbox.gif) no-repeat top left; height: 64px; text-align: center; margin: 0 auto; width:1090px; } #topnav ul { padding-top:5px; } #topnav li { color: #000; background-color:#FFF; display: inline; list-style-type: none; padding: 6px; } #topnav a { border:none; text-decoration:none; color:#000; } #topnav img { border:none; } </style> </head> <body> <div id="topnav"> <ul> <li><a href="#"><img src="http://www.miltonglassuk.co.uk/Milton%20Glass/images/icons/house.png" alt="Portsmouth Branch" class="nohyperlink" title="Portsmouth Branch" /> Portsmouth Branch</a></li> <li><a href="#"><img src="http://www.miltonglassuk.co.uk/Milton%20Glass/images/icons/house.png" alt="Cosham Branch" class="nohyperlink" title="Cosham Branch" /> Cosham Branch</a></li> <li><a href="#"><img src="http://www.miltonglassuk.co.uk/Milton%20Glass/images/icons/house.png" alt="Waterlooville Branch" class="nohyperlink" title="Waterlooville Branch" /> Waterlooville Branch</a></li> </ul> </div> </body> </html> see it working here Thanks, Chris
December 18, 200916 yr Author Thanks Chris.R, That worked a treat I just need to move across my a & a:hover CSS and i should be sorted.
December 18, 200916 yr No problem bud, glad to be of help it's a great forum for help! Good luck with the site Chris
December 18, 200916 yr Author Hi Chris, I spoke to soon, i'm now trying to merge my previous a css across: #topnav a { display: inline; background: #fff url(../images/barbg.gif) no-repeat; color: #808080; padding: 4px 0; width: 160px; text-align: center; font-weight: bold; text-decoration: none; margin-left:5px; } And as you can see its not showing the tabs properly...
December 19, 200916 yr I'm not near a computer tonight but I'll take a look tommorrow. Don't worry we will get it sorted Chris
December 19, 200916 yr Sorry for the late reply, Try this and let me know how it works out, it should solve the problem.. <html> <head> <title>CSS Navigation</title> <style> #topnav { background: #fff url(http://www.miltonglassuk.co.uk/Milton%20Glass/images/bigbox.gif) no-repeat top left; height: 64px; text-align: center; margin: 0 auto; width:1090px; } #topnav ul { padding-top:5px; } #topnav li { color: #000; background: url(http://www.miltonglassuk.co.uk/Milton%20Glass//images/barbg.gif) no-repeat; display: inline; list-style-type: none; padding: 6px; } #topnav a { border:none; text-decoration:none; color:#000; } #topnav img { border:none; } </style> </head> <body> <div id="topnav"> <ul> <li><a href="#"><img src="http://www.miltonglassuk.co.uk/Milton%20Glass/images/icons/house.png" alt="Portsmouth Branch" class="nohyperlink" title="Portsmouth Branch" /> Portsmouth Branch</a></li> <li><a href="#"><img src="http://www.miltonglassuk.co.uk/Milton%20Glass/images/icons/house.png" alt="Cosham Branch" class="nohyperlink" title="Cosham Branch" /> Cosham Branch</a></li> <li><a href="#"><img src="http://www.miltonglassuk.co.uk/Milton%20Glass/images/icons/house.png" alt="Waterlooville Branch" class="nohyperlink" title="Waterlooville Branch" /> Waterlooville Branch</a></li> </ul> </div> </body> </html> Chris
December 19, 200916 yr Author Hi Chris, I forgot to upload the problem version of the site, Here is the current CSS for the related #tabs section: #topnav { background: #fff url(../images/bigbox.gif) no-repeat top left; height: 64px; text-align: center; margin: 0 auto; width:1090px; } #topnav ul { padding-top:-5px; } #topnav li { color: #000; background: #fff url(../images/barbg.gif) no-repeat; background-color:#FFF; display: inline; list-style-type: none; padding: 6px; } #topnav a { float:left; background: #fff url(../images/barbg.gif) no-repeat; color: #808080; padding: 7px 0; width: 160px; text-align: center; font-weight: bold; text-decoration: none; } #topnav img { border:none; } #topnav li a:hover { background: #fff url(../images/barcurrent.gif) no-repeat; color: #000; } #topnav li a.current { background: #fff url(../images/barcurrent.gif) no-repeat; color: #2C71AE; } The tabs work as they should including the hover effect, the only issue is they are not centered. As soon as i delete "float:left;" it does center the tabs, but then messes them up even more.
December 23, 200916 yr Author Many thanks for everyone's help with this issue, but the client has now asked for a different design, which means i know do not have this issue. Thanks once again and "Merry Christmas"
Create an account or sign in to comment