SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Member
    Join Date
    Jul 2004
    Location
    Williamstown, NJ
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    border on 3-col layout

    I am having a problem getting some borders on a page. I have one way to do it, but was wondering if there was a more elegant solution.

    I have the following page layout:

    http://theklassifieds.com/tkPage2.html

    Basically, a friend of mine is using this template and it is a combination of Paul O'B and Doug Livingstones methods.

    I am trying to get a border on the left side of the right column and the right side of the left column.

    Since the left and right column are essentially defined by the borders of the containing div, that may cause problems. I tried applying borders to both the left and right columns, as well as the center, but nothing seems to work.

    I am not sure if the negative margins are causing problems or not. Even if I get a border to work it does not fill down.

    I figure I can repeat an image I the y direction to fill down each column and effectively create a border.

    Is there a better way to do this???

    Thanks…Rob

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,367
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    The problem with dougs method of using the borders for the columns is that you can't then put a border on it.

    With my method you can border the columns but you can only get 2 colours for the three columns.

    If you are going to use a bg gif to get the borders then you may as well use the bg gif to colour both columns and do away with the negative margin floats altogether.

    Heres an example.

    http://www.pmob.co.uk/temp/3columnflexibleheader.htm

    Feel free to borrow the code.

    Paul

  3. #3
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,367
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    I figure I can repeat an image I the y direction to fill down each column and effectively create a border.
    No you can't do this as the columns are not 100% height. You need to repeat the bg on the body for one column and on the main outer for the other column. These are the only 2 places where you get 100% height.

    You won't be able to do this on the layout you have because your outer has 150px border which will offset the background and make it wrong.

    You'll need to do it as in my link above without the negative column floats.

    Hope this all makes sense - its quite straight forward really

    Paul

  4. #4
    SitePoint Member
    Join Date
    Jul 2004
    Location
    Williamstown, NJ
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Paul:
    Thanks a lot.
    Hope this all makes sense - its quite straight forward really
    It does all make sense now. And it's much more straight forward now that you've explained it.

    One more question unrelated to this: Is there a way to make vertical text that's cross browser? I can make it work in IE with a class like this:
    Code:
    .xaxislabel {
     	font-family: Verdana, Arial, Helvetica, sans-serif;
     	font-size: 10px;
     	writing-mode: tb-rl; 
     	filter: flipv fliph;
     }
    But that doesn't have any effect on mozilla.

    Thanks again:
    Rob

  5. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,367
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    No it only works in IE 5.5+ AFAIK.

    You'll have to find a script for other browsers (or an image etc).

    Paul

  6. #6
    SitePoint Member
    Join Date
    Jul 2004
    Location
    Williamstown, NJ
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    DRAT. That's what I was afraid of.

    Thanks again


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
  •