Results 1 to 7 of 7

Thread: I want to center and add a gradient

  1. #1
    Join Date
    May 2010
    Posts
    4
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Default I want to center and add a gradient

    Hi
    I added this nav bar to my site but I cant seem to center it (right and left no problem). Can I do this in my stylesheet?

    Also, I want to add a different gradient to the images. Can I do this in the stylesheet?
    Thanks

  2. #2
    Join Date
    Aug 2005
    Location
    Other Side of My Monitor
    Posts
    3,486
    Thanks
    5
    Thanked 105 Times in 104 Posts
    Blog Entries
    1

    Default

    Make your gradients name them the same as the ones currently used and upload them, overwriting the old ones. Or if you want to keep the old ones up on the server, name the new ones something else, and in your CSS, replace indentbg and indentbg2 with the name(s) of your gradients.

    As for the centering, in your CSS find this:

    Code:
    .indentmenu ul{
    margin: 0;
    padding: 0;
    float: left;
    width: 100%; /*width of menu*/
    border: 1px solid #564c66; /*dark purple border*/
    border-width: 1px 0;
    background: black url(images/indentbg.gif) center center repeat-x;
    }
    Remove the float:left; line and under the width:100%; line add:

    Code:
    margin-left: auto;
    margin-right: auto;
    {CWoT - Riddle } {OSTU - Psycho} {Invasion - Team}
    Follow Me on Twitter: @Negative_Chaos
    PHP Code:
    $result mysql_query("SELECT finger FROM hand WHERE id=3");
    echo 
    $result

  3. #3
    Join Date
    May 2010
    Posts
    4
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Default

    Quote Originally Posted by BLiZZaRD View Post
    Make your gradients name them the same as the ones currently used and upload them, overwriting the old ones. Or if you want to keep the old ones up on the server, name the new ones something else, and in your CSS, replace indentbg and indentbg2 with the name(s) of your gradients.

    As for the centering, in your CSS find this:

    Code:
    .indentmenu ul{
    margin: 0;
    padding: 0;
    float: left;
    width: 100%; /*width of menu*/
    border: 1px solid #564c66; /*dark purple border*/
    border-width: 1px 0;
    background: black url(images/indentbg.gif) center center repeat-x;
    }
    Remove the float:left; line and under the width:100%; line add:

    Code:
    margin-left: auto;
    margin-right: auto;
    I made the changes to the stylesheet but the nav bar is not centering for me. This is how it looks with the changes I made. I must have made a mistake even though I double checked the instruction. Any ideas? Thanks

  4. #4
    Join Date
    May 2010
    Posts
    39
    Thanks
    10
    Thanked 2 Times in 2 Posts

    Default

    If i'm correct your problem is simple here, you using a <table> you have two cell on top and one at the bottom, in that case you have to add collspan="2" to your bottom cell. Yet, why do you even need a second cell on top, which seems to create some empty space and the right after phone numbers.

    Use <div> for your logo, then if you like <table> use it for your menu, and set <td> width in % (equally devided between number of elements if needed) through css and make table align="center"


    Hope that helps!
    Last edited by NickNameDrive; 05-22-2010 at 05:29 PM.

  5. The Following User Says Thank You to NickNameDrive For This Useful Post:

    Dgriff (05-24-2010)

  6. #5
    Join Date
    Aug 2005
    Location
    Other Side of My Monitor
    Posts
    3,486
    Thanks
    5
    Thanked 105 Times in 104 Posts
    Blog Entries
    1

    Default

    There is a float:left; I didn't see before in this line:

    Code:
    .indentmenu ul li a{
    float: left;
    Remove that. As for the gradients not appearing, it got me. Everything looks right. Try this:

    instead of the line looking like this

    Code:
    background: black url(images/indentbg.png) center center repeat-x;
    Make it look like this:

    Code:
    background: url(http://buildawebsite.ie/catalog/images/indentbg.png) black center center repeat-x;
    Note the spacing removed, the "black" repositioned and the use of the full URI.

    Do that for both and see what happens. I may need to test this locally if that doesn't work.
    {CWoT - Riddle } {OSTU - Psycho} {Invasion - Team}
    Follow Me on Twitter: @Negative_Chaos
    PHP Code:
    $result mysql_query("SELECT finger FROM hand WHERE id=3");
    echo 
    $result

  7. The Following User Says Thank You to BLiZZaRD For This Useful Post:

    Dgriff (05-24-2010)

  8. #6
    Join Date
    May 2010
    Posts
    4
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Default

    Quote Originally Posted by BLiZZaRD View Post
    There is a float:left; I didn't see before in this line:

    Code:
    .indentmenu ul li a{
    float: left;
    Remove that. As for the gradients not appearing, it got me. Everything looks right. Try this:

    instead of the line looking like this

    Code:
    background: black url(images/indentbg.png) center center repeat-x;
    Make it look like this:

    Code:
    background: url(http://buildawebsite.ie/catalog/images/indentbg.png) black center center repeat-x;
    Note the spacing removed, the "black" repositioned and the use of the full URI.

    Do that for both and see what happens. I may need to test this locally if that doesn't work.
    Hi
    I got it centered but the gradients I had (which match the header) are not there any more. I'm assuming that the stylesheet does not recognize the images. How do I make the stylesheet recognise the images?
    I appreciate your help on this.
    Last edited by Dgriff; 05-24-2010 at 09:59 PM.

  9. #7
    Join Date
    May 2010
    Posts
    4
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Default

    I have managed to center my nav bar. Just a couple of questions:

    1. How do I make my buttons bigger from top to bottom? I want to make them taller.

    2. When I put my cursor over a button (without clicking) it changes to the gradient I want but it (gradient change) does not go flush against the left border of the button. In fact these few pixels are not clickable. How do I make the clickable button go all the way over to the left border?

    3. The About Us button looks like it is always pushed down...no matter what button you click. How do I fix this?

    I appreciate your advice. Cheers.

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •