SitePoint Sponsor

User Tag List

Results 1 to 9 of 9
  1. #1
    SitePoint Guru Zygoma's Avatar
    Join Date
    May 2006
    Location
    York, Uk
    Posts
    916
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    How green are we?



    Hi from still sunny but slightly cooler Wakefiled :-)

    Id really like to get the above image on page
    http://www.pauserefreshment.co.uk/homepage_draft1.html
    lined up with the footer "Rent Coffee machines get pause points" - at the mo its mis alligned - and made the green band go V fat.

    Also how do you do a off topic thing that I see in some posts?

    Is the problem due to mixing images in a list section where there is no css trying to manipulate its position?

    Any insights welcome :-)
    I have had a perfectly wonderful
    evening, but this wasn't it-
    Julius "GROUCHO" Marx - 1890-1977
    http://www.davidclick.com

  2. #2
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,624
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Offtopic=(without spaces) [ ot ] [/ ot ]

    As for the image, on ".nav li a" you set top padding which is cuasing hte image to scoot down 13px
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  3. #3
    SitePoint Guru Zygoma's Avatar
    Join Date
    May 2006
    Location
    York, Uk
    Posts
    916
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Ryan - yes Ive made progress thankyou :-)

    However in Firefox I want to get the text hyperlink to sit in the middle of the green band rather than at the top as it does now. I guess what Im trying to do is independently add top padding to the text "Rent coffee machines get pause point".

    At the mo everything I do with the CSS in terms of top padding is moving both graphic and the text hyperlink.

    I just want to manipulate the top padding of the Rent coff machines so it doesnt look odd.

    Any insights welcome :-)

    p.s. It still looks really fat in IE 6 :-(
    I have had a perfectly wonderful
    evening, but this wasn't it-
    Julius "GROUCHO" Marx - 1890-1977
    http://www.davidclick.com

  4. #4
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,624
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    It's moving the image as well because you wrapped the image in a hyperlink.

    Let's just get FF dispalying correctly and then we will worry about IE6
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  5. #5
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    Any insights welcome :-)
    Hi,
    Since your image is 50px height and you are showing 3px borders on a:hover you should set the anchor heights to at least 50px so the borders surround the entire image on hover. Then by setting that 50px height you can then center the text with line-height of the same value.

    Your ul is set to 60px height and now your anchors are 50px so center the anchors by setting 5px margins on the li. The text needs some side padding as you currently have it but that makes the image look strange with gaps on just the left and right. You can fix that by setting a negative margin on the image equal to your side paddings. Also, you can loose the min-width:100% on the ul since it is doing nothing with width:100% set.

    I want to get the text hyperlink to sit in the middle of the green band rather than at the top as it does now.
    This will get what you are wanting to do plus the extra details I mentioned -

    Code:
    /* footer2 start */
    
    .nav {
    margin:auto;
    border:1px;
    padding:0;
    width:100%;
    height:60px;
    background:#A6AE1F;
    font:bold 88%/1.1 verdana;
    clear:both;
    }
    
    .nav li {
    float:left;
    list-style:none;
    margin:5px;/*center 50px anchor in 60px ul*/
    }
    
    .nav li a {
    float:left;
    padding:0 5px;
    height:50px;/*image height*/
    line-height:50px;/*center the text*/
    color:#ddd;
    text-decoration:none;
    text-transform:none;
    }
    
    .nav li a img {border:0; margin:0 -5px;}/*hide 5px side paddings*/
    
    .nav li a:hover {
    margin:-3px;
    border:3px inset #66f;
    color:#ffffff;
    background:;
    }

  6. #6
    SitePoint Guru Zygoma's Avatar
    Join Date
    May 2006
    Location
    York, Uk
    Posts
    916
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you so much everyone for solution which have cleaned up 99% of the problemo's.

    But IE6 is ignoring height:60px with the result that I get a very fat with on the footer. It all looks great in firefox but in IE6 which my client views the web thru
    it looks very wide.

    So my question is how do I get IE6 to keep the footer width to 60PX?

    Any insights welcome :-)
    I have had a perfectly wonderful
    evening, but this wasn't it-
    Julius "GROUCHO" Marx - 1890-1977
    http://www.davidclick.com

  7. #7
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,624
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Well do you mean width or height?
    In any case, give the footer an overflow:hidden; to make it keep to those dimeensions. And if content is clipped give it position:relative;

    Easy fix since its 6:20 here in the morning...all nighter..WOOO
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  8. #8
    SitePoint Guru Zygoma's Avatar
    Join Date
    May 2006
    Location
    York, Uk
    Posts
    916
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Big thank you to Ryan and Rayzur, your combined talent sorted this out for me :-)
    I have had a perfectly wonderful
    evening, but this wasn't it-
    Julius "GROUCHO" Marx - 1890-1977
    http://www.davidclick.com

  9. #9
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,624
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Your welcome
    Always looking for web design/development work.
    http://www.CodeFundamentals.com


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
  •