SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Evangelist runeveryday's Avatar
    Join Date
    Jul 2009
    Posts
    437
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    How to do this layout?

    tes.gif

    if not using a whole image as the background. how would you may do the layout?

    i maybe split all the small images as a whole image then using it as background. i know it will be worse. is there a good way to layout it

  2. #2
    SitePoint Addict FizixRichard's Avatar
    Join Date
    May 2003
    Location
    UK
    Posts
    372
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    I'd probably segment it; as you'll want rollovers right?

    So a cell with the background line, inside that cell have each link, use each individual link as a rollover image.
    FIZIX - Full Service Digital Agency - Engaging websites, apps and games.
    Follow us @FIZIXAgency

  3. #3
    SitePoint Evangelist runeveryday's Avatar
    Join Date
    Jul 2009
    Posts
    437
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by FizixRichard View Post
    I'd probably segment it; as you'll want rollovers right?

    So a cell with the background line, inside that cell have each link, use each individual link as a rollover image.
    could you give me more details. thank you.

    my way. i fell it's too stupid

    my html layout:

    <div class="promo"><span>Weekly On The News</span><span>Weekly On The News</span><span>Weekly On The News</span></div>
    the css layout:

    .promo{
    background:transparent url('../images/tes.gif') no-repeat 0 0;
    border-bottom: 2px solid #DEDEDF;
    height:100px;
    }

  4. #4
    SitePoint Addict FizixRichard's Avatar
    Join Date
    May 2003
    Location
    UK
    Posts
    372
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Is it a navigation or just information?

    OK, probably the easiest way:


    1. In Photoshop create the line (literally just the rule and save as bar.jpg)
    2. For each button, cut the icons out in Photoshop and save as whatever_the_icon_is.jpg)

    The HTML:

    HTML Code:
    <ul class="graphic">
       <li id="weeklyonthenews">Weekly On The News</li>
       <li id="becosteffective">Be Cost Effective</li>
       <li id="freedelivery">Free Delivery</li>
       <li id="changeyourmind">You get the point</li>
    </ul>

    Then the CSS for the HR in the UL cell:

    Code:
    .graphic
    {
       width: 400px;
       height: 50px;
       background-image: url('url_to_bar_image');
       background-position: x_pos px y_pos px;
    }
    
    /* height and width set to whatever the height and width are, also set margin and padding etc. as required */
    /* Adjust the background position x and y pos so that the HR is in the right place (its probably just the y_pos you will need to set, x_pos will likely be 0px
        i.e. background-position: 0px 25px;
    */

    And the CSS for each icon:
    Code:
    #weeklyonthenews
    {
       width: 25px;
       height: 50px;
       background-image: url('url_to_the_image');
       text-indent: -3000px;
    }
    
    ... and so on for each image
    Adjust the width and height as required and set any left/right margin as required.


    That's the easiest I think, though that code isn't tested written off the cuff so might not work perfectly.
    FIZIX - Full Service Digital Agency - Engaging websites, apps and games.
    Follow us @FIZIXAgency

  5. #5
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,329
    Mentioned
    463 Post(s)
    Tagged
    8 Thread(s)
    I would do similar to what FR suggested, starting with the same HTML. But I'd also put a span inside each list item like so:

    Code:
    <ul class="menu">
       <li id="weeklyonthenews">Weekly On The News<span></span></li>
       <li id="becosteffective">Be Cost Effective<span></span></li>
       <li id="freedelivery">Free Delivery<span></span></li>
       <li id="changeyourmind">You get the point<span></span></li>
    </ul>
    Now give each <li> a width and height and position: relative. Then set the spans to the same width and height and set to position: absolute; top: 0; left: 0;

    Then put your image as a background on those spans in different positions, using it as a sprite. This is an image replacement technique that means the menu won't fail if images don't load (because the text doesn't have to be hidden off screen).

  6. #6
    Hosting Team Leader silver trophybronze trophy
    cpradio's Avatar
    Join Date
    Jun 2002
    Location
    Ohio
    Posts
    5,240
    Mentioned
    155 Post(s)
    Tagged
    0 Thread(s)
    This may be of interest to you as well.
    http://css-tricks.com/circular-3d-buttons/


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
  •