Web Analytics Made Easy -
StatCounter Image and text borders within div - CodingForum

Announcement

Collapse
No announcement yet.

Image and text borders within div

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

  • Image and text borders within div

    Hi,

    I am trying to make a floating element that contains an image link and text.

    My problem is that the border of the image is not really wrapping around nicely.

    So i use margin and padding with negative px to fix it, but obviously it's a dirty way. Could some one see what i do wrong?

    here's html:
    Code:
    <div class="item_float">
    	<a href="http://dabija.lt.....">
            <div class="thumb_style">
                <img src="http://dabija.lt/wp-content/...." width="160" height="160" alt="Proginė puok?tė"/>
            </div>
        <div class="thumb_text">Proginės puok?tės</div>	
        </a>
    </div>
    here's css(notice -4px, etc.):

    Code:
    .item_float { float: left; margin:10px; padding:0px; text-align:center; width:160px;}
    
    .thumb_style { width: 160px; margin:0px 0px -4px 0px; padding:0px 0px -4px 0px; border: 1px solid grey; }
    
    .thumb_text { background:grey; margin:0px -2px 0px 0px; padding:0px -2px 0px 0px; color:white; }
    here's the website:

    http://dabija.lt/

    any help appreciated.

  • #2
    Originally posted by Auris View Post
    Hi,
    My problem is that the border of the image is not really wrapping around nicely.
    I'm not following exactly where you want the border in relation to the image and text

    Comment


    • #3
      Originally posted by webdev1958 View Post
      I'm not following exactly where you want the border in relation to the image and text
      Well, i want it exactly were it is now. But i don't understand why it doesn't do it properly with margin and padding 0px. Instead i have to use negative sign to correct the borders.

      while if i do styling in HTML it works ok.

      Code:
      <div class="item_float">
      	<a href="http://dabija.lt/geliu-pristatymas-siauliuose/progines-puokstes/">
      		<img src="http://dabija.lt/wp-content/gallery/progines-puokstes/dscf8894_1.jpg?1640017353" width="160" height="160" alt="Proginės puok?tės" style="border:1px solid grey;"><p style="margin:0px 8px 0px 8px; padding:0px 8px 0px 8px;background:grey;color:white;text-align:center;">Proginės puok?tės</p>
      	</a>
      </div>
      here i have: border:1px solid grey;

      when i use class thumb_style i have to do this ridiculous:

      margin:0px 0px -4px 0px; padding:0px 0px -4px 0px;

      and i don't see why

      Comment


      • #4
        Then you must have styles somewhere else in your css also affecting those elements because there is no reason why you should need -ve margins or paddings to do what you need.

        Comment


        • #5
          Originally posted by webdev1958 View Post
          Then you must have styles somewhere else in your css also affecting those elements because there is no reason why you should need -ve margins or paddings to do what you need.
          If it is that, then I'd be happy. But that's why i created these 3 classes, so nothing else would affect the style. And they are not repeating throghout my stylesheet. I might be doing some obvious mistake here. Hopefully, it will emerge soon. Thanks.

          Comment

          Working...
          X