CodingForums.com

CodingForums.com (http://www.codingforums.com/index.php)
-   HTML & CSS (http://www.codingforums.com/forumdisplay.php?f=13)
-   -   Center CSS Buttons in Within a Class (http://www.codingforums.com/showthread.php?t=158018)

millsi80 02-05-2009 11:17 PM
Center CSS Buttons in Within a Class
 
Hi,

I have made a bunch of buttons each inside there own class (i.e #home, #other). All of the buttons are inside a class called nav. My question is how do I center the buttons without messing up nav or the rest of my site.

Thanks!

Excavator 02-05-2009 11:24 PM
Here's an example for you millsi80 - http://nopeople.com/CSS/menu-h_centered-ul/index.html
View the source to see how it's done.

millsi80 02-06-2009 12:16 AM
Thanks for your response.

I added the text-align:center in the #nav class and I got the image below. It is not quite centered, but getting there :)

http://i39.tinypic.com/4j8ft4.jpg

redspyder 02-06-2009 01:42 AM
hi millsi80,

Have you tried adding:

Code:
margin:0 auto;
to #nav ?

All the best - redspyder

millsi80 02-06-2009 01:47 AM
I tried that and I am still getting the unbalance.

redspyder 02-06-2009 02:01 AM
Can you paste the code here ?

All the best - redspyder

millsi80 02-06-2009 02:06 AM
Sure

Code:
<style type="text/css">
               
        body {
        margin:10px 10px 0px 10px;
        padding:0px;
        background-color: #000000;
        background-image: url();
                }
       
        #leftcontent {
                position: absolute;
                left:10px;
                top:50px;
                width:200px;
                background:#fff;
                border:1px solid #000;
                }

        #centercontent {
                background:#fff;
                  margin-left: 199px;
                  margin-right:199px;
                border:1px solid #000;
                voice-family: "\"}\"";
                voice-family: inherit;
                  margin-left: 201px;
                  margin-right:201px;
                }
               
        html>body #centercontent {
        margin-left: 350px;
        margin-right:350px;
                }

        #rightcontent {
                position: absolute;
                right:10px;
                top:50px;
                width:200px;
                background:#fff;
                border:1px solid #000;
                }
       
        #banner {
                background:#fff;
                height:40px;
                border-top:1px solid #000;
                border-right:1px solid #000;
                border-left:1px solid #000;
                voice-family: "\"}\"";
                voice-family: inherit;
                height:39px;
                }
        html>body #banner {
        height:100px;
        margin-left: 350px;
        margin-right: 350px;
        background-image: url(banner%20copy.jpg);
                }
               
        p,h1,pre {
                margin:0px 10px 10px 10px;
                }
               
        h1 {
                font-size:14px;
                padding-top:10px;
                }
               
        #banner h1 {
        font-size:14px;
        padding:10px 10px 0px 10px;
        margin:0px 10px 10px 10px;
        background-image: url(banner%20copy.jpg);
                }
       
        #rightcontent p {
                font-size:10px
                }
               
        #nav {
        background:#36384f;
        height:40px;
        border-top:1px solid #000;
        border-right:1px solid #000;
        border-left:1px solid #000;
        voice-family: "\"}\"";
        voice-family: inherit;
        height:39px;
        overflow:auto;
        text-align: center;
        margin:0 auto;
       
       
                }
               
        html>body #nav {
        height:45px;
        margin-left: 350px;
        margin-right: 350px;
        text-align: center;
       
                }
               
        p,h1,pre {
                margin:0px 10px 10px 10px;
                }
               
        h1 {
                font-size:14px;
                padding-top:10px;
                }
               
        #nav h1 {
        font-size:14px;
        padding:10px 10px 0px 10px;
        margin:0px 10px 10px 10px;
                }
               
 #home, #astro, #iss, #sat, #logo, #csa, #isa, #pic, #bib {
        height: 45px;
        display: block;
        float: left;
       
}
#home {
        background: url(homebutton.jpg) no-repeat 0 0;
        width: 107px
       
  }
        #home:hover {
                background: #00f url(homebuttonover.jpg) no-repeat 0 0;
                width: 107px
        }   
#astro {
        background: url(astro.jpg) no-repeat 0 0;
        width: 120px
}
        #astro:hover {
        background: url(astroover.jpg) no-repeat 0 0;
        width: 120px;
        }

#iss {
        background: url(iss.jpg) no-repeat 0 0;
        width: 107px
}
        #iss:hover {
        background: url(issover.jpg) no-repeat 0 0;
        width: 107px;
        }
       
#sat {
        background: url(satellites.jpg) no-repeat 0 0;
        width: 120px;
}
        #sat:hover {
        background:url(satellitesover.jpg) no-repeat 0 0;
        width: 120px;
        }

#csa {
        background: url(csa.jpg) no-repeat 0 0;
        width: 107px
}
        #csa:hover {
        background: url(csaover.jpg) no-repeat 0 0;
        width: 107px;
        }
       
#isa {
        background: url(isa.jpg) no-repeat 0 0;
        width: 107px
}
        #isa:hover {
        background: url(isaover.jpg) no-repeat 0 0;
        width: 107px;
        }

