SitePoint Sponsor

User Tag List

Results 1 to 12 of 12

Thread: Imagine Links

  1. #1
    SitePoint Enthusiast
    Join Date
    Nov 2006
    Posts
    30
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Imagine Links

    I'm trying to make your typical header with buttons. Thing is I want my images to be together, and I'm getting a space in between each links. How would I bring these together?

    Here is the code I have.

    <div class="menu">
    <a href="home.html" />
    <img src="../../images/1home.gif" width="104" height="42" border="0" />
    </a>
    </div>

  2. #2
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,108
    Mentioned
    28 Post(s)
    Tagged
    2 Thread(s)
    It sounds like default margin and padding,

    try adding the following to your CSS
    Code:
    a img { margin: 0; padding: 0; }
    This will remove all the padding and margin from all linked images on your page.

  3. #3
    SitePoint Enthusiast
    Join Date
    Nov 2006
    Posts
    30
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Stil not working when I put it in the CSS.

  4. #4
    SitePoint Enthusiast
    Join Date
    Nov 2006
    Posts
    30
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    .header
    {
    position:absolute;
    top:0px;
    left:138px;
    width:747px;
    height:77px;
    background-image:url('header.gif');
    }

    .left
    {
    position:absolute;
    top:77px;
    left:138px;
    width:111px;
    height:42px;
    background-image:url('left.gif');
    }

    .right
    {
    position:absolute;
    top:77px;
    left:771px;
    width:114px;
    height:42px;
    background-image:url('/right.gif');
    }

    .menu
    {
    position:absolute;
    top:77px;
    left:249px;
    width:522px;
    height:42px;
    }


    .main
    {
    position:absolute;
    top:119px;
    left:138px;
    width:747px;
    height:374px;
    background-image:url('/main.gif');
    }



    .footer
    {
    position:absolute;
    top:493px;
    left:138px;
    width:747px;
    height:58px;
    background-image:url(/footer.gif');
    }

    That's the CSS an the bold part is where my buttons are.

  5. #5
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,108
    Mentioned
    28 Post(s)
    Tagged
    2 Thread(s)
    Is there any chance of linking to your site?
    I don't like the look of everything being absolutely positioned, I personally never use absolute positioning, saying that it does have it's uses though.
    Perhaps we would be able to suggest an more easily maintainable solution.

    Cheers,

  6. #6
    SitePoint Enthusiast
    Join Date
    Nov 2006
    Posts
    30
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I'm doing this site as a project for class and I'd have to give u my password to see it. It's basicaly done, all I need to do is put in content wich shoudn't be too hard. My only problem are the link images for navigation not sticking together.


    What would you put instead of the absolute?

  7. #7
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,108
    Mentioned
    28 Post(s)
    Tagged
    2 Thread(s)
    Regarding positioning, anything but.
    I usually use the normal document flow with block level elements adding padding/margins to move the content to the correct position. When you need columns you simply float that column left or right and give it a set width or a percentage.

    Actually you know what the problem is.. <a href="home.html" /> You don't need that closing / there.

    If this doesn't fix it try setting the img to display: block;

  8. #8
    I meant that to happen silver trophybronze trophy Raffles's Avatar
    Join Date
    Sep 2005
    Location
    Tanzania
    Posts
    4,662
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    The problem is because there is whitespace between your <a> and <img> tags and between each <a> as well. The browser sees this whitespace and prints it. Even carriage returns count. I do this:
    Code:
    <div><!--
      --><a><img></a><!--
      --><a><img></a><!--
      -->and so on<!--
    --></div>

  9. #9
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,108
    Mentioned
    28 Post(s)
    Tagged
    2 Thread(s)
    I thought the white space issue was an Internet Explorer only bug, does this effect standards compliant browsers like Firefox?

  10. #10
    I meant that to happen silver trophybronze trophy Raffles's Avatar
    Join Date
    Sep 2005
    Location
    Tanzania
    Posts
    4,662
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    I believe so because it isn't a bug. The browser sees whitespace between inline-level elements and it (correctly) prints it. If you give display:block to the anchors and float them left, it won't be a problem either in FF or IE.

  11. #11
    SitePoint Wizard bronze trophy Tyssen's Avatar
    Join Date
    Oct 2005
    Location
    Brisbane, QLD
    Posts
    4,067
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Raffles
    If you give display:block to the anchors and float them left, it won't be a problem either in FF or IE.
    Better still, put all the anchors in a list.

  12. #12
    CSS & JS/DOM Adept bronze trophy
    Join Date
    Mar 2005
    Location
    USA
    Posts
    5,482
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yes, white-space between inline elements is handled differently from when it's between block-level elements. (The display property affects this.)

    Tyssen is correct. You should use an unordered list (<ul>).

    These three articles explain how to style lists.
    http://www.alistapart.com/articles/taminglists/
    http://css.maxdesign.com.au/listutorial/
    http://www.webreference.com/programming/css_lists/

    And this one explains a fix for a common IE bug:
    White space bug revisited--the definitive fix
    We miss you, Dan Schulz.
    Learn CSS. | X/HTML Validator | CSS validator
    Dynamic Site Solutions
    Code for Firefox, Chrome, Safari, & Opera, then add fixes for IE, not vice versa.


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
  •