Not signed in (Sign In)

SkillShare - A place to discuss Web Standards and Web Design topics

Categories

Vanilla 1.1.9 is a product of Lussumo. More Information: Documentation, Community Support.

CSS & HTML: Positioning: Absolute

Bottom of Page

1 to 22 of 22

  1.  
  1.  permalink
    Quick question:
    1. When do I set my position to Absolute? (sometimes I see people leaving it blank and some setting it to Absolute)

    2. Wjat's the difference between CSS1 and CSS2? How to tell which one?

    Thanks
    • CommentAuthormaspick
    • CommentTimeMay 3rd 2006
     permalink
    John -

    When you want something to be positioned in a certain place, regardless of where it stands in the markup, you give it's parent the attribute position: relative, then position the element in question in relation to it's parent with the use of two of: top, left, right, bottom.

    CSS1 & 2 are different versions of the web standards for CSS styling.

    That's my 2 cents. :^{>
  3.  permalink
    Thanks maspick..

    Another question:
    How do I center a div layer that will appear centered on every screen resolution. This layer is below my header which has the height of 150px and positioned Top: 0px



    Thanks in advance.
  4.  permalink
    Another question to the Gurus.
    If I have a header div with the width set to 100%, height 150px and below it is my content with 760px...
    How do I center my content layer so that it's centered on every resolution?
    I'm stuck!
    I tried setting Left to 50%, 25% but it didn't center.

    Do you guys put a table inside the div layer in this case?

    Please help a newbie.

    Thanks
  5.  permalink
    Have you tried "text-align: center" for the body element and then "text-align: left" for the content div?

    Also: if it's a div (block-level), your header doesn't usually need the 100% width attribute.
    •  
      CommentAuthorJohnRiv
    • CommentTimeMay 4th 2006
     permalink
    To center a DIV with a defined width, set its left and right margins to "auto", like so:

    div#content {
    margin-left: auto;
    margin-right: auto;
    }

    That won't work in IE5 PC though. To center a DIV in that browser, you need to apply "text-align: center;" to its parent element. You'll then most likely want to apply "text-align: left;" to the DIV you're centering. All you've described so far is a header div and a content div, so your final CSS should be:

    body {
    margin: 0;
    padding: 0;
    text-align: center;
    }
    body * {
    text-align: left;
    }
    div#header {
    width: 100%px;
    height: 150px;
    }
    div#content {
    margin-left: auto;
    margin-right: auto;
    }

    I'm assuming you're using IDs for the DIV's there. I also used the wildcard "*" to apply "text-align: left" to every element inside the body in case additional elements follow the content div. Depending on your layout, you may just want to apply that style to specific elements.
  7.  permalink
    Thanks guys.. Here's what I want to do.
    http://mysite.verizon.net/atomiccafe/

    I appreciate the help
  8.  permalink
    Could you center a wrapper div, make it 760 wide, and put the left and right divs inside it to constrain them? Since they are 380px each it should work.
    •  
      CommentAuthorJohnRiv
    • CommentTimeMay 7th 2006 edited
     permalink
    Here you are atomiccafe, based on your image...

    The CSS:

    body {<br />	margin: 0;<br />	padding: 0;<br />}<br /><br />div#header {<br />	width: 100%px;<br />	height: 150px;<br />	background: #369;<br />	color: #fff; <br />}<br /><br />div#left {<br />	position: absolute;<br />	width: 380px;<br />	left: 50%;<br />	top: 175px;<br />	margin-left: -380px;<br />	border: 1px solid #f60;<br />	color: #369;<br />}<br /><br />div#right {<br />	position: absolute;<br />	width: 380px;<br />	left: 50%;<br />	top: 175px;<br />	margin-left: 0px;<br />	border: 1px solid #f60;<br />	color: #369;<br />}


    The HTML:

    &lt;div id=&quot;header&quot;&gt;<br />&lt;p&gt;stretched header 100%&lt;/p&gt;<br />&lt;/div&gt;<br /><br />&lt;div id=&quot;left&quot;&gt;<br />&lt;p&gt;left div container&lt;/p&gt;<br />&lt;p&gt;width = 380px&lt;/p&gt;<br />&lt;/div&gt;<br /><br />&lt;div id=&quot;right&quot;&gt;<br />&lt;p&gt;right div container&lt;/p&gt;<br />&lt;p&gt;width = 380px&lt;/p&gt;<br />&lt;/div&gt;


    If you want a small gap between the 2 divs, just add a few pixels of left-margin to the right div and subtract a few pixels of left-margin from the left div
    •  
      CommentAuthorJJenZz
    • CommentTimeMay 7th 2006
     permalink
    When you want something to be positioned in a certain place, regardless of where it stands in the markup, you give it's parent the attribute position: relative, then position the element in question in relation to it's parent with the use of two of: top, left, right, bottom.

    It's the other way round! position: relative places the element relative to where it sits in the markup and absolute enables you to position anywhere on the page regardless of it's position in the markup.

    An Example
  11.  permalink
    Thank you very much JohnRiv. This is what I was trying to do.
    Thanks also JJenZz
    • CommentAuthoratomiccafe
    • CommentTimeMay 21st 2006 edited
     permalink
    Hi,
    How would you guys put this page together?
    There are 9 boxes in the center. Would you create a div for every box for alignment? OR would you create a table of 3 columns and 3 rows inside the div container of the 9 boxes?
    I plan to put images inside the boxes.

    Here's the link.
    http://mysite.verizon.net/atomiccafe/boxes.html

    I wonder what a CSS guru would do?

    Thank you in advance.
  13.  permalink
    Will the images all be the same size?

    If so... I'd probably put each image into a container DIV with a class "img-box". Then I'd float all of the "img-box" DIVs left within a larger "gallery" container.
    • CommentAuthormrklu
    • CommentTimeMay 22nd 2006
     permalink
    adjustafresh is right, i would have to agree with that. As long as you do the math right, you set each float to be a certain width where 3 of them (counting for spacing) add to the width of the container, that way it will only be able to hold 3, and they will continue to float:left as they go.

    If you are going to use margins though make sure to set the box elements to display:inline to get around IEs problem of doubling margins on floated elements.

    Also make sure to set a clearing element after all your floats, or use clearfix from positioniseverything.net to make sure your boxes push down on the container in firefox, unless you plan on setting the container to a set height.
    •  
      CommentAuthormringlein
    • CommentTimeMay 22nd 2006
     permalink
    To the original question ...
    For those of you who haven't seen it yet, I highly suggest reading through "Learn CSS Positioning in Ten Steps" -- it is short and to the point; excellent refresher as well for those seasoned designers.

    http://www.barelyfitz.com/screencast/html-training/css/positioning/
    • CommentAuthorphilmorley
    • CommentTimeMay 22nd 2006
     permalink
    A great guide that I use for CSS.

    http://www.w3schools.com/css
    • CommentAuthoratomiccafe
    • CommentTimeMay 22nd 2006
     permalink
    mringlein
    Thank you very much for the link "Learn CSS positiioning" It's reall a great tutorial.
    I'm a beginner in css because my teacher told us that layers is the way to go. But I'm really interested in learning css because of so many things I can do that I can't do in tables.

    Thanks guys.. until next question :)
    •  
      CommentAuthornifkin
    • CommentTimeMay 23rd 2006
     permalink
    I'm a beginner in css because my teacher told us that layers is the way to go.

    Feel free to drag your teacher out into the street and hit them with a crowbar.
  19.  permalink
    Can someone coach me how to keep my Footer in the absolute bottom on all monitors? I Tried putting a value in the Position Bottom but the Footer always ends up somewhere in the middle.

    I created a div with a graphic background.

    Thanks for your helps guys
    •  
      CommentAuthormringlein
    • CommentTimeJun 2nd 2006
     permalink
    I am doing this on a site I am working on (work in progress):
    http://marthastable.marylandmedia.com/

    Does that help?

    This tutorial will help:
    http://www.themaninblue.com/experiment/footerStickAlt/
  21.  permalink
    Oh yes mringlein

    Your reply definitely helped. Thank you very much my friend.
    I like what you did with your marylandmedia project where you made the graphics on the right to stay while scrolling the left part. I can't wait to see the finished product.

    I have been blesses with answers to my questions in this forum.

    Thank you all. Till next time.
    •  
      CommentAuthormringlein
    • CommentTimeJun 3rd 2006
     permalink
    Glad I could help.

    Perhaps someone can help me out. One of my co-workers is telling me we shouldn't do this on another project we are about to launch. There are some issues still -- notice how the footer goes 100px (the height of the footer) below the browser window? This can be fixed using a negative margin, but then you are limited to the elements in the footer (for example, some links wont be clickable b/c its technically in an element under another element -- due to the negative margin). Hoping to solve this soon, any help is appreciated.

1 to 22 of 22

  1.  
Add your comments
    Username Password
  • Format comments as (Help)
 
Back to Discussions Top of Page