SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Addict
    Join Date
    Sep 2008
    Posts
    341
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Simple CSS layout problem

    I'm guessing this is simple, but not for me.

    http://page-test.co.uk/img.html

    The red box needs to wrap around everything.

    I need to do the image like this (if possible).

    I can't find anything on Google, or even know what I would search for.

  2. #2
    SitePoint Member
    Join Date
    Sep 2012
    Location
    Dhaka, Bangladesh
    Posts
    17
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    This should work.

    HTML Code:
    <!DOCTYPE html>
    <html lang="en">
        <head>
            <meta charset="utf-8" />
            
            <title>Title</title>
            
            <style type="text/css">
                .box {
                    border: 1px solid #F00;
                }
                
                .box a div.google-image {
                    width: 273px;
                    height: 178px;
                    background: url(http://cdni.wired.co.uk/273x178/g_j/google_273x178.jpg) no-repeat;
                }
            </style>
        </head>
        
        <body>
            <div class="box">
                <p>Line # 1</p>
                
                <p>Line # 2</p>
                
                <p>Line # 3</p>
                
                <a href="http://www.google.com/" target="_blank"><div class="google-image">Go to Google</div></a>
            </div>
        </body>
    </html>

  3. #3
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,798
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)
    Actually, the problem is that anchor tags are INLINE ELEMENTS and as such CANNOT have height /width by default.
    simply add display:block; to .google-image {} and you will be fine.

  4. #4
    SitePoint Addict
    Join Date
    Sep 2008
    Posts
    341
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by dresden_phoenix View Post
    Actually, the problem is that anchor tags are INLINE ELEMENTS and as such CANNOT have height /width by default.
    simply add display:block; to .google-image {} and you will be fine.
    That did it.

    Thanks both for the input.


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
  •