No announcement yet.

Positioning pictures

  • Filter
  • Time
  • Show
Clear All
new posts

  • Positioning pictures

    Hello All,

    Having an issue with my website. I am trying to put 3 pictures stacked one on top of the other. Here is the code that I am using

    <img src="assets/templates/v32028/images/side_banner.jpg" align="right">
    <img src="assets/templates/v32028/images/side_banner2.jpg" align="right" vspace="150">
    I end up with something like the picture attached. sidebanner.JPG

    but I would like to have the green on top of the yellow. What is wrong with my code???


  • #2
    What's the code that comes before it? Can you send a link to the page?
    Joanne Barker
    VS Web Design
    [email protected]


    • #3
      Welcome to Valentine Spa - Sample Slogan

      there is no code before it. I am placing it on the home page header


      • #4
        you should take the alignment code out of the image tags themselves. Add an id for each item, or a class for both and style them with css. Even though 3dcart breaks these rules often, you shouldn't mix presentation with markup unless you are cutting corners or trying very hard to override a css style. (inline styles take priority)

        To stack the images on top of each other, since they display:inline by default (all images do)

        you could float them all one way or the other. lets say right since your alignment is trying to push it that way

        green= float:right;
        yellow= clear:right; float:right; will stack it directly below (add margin or padding to space them out.

        anything else would fall in shape with yellow's style. clear it then float it.

        if the images were a bit wider, and they couldn't be stacked side by side in any scenario, the clearing is not necessary, as it would happen by default.

        hope this made sense.


        • #5
          Thank you very much.

          I am kind of new to this, and I am trying to figure this out. So on the header I have...

          <img src="assets/templates/v32028/images/side_banner.jpg" align="right">
          <img src="assets/templates/v32028/images/side_banner2.jpg" align="right" vspace="150"> <br clear=right; float="right">
          It did not work.

          Thanks in advance


          • #6
            ah i think i missed the mark.

            your code should be something more like this.

            <!-- in your html file -->
            <img id="greenBanner" src="assets/templates/v32028/images/side_banner.jpg" />

            <img id="yellowBanner" src="assets/templates/v32028/images/side_banner.jpg" />

            /*in your css file*/
            #greenBanner {

            whatever area you are putting this in.. i.e. frame.html will take the image code. your css would go into whatever file is driving your template. (by default it would most likely be default_modified.css)

            hope that helps more.