...

View Full Version : Request for extending an existing layout...



terrans_ab
02-17-2009, 09:27 PM
Hey everyone,

I have been browsing the Open Web Design web gallery which provide open source web layouts.
There is a specific one which I liked (http://www.openwebdesign.org/viewdesign.phtml?id=4993&referer=%2Fbrowse.php%3Fpage%3D10) but it requires some work to make it fit a website with
layout such as a 2-column content instead of the single as it appears in the original template.

I was wondering if I could post some of these ideas to get that template to be actually usable.

If anyone would like to look into this some more I'd appreciate it,
Thanks.

cyrus709
02-17-2009, 10:37 PM
This is very simple, where would you want this "other column"? I am pretty sure i could give you what you need.

Excavator
02-17-2009, 11:43 PM
Hello terrans_ab,
It's pretty much already a 2 column layout. Just have to replace that home-house.jpg with a div.
That would make it look like

_________________________
header
_________________________
left col leftcol|rightcol rightcol
left col leftcol|rightcol rightcol
left col leftcol|rightcol rightcol
left col leftcol|rightcol rightcol
left col leftcol|rightcol rightcol
_________________________
latestnews|service|propertytips

terrans_ab
02-18-2009, 07:18 PM
Thank you for your comments,
I continued tweaking with the layout a little bit more and it's now also available on the net at: http://taldal.freehostia.com/layout1/test.html

I am still stuck trying to do the 2-column layouts...
If you open the website to look what I did so far then what I am *TRYING* to do is to have the text content be on the left side and have those single little boxes from top-to-bottom on the right side.

I also expect that the right side column is separated from the left side so that they can be drawn independent from one another (if that makes any sense...) such as that I can have just 1 single left-side content box but have 3 right-side little boxes.

Just a note:
Excavator - I tried to think how to do what you proposed with the <div> but I don't think it has a chance since the image is defined in the css layout and is part of the layout for the text content box.


Thanks again.

Rowsdower!
02-18-2009, 07:57 PM
Float all of your little boxes to the right (list them in the top-to-bottom order that you want them to appear in) and place clear:right; in the style for each. That should give you a stack of little boxes.

Add margin-bottom:<something>px; to space them out if you want to...

terrans_ab
02-18-2009, 08:13 PM
Thanks Rowsdower,

that helped a little bit, you can see the new look here: http://taldal.freehostia.com/layout1/test2.html
where it looks in IE quite alright but in FF it still has some problems, which are that there is a space between the top heading bar for the text content and the actual text content itself.

If you don't have FF to test (I'm using FF2) then I can put up a screenshot.

Thanks.

Rowsdower!
02-18-2009, 08:16 PM
Part of the problem is that 3 out of 4 of these boxes are placed after the close of the content-area div. Move them up and then add clear:both; to the footer.

Scratch that, I was working off of my local file. I hadn't looked at your additional changes...

terrans_ab
02-18-2009, 08:25 PM
Hey...

I removed all the footer text at all and that didn't solve it (removed the credit and the bottominfo text). to which class/id should I add clear:both; ?

Also I looked at the boxes... (2 small and 2 big) and I don't see how they appear after the div's closure.

Rowsdower!
02-18-2009, 08:46 PM
You'll want to add the clear:both; to the css for <div id="bottominfo">. I'm calling this a footer out of habit (because that's what it really is).

As for the div's order, I was working off of your first file, not the newly updated one. I haven't checked the div order on the new one yet so this may not apply anymore.

terrans_ab
02-18-2009, 08:52 PM
I have added that clear:both; to the bottominfo style but I don't think that this is the issue... Could you see it at: http://taldal.freehostia.com/layout1/test2.html
with firefox

Thanks for the quick feedback.

Rowsdower!
02-18-2009, 09:04 PM
I see, remove float:left from #content-area #content-main and see if that works.

Excavator
02-18-2009, 09:07 PM
Your #content-area is only enclosing the first .bottom-panel. The other .bottom-panels will need to go inside #content-area also.

Put a background color on it to see what I mean, like this:

#content-area
{
float: left; /*remove this line*/
clear: left; /*and this one*/
width: 990px;
padding-top: 28px;
padding-bottom: 12px;
background: #00f; /*add this for testing*/
}


Since #content-area is the full width of it's containing div there is no need to float it. We only float things so we can put other things next to them.
When you remove the float from #content-area you will have to clear the floats inside it. Check out this page about clearing floats (http://www.quirksmode.org/css/clearing.html).

terrans_ab
02-18-2009, 09:08 PM
Thanks Rowsdower that did it
Guess I was too greedy with that float and clear directives eh...

Excavator
02-18-2009, 09:11 PM
Now that you've removed that float:left; from #content-area, put the background color on it and see what it does.

terrans_ab
02-18-2009, 09:15 PM
Right, I see it... it colors the first bottominfo box and if I add more then it wouldn't include them in the coloring... uhmm...
Is this an issue?

Is it possible at all to have that right-side bottominfo boxes be in a separate <div></div> I mean, as in outside of the left-side text content boxes?

Rowsdower!
02-18-2009, 09:21 PM
It's possible, but unnecessary since you can just move the other 3 boxes into the content div anyway without adding any code.

terrans_ab
02-18-2009, 09:30 PM
True, I'm just thinking for the future, putting that on a web framework, it would require some modularity...

Anyway, thanks for your help and patience, it helped alot.

Rowsdower!
02-18-2009, 09:33 PM
No problem, good luck with the rest of the site!

Excavator
02-18-2009, 09:40 PM
Right, I see it... it colors the first bottominfo box and if I add more then it wouldn't include them in the coloring... uhmm...
Is this an issue?

Is it possible at all to have that right-side bottominfo boxes be in a separate <div></div> I mean, as in outside of the left-side text content boxes?

Well, what is it you expect #content-area to do? If you don't have any special plans for it later then you may find it's not needed since your site is already enclosed in #main-wrapper.

You should stop by the validator. Read about validation in my sig below.



..



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum