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.
Page 1 of 2 12 LastLast
Results 1 to 15 of 19
  1. #1
    New Coder
    Join Date
    Feb 2009
    Posts
    10
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Request for extending an existing layout...

    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/viewdes...hp%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.

  • #2
    Regular Coder cyrus709's Avatar
    Join Date
    Dec 2008
    Posts
    102
    Thanks
    22
    Thanked 5 Times in 5 Posts

    Thumbs up

    This is very simple, where would you want this "other column"? I am pretty sure i could give you what you need.

  • #3
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    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
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #4
    New Coder
    Join Date
    Feb 2009
    Posts
    10
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.

  • #5
    Senior Coder Rowsdower!'s Avatar
    Join Date
    Oct 2008
    Location
    Some say it's everything.
    Posts
    2,027
    Thanks
    5
    Thanked 397 Times in 390 Posts
    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...
    The object of opening the mind, as of opening the mouth, is to shut it again on something solid. –G.K. Chesterton
    See Mediocrity in its Infancy
    It's usually a good idea to start out with this at the VERY TOP of your CSS: * {border:0;margin:0;padding:0;}
    Seek and you shall find... basically:
    validate your markup | view your page cross-browser/cross-platform | free web tutorials | free hosting

  • #6
    New Coder
    Join Date
    Feb 2009
    Posts
    10
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.

  • #7
    Senior Coder Rowsdower!'s Avatar
    Join Date
    Oct 2008
    Location
    Some say it's everything.
    Posts
    2,027
    Thanks
    5
    Thanked 397 Times in 390 Posts
    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.

    Edit: Scratch that, I was working off of my local file. I hadn't looked at your additional changes...
    Last edited by Rowsdower!; 02-18-2009 at 08:24 PM.
    The object of opening the mind, as of opening the mouth, is to shut it again on something solid. –G.K. Chesterton
    See Mediocrity in its Infancy
    It's usually a good idea to start out with this at the VERY TOP of your CSS: * {border:0;margin:0;padding:0;}
    Seek and you shall find... basically:
    validate your markup | view your page cross-browser/cross-platform | free web tutorials | free hosting

  • #8
    New Coder
    Join Date
    Feb 2009
    Posts
    10
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.

  • #9
    Senior Coder Rowsdower!'s Avatar
    Join Date
    Oct 2008
    Location
    Some say it's everything.
    Posts
    2,027
    Thanks
    5
    Thanked 397 Times in 390 Posts
    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.
    The object of opening the mind, as of opening the mouth, is to shut it again on something solid. –G.K. Chesterton
    See Mediocrity in its Infancy
    It's usually a good idea to start out with this at the VERY TOP of your CSS: * {border:0;margin:0;padding:0;}
    Seek and you shall find... basically:
    validate your markup | view your page cross-browser/cross-platform | free web tutorials | free hosting

  • #10
    New Coder
    Join Date
    Feb 2009
    Posts
    10
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.

  • #11
    Senior Coder Rowsdower!'s Avatar
    Join Date
    Oct 2008
    Location
    Some say it's everything.
    Posts
    2,027
    Thanks
    5
    Thanked 397 Times in 390 Posts
    I see, remove float:left from #content-area #content-main and see if that works.
    The object of opening the mind, as of opening the mouth, is to shut it again on something solid. –G.K. Chesterton
    See Mediocrity in its Infancy
    It's usually a good idea to start out with this at the VERY TOP of your CSS: * {border:0;margin:0;padding:0;}
    Seek and you shall find... basically:
    validate your markup | view your page cross-browser/cross-platform | free web tutorials | free hosting

  • #12
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    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:
    Code:
    #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.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #13
    New Coder
    Join Date
    Feb 2009
    Posts
    10
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks Rowsdower that did it
    Guess I was too greedy with that float and clear directives eh...

  • #14
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Now that you've removed that float:left; from #content-area, put the background color on it and see what it does.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #15
    New Coder
    Join Date
    Feb 2009
    Posts
    10
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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?


  •  
    Page 1 of 2 12 LastLast

    Posting Permissions

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