General question on the correctness of what I am explaining in my comments

j.smith1981 · May 17, 2011

This is more of a general question to say am I right in saying this?

<html>
  <head>
  <style type="text/css">
#branding {
  width: 70em;
  height: 10em;
  position: relative;
}

#branding .tel {
  position: absolute;
  right: 1em;
  bottom: 1em;
  text-align: right;
}
  </style>
    <title></title>
  </head>
  <body>
  
    <div id="branding">
  <p class="tel">This is the telephone no: 01423</p>
</div>
  
  </body>
</html>

I have made some assumptions but want correcting if I have got anything wrong.

This really is entirely about relative vs absolute positioning, does relative mean to its orignal position within the document?

Like if I put say:

<div id="heading"> <!-- say this was relative margin-top: 20px; -->
  <h1>This is My sites heading!</h1>
</div>

This would be in relation to its original position in the document right?

Then absolute would be in relation to that if its within what?

Sorry I am really getting confused about this, just trying to really understand the positioning systems within CSS, learning allot just need some extra clarification over something I have been reading in my own time.

Thanks and I appreciate any opinions and views in advance,

Jez.

cssfreakie · May 17, 2011

this sounds a bit stupid, but the best explanation can be found in the manual: http://www.w3.org/TR/CSS2/visuren.html

note the main difference between absolute and relative positioned elements is that absolute positioned ones are taken out of the normal flow; in other words they will not give dimensions (height and width) to the parent element or bother other elements.

pretty poften you wrap a div with position relative (i.e. a #wrapper) around a elements that have a position absolute. those absolute ones than behave within the dimension of the relative wrapper. Anyway i would have a look in the manual, as you might expect we can't summarize all that in 3 lines. Hope this helps though

j.smith1981 · May 17, 2011

No no thank you ever so much for your help, it is not stupid at all.

As I said in my OP I appreciate any replies and thank you ever so much!

Will read up on it, it's all about what circumstances your putting the tags in and I fully appreciate that from the reading I have been doing, from what I have been reading it's all about developing your own systems for doing things, or approaches rather, but there are some technicalities which I am getting into.

Again thank you,

Jez

cssfreakie · May 17, 2011

keep in mind, most designs for templates can be done without the use of positioning absolute and relative.

instead if you know how to use clear and float your designs will often make more sense. Something to have a look at is a gridsystem which uses just that. Some nice ones out there are yui-grid 960-grid oocss-grid

j.smith1981 · May 18, 2011

Yes that makes sense.

I mean I have done that before, but never really appreciated fully what I am doing when I come to extend allot of my knowledge, what I am trying to do really.

I have done things purely for the way they look, not what they're meant/designed for, like used say <p> to make a heading or something, I mean just as a kind of off the top of my head example.

Where I could use say <div id="news">

Then use <h2>News</h2>

</div>

Just as an example, just to keep it as structured as possible so to speak.

Yes I mean with the grid I am being advised to use firefox 2 plugins Web Developer and Firebug which I already have both, just out of convenience with valid html for which I have been doing my development work in PHP, the html output, trying to keep it as valid as possible, infact due to that plugin, one of them I keep all my html valid for about 99.9% of the time.

I mean I think I have nailed XHTML and HTML, since if your not using any XML in a document, why serve your pages up as XHTML? Just doesn't seem logical to me, but I mean a browser tends to not worry too much, it's only IE8 I think doesnt show if the markup (the term I use for HTML, since HTML is not code), it's only code when using jscripts or involves some dynamic content of some sort to what a user has inputted. Sorry IE8 doesnt show some pages due to it not adhering to the DTD part.

Like if its a strict and I did say <br and then it would fail to show I think, off complete memory though, can't remember if that actually occured, but in others it would just ignore that tag and move onto the next one like the older browsers did once, it's good for memory though.

But again thank you for helping me, really am learning allot from reading this book, going to start going back over what I have already learnt and try to fully appreciate the whole thing about CSS.

Sign In

General question on the correctness of what I am explaining in my comments

Recommended Posts

j.smith1981

Link to comment

Share on other sites

cssfreakie

Link to comment

Share on other sites

j.smith1981

Link to comment

Share on other sites

cssfreakie

Link to comment

Share on other sites

j.smith1981

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information