SitePoint Sponsor

User Tag List

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

    Problems with CSS table-less layout

    Hi,
    I am quickly putting together a table-less site for the benefit of my students being exposed to both XHTML and CSS.
    The aim is to produce one of the navigation-bar on the right hand side of the page designs, using a couple of PNG files to get
    rounded corners. Since I only have sporadic access to IE, I have done all the coding on a Gecko based browser. As it could be expected, the design doesn't look great on IE, but if I tweak it for IE, it then doesn't look right on Mozilla/Phoenix!
    One of the aims of the site is to demonstrate percentages rather than pixel sizes, which might be what's consuing things, but I would be grateful if anyone would like to have a look at it. The IE version of the site can be found at http://skint.shef.ac.uk/~jose/newsite_ie/ whereas the Gecko version can be found at http://skint.shef.ac.uk/~jose/newsite_gecko/.
    Many thanks

  2. #2
    SitePoint Zealot wisbin's Avatar
    Join Date
    Jan 2003
    Location
    Netherlands
    Posts
    115
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    try this

    quickly browsed it..

    but, try this:

    css
    Code:
    div#navbar{
    	    position: absolute; 
    	    padding: 0;
                color: #000000;
                background-color: #99CCFF ;
                width: 14% ;
                padding-bottom: 200%;
                text-align: center;
    		    left: 10px;
                }
    .. also the html
    Code:
    <div id="navbar">
    ..thats a beginning good luck!

    PS: is this ok? <link .... href="./print.css" ... />
    Last edited by wisbin; Jan 10, 2003 at 12:47.
    Wisbin from ict-id.nl

    Every day I see your face I wish that I'd stayed
    Don't even know what made me run away
    It's just the way I play the game
    ..


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

    Re: Problems with CSS table-less layout

    Hi Wisbin,
    Thanks for your reply. However, what are you suggesting? Do I need one new environment? The bit of code you provide seems to suggest that I need a new div environment (navbar), or is it just a modified version of mine? Also, the second bit of html code... Where does this go? Presumably on the navigation bar or???

    The reason for having two CSS is that the second one (print.css) makes the pages printout nicely (with no navigation bar and so on).

    Many thanks,
    Josť

  4. #4
    SitePoint Zealot wisbin's Avatar
    Join Date
    Jan 2003
    Location
    Netherlands
    Posts
    115
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    ...

    Hi again,

    Yup, I suggested that you use not the div.navbar, but the div#navbar. SO instead of Class, use ID.

    This way, you could identify each lay-out box (container) first. And then you get your classes to style them.

    It's a bit hard to say how exactly, because there are lots of ways and I'm not sure how you want it. It seems like a top-left-main layout, but, you could also go for left-right layout. On www.glish.com you should find some lay-out examples.

    ..and about the ./print.css, it seemed to me like a typo, but I guess it was my lack of knowledge.. I thought it should be ../print.css

    (out of advise)

    cheers.
    Wisbin from ict-id.nl

    Every day I see your face I wish that I'd stayed
    Don't even know what made me run away
    It's just the way I play the game
    ..


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

    Re: ...

    Originally posted by wisbin
    Yup, I suggested that you use not the div.navbar, but the div#navbar. SO instead of Class, use ID.

    This way, you could identify each lay-out box (container) first. And then you get your classes to style them.
    Well, it seems the problem lies in the way MSIE deals with the box model: the width in IE is different to the width in Gecko (the former includes the padding and so on). So I will have to investigate how this works :-)
    ..and about the ./print.css, it seemed to me like a typo, but I guess it was my lack of knowledge.. I thought it should be ../print.css
    The ../<filename> implies that the file is stored in the directory above your present one. The single dot is used for the same directory. I find this useful when working on and off-line (I don't need to change URLs and so on)


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
  •