SitePoint Sponsor

User Tag List

Results 1 to 8 of 8

Thread: Text pop out

  1. #1
    SitePoint Wizard Blake Tallos's Avatar
    Join Date
    Jun 2008
    Location
    Cuyahoga Falls, Ohio.
    Posts
    1,511
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Text pop out

    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">
    div#images {
        position:relative;
        padding:10px;
        background-color:#fff;
        margin-bottom:20px
     
    }
    div#images a {
     
        text-decoration:none;
        color:#111111;
    }
    div#images a:hover {
        background:transparent;
    }
    div#images a span {
        display:none;
    }
    div#images a:hover span {
        display:inline;
        position:absolute;
        top:0;
        left:200px;
        padding:5px 5px 5px 0
    }
    </style>
    </head>
    <body>
    <!-- The Start of the Markup -->
    <div id="images">
        <a href="javascript:;"><img src="http://i39.tinypic.com/121bsz6.jpg" width="100" height="100"/><span>
        <strong>http://www.Strappity.com</strong>This is example text</span></a><br />
        <a href="javascript:;"><img src="http://i39.tinypic.com/121bsz6.jpg" width="100" height="100"/><span>
        <strong>http://www.Strappity.com</strong>Testing</span></a><br />
        <a href="javascript:;"><img src="http://i39.tinypic.com/121bsz6.jpg" width="100" height="100" /><span>
        <strong>http://www.Strappity.com</strong>Lets get some more text in there</span></a>
        <a href="javascript:;"><img src="http://i39.tinypic.com/121bsz6.jpg" width="100" height="100"/></br><span>
        <strong>http://www.Strappity.com</strong>Even more text come on</span></br></a>
    </div><!-- PressRelease Images -->
    </body>
    </html>

    The text is popping out to the right but for some reason my last image is aligning to the right? What can I do to solve this margin correct?
    Blake Tallos - Software Engineer for Sanctuary
    Software Studio, Inc. C# - Fanatic!
    http://www.sancsoft.com/


  2. #2
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,782
    Mentioned
    16 Post(s)
    Tagged
    0 Thread(s)
    You are doing <br />'s like "</br>"
    Code:
    <!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">
    div#images {
        position:relative;
        padding:10px;
        background-color:#fff;
        margin-bottom:20px
       
    }
    div#images a {
    position:relative;
     display:block;
        text-decoration:none;
        color:#111111;
    }
    div#images a:hover {
        background:transparent;
    }
    div#images a span {
        display:none;
    }
    div#images a:hover span {
        display:inline;
        position:absolute;
        top:0;
        left:200px;
        padding:5px 5px 5px 0
    }
    </style>
    </head>
    <body>
    <!-- The Start of the Markup -->
    <div id="images">
        <a href="javascript:;"><img src="http://i39.tinypic.com/121bsz6.jpg" width="100" height="100"/><span>
        <strong>http://www.Strappity.com</strong>This is example text</span></a>
        <a href="javascript:;"><img src="http://i39.tinypic.com/121bsz6.jpg" width="100" height="100"/><span>
        <strong>http://www.Strappity.com</strong>Testing</span></a>
        <a href="javascript:;"><img src="http://i39.tinypic.com/121bsz6.jpg" width="100" height="100" /><span>
        <strong>http://www.Strappity.com</strong>Lets get some more text in there</span></a>
        <a href="javascript:;"><img src="http://i39.tinypic.com/121bsz6.jpg" width="100" height="100"/><span>
        <strong>http://www.Strappity.com</strong>Even more text come on</span></a>
    </div><!-- PressRelease Images -->
    </body>
    </html>
    If you are talking about getting all the images on seperate lines do it like this-remove the <br />'s and set the <a>'s to display:block;

    Edit-Just understood you. Also add position:relative; to the <a>'s
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  3. #3
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    You've added a break after every image except the second to last

    Code:
        <a href="javascript:;"><img src="http://i39.tinypic.com/121bsz6.jpg" width="100" height="100" /><span> <strong>http://www.Strappity.com</strong>Lets get some more text in there</span></a><br> 
    You could have set the anchor to display:block and avoided the break altogether.

    That structure would really be better as a list and it would look so much neater in the html.

  4. #4
    SitePoint Wizard Blake Tallos's Avatar
    Join Date
    Jun 2008
    Location
    Cuyahoga Falls, Ohio.
    Posts
    1,511
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    Hi,

    You've added a break after every image except the second to last

    Code:
        <a href="javascript:;"><img src="http://i39.tinypic.com/121bsz6.jpg" width="100" height="100" /><span> <strong>http://www.Strappity.com</strong>Lets get some more text in there</span></a><br> 
    You could have set the anchor to display:block and avoided the break altogether.

    That structure would really be better as a list and it would look so much neater in the html.
    Thanks Paul. Wanna show me how to do it alittle bit cleaner?
    Blake Tallos - Software Engineer for Sanctuary
    Software Studio, Inc. C# - Fanatic!
    http://www.sancsoft.com/


  5. #5
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,782
    Mentioned
    16 Post(s)
    Tagged
    0 Thread(s)
    I have taken my suggestions and Pauls suggetsion of using a list and combined it
    Code:
    <!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">
    *{margin:0;padding:0;}
    div#images {
        position:relative;
        padding:10px;
        background-color:#fff;
        margin-bottom:20px
       
    }
    div#images a {
    position:relative;
     display:block;
        text-decoration:none;
        color:#111111;
    }
    div#images a:hover {
        background:transparent;
    }
    div#images a span {
        display:none;
    }
    div#images a:hover span {
        display:inline;
        position:absolute;
        top:0;
        left:200px;
        padding:5px 5px 5px 0
    }
    ul,li{list-style:none;}
    </style>
    </head>
    <body>
    <!-- The Start of the Markup -->
    <div id="images">
    <ul>
    <li>
    	<a href="javascript:;">
    	<img src="http://i39.tinypic.com/121bsz6.jpg" width="100" height="100"/><span>
    	<strong>http://www.Strappity.com</strong>This is example text</span></a>
    </li>
    <li>
    	<a href="javascript:;">
    	<img src="http://i39.tinypic.com/121bsz6.jpg" width="100" height="100"/><span>
    	<strong>http://www.Strappity.com</strong>Testing</span></a>
    </li>
    <li>
    	<a href="javascript:;">
    	<img src="http://i39.tinypic.com/121bsz6.jpg" width="100" height="100" /><span>
    	<strong>http://www.Strappity.com</strong>Lets get some more text in there</span></a>
    </li>
    <li>
    	<a href="javascript:;">
    	<img src="http://i39.tinypic.com/121bsz6.jpg" width="100" height="100"/><span>
    	<strong>http://www.Strappity.com</strong>Even more text come on</span></a>
    </li>
    </ul>
    </div><!-- PressRelease Images -->
    </body>
    </html>
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  6. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by BlakeAnthony View Post
    Thanks Paul. Wanna show me how to do it alittle bit cleaner?
    Ryan's already done it

    The only think I would change would be to use the ul as the container rather than having an extra div.

    Using lists means a little more html but means you can format the page nicely and it also makes more semantic sense. Also you should never have bare anchors adjoining other anchors as screenreaders will read the links without pausing as they assume its a paragraph of text with just a link in the prose. A list on the other hand should get a pause between each link (that's the theory anyway).

  7. #7
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,782
    Mentioned
    16 Post(s)
    Tagged
    0 Thread(s)
    Yea I realized I should have done that now. Thanks for that Paul. You can now remove the display:block; ffrom the <a> unless you want the entire thing to be a link.
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  8. #8
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,782
    Mentioned
    16 Post(s)
    Tagged
    0 Thread(s)
    Code:
    <!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">
    *{margin:0;padding:0;}
    ul#images {
        position:relative;
        padding:10px;
        background-color:#fff;
        margin-bottom:20px
       
    }
    ul#images a {
    position:relative;
     display:block;
        text-decoration:none;
        color:#111111;
    }
    ul#images a:hover {
        background:transparent;
    }
    ul#images a span {
        display:none;
    }
    ul#images a:hover span {
        display:inline;
        position:absolute;
        top:0;
        left:200px;
        padding:5px 5px 5px 0
    }
    ul,li{list-style:none;}
    </style>
    </head>
    <body>
    <!-- The Start of the Markup -->
    <ul id="images">
    <li>
    	<a href="javascript:;">
    	<img src="http://i39.tinypic.com/121bsz6.jpg" width="100" height="100"/><span>
    	<strong>http://www.Strappity.com</strong>This is example text</span></a>
    </li>
    <li>
    	<a href="javascript:;">
    	<img src="http://i39.tinypic.com/121bsz6.jpg" width="100" height="100"/><span>
    	<strong>http://www.Strappity.com</strong>Testing</span></a>
    </li>
    <li>
    	<a href="javascript:;">
    	<img src="http://i39.tinypic.com/121bsz6.jpg" width="100" height="100" /><span>
    	<strong>http://www.Strappity.com</strong>Lets get some more text in there</span></a>
    </li>
    <li>
    	<a href="javascript:;">
    	<img src="http://i39.tinypic.com/121bsz6.jpg" width="100" height="100"/><span>
    	<strong>http://www.Strappity.com</strong>Even more text come on</span></a>
    </li>
    </ul>
    </div><!-- PressRelease Images -->
    </body>
    </html>
    New container/changed the CSS to fit.
    Always looking for web design/development work.
    http://www.CodeFundamentals.com


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
  •