Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 7 of 7
  1. #1
    New Coder
    Join Date
    Sep 2006
    Posts
    70
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Having Trouble Moving Text With DIV Class

    Basically, here's the coding I'm working with. I'm trying to move the "Halo 2 Tournament Underway" heading up so that it is parallel with the top of the image. I tried using margins to move the text up, but nothing works.

    Code:
    <html>
    <head>
    <style type="text/css">
    #tournament_spotlight img {border: 1px solid #828282;}
    .spotlight_content {
      /* What do I need to add here? */
    }
    a.spotlight_link:link, a.spotlight_link:visited {
      color: #698943;
      font: 8pt verdana;
      font-weight: bold;
      text-decoration: none
    }
    a.spotlight_link:hover, a.spotlight_link:active {
      color: #B96521;
      font: 8pt verdana;
      font-weight: bold;
      text-decoration: none
    }
    </style>
    </head>
    
    <body>
    
    <div id="tournament_spotlight">
    <div class="spotlight_content"><a href="http://www.google.com" title="Halo 2"><img src="http://img244.imageshack.us/img244/3176/spotlightvv1.jpg "width="109" height="92" hspace="10" vspace="10"/></a>
    <a class="spotlight_link" href="http://www.google.com" title="Halo 2 Tournament Underway">Halo 2 Tournament Underway</a>
    </div>
    </div>
    
    </body>
    
    </html>
    Last edited by Technique; 10-24-2006 at 01:01 AM.

  • #2
    Senior Coder
    Join Date
    Jan 2005
    Location
    Memphis, TN
    Posts
    1,785
    Thanks
    8
    Thanked 131 Times in 129 Posts
    Code:
    <html>
    <head>
    <style type="text/css">
    #tournament_spotlight img {border: 1px solid #828282;}
    .spotlight_content {
    border: 1px solid #000;
    }
    .spotlight_content a {
      /* What do I need to add here? */
    float: left;
    padding: 10px;
    }
    a.spotlight_link:link, a.spotlight_link:visited {
      color: #698943;
      font: 8pt verdana;
      font-weight: bold;
      text-decoration: none
    }
    a.spotlight_link:hover, a.spotlight_link:active {
      color: #B96521;
      font: 8pt verdana;
      font-weight: bold;
      text-decoration: none
    }
    </style>
    </head>
    
    <body>
    
    <div id="tournament_spotlight">
    <div class="spotlight_content"><a href="http://www.google.com" title="Halo 2"><img 
    
    src="http://img244.imageshack.us/img244/3176/spotlightvv1.jpg "width="109" height="92" /></a>
    <a class="spotlight_link" href="http://www.google.com" title="Halo 2 Tournament Underway">Halo 2 
    
    Tournament Underway</a>
    <div style="clear:left;"></div>
    </div>
    </div>
    
    </body>
    
    </html>
    try that out. A little sloppy but you can clean it up easy enough.

    basically you need to float your links. Since your floating you need something to clear the floats to make sure your containing div expands to hold them. I took off your hspace and vspace and replaced it with padding of 10px so that th elink without and image and the link with and image are what your essentially giving the h&vspace thus allowing them to sit flush at the top.
    Stop making things so hard on yourself.
    i is tugbucket :: help raise tugburg :: Whitehaven Kiwanis

  • #3
    Regular Coder
    Join Date
    Oct 2006
    Posts
    181
    Thanks
    1
    Thanked 6 Times in 6 Posts
    You could try putting it in a table...

    PHP Code:
    <body>

    <
    div id="tournament_spotlight">
    <
    div class="spotlight_content">

    <
    table border="0" cellpadding="0" cellspacing="0">
        <
    tr>
            <
    td>
                <
    a href="http://www.google.com" title="Halo 2">
                    <
    img src="http://img244.imageshack.us/img244/3176/spotlightvv1.jpg" valign="top" "width="109" height="92" hspace="10">
                </a>
            </td>
            <td valign="
    top">
                <a class="
    spotlight_link" href="http://www.google.com" title="Halo 2 Tournament Underway">Halo 2 Tournament Underway</a>
            
    </td>
        </
    tr>
    </
    table>

    </
    div>
    </
    div>

    </
    body

  • #4
    New Coder
    Join Date
    Sep 2006
    Posts
    70
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Are tables the best solution here? I've heard they have their uses still, but I don't know what they are.

  • #5
    Regular Coder
    Join Date
    Oct 2006
    Posts
    181
    Thanks
    1
    Thanked 6 Times in 6 Posts
    well, it worked....

  • #6
    New Coder
    Join Date
    Sep 2006
    Posts
    70
    Thanks
    0
    Thanked 0 Times in 0 Posts
    HarbingerOTV, is there a way of doing that without the padding, because it is preventing me from adding text directly under the heading. Also the links are activated 10px around the image and heading without me being directly over them.

    Basically what I'm asking is if there is a way to apply the link to only the image and heading and not the padding around it while still keeping them in place where they are now.
    Last edited by Technique; 10-24-2006 at 03:29 AM.

  • #7
    Senior Coder
    Join Date
    Jan 2005
    Location
    Memphis, TN
    Posts
    1,785
    Thanks
    8
    Thanked 131 Times in 129 Posts
    Code:
    .spotlight_content a {
    float: left;
    margin: 10px;
    display: inline;
    }
    try that. same spacing but using margin. Sorry didnt even think about the clickable area enlarging. display inline added to keep IE from doubling the margin on floats.
    Stop making things so hard on yourself.
    i is tugbucket :: help raise tugburg :: Whitehaven Kiwanis


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •