SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Member
    Join Date
    Jul 2013
    Posts
    16
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Image Positioning

    I have been having a little trouble trying to position the images i cut from the PSD of the final mockup of the site i have been working on. The CSS that photoshop made has every image
    Code:
    position: absolute;
    then it says how far from the top and left the image is. I don't like that cause when I try to use the same image over it keeps overlapping the previous one. I have an element that feeds News to the main page of a site. But the "Panel" that the news is in uses an image as a title and with the image being
    Code:
    position: absolute;
    it just keeps overlapping each news post in the same spot.

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,555
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    You would rarely use position:absolute to lay out elements in fluid pages and I would ignore any generated output you get from software like Photoshop as it can never know the dynamics of the situation at hand and will provide you with incorrect code structures.

    We would need to see your page to advise the best way to position things otherwise we will give incorrect advice (just as Photoshop has done).

    Please provide a link or follow the posting guidelines so that we can help you best.

  3. #3
    SitePoint Member
    Join Date
    Jul 2013
    Posts
    16
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Click Me!

    That is the link, if you look at the css you will see that they are all positioned.

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,555
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    You have a great many issues on that page so it would be wise to start afresh and fix the page as even the validator has to give up because it cannot parse the html.

    You will need valid html before you can progress with this so you will need to fix the errors that the validator points out and then revalidate each time as there are loads more that will appear as you start to get the html back into shape.

    For example you cannot do this:

    Code:
    <ul>
         <input type="password" class="input-large" name="password" placeholder="Password">
     </ul>
    All content in a ul should be inside a list element.

    e.g.
    Code:
    <ul>
     <li><input type="password" class="input-large" name="password" placeholder="Password"></li>
     </ul>
    However if you only have one element then its hardly a list so a ul list structure is not correct for that one item. You probably meant to put all inputs in the same list but I don't like using lists for form controls as they are not really lists (although some will argue that they are).

    Your navigation is 4 empty divs:

    Code:
       <div id="nav-home">
    
        </div>
        <div id="nav-account">
    
        </div>
        <div id="nav-other">
    
        </div>
        <div id="nav-end">
    
        </div>
    That is a good case to use lists but you really must get some real content in there as at present screen readers and search engines will see nothing at all. If you use background images for menu links then you should use an image replacement technique.

    You are using bootstrap so you must ensure that when you create a bootstrap "span" element that the numbers add up to 12 (for the default 12 column layout). e.g if inside a row you have a span3 (div class="span3") then you need another column to be span9 so that they add up to 12 ((div class="span3")) or if nested add up to the parents span value.

    You have just used a span element and then absolutely placed content inside it which is much wider than the container it applies to! You must keep to the bootstrap guidelines or you may as well not use bootstrap.

    You don't need absolute positioning but use the bootstraps floated spans (note that I am talking about bootstrap span classes and not html spans). For two columns you would just need a span3 and a span 9 inside a div with a class of row. The space at the top of the page for your image could be created with padding-top so that the columns can start in the right place.

    Don't give arbitrary heights to the main containers as that will never work. Let the content dictate the height.

    I'm short of time tonight but I will have a look back tomorrow and provide some code examples (unless anybody else wants to jump in the meantime ).

  5. #5
    SitePoint Member
    Join Date
    Jul 2013
    Posts
    16
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Wow this is a GREAT response, I'm sorry I wasn't able to respond sooner, I was at work. This site is not close to being complete yet. It's just I have seen other sites that have images that aren't positioned but they show up in the correct div. That's what im trying to get for this site before I continue. I don't have alot of time to fix the html errors either so I will pass on that for now.


Bookmarks

Posting Permissions

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