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 3 of 3
  1. #1
    Senior Coder
    Join Date
    Dec 2005
    Location
    Slovenia
    Posts
    2,138
    Thanks
    120
    Thanked 79 Times in 79 Posts

    Position inline element relative to previous inline element ?

    <div>
    <a ...><img.../></a><span>foo</span>
    <a ...><img.../></a><span>foo</span>
    ....
    </div>

    need 'foo' to be on top of each image, left lover corner.
    Getting nowhere with this. Div can't be float:left for some other reasons.
    Found a flower or bug and don't know what it is ?
    agrozoo.net galery
    if you don't spot search button at once, there is search form:
    agrozoo.net galery search

  2. #2
    Master Coder sunfighter's Avatar
    Join Date
    Jan 2011
    Location
    Washington
    Posts
    7,954
    Thanks
    36
    Thanked 1,064 Times in 1,060 Posts
    May not be exactly what you want. Play with it:
    Code:
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Page Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
    .bottom-left {
      position: absolute;
      bottom: 8px;
      left: 16px;
      color: red;
      z-index: 2;
    }
    </style>
    </head>
    
    <body>
            
    <div style="position: relative;display: inline;"><a><img src="01.jpg"></a><div class="bottom-left">foo</div></div>
    <div style="position: relative;display: inline;"><a><img src="03.jpg"></a><div class="bottom-left">here</div></div>
                    
    </body> 
    </html>
    Evolution - The non-random survival of random variants.
    Physics is actually atoms trying to understand themselves.

  3. #3
    Senior Coder coothead's Avatar
    Join Date
    Jan 2004
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    3,452
    Thanks
    3
    Thanked 608 Times in 594 Posts
    Hi there BubikolRamios,

    here is my take on your problem...

    Code:
    
    <!DOCTYPE HTML>
    <html lang="en">
    <head>
    
    <base href="https://coothead.co.uk/images/"><!-- this is just for coothead testing -->
    
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">
    
    <title>untitled document</title>
    
    <!--<link rel="stylesheet" href="screen.css" media="screen">-->
    
    <style media="screen">
    
    body {
        background-color: #f9f9f9;
        font: 100% / 162% BlinkMacSystemFont, -apple-system, 'Segoe UI', roboto, helvetica, arial, sans-serif;
     }
    
    #links {
        padding: 0;
        margin: 0;
        list-style: none;
        text-align: center;
     }
    
    #links li {
        display: inline-block;
        margin: 0 0.5em 0.5em;
     }
    
    #links span,#links img {
       display: block;
       text-align: left;
     }
    
    #links img {
        border: 1px solid #000;
        box-shadow: 0.25em 0.25em 0.25em rgba( 0, 0, 0, 0.4 );
     }
    </style>
    
    </head>
    <body> 
     <ul id="links">
      <li><span>foo</span><a href="#"><img src="anim.gif" width="100" height="100" alt=""></a></li>
      <li><span>foo</span><a href="#"><img src="anim1.gif" width="100" height="100" alt=""></a></li>
      <li><span>foo</span><a href="#"><img src="anim2.gif" width="100" height="100" alt=""></a></li>
      <li><span>foo</span><a href="#"><img src="anim3.gif" width="100" height="100" alt=""></a></li>
      <li><span>foo</span><a href="#"><img src="anim4.gif" width="100" height="100" alt=""></a></li>
      <li><span>foo</span><a href="#"><img src="anim5.gif" width="100" height="100" alt=""></a></li>
    
      <li><span>foo</span><a href="#"><img src="anim.gif" width="100" height="100" alt=""></a></li>
      <li><span>foo</span><a href="#"><img src="anim1.gif" width="100" height="100" alt=""></a></li>
      <li><span>foo</span><a href="#"><img src="anim2.gif" width="100" height="100" alt=""></a></li>
      <li><span>foo</span><a href="#"><img src="anim3.gif" width="100" height="100" alt=""></a></li>
      <li><span>foo</span><a href="#"><img src="anim4.gif" width="100" height="100" alt=""></a></li>
      <li><span>foo</span><a href="#"><img src="anim5.gif" width="100" height="100" alt=""></a></li>
    
      <li><span>foo</span><a href="#"><img src="anim.gif" width="100" height="100" alt=""></a></li>
      <li><span>foo</span><a href="#"><img src="anim1.gif" width="100" height="100" alt=""></a></li>
      <li><span>foo</span><a href="#"><img src="anim2.gif" width="100" height="100" alt=""></a></li>
      <li><span>foo</span><a href="#"><img src="anim3.gif" width="100" height="100" alt=""></a></li>
      <li><span>foo</span><a href="#"><img src="anim4.gif" width="100" height="100" alt=""></a></li>
      <li><span>foo</span><a href="#"><img src="anim5.gif" width="100" height="100" alt=""></a></li>
    
      <li><span>foo</span><a href="#"><img src="anim.gif" width="100" height="100" alt=""></a></li>
      <li><span>foo</span><a href="#"><img src="anim1.gif" width="100" height="100" alt=""></a></li>
      <li><span>foo</span><a href="#"><img src="anim2.gif" width="100" height="100" alt=""></a></li>
      <li><span>foo</span><a href="#"><img src="anim3.gif" width="100" height="100" alt=""></a></li>
      <li><span>foo</span><a href="#"><img src="anim4.gif" width="100" height="100" alt=""></a></li>
      <li><span>foo</span><a href="#"><img src="anim5.gif" width="100" height="100" alt=""></a></li>
    
      <li><span>foo</span><a href="#"><img src="anim.gif" width="100" height="100" alt=""></a></li>
      <li><span>foo</span><a href="#"><img src="anim1.gif" width="100" height="100" alt=""></a></li>
      <li><span>foo</span><a href="#"><img src="anim2.gif" width="100" height="100" alt=""></a></li>
      <li><span>foo</span><a href="#"><img src="anim3.gif" width="100" height="100" alt=""></a></li>
      <li><span>foo</span><a href="#"><img src="anim4.gif" width="100" height="100" alt=""></a></li>
      <li><span>foo</span><a href="#"><img src="anim5.gif" width="100" height="100" alt=""></a></li>
     </ul>
    
    </body>
    </html>

    coothead
    ~ the original bald headed old fart ~


 

Tags for this Thread

Posting Permissions

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