Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 14 of 14
  1. #1
    New Coder
    Join Date
    Jan 2005
    Posts
    25
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question Columns with css, that look like tables?

    Hello,

    I started out pretty well coding the layout to my blog, but then I got in over my head..

    This is my temp url for the time being. (http://talesforums.com/)

    As you can see, I made the section under the banner exactly how I wanted it. Although I had to use tables to get it that way. I tried using css columns, but when you make them float over, the bottom border gets hidden.

    Can someone please suggest a better way for me to go about making the "content" area for my site, without tables?

    I have one other question that isn't as important. I was wondering, how can I add a shadow on the right of my layout and bottom? I already have the shadow done in photoshop, but I wouldn't know how to add it with css.

    Thanks!!

  • #2
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    first u should be closing ur div tags, u have quite a few open, whole point of using divs is trying to avoid using tables, mess around with float:left; and float:right; they are the same thing as align=left and align=right, put your entire content in a single div set that width then have the header div
    then two more divs one floated left and one floated right

  • #3
    Senior Coder
    Join Date
    Oct 2003
    Location
    Australia
    Posts
    1,963
    Thanks
    0
    Thanked 0 Times in 0 Posts

    I take no responsibility for the above nonsense.


    Left Justified

  • #4
    Senior Coder
    Join Date
    Nov 2003
    Location
    Minneapolis, MN
    Posts
    2,879
    Thanks
    2
    Thanked 65 Times in 56 Posts
    Keep in mind, though, if you only need different background colors and borders, you can use a backward approach... overwrite the background color of the wrapper with the bg color of the content, and what's left is the bg color of the shorter column.

    I typed up an example for you... hope it helps,

  • #5
    New Coder
    Join Date
    Jan 2005
    Posts
    25
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I'm recoding the layout without working off of wordpress this time. For some reason the h1 image isn't showing up though. (The image I am using for my banner)

    Any ideas why?

    http://talesforums.com/images/layout.htm

  • #6
    Senior Coder
    Join Date
    Nov 2003
    Location
    Minneapolis, MN
    Posts
    2,879
    Thanks
    2
    Thanked 65 Times in 56 Posts
    Looks like you either need "#h1" in the CSS or "<h1>Banner</h1>" in the html.

    I'd go with the latter... if you are styling a header, make sure it's a header-- not a division of the page with no meaning.

  • #7
    New Coder
    Join Date
    Jan 2005
    Posts
    25
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks, I didn't realize I needed the "#" infront of the "h1".
    Last edited by Stolenwords13; 02-10-2005 at 02:29 AM.

  • #8
    Senior Coder
    Join Date
    Nov 2003
    Location
    Minneapolis, MN
    Posts
    2,879
    Thanks
    2
    Thanked 65 Times in 56 Posts
    Well, first answer this... is what you are styling a header? In other words, if your website was about, say, apples, would your website be something like this?

    Glorious Apples! A Tribute.
    -Menu
    -The History of Apples
    -text about apples

    etc. In this case, the Glorious Apples bit should pretty much be your <h1>. If you would rather have the banner be the part that means the Glorious Apples thing, say a photo of a big juicy apple, then you should mark up the HTML with an "<h1>Glorious Apples</h1>" and use CSS to replace that text with the image.

    h1 {
    text-indent: -9999px;
    width: 700px;
    height: 100px;
    background: url(..images/apple.jpg) no-repeat top left #fff;
    }

    Note, this is only one way to do it (and admittedly, not the best) but it's one approach. If you're interested in diving into this a little more, check out "image replacement" in Google and you'll be overwhelmed with different methods and reasons to do/not to do it.

    Hope this helps,

  • #9
    Banned
    Join Date
    Dec 2004
    Location
    FL
    Posts
    30
    Thanks
    0
    Thanked 0 Times in 0 Posts

    hey

    try using dreamweaver mx 2004, free 30 day trial at macromedia.com. you can code it visually in there and then copy the source, its fairly easy to do once you learn what all the buttons do

  • #10
    Senior Coder
    Join Date
    Nov 2003
    Location
    Minneapolis, MN
    Posts
    2,879
    Thanks
    2
    Thanked 65 Times in 56 Posts
    Quote Originally Posted by pixelpets
    try using dreamweaver mx 2004, free 30 day trial at macromedia.com. you can code it visually in there and then copy the source, its fairly easy to do once you learn what all the buttons do
    aaaaaack.

    While you're at it, make sure you use deprecated tags and tables for layout... Hey PixelPets, the whole point of us learning how to use css and html is to avoid using crap Dreamweaver code...

  • #11
    New Coder
    Join Date
    Jan 2005
    Posts
    25
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I think I'm getting the hang of it. Right now I'm leaving the "h1" text just as "Banner" because I don't have a name for my Blog right now. I do have most pages drawn on paper though so I have the main idea down.

    It looks like its working

    http://talesforums.com/images/layout.htm

    Thanks guys!

  • #12
    Senior Coder
    Join Date
    Nov 2003
    Location
    Minneapolis, MN
    Posts
    2,879
    Thanks
    2
    Thanked 65 Times in 56 Posts
    No problem

  • #13
    New Coder
    Join Date
    Jan 2005
    Posts
    25
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Hmm..I can't figure this out. When I view my layout in Firefox, there is a 3 pixel space at the bottom of the layout. (under the right nav). This is how I want it to look, but in IE, it adds a large gap. Any ideas?

    Also, how can I put content on the right nav and in the main area without floating it? When I use the float code, it winds up overlapping my whole border and the layout doesn't stretch with the content.

    Thanks

  • #14
    Senior Coder
    Join Date
    Nov 2003
    Location
    Minneapolis, MN
    Posts
    2,879
    Thanks
    2
    Thanked 65 Times in 56 Posts
    As far as IE, I dunno... you'll have to be more specific (show code/ a link). I only have IE on Virtual PC so testing these things on a whim is a pain in the rear.

    About positioning: it could be that you are missing a few things from your floats, like a clearing element... here's a good link on positioning using floats:

    http://css.maxdesign.com.au/floatutorial/

    Or, you may want to give absolute and relative positioning a shot (check google for a good start on that)... I'd say the floats could be your solution, though.

    If you have trouble, still, go ahead and post a new thread so this one doesn't ramble all over the place... helps with the forum searches

    Hope this helps,


  •  

    Posting Permissions

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