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
    Oct 2007
    Posts
    11
    Thanks
    1
    Thanked 0 Times in 0 Posts

    2 Column Layout with rounded corner-like container

    Hi

    So this is the layout I'm trying to put together:


    Conceptually, this is what I'm trying to do:


    So the pseudocode would look like:
    Code:
    --top container image--
    <container> (with repeat-y bg)
           <main content> <-(floated left)
           <sidebar> <-(floated right)
    </container>
    --bottom container image--
    So basically, I'm creating a container. The container will have a graphical border and two columns. The way I currently have the graphical border working is simply a repeating-y 1px tall gif bg image, and two images as topping and bottoming the container, outside of the container. I then simply floated two divs within this setup.

    EDIT:
    Here's a link to what I currently have:
    http://synthdriven.com/coenews/templates/

    This whole thing works a bit. Works well in firefox and safari, but is a complete mess in ie6 and ie7. The floats are all offset oddly, and then there are gaps between the images that top/bottom

    I have no formal training in any of this, so I just try to do what I think will work. And this is just what I imagined would work.

    I dont know how to find a solution for this. I don't know what to call this or how to search for it. I just need some sort of tutorial or description on how I can make this all work.

    I looked up solutions for fixed-width rounded corner layouts using only 2 images (exactly what I wanted to do). But the problem was that the container I made this way didn't like having floated divs in it.

    I was wondering if anyone could point me to a model to follow or if anyone could give me some friendly advice???

    Thanks in advance!
    Last edited by verd; 02-23-2008 at 07:11 PM.

  • #2
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,861
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    We can't help unless we see your code instead of screen shot. And since the problem is related with images, a link would be better.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #3
    New Coder
    Join Date
    Oct 2007
    Posts
    11
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Hi,

    Thanks for your reply. This is a link to what I currently have:
    http://synthdriven.com/coenews/templates/

    You'll no doubt see that I'm doing a lot of things stupidly, as I am no professional coder. I have no formal training in this, so my methods are likely somewhat backwards.

    Thanks in advance.

  • #4
    New Coder
    Join Date
    Oct 2007
    Posts
    11
    Thanks
    1
    Thanked 0 Times in 0 Posts
    I should also note that I'm having the same problem, but more extreme, with another site that I'm working on. I'm using the same method, a repeating-y bg with rounded corner images that top/bottom the container. Here is a link to that one as well, that is even more skewed in ie6/ie7.

    Here it is:
    http://synthdriven.com/ccms/2/

    Most of my problems have to do with ie6/ie7. So I guess that's the help I'm looking for.

    Thanks again

  • #5
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts
    In the first site, you have a css error.

    You have omitted the "px" thus
    #sidebartext {
    padding: 799 10 0 10;}

    It should be thus:-

    Code:
    #sidebartext {
    	padding: 799px 10px 0px 10px;
    }
    Only "0" (zero) does not need a size unit.

    Frank
    * Sources (updated: 21.11.2012.
    Using Windows 8 Professional. 64bit with HP Photosmart 5510 printer Very useful site here.

  • #6
    Senior Coder
    Join Date
    Jan 2005
    Location
    Memphis, TN
    Posts
    1,785
    Thanks
    8
    Thanked 131 Times in 129 Posts
    the problem is actually pretty simple once you get used to it. To have something absolutely positioned, it needs a parent to be positioned from.

    add position: relative; to your #wrapper so that the images will be positioned form the top left corner of that element not the body.

    As far as the images breaking, it's most likely due to the fact that they are not in the container and some margins or padding is pushing them out. they could easily be in the css and eliminte the issue.

    here try this out. reslcied them and simle coding. might fiddle with the png placements. and turn off the back ground of the content areas (it's for show )

    http://tugbucket.net/tests/miami/
    Stop making things so hard on yourself.
    i is tugbucket :: help raise tugburg :: Whitehaven Kiwanis

  • Users who have thanked harbingerOTV for this post:

    verd (02-23-2008)

  • #7
    New Coder
    Join Date
    Oct 2007
    Posts
    11
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by effpeetee View Post
    In the first site, you have a css error.

    You have omitted the "px" thus
    #sidebartext {
    padding: 799 10 0 10;}

    It should be thus:-

    Code:
    #sidebartext {
    	padding: 799px 10px 0px 10px;
    }
    Only "0" (zero) does not need a size unit.

    Frank

    Thanks! I see the error, fixed it, and now it seems to behave a bit more correctly. I appreciate it!

  • #8
    New Coder
    Join Date
    Oct 2007
    Posts
    11
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by harbingerOTV View Post
    the problem is actually pretty simple once you get used to it. To have something absolutely positioned, it needs a parent to be positioned from.

    add position: relative; to your #wrapper so that the images will be positioned form the top left corner of that element not the body.

    As far as the images breaking, it's most likely due to the fact that they are not in the container and some margins or padding is pushing them out. they could easily be in the css and eliminte the issue.

    here try this out. reslcied them and simle coding. might fiddle with the png placements. and turn off the back ground of the content areas (it's for show )

    http://tugbucket.net/tests/miami/

    Holy crap harbinger, thank you so much! I'm looking through it now, you really simplified it!! Wow, thank you!

  • #9
    Senior Coder
    Join Date
    Jan 2005
    Location
    Memphis, TN
    Posts
    1,785
    Thanks
    8
    Thanked 131 Times in 129 Posts
    yep yep, i was taking a break so I had time to play

    It's really a simple 2 column layout. Hopefully with less structural code you can learn a little more before getting confused try to fix little issues
    Stop making things so hard on yourself.
    i is tugbucket :: help raise tugburg :: Whitehaven Kiwanis

  • #10
    New Coder
    Join Date
    Oct 2007
    Posts
    11
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Ok. So. I've run into two additional problems with this. Harbinger's simplification works wonders.

    Here's what I have:
    http://www.synthdriven.com/coenews/templates

    But now I'm faced with the issue of ie and pngs. I have a script, sleight.js that corrects this issue. Only problem is that it removes the absolute positioning that Harbinger employed with respect to the parent container that the floating pngs are in.

    In ie, the following happens: The page loads with the pngs positioned correctly but not displaying alpha transparency. Then the little yellow information bar pops up in ie and asks if you want to display an active script. I say yes, because I figure this is sleight. But as soon as I do, the alpha transparencies come back and the positioning disappears.

    I was wondering if anyone knows of a fix for this.

    Also, the page doesn't grow as more text than the min-height is added. From the code, it seems like it should, but it's not, and I don't understand why.

    Any suggestions would be much appreciated. Thanks in advance.

  • #11
    New Coder
    Join Date
    Oct 2007
    Posts
    11
    Thanks
    1
    Thanked 0 Times in 0 Posts
    UPDATE:
    I used the Twin Helix PNG Fix, which works better than the old sleight alternative I guess. Been using sleight for too long I guess.

    The fix can be found here:
    http://www.twinhelix.com/css/iepngfix/

    At present, I'm still working on the container growing beyond it's min-height. Any pointers on that problem would be well appreciated. Again, the URL is:
    http://www.synthdriven.com/coenews/templates
    Last edited by verd; 02-28-2008 at 06:59 PM.

  • #12
    Senior Coder
    Join Date
    Jan 2005
    Location
    Memphis, TN
    Posts
    1,785
    Thanks
    8
    Thanked 131 Times in 129 Posts
    Code:
    #left {
    float: left;
    display: inline;
    width: 400px;
    margin: 0 0 0 32px;
    height: 300px;
    }
    remove the height.

    I had that in there (with the background colors just to show where the divs were sitting.
    Stop making things so hard on yourself.
    i is tugbucket :: help raise tugburg :: Whitehaven Kiwanis

  • #13
    New Coder
    Join Date
    Oct 2007
    Posts
    11
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Harbinger, once again... Thank you so much. I really appreciate it, more than I can say.

    I understand how that can mess things up. I thought it had to do with the min-height hack for ie. I really don't have the best feel for this stuff.

    Where do you learn this stuff? Did you go to school for this? ...Thank you so much for your help

  • #14
    Senior Coder
    Join Date
    Jan 2005
    Location
    Memphis, TN
    Posts
    1,785
    Thanks
    8
    Thanked 131 Times in 129 Posts
    No sweat verd,

    The min-height "hack" for IE is just because older version (6 and below) will treat height the same as min-height. So it will be XX high unless something pushes it to be larger ie, your content. It really should have been in a conditional comment, but since that's typically the only thing I feed to IE separately, oh well. It will cause your CSS not to validate, but won't have any real world adverse effects.

    Oh, and I learned it all from the internet. Read (just make sure your reading current information), read and read some more. Then experiment.
    Stop making things so hard on yourself.
    i is tugbucket :: help raise tugburg :: Whitehaven Kiwanis


  •  

    Posting Permissions

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