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

<div> positioning

Discussion in 'CIW Certifications' started by IThurts, Feb 24, 2008.

  1. IThurts

    IThurts Kilobyte Poster

    284
    2
    32
    Hi again,

    So iv been working through the westciv.com tutorial on CSS, feeling like im not really getting anywhere because i only study like 2hrs every evening...but i am and have learnt ALOT about selectors and element properties etc.
    I understand about page flow and that somethings are statically positioned ie: the way they flow down the page is the way they are displayed in a browser.Relative postioning being th same as static UNTIL it is given some positioning properties. And absolute being where you take the div id element out of the natural flow and position it out of the normal flow of html.

    The only thing that i am tearing my hair out with is the positioning of the different <div id>'s. its so hard to get your head around. Can someone simplify it for me???
    I have a few div id tags: #header,#content,#navbar and #main-text, i understand the need for all except the #content.
    Basically i need to understand WHY we need a div id which is used as a container(which is what the #content does)? Why cant we just have #navbar,#main-text and #header. Whats the purpose of the container like #content?? To be able to move both the maintext and navbar TOGETHER or...?

    Excuse me ramblings, i just needed to get it down here :oops:
    I just feel like i have got through so much and i am creating a decent portfolio and all that, but if i was asked to re-write the code again but say position something somewhere else, i wouldnt have a clue. I guess it all comes with practice?? Im sure if i was asked to do the above, i would have to go back to the code i have learnt from the tutorial and re-reead it, but i want to be able to KNOW it inside and out...am i being impatient? It really frustrates me:(

    I need to have a simplified explanation of how positioning works please!!!
     
    Certifications: BTEC national Diploma Computer Studies
    WIP: See Sig
  2. harpistic

    harpistic Byte Poster

    242
    4
    29
    Lots of info on Google about Css and div like link, have you looked around the available articles?
     
    Certifications: Pet Geekery
    WIP: cure for insomnia
  3. IThurts

    IThurts Kilobyte Poster

    284
    2
    32
    thanks harpistic, however i tihnk my main issue is: how do i know how many pixels the content needs, how many the navbar needs etc etc. I wouldnt really know where to start, ie: what values to use...how is THIS learnt?trial and error??
    I tihnk the logic behind the types of code and the syntax is quite easy, its putting it all together that troubles me, ie: how wide the content should be/the navbar and maintext etc..
    maybe if someone could demonstrate an example...? it may help me understand?

    thanks
     
    Certifications: BTEC national Diploma Computer Studies
    WIP: See Sig
  4. harpistic

    harpistic Byte Poster

    242
    4
    29
    Hi again,

    I know that wasn't exactly helpful, but I'm enjoying my 2-day break from templates! :sick However, I've pretty much learned from trial and error, and it's worth reading through the information out there on Google - especially as this seems to be more of a networking etc forum than a webby one, you'll get your answers quicker! :D

    Have a look through templates to get a feel for how they work - I mostly work with Joomla these days, and you can download templates from sites such as www.joomla24.com and www.bestofjoomla.com - you'll see how those designers use the tags. Mostly it's done by % rather than px, but that could just be the templates I use. Also have a go at playing around with them and changing the css and index.php to see how that affects them.

    You're just starting out so don't beat yourself up too much about it, it'll make sense soon, I promise! :blink
     
    Certifications: Pet Geekery
    WIP: cure for insomnia

Share This Page

Loading...