SitePoint Sponsor

User Tag List

Results 1 to 16 of 16
  1. #1
    Evil Genius MilchstrabeStern's Avatar
    Join Date
    Nov 2003
    Location
    Arizona
    Posts
    1,131
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question 3 column CSS help!

    Okay, I've finally done some research, tables won't work, bah tables. Frames deffinetly won't work, plus I hate frames. So I did some research on CSS, learned the basics, looked at some examples and some source code, and I have a basic idea of what i need to do in order to create a 3 column layout. Now, heres the deal, I'm okay at designing in photoshop, I'm not too great at coding. I would pay someone to do it for me, but I can't do that cause I want to learn how to do it myself. Heres the design(for now, will be making major revisions soon):

    Great great, now you see it, now heres what I need:
    its quite a simple Idea and a lot of people do it (I think) but i cant figure out how:

    So the left column of the 3 columns will be used for the nav bar of course, the right column will also be used for a menu bar of some sort that I havent made yet. The top, or header, will be used for the banner across the top, and of course, I'll make a footer. Some problems: How do I make it so my center Column has that interface around it, and still allow content to be inside it, and also be able to stretch down if needed?

    I have more questions later, but I don't want to rush myself or force too much upon you, any feedback would be great!

    -Thanks very much!

    --www.mplionhearts.com--

  2. #2
    Evil Genius MilchstrabeStern's Avatar
    Join Date
    Nov 2003
    Location
    Arizona
    Posts
    1,131
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Oh come on, I've been asking this question for weeks now, and no one knows? I've been reading so much about CSS, and I understand a lot of it now, but I don't see how I can get my design to work with CSS? I can get the header to work of course, the nav bar and the center are a whole nother issue. Do i need to make the images backgrounds or what? How do I get the them to be boxed in by my design? Do I just have to use tables and totally give up on CSS? Someone told me I should use CSS to do this though.

  3. #3
    ☆★☆★ silver trophy vgarcia's Avatar
    Join Date
    Jan 2002
    Location
    in transition
    Posts
    21,235
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    No offense MilchstrabeStern, but have you tried creating this layout? It's much easier for somebody to come in and help you out when you have put forth some effort into creating it yourself and have some trouble, rather than posting an image and complaining 9 hours later when a full layout isn't done.

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

    You will basically need to use similar techniques that you use when placing images in tables etc.

    The top of your content can simply be a background image but the side borders will need more thought.

    You can place a repeating image in the background to go down the side so that the image repeats as the content gets longer. (This usually involves nesting elements on top of each other to provide the effect.)

    It's a painful process and I'm not a great fan of sites like that because they take usually take ages to load.

    Heres an example of repeating borders that I created for a previous thread on sitepoint:

    http://www.pmob.co.uk/temp/nethax/nethax3.htm

    Although its not as complicated as your photoshop design the techniques will be similar and the layout is fluid depite having shaded borders. However the code is extremely ugly. Anyway look at the source code and you should be able to work it out.

    It would be simple if you didn't want the content to expand as you could just put the whole image in the background in one go.

    You might want to have a look at Doug's easy corners example that explains the techniques a bit more:

    http://www.redmelon.net/tstme/4corners/

    Hope that helps.

    Paul

  5. #5
    Evil Genius MilchstrabeStern's Avatar
    Join Date
    Nov 2003
    Location
    Arizona
    Posts
    1,131
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yes, I've attempted it using tables firt, which worked fine, but since it was one big table, with bunches of tables inside it, my center menu was un able to stretch downward, without stretching everything else. Which I'm not sure how to get around, so I sought help on that issue, and I was told that I should try CSS, so I spent a few days reading articles, tutorials, and looking at source code for CSS, great and all, but I can't figure out how to apply it toa design made like that in photoshop. Does the image need to be set as the background? And then must you insert a table within that column to contain the conent? Or must I use tables for my nav bar and center bar, etc, in each column? That seems like the most logical approach I can think of, and I'll have to try it as soon as I can. But it'd be at least nice to know if it can even be done.

    Sorry for the trouble.

  6. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    But it'd be at least nice to know if it can even be done.
    It can be done in CSS but probably not by you (yet).

    Without designing the whole thing for you as Vinnie already mentioned I can only offer broad advice as mentioned in my earlier post.

    You basically need a three column layout to start with and then build on it from there. If you are proficient in 3 column layouts then I could offer more advice on the specifics, however I'm not sure where to start otherwise. Have a look at some 3 column designs ( the simple versions) and understand how they work and how you can use them.

    If as Vinnie mentioned you had already something laid out then you would get more specific help.

    Anyway have a look at the links I gave in my previous post and if you understand them then you can make a start. Just start with your main content and see if you can design that. Once you've done that then you can start again with each element in turn etc.

    Paul

  7. #7
    SitePoint Enthusiast JasonRCS's Avatar
    Join Date
    Oct 2003
    Location
    Ohio
    Posts
    38
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    For Hire?

    Quote Originally Posted by Paul O'B
    It can be done in CSS but probably not by you (yet).

    Without designing the whole thing for you as Vinnie already mentioned I can only offer broad advice as mentioned in my earlier post.

    You basically need a three column layout to start with and then build on it from there. If you are proficient in 3 column layouts then I could offer more advice on the specifics, however I'm not sure where to start otherwise. Have a look at some 3 column designs ( the simple versions) and understand how they work and how you can use them.

    If as Vinnie mentioned you had already something laid out then you would get more specific help.

    Anyway have a look at the links I gave in my previous post and if you understand them then you can make a start. Just start with your main content and see if you can design that. Once you've done that then you can start again with each element in turn etc.

    Paul
    If you want to hire some one to do the entire layout, I am more than willing.

    If you want to attempt a layout yourself and then get help to fix it, this forum is the place to be. I don't think you can find more helpful people.

    If you want me to do it, just pm me.

    Jason
    Jason

  8. #8
    Evil Genius MilchstrabeStern's Avatar
    Join Date
    Nov 2003
    Location
    Arizona
    Posts
    1,131
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I appologize paul, my reply was being written as you were finishing yours, it was meant to go after Vinnie's. But thanks so much for the advice and help. I'll have to wait till I get home before I can do any experimenting, but as soon as I have a layout of some sort attempted/set up, and I've ran into a wall or something. I'll be sure to post.

    Just a question though, after <div class="outer8">
    this is placed:
    <img src="table_latest_news.gif" alt="latest news" width="90" height="22" />

    What purpose does this image serve?, does it serve the purpose of setting the size of the box by placing a white or blank image inside of it?

    --MilchstrabeStern--
    Last edited by MilchstrabeStern; Jan 7, 2004 at 15:11.

  9. #9
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    I appologize paul, my reply was being written as you were finishing yours
    No problem

    If you get stuck then just shout and we'll try our best to help.

    Paul

  10. #10
    Evil Genius MilchstrabeStern's Avatar
    Join Date
    Nov 2003
    Location
    Arizona
    Posts
    1,131
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B
    No problem

    If you get stuck then just shout and we'll try our best to help.

    Paul
    Oh yea, I edited the reply I just wrote, take a look. EDIT: Nm i was being stupid, your applying the div classes to a blank or white image huh? duh okay stupi dme, so it goes around it lol okay.

  11. #11
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Just a question though, after <div class="outer8">
    this is placed:
    <img src="table_latest_news.gif" alt="latest news" width="90" height="22" />

    What purpose does this image serve?, does it serve the purpose of setting the size of the box by placing a white or blank image inside of it?
    No, the image is only there for decoration. It was just a title in that funny font.

    The size of the box is defined in .outer1 which contains all the other divs which are just there to hold all the background images.

    The width is defined as 30% (and min-width of 110px is just for mozilla as IE doesn't understand it but looks ok without it).

    Code:
    .outer1 {
     min-width:110px;
     width:30%;
     background-color: #FFF;
     background-image: url(left_bar2.gif); 
     background-repeat: repeat-y;
    }
    That little example achieves all that you want in that the borders and shading are all images. Although the pattern isn't repeating as in your example, it could be is you specify a large enough image that has the full repeat in it.

    Basically all you are doing is placing empty containers inside the outer into which you can place your background images. You can only place one backround image per element which is why a number of divs are required.

    When you've finished you can add margins or padding to keep your text/content clear of the borders if required.

    Have a look at the other example (Dougs) as well as it uses slightly different techniques and less nesting.

    My method is all brute force and ignorance but it is easier to explain and understand.

    Paul

  12. #12
    Evil Genius MilchstrabeStern's Avatar
    Join Date
    Nov 2003
    Location
    Arizona
    Posts
    1,131
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I really hate to both you again, but you can be expecting me to be asking a lot of questions.

    Good news:

    I was able to create, using you're code, a menu box.

    BUT, in order to do it, I decided it would be easier, and less stressful (for the time being at least) to come up with a more simple design for my conent boxes. Thus, I also had to make some motifications to colors of the site (big modifications) and to the header logo. But its all okay in the design aspect.

    Heres a link to a blank, pointless, titles content box I quickly made based of pauls simple design.

    http://www.mplionhearts.com/My_pictu...ages/left2.htm

    Bad news:

    Well its great and all that I can now create my center context box, my left nav box, and my right whatever box.

    Whats not so great is, using your (Paul's) lovely 3 Column code, or, any other 3 column code for that matter, I sadly can't seem to figure out where to place that new code I just made for my content boxes... I experimented, it wasn't very pretty...

    I'd love to show you something, but showing you wouldn't help at all lol. I think you'll understand. But while I'm at it, even when I do get all these content boxes in the right columns...my header is only 720 px wide... yet, it seems the colums need to be stuck to the sides... is there a trick, or a way around this, so I can get them under my header some how? Or just should I redesign the header or something? I don't mind doing that at all.
    EDIT: or maybe I can just put a bunch of blank on both sides of my header and left of my left box, and right of my right box, then maybe it will appear together, in the center of the page hehe.

    Ack sorry for bothering you again! I tried for quite a while...

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

    I've just put up a simple 3 cloumn layout for you to look at. This has no fancy tricks and is a basic layout.

    I've put the example box in each of the columns so you can see how its placed.

    I've centred the page which I think you meant!

    Have a look at it and if its what you wer looking for then I'll explain it a bit more.

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

    Paul

  14. #14
    Evil Genius MilchstrabeStern's Avatar
    Join Date
    Nov 2003
    Location
    Arizona
    Posts
    1,131
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B
    Hi,

    I've just put up a simple 3 cloumn layout for you to look at. This has no fancy tricks and is a basic layout.

    I've put the example box in each of the columns so you can see how its placed.

    I've centred the page which I think you meant!

    Have a look at it and if its what you wer looking for then I'll explain it a bit more.

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

    Paul
    Yup, i think that layout just might work, some of the code is confusing me but I understood what you did to get everything in the center like you did.

    #wrapper {
    width:722px;
    margin:auto;/*to center in compliant browsers*/
    border:1px solid #D1DCE9;
    }

    You used that code to create a invisible boundry to contain everything else you put in. And you said thats how it centers normally, with most browsers at least. I understand a lot of it, when I get some time to look at it some more, I'll ask about what i don't know.

  15. #15
    Evil Genius MilchstrabeStern's Avatar
    Join Date
    Nov 2003
    Location
    Arizona
    Posts
    1,131
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by MilchstrabeStern
    Yup, i think that layout just might work, some of the code is confusing me but I understood what you did to get everything in the center like you did.

    #wrapper {
    width:722px;
    margin:auto;/*to center in compliant browsers*/
    border:1px solid #D1DCE9;
    }

    You used that code to create a invisible boundry to contain everything else you put in. And you said thats how it centers normally, with most browsers at least. I understand a lot of it, when I get some time to look at it some more, I'll ask about what i don't know.
    Actually now that I've had some more time to look at the code, I think that I understand most, if not all, of it. I'll have to try it out when i get the chance, if I'm a little slow, I'm sorry cause ihave Regional Auditions, and solos comming up on the 22nd and 23rd.

  16. #16
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    OK, just shout if you need more help .

    Paul


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
  •