#pic {
        background: url(pic.jpg) no-repeat 0 0;
        width: 107px
}
        #pic:hover {
        background: url(picover.jpg) no-repeat 0 0;
        width: 107px;
        }
       
#bib {
        background: url(bib.jpg) no-repeat 0 0;
        width: 145px
}

        #bib:hover {
        background: url(bibover.jpg) no-repeat 0 0;
        width: 145px;
        }

</style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /></head><body>
<div id="banner">
  <h1>&nbsp;</h1>
</div>

<div id="nav">
<p style="text-align:center">
<a id="home" href="#" title="Home"></a>
<a id="astro" href="#" title="Astronauts"></a>
<a id="csa" href="#" title="Canadian Space Agency"></a>
<a id="isa" href="#" title="International Space Agency"></a>
<a id="iss" href="#" title="International Space Station"></a>
<a id="sat" href="#" title="Satellites"></a>
<a id="pic" href="#" title="Pictures"></a>
<a id="bib" href="#" title="Bibliography"></a>
</p>
</div>

jlhaslip 02-06-2009 03:03 AM
http://www.cssplay.co.uk/menus/centered.html

Uses a UL/LI configuration instead of simple anchors like navbar, but it works.

Excavator 02-06-2009 08:32 AM
Hello millsi80,
That's an interesting approach... I've never done it that way.

I took nav and centered that, have to give it a width to do it - the total width of all your buttons.
Make the background color come from #banner then, by moving it's closing tag down to include the #nav.
Change the margins on #banner h1 so the white background is back...

I didn't have the images so there are some background colors in there. Just copy/paste this whole bit into a new .html document to see it -
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title><style type="text/css">
body {
        margin:10px;
        background: #000 url();
}
* {
        margin: 0;
        padding: 0;
        border: none;
}
#banner {
        background:#36384f;
        border-top:1px solid #000;
        border-right:1px solid #000;
        overflow: auto;
}
#banner h1 {
        font-size:14px;
        padding:10px 10px 0px 10px;
        background: #fff url(banner%20copy.jpg);
}
#nav {
        height:45px;
        border-top:1px solid #000;
        border-right:1px solid #000;
        border-left:1px solid #000;
        width: 920px;
        margin: auto;
}
#home, #astro, #iss, #sat, #logo, #csa, #isa, #pic, #bib {
        height: 45px;
        display: block;
        float: left;
}
                #home {
                        background: #f00 url(homebutton.jpg) no-repeat 0 0;
                        width: 107px
                }
                #home:hover {
                        background: #00f url(homebuttonover.jpg) no-repeat 0 0;
                        width: 107px
                }   
#astro {
        background: url(astro.jpg) no-repeat 0 0;
        width: 120px
}
#astro:hover {
        background: url(astroover.jpg) no-repeat 0 0;
        width: 120px;
}
                #iss {
                        background: url(iss.jpg) no-repeat 0 0;
                        width: 107px
                }
                #iss:hover {
                        background: url(issover.jpg) no-repeat 0 0;
                        width: 107px;
                }
#sat {
        background: url(satellites.jpg) no-repeat 0 0;
        width: 120px;
}
#sat:hover {
        background:url(satellitesover.jpg) no-repeat 0 0;
        width: 120px;
}
                #csa {
                        background: url(csa.jpg) no-repeat 0 0;
                        width: 107px
                }
                #csa:hover {
                        background: url(csaover.jpg) no-repeat 0 0;
                        width: 107px;
                }
#isa {
        background: url(isa.jpg) no-repeat 0 0;
        width: 107px
}
#isa:hover {
        background: url(isaover.jpg) no-repeat 0 0;
        width: 107px;
}
                #pic {
                        background: url(pic.jpg) no-repeat 0 0;
                        width: 107px
                }
                #pic:hover {
                        background: url(picover.jpg) no-repeat 0 0;
                        width: 107px;
                }
#bib {
        background: #00f url(bib.jpg) no-repeat 0 0;
        width: 145px
}
#bib:hover {
        background: url(bibover.jpg) no-repeat 0 0;
        width: 145px;
}
</style>
</head>
<body>
    <div id="banner">
            <h1>text here</h1>
                <div id="nav">
                    <p>
                        <a id="home" href="#" title="Home"></a>
                        <a id="astro" href="#" title="Astronauts"></a>
                        <a id="csa" href="#" title="Canadian Space Agency"></a>
                        <a id="isa" href="#" title="International Space Agency"></a>
                        <a id="iss" href="#" title="International Space Station"></a>
                        <a id="sat" href="#" title="Satellites"></a>
                        <a id="pic" href="#" title="Pictures"></a>
                        <a id="bib" href="#" title="Bibliography"></a>
                    </p>
                <!--end nav--></div>
    <!--end banner--></div>
</body>
</html>

millsi80 02-07-2009 02:42 AM
Thanks everyone!


All times are GMT +1. The time now is 04:39 AM.

Powered by vBulletin®
Copyright ©2000 - 2013, Jelsoft Enterprises Ltd.