10 {{ upvoteCount | shortNum }}
10 {{ upvoteCount | shortNum }}

AMAZING Killer image positioning on webpage...

by mhdeaton
8 replies
This is so freakin cool so please read...

Ok I was on a site where this image was placed beautifully over the top of a square html element. I knew that the image and the element behind it must be 1 image,..

NOT SO

Here's what this designer did and I need someones help.

He's using absolute positioning but instead of using the TOP and LEFT from the browser hes using the TOP and LEFT from the CSS container

ANYONE KNOW HOW TO DO THAT ??

I hope someone can help because this technique can really spice up a sales letter with killer little details like post its and many other possibilities.

Heres th site. Check out the hat and youll see what I mean its a floating div tag and no matter how you resize your browser it stay on spot.

Simply because its taking the abolute position refrence from within the container div tag and not the page top and left.

Sorry if this is hard to follow.

Texas Hunt Lodge - Texas Exotic Hunts - Texas Whitetail Hunts - Elk Hunts - Kerrville, Texas - Texas Hunting Lodge
#amazing #image #killer #positioning #webpage
  • Profile picture of the author Jonas B
    simple,

    but your in your css container:
    position: relative;

    then your image element something like

    position: absolute;
    top: 10px;
    left: 10px;
    Signature
    Proud owner of the most flexible mobile app builder. Check it out at http://bit.ly/hybrica!
    Mobile Web Expert & Android Developer
    {{ DiscussionBoard.errors[3616053].message }}
  • Profile picture of the author JohnMcCabe
    It's pretty simple, and pretty slick. He's using a CSS class to use absolute positioning for the hat (check the style sheet for a class called .hat).

    Has nothing to do with the floating div tags. He's using the class to set the hat's position relative to the upper left corner of the page.
    {{ DiscussionBoard.errors[3616060].message }}
  • Profile picture of the author mhdeaton
    Im confused every time I do it mine positions from the top and left of the page THIS DOESNT WORK...

    Somehow his is relative to top and left of the container div ???
    {{ DiscussionBoard.errors[3616091].message }}
  • Profile picture of the author Kezz
    The trick is that if you want to absolutely position an element inside a div, the parent div has to be positioned relatively.

    Here's a great rundown that was the "sink in" moment for me on this subject: Learn CSS Positioning in Ten Steps: position static relative absolute float
    {{ DiscussionBoard.errors[3616143].message }}
  • Profile picture of the author matt5409
    these types of questions are easy to answer - just install Firebug for Firefox and you can inspect the corresponding CSS to any element on the page
    {{ DiscussionBoard.errors[3616384].message }}
    • Profile picture of the author Pion
      It is not too difficult, as other already said, you need to put the absolute div inside a relative div.

      I suggest you to read this short paragraph, it has a clear example:

      css-discuss.incutio.com/wiki/Absolute_Layouts#Relative_to_what.2C_exactly.3F

      I strongly suggest to specific width and height of the absolute div, even if it contains only one image, to avoid odd results in Explorer 7

      Es:
      .absolute-area-class-name{
      position:absolute;
      display: block; /* So we can give the element a width */
      height:130px;
      width:200px;
      top: 3px;
      right: 3px;

      etc.
      {{ DiscussionBoard.errors[3617002].message }}
  • Profile picture of the author mhdeaton
    Got it - wow this is a cool way to finish up an already nice design. Thanks guys it works perfectly. Why do I not know this after 10 years of designing all my sites ?
    {{ DiscussionBoard.errors[3619834].message }}
    • Profile picture of the author JohnMcCabe
      Originally Posted by mhdeaton View Post

      Got it - wow this is a cool way to finish up an already nice design. Thanks guys it works perfectly. Why do I not know this after 10 years of designing all my sites ?
      My old engineering boss used to like to say that "ain't none of us as smart as all of us..."
      {{ DiscussionBoard.errors[3622701].message }}

Trending Topics