SitePoint Sponsor

User Tag List

Results 1 to 13 of 13
  1. #1
    SitePoint Zealot
    Join Date
    Oct 2007
    Location
    Toronto
    Posts
    172
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Text Links on Images Help

    I have a question and was wondering if this was possible with HTML.

    I would like to have an image around 320x240 it will be a grey solid filled images. On top or embded on the image I would like to have about 4 bullets with hyperlinks pointing to external sites.

    I was wondering how can I do this.
    ]

  2. #2
    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)
    Make a div the size of your image, then set that image as the background image of that div.
    Then just code an unordered list within that div and position the anchors according to your bullets, that is if the bullets are part of the image.

  3. #3
    SitePoint Zealot
    Join Date
    Oct 2007
    Location
    Toronto
    Posts
    172
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    would it be possible to display the code for reference. I don't know how to straight code that.
    ]

  4. #4
    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)
    Yeah, hang on and I'll work something up.

  5. #5
    SitePoint Zealot
    Join Date
    Oct 2007
    Location
    Toronto
    Posts
    172
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks its much appreciated.
    ]

  6. #6
    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)
    There is really not much to it, the list styles will need to be adjusted to your liking. You might even be able to do away with that list wrapping div, you could just give a width and height to the ul and set the background on it.

    Code HTML4Strict:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html lang="en">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>demo</title>
    <meta name="generator" content="PSPad editor, www.pspad.com">
    <style type="text/css">
     
    /*===== Resets =====*/
    body, address, blockquote, dl, ol, ul, li, form, fieldset, legend, h1, h2, h3, h4, h5, h6, p, pre {
        margin:0;
        padding:0;
    }
    body {
        background: #fff;
    }
    #wrapper {
        width:600px;
        margin:30px auto;
        background:#EEF;
        overflow:hidden;
    }
    #list-wrap {
        width:320px;
        height:240px;
        margin:0 auto;
        background: #CCC url(images/background.jpg) no-repeat;
    }
    .menu {margin:0 40px;}
     
    .menu li {
        list-style-type:disc;
        background-repeat:no-repeat;
        margin:0 0 10px 0;
        padding:0 0 15px 0px;
        letter-spacing:2px;
    }
    .menu li a:link, .menu li a:visited {
        font-family:Arial, Helvetica, sans-serif;
        color: #0000CC;
        text-decoration:none;
    }
    .menu li a:hover, #current {
        color: #FF0000;
    }
    </style>
    </head>
    <body>
     
    <div id="wrapper">
    <div id="list-wrap">
        <ul class="menu">
            <li><a href="#">Item 1</a></li>
            <li><a href="#">Item 2</a></li>
            <li><a href="#">Item 3</a></li>
            <li><a href="#">Item 4</a></li>
        </ul>
    </div>
    </div>
     
    </body>
    </html>

  7. #7
    SitePoint Zealot
    Join Date
    Oct 2007
    Location
    Toronto
    Posts
    172
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    How can I have it so its a point form example

    <li>Bullet point</li>
    <li>Bullet point</li>
    <li>Bullet point</li>
    <li>Bullet point</li>
    ]

  8. #8
    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)
    Are you saying you want arrows instead of bullets?
    That point to the links

  9. #9
    SitePoint Zealot
    Join Date
    Oct 2007
    Location
    Toronto
    Posts
    172
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    No worries bout the bullets. Solved that. How do I remove the outer layer that looks almost blueish. I would like to keep the center grey image.
    ]

  10. #10
    SitePoint Wizard Blake Tallos's Avatar
    Join Date
    Jun 2008
    Location
    Cuyahoga Falls, Ohio.
    Posts
    1,510
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Code CSS:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <link rel="stylesheet" type="text/css" href="index.css" />
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <style type="text/css">
    #container {
        width:500px;
        margin:0 auto;
    }
    #menu {
        width:300px;
    }
    #menu li {
        display:inline;
        margin:5px 20px 5px;
    }
    #innerwrapper {
        width:300px;
        background-image: url('') #111111;
        margin:0 auto;
    }
     
    </style>
    </head>
    <body>
        <div id="container">
                <ul id="menu">
                    <li><a href="#" title="">Example</a></li>
                    <li><a href="#" title="">Example</a></li>
                    <li><a href="#" title="">Example</a></li>
     
                     <div id="innerwrapper">    
     
                    <p>This is example textThis is example textThis is example textThis is example textThis is example textThis is example textThis is example textThis is example text</p>
                    </div>
                </div>
            </div>
        </body>
    </html>
    Blake Tallos - Software Engineer for Sanctuary
    Software Studio, Inc. C# - Fanatic!
    http://www.sancsoft.com/


  11. #11
    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)
    That bluish color is the wrapper background #EEF. That wrapper div was just to simulate the div you would be placing the menu in. It can be removed, as well as the other div. Then you can just set your BG image on the ul.
    Code HTML4Strict:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html lang="en">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>demo</title>
    <meta name="generator" content="PSPad editor, www.pspad.com">
    <style type="text/css">
     
    /*===== Resets =====*/
    body, address, blockquote, dl, ol, ul, li, form, fieldset, legend, h1, h2, h3, h4, h5, h6, p, pre {
        margin:0;
        padding:0;
    }
    body {
        background: #fff;
        font-family:Arial, Helvetica, sans-serif;
        font-size:100%;
    }
    .menu {
        width:320px;
        height:190px; /*240px total with padding*/
        padding-top:50px;
        margin:20px auto;
        background: #CCC url(images/background.jpg);
    }
    .menu li {
        margin:0 0 20px 40px;
        padding:0;
        letter-spacing:2px;
    }
    .menu li a:link, .menu li a:visited {
        color: #0000CC;
        text-decoration:none;
    }
    .menu li a:hover{
        color: #FF0000;
    }
    </style>
    </head>
    <body>
     
    <ul class="menu">
        <li><a href="#">Item 1</a></li>
        <li><a href="#">Item 2</a></li>
        <li><a href="#">Item 3</a></li>
        <li><a href="#">Item 4</a></li>
    </ul>
     
    </body>
    </html>
    Last edited by Rayzur; Apr 7, 2009 at 20:51.

  12. #12
    SitePoint Zealot
    Join Date
    Oct 2007
    Location
    Toronto
    Posts
    172
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you all for your help.
    ]

  13. #13
    SitePoint Zealot
    Join Date
    Oct 2007
    Location
    Toronto
    Posts
    172
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Is there any way I can place this in a table format?
    ]


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
  •