CODEWITHSUNDEEP
htmlcss
Rowan K.
Rowan K.

Reputation: 491

Basic CSS Positioning (Relative vs. Absolute)

I recently wrote, designed and uploaded my first website, http://www.autismsees.com.

I put it on the web today for the first time, and I realized that on many browsers the entire page looks like it is shifted to the right.

This is because I used absolute positioning for all of my elements rather than relative positioning, which is usually preferred. This is a mistake I am very eager to correct, but I am having difficulty understanding how I should go about switching to relative positioning.

The css of the webpage can be found at http://autismsees.com/style/stylesheet.css.

I was wondering if anyone could give me a few suggestions for how I can change the stylesheet, or an online resource that would be helpful in teaching me how to do this.

Thanks so much.

Upvotes: 1

Views: 161

Answers (4)

Mateo
Mateo

Reputation: 1960

My suggestion would be to learn all about the box model and how floats work in CSS. This would be of monumental importance when building out a design in HTML and CSS. Ditch absolute positioning and use flow instead.

Another thing to look into is the difference between classes and id's. Remember that id's are for a single instance of an element/style while classes can be applied to many elements on a page. The benefit of using classes is that you get a lot of code reuse and your overall file size is much smaller in the end. I usually reserve id's for use in JavaScript only.

And lastly, I would look into a grid framework like Twitter Bootstrap. While checking out the source to your site it would appear that you have included the Bootstrap CSS as "slidestyle.css". This file has some great reusable stylized elements. As was mentioned by Fredy you should probably try something like this:

<!doctype html>
<html>
    <head>
        <title>AutismSees</title>

        <link rel="stylesheet" href="slidestyle.css">
        <link rel="stylesheet" href="stylesheet.css">
    </head>
    <body>
        <div class="container">
            <header class="row span12">
              <!-- Header and Navigation Here -->
            </header>
            <div class="row span12">
              <!-- Slide control here -->
            </div>
            <!-- Create the three content columns -->
            <div class="row">
              <div class="span4">
                <h2>Contribute</h2>
                <p>Text here.</p>
              </div>
              <div class="span4">
                <h2>Stay Connected</h2>
                <p>Text here.</p>
              </div>
              <div class="span4">
                <h2>Our Friends</h2>
                <p>Text here.</p>
              </div>
            </div>
            <footer class="row span12">
              <p class="copyright">&copy; 2013 AutismSees.</p>
            </footer>
        </div>
    </body>
</html>

The container, span4, span12, and row classes are all from Twitter Bootstrap. Using these and the other helpful classes in Bootstrap will actually help speed up laying out the page.

To perhaps help illustrate all of this I have created a rough draft of what the structure might look like: http://jsfiddle.net/matthewkimber/JmsSx/10/embedded/result/. This is only part of the way there, but you can see that I am using no absolute or relative positioning. Just flow and floating. The page is centered and stays centered if the browser is resized. With a little tweaking you could easily turn this into your current look and feel.

Upvotes: 0

Fredy
Fredy

Reputation: 2910

Wow .. I was surprised to see your HTML and CSS code, I remember the first time I learned HTML and CSS. But just a suggestion, maybe you need to improve the structure and tidy up your HTML code. Can like this:

<html>
<head>......</head>
<body>
<div id="wrapper">
   <div id="container">
   ......
   <!-- YOUR CONTENT HERE -->
   ......
   </div>
</div>
</body>
</html>

I use two ways (using CSS) that can center a web page:

#container{
    position: relative;
    margin : 0 auto;
    width: 900px; 
}

Or

#container{
    position: absolute;
    width: 900px;
    left: 50%;
    margin-left : -450px;
}

here is the fiddle: http://jsfiddle.net/z9vVu/

Hope this usefull.

Upvotes: 3

PSL
PSL

Reputation: 123749

Probably this webcast may help you understand positioning better:-

http://css-tricks.com/video-screencasts/110-quick-overview-of-css-position-values/

Upvotes: 2

Niet the Dark Absol
Niet the Dark Absol

Reputation: 324840

Subtract 200 from all of your left properties, then wrap
<div style="position:relative; margin:0 auto;">...</div> around the entire page (just inside the <body>...</body>). This should solve your problems nicely.

Upvotes: 1

Related Questions