...

View Full Version : 2 Column Layout with rounded corner-like container



verd
02-23-2008, 02:56 AM
Hi

So this is the layout I'm trying to put together:
http://www.synthdriven.com/images/desiredlayout.jpg

Conceptually, this is what I'm trying to do:
http://www.synthdriven.com/images/desiredlayout.gif

So the pseudocode would look like:


--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!

abduraooft
02-23-2008, 07:08 AM
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.

verd
02-23-2008, 07:10 PM
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.

verd
02-23-2008, 07:17 PM
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

effpeetee
02-23-2008, 08:57 PM
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:-



#sidebartext {
padding: 799px 10px 0px 10px;
}


Only "0" (zero) does not need a size unit.

Frank

harbingerOTV
02-23-2008, 09:31 PM
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/

verd
02-23-2008, 10:35 PM
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:-



#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!

verd
02-23-2008, 10:38 PM
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!

harbingerOTV
02-24-2008, 12:39 AM
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 ;)

verd
02-28-2008, 05:29 PM
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.

verd
02-28-2008, 06:56 PM
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

harbingerOTV
02-28-2008, 08:36 PM
#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.

verd
02-29-2008, 02:40 AM
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

harbingerOTV
02-29-2008, 04:12 AM
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. ;)



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum