Floating Image?

  • hexxvoid

    (@hexxvoid)


    16 years, 9 months ago

    Hi guys, you’ll have to forgive me here if this is simple – I’m still trying to wrap my head around things and being that I mostly come from a 3-D background html/css isn’t quite my forte.

    Okay, so I have my theme and that’s good to go but I want to have an image “float” to both the right and left hand side of the template. I’ve included a crude drawing to show what I mean.

    Example Image

    I’m looking to do something like the example on the right, I’m sure it’ll involve a div layer for each image but I’ve not done anything like this since school and have completely forgotten. 🙁

    Would it be too much to ask someone to walk me through it in baby steps – I’m quite confident in editing basic parts of the stylesheet but as I said, this really isn’t my strong point.

    Thanks 🙂

Viewing 2 replies - 1 through 2 (of 2 total)
  • esmi

    (@esmi)

    16 years, 9 months ago

    http://www.w3schools.com/css/

    Look at the float property.

    Simon Fairbairn

    (@simonfairbairn)

    16 years, 9 months ago

    Do you want the images in an exact position within the page? Because, if so, it might be better to use absolute positioning instead.

    The problem with floats is that they are still within the document flow, and can therefore be affected by what elements are above and below them.

    Absolute positioning takes them out of the flow and places them exactly on the page, relative to the container element. Something like

    xhtml:

    <div id='container'>
<div id='heart'></div>
<div id='tick'></div>
</div>

    CSS:

    #container {position: relative; width: 700px; }
.heart {position: absolute; top: 50px; left: 0; margin-left: -50px; }
.tick {position: absolute; top: 250px; left: 650px; }

    would recreate the page that you’ve diagrammed. Obviously, these are just examples.

    If you want them to be affected by other elements, however, floats would be the way to go.

Viewing 2 replies - 1 through 2 (of 2 total)

The topic ‘Floating Image?’ is closed to new replies.