Results 1 to 6 of 6

Thread: CSS Help

  1. #1
    Join Date
    Jun 2005
    Posts
    52

    CSS Help

    Hello,

    I am having some problems with this design.

    See the navigation sections on it: <image here>

    How would I go about making the text in them vertically aligned to the middle and add 5 pixels worth of padding to the left hand side so that the text isn't right up against the edge? I can do this but it messes up the mouseover effect and link.

    I hope this makes sense and any help is appreciated.


    Cheers,

    Steve.

  2. #2
    Join Date
    Oct 2003
    Location
    West Yorkshire, UK
    Posts
    2,813
    Using the same method as what you have done with the "WELCOME TO YOUR COMPANY NAME!" text should do the trick, Steve. Or is that the method that is messing with the mouseover effect?
    - Jamie Harrop

  3. #3
    Join Date
    Jun 2005
    Posts
    52
    Thanks for your fast response Jamie, but unfortunately that method of doing it messes up the mouse over effect.

    Does anyone else know of a method to do this? Or should I change the coding of the mouse over effect? If so, what should I change it to?


    Cheers,

    Steve.

  4. #4
    Join Date
    Oct 2003
    Location
    West Yorkshire, UK
    Posts
    2,813
    I think your best bet, Steve, would be to change the coding of the mouse over effect that you are using.

    I use CSS to create a similar effect at http://www.swiss2006.org.uk/ It can easily be adapted to change the background color, rather than the text color. Feel free to dig in the XHTML and CSS, and use that. I haven't tried using it as a horizontal menu, but it may be possible.
    - Jamie Harrop

  5. #5
    Join Date
    May 2004
    Location
    Pflugerville, TX
    Posts
    11,222
    How would I go about making the text in them vertically aligned to the middle
    Set the line-height to be equal to the height of the link area.

    and add 5 pixels worth of padding to the left hand side so that the text isn't right up against the edge?
    Reduce the width of each link by five pixels, then add those five pixels back in with padding-left:5px
    Studio1337___̴ı̴̴̡̡̡ ̡͌l̡̡̡ ̡͌l̡*̡̡ ̴̡ı̴̴̡ ̡̡͡|̲̲̲͡͡͡ ̲▫̲͡ ̲̲̲͡͡π̲̲͡͡ ̲̲͡▫̲̲͡͡ ̲|̡̡̡ ̡ ̴̡ı̴̡̡ ̡͌l̡̡̡̡.__Web Design

  6. #6
    Join Date
    Mar 2004
    Location
    new delhi (india)
    Posts
    44
    as mentioned by the_pm you can use these 3 extra lines in the link classes to fix your problem

    line-height: 23px;
    vertical-align: middle;
    padding-left: 5px;

Posting Permissions

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