1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

Help with CSS/HTML

Discussion in 'Off Topic' started by Divvens, Feb 23, 2012.

  1. Divvens

    Divvens Well-Known Member

    I've always been interested in designing but never in coding it, I want to learn more than just the basics about css and I decided to code one of my recent design.

    Everything was fine and I finished coding it, but when I passed it on to my friends there's a weird problem I'm facing. Different screen sizes is messing up the design and making it look weird...the first screenshot is of my screen where the design is perfect, the second screenshot is on my friends screen where the design is messed up.
    myscreen.png IMG_23022012_020337.png

    I've attached the zip file with everything in it, if someone could help me out and tell me what exactly did I mess up :eek:

    I'm new to it, I knew basic css before but not as much as to code a complete website, so if you want to give me some tips or guides please feel free to do so, and also explain me what I messed up with this particular design so that I get a basic knowledge of what to do to prevent it in my future works.
     

    Attached Files:

  2. Trent Gillespie

    Trent Gillespie Active Member

    You used absolute positioning, which will change with different screen resolutions. You need to use either floats or position:relative. I fixed your design using both techniques.
     

    Attached Files:

    CapnLuffy likes this.
  3. Divvens

    Divvens Well-Known Member

    Thanks a lot Trent, so I should avoid using absolute positioning right?

    There's one minor problem, somehow the nav bar doesn't work as links anymore (not clickable), but apart from that every problem I had before seems to be sorted out, thanks a lot!
     
  4. Divvens

    Divvens Well-Known Member

    Nevermine!

    "z-index:9999;"

    Solved the problem, thanks alot Trent ^^
     
  5. Trent Gillespie

    Trent Gillespie Active Member

    Yes. When using absolute or relative positioning, you have the ability to overlap divs. The z-index property allows you to bring certain divs to the top.

    Floating a div, on the other hand, does not allow you to overlap, and ignores the z-index property.
     
    CapnLuffy likes this.
  6. Trent Gillespie

    Trent Gillespie Active Member

    Also, I wanted to comment, you have an excess of div containers. Example

    <div id="navigation">
    <div class="navigation_links">
    content
    </div>
    </div>

    You can combine them into one <div id="navigation" class="container"> or just move all of your css style vars into the id and forgo the class. On a small site it isn't a big complexity, but isn't needed either.
     
    CapnLuffy likes this.

Share This Page