SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Member
    Join Date
    Jan 2003
    Location
    Sheffield, UK
    Posts
    8
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    positions of some elements with CSS

    Hi,
    as far as I understand CSS, I should be able to apply whatever style I want to virtually any element. The idea is that I should be able to build a web page with moderately complex layout without using tables (or div/spans, for that matter). This stems from CSS box model. So, I could have an unordered list, and with a background colour and a width, I could have a rather useful navigation bar on the side of my page. Something along the lines of
    Code:
    ul.navbar {
                     background-color: red ;
                     width: 15% ;
    }
    The main text (or even a title) could come horizontally just after the navigation bar. I could just put a paragraph *after* the navbar (shifted 15% from the left border of the screen, or indeed, aligned to the left to coincide with the navbar's border), or
    Code:
    h2 {
          left: 15% ;
          width: 85% ;
    }
    The width of this header is put there so that the whole title is stretched to fill in its parent box (the body).

    This is my understanding, and I can mimick this with divs. However, I feel that this is not particularly "elegant". I should be able to just apply styles to these elements so as to position them properly. A couple of problems arise here: the elements are block elements, so the navbar includes a "carriage return" after it (so does the h2). They will never be shown on the same horizontal line. I could use something like display:inline;, but then I am curious as to what the parent of these two is (so that the width of the header can be easily calculated). The position attribute is also very important (as I know by trial and error ), but I am not sure of what the big deal is.

    I was hoping someone could explain the best way of dealing with this. Of course, I know I can do it with spans and divs, but I'd rather understand whether I can do it without.

    Many thanks,
    d-Orb

  2. #2
    SitePoint Enthusiast Kiddeath91's Avatar
    Join Date
    Jan 2003
    Location
    Columbus, Ohio USA
    Posts
    39
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    d-Orb

    My approach with building without tables, is to still think of the page in terms of area.

    I usually ID 3 or four main DIV's, #nav, #left(content), #right(content), and sometimes #footer. The reason I do this is to avoid conflicts like H2 or p, because I can define different values to the different DIV's.

    For example:

    H2 {
    FONT: 0.6em verdana, arial, helvetica, sans-serif;
    COLOR:#333;
    TEXT-ALIGN:right;
    }

    defines the H2 default.

    But I can make the H2 totally different on the leftcontent like this:

    #rightcontent H2 {
    COLOR: #666;
    BACKGROUND-COLOR: transparent;
    TEXT-ALIGN: left;
    }

    It is easy to see how you can essentially control any element inside of these DIV's by defining exactly how you want them to appear.

    If you haven't been here, try outglish for some great help.

    Hope this helps
    jason
    Last edited by Kiddeath91; Feb 4, 2003 at 09:23.

  3. #3
    SitePoint Member
    Join Date
    Jan 2003
    Location
    Sheffield, UK
    Posts
    8
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Re: positions of some elements with CSS

    Kiddeath91,

    Originally posted by Kiddeath91
    I usually ID 3 or four main DIV's, #nav, #left(content), #right(content), and sometimes #footer. The reason I do this is to avoid conflicts like H2 or p, because I can define different values to the different DIV's.
    OK, I can get the effect I want using several div ids. In fact, going through it, I think that that is the only way to achieve it: you can not align or float or otherwise a set of paragraphs, unless they are grouped in a div/span.

    I'll see whether someone comes up with an alternative :-)

  4. #4
    \m/\m/ karinne's Avatar
    Join Date
    Dec 2002
    Location
    Aylmer, QC, Canada
    Posts
    409
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I use div's as well - you can check it out here > www.inkreations.com

  5. #5
    American't awestmoreland's Avatar
    Join Date
    Sep 2002
    Location
    Grand Rapids, MI
    Posts
    1,168
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Originally posted by Kiddeath91
    If you haven't been here, try outglish for some great help.
    Top tip! Thanks Jason for the resource.


    Andy
    From the English nation to a US location.

  6. #6
    \m/\m/ karinne's Avatar
    Join Date
    Dec 2002
    Location
    Aylmer, QC, Canada
    Posts
    409
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    There's also www.bluerobot.com

  7. #7
    ☆★☆★ silver trophy vgarcia's Avatar
    Join Date
    Jan 2002
    Location
    in transition
    Posts
    21,235
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •