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 15 of 15

Thread: CSS Questions

  1. #1
    New to the CF scene
    Join Date
    Apr 2011
    Posts
    7
    Thanks
    1
    Thanked 0 Times in 0 Posts

    CSS Questions

    Hi There

    I have been using IP Board and IP Content to create a website, but this query is not directly related to that software. I have created a basic template using CSS, but have had non stop problems with fine tuning it.

    Question 1: Does anyone have any suggestions as to how the sidebar on the left could be stretched to display it all the way down on that side using CSS?

    Question 2: The padding of the hand "column" is all wrong (as you can see by the page source code), and I cannot get it into a position where there are simply two nice columns side by side, with separate content in each. Any ideas?

    If anyone has any suggestions on how the code can be corrected then that would be very much appreciated.

    Website: www.seafarersonline.com

    Many thanks in advance.

  • #2
    Senior Coder
    Join Date
    Aug 2010
    Location
    High Point, NC
    Posts
    3,332
    Thanks
    5
    Thanked 363 Times in 360 Posts
    1: try using a css trick called faux columns

    2: Two column layouts made easy.

    You can add a margin-left to your content div. However, the image at the bottom is too large to fit in JUST the content div. The box model shows why.
    Last edited by teedoff; 04-11-2011 at 04:00 PM.
    Teed

  • #3
    New to the CF scene
    Join Date
    Apr 2011
    Posts
    7
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Many thanks for that, teedoff.

    I have added a margin-left attribute to the content div and that has been effective. Must admit that I'm not 100% sure how to edit the existing code to take into account the content on those two websites... I'll continue to fiddle around with it now and see...

  • #4
    New to the CF scene
    Join Date
    Apr 2011
    Posts
    7
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Unfortunately I am still not having much luck with getting this to work with the existing code - not sure why!

    I'm not sure if somebody out there could have a little look at the code?

    Many thanks in advance.

  • #5
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,667
    Thanks
    22
    Thanked 1,826 Times in 1,810 Posts
    Hello Jamesuk,

    Question 1: Does anyone have any suggestions as to how the sidebar on the left could be stretched to display it all the way down on that side using CSS?
    Try moving some background colors around, like this (changes highligted in red) -
    Code:
    #wrapper {
       width: 70%;
       border-width: 1px 1px 1px 1px;
       border-style: solid;
       border-color: #000000;
       margin: 20px auto 8px auto;
       background: #F3F7F9;
    }
    
    #header {
       background: url( http://www.seafarersonline.com/forums/ccs_files/header_bg.png ) repeat-x;
       border-bottom: 0px solid #192b40;
       padding: 0px;
       height: 99px;
    }
    
    #sidebar {
    /*background: #F3F7F9;*/
       width: 16%;
       padding: 20px;
       float: left;
       overflow: hidden;
    }
    
    #content {
       width: 84%;
       padding: 30px 40px 30px 40px;
       margin-left: 19%;
    background: #fff;
    }
    Question 2: The padding of the hand "column" is all wrong (as you can see by the page source code), and I cannot get it into a position where there are simply two nice columns side by side, with separate content in each. Any ideas?
    See the box model here. The box model says that whatever you put inside an element cannot be larger than that element. margin/padding/border all count when figuring width/height.

    You are mixing % widths with px padding. 16% column plus 84% content adds up to 100% width leaving no room for your padding.

    Instead, try following this example of a simple 2 column layout.
    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

  • Users who have thanked Excavator for this post:

    Jamesuk (04-11-2011)

  • #6
    New to the CF scene
    Join Date
    Apr 2011
    Posts
    7
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Hi Excavator,

    Very many thanks for your helpful response - managed to sort out the first issue with your suggestion.

    I have had a look at those links and am trying to see if I can work out a way of arranging these two columns in a browser friendly way. I must admit that so far no joy has been had from any of my attempts, but will keep trying! If in the meantime anyone has any suggestions as to what could be done to the code to produce two columns which are always of the same height (regardless of how much content is in each), that would be much appreciated.

    Thank you again.
    Last edited by Jamesuk; 04-11-2011 at 07:43 PM.

  • #7
    Senior Coder
    Join Date
    Aug 2010
    Location
    High Point, NC
    Posts
    3,332
    Thanks
    5
    Thanked 363 Times in 360 Posts
    Quote Originally Posted by Jamesuk View Post
    Hi Excavator,

    Very many thanks for your helpful response - managed to sort out the first issue with your suggestion.

    I have had a look at those links and am trying to see if I can work out a way of arranging these two columns in a browser friendly way. I must admit that so far no joy has been had from any of my attempts, but will keep trying! If in the meantime anyone has any suggestions as to what could be done to the code to produce two columns which are always of the same height (regardless of how much content is in each), that would be much appreciated.

    Thank you again.
    If in the meantime anyone has any suggestions as to what could be done to the code to produce two columns which are always of the same height (regardless of how much content is in each), that would be much appreciated.
    Again, you have to use a faux column technique. The natural behavior of any div element is to expand based on the content within that div.

    The one I gave you works great. I know Excavator has one on his site thats easy to implement and works great as well.
    Teed

  • #8
    New to the CF scene
    Join Date
    Apr 2011
    Posts
    7
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Hi teedoff,

    Thanks again. My CSS skills are not great and have been playing round with this, with no luck all day! I tried creating an image and implementing it as the article mentioned, but just couldn't get it to display as expected.

    Still having no joy now either! Oh well... will keep ploughing on.

  • #9
    Senior Coder
    Join Date
    Aug 2010
    Location
    High Point, NC
    Posts
    3,332
    Thanks
    5
    Thanked 363 Times in 360 Posts
    Quote Originally Posted by Jamesuk View Post
    Hi teedoff,

    Thanks again. My CSS skills are not great and have been playing round with this, with no luck all day! I tried creating an image and implementing it as the article mentioned, but just couldn't get it to display as expected.

    Still having no joy now either! Oh well... will keep ploughing on.
    Looks to me like you have the sidebar extending all the way down. The padding you've put on it is causing it to jut out a bit when there is content inside it. You could remove that padding. Then you would have to do something different for the bit of text you have if you want it to have some margins.
    Teed

  • #10
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,667
    Thanks
    22
    Thanked 1,826 Times in 1,810 Posts
    If in the meantime anyone has any suggestions as to what could be done to the code to produce two columns which are always of the same height (regardless of how much content is in each), that would be much appreciated.
    Faux Columns is an image based solution. You don't need faux columns since you only have background colors. When you moved the background color of your left column over to #body doesn't that make the left column appear to be the same height as the content column?
    Looking at your current version online this looks to be solved.
    If not, could you restate the problem in more detail?
    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

  • #11
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,667
    Thanks
    22
    Thanked 1,826 Times in 1,810 Posts
    Quote Originally Posted by Jamesuk View Post
    I have had a look at those links and am trying to see if I can work out a way of arranging these two columns in a browser friendly way. I must admit that so far no joy has been had from any of my attempts, but will keep trying!
    Same story. I think your solution looks good now. I'm not a fan of % margin/padding but it's working for you.
    I think all you may need is a min-width setting to keep the statice width elements from breaking out of a % sized container that gets too small and some work on validating.

    See the links about validation in my signature line below.
    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

  • #12
    New to the CF scene
    Join Date
    Apr 2011
    Posts
    7
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Hello again

    Very many thanks again. That's really useful information... I've finally managed to put it together and think I've solved the problems. Just two quick queries...

    1. The site is displaying fine in firefox and chrome, but there is a small blue bar appearing above the main content side in IE - any ideas?

    2. I've resorted to using %'s to work out the size of the elements. Professionally speaking, is this a suitable way of working out distances, or would px's etc be more appropriate?

  • #13
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,667
    Thanks
    22
    Thanked 1,826 Times in 1,810 Posts
    Quote Originally Posted by Jamesuk View Post
    If in the meantime anyone has any suggestions as to what could be done to the code to produce two columns which are always of the same height (regardless of how much content is in each), that would be much appreciated.
    Oops, I see what you might be referring too. On http://www.seafarersonline.com/about.php the #wrapper does not enclose everything because the floated #sidebar is taller than #content.

    This is an entirely different issue, easy to fix but sometimes a hard concept to grasp.
    If you make your CSS look like this you will see #wrapper can enclose both #sidebar and #content -
    Code:
    #wrapper {
       width: 70%;
       border-width: 1px 1px 1px 1px;
       border-style: solid;
       border-color: #000000;
       margin: 10px auto 10px auto;
       background: #F3F7F9;
    overflow: auto;
    }
    See this explanation of how overflow: auto; clears your 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

  • #14
    New to the CF scene
    Join Date
    Apr 2011
    Posts
    7
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Excellent, thank you - I think some of our posts might have overlapped! I have made your final tweaks and sorted out a few other bits and think it's pretty much so there. Thanks.

    My only query is whether there is a fix for making the right hand column look as though it is the same length as the left. See this example where it is not working: http://www.seafarersonline.com/deckofficers.php

    Thanks

  • #15
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,667
    Thanks
    22
    Thanked 1,826 Times in 1,810 Posts
    Quote Originally Posted by Jamesuk View Post
    My only query is whether there is a fix for making the right hand column look as though it is the same length as the left. See this example where it is not working: http://www.seafarersonline.com/deckofficers.php
    When there is less content in the right column than there is in the left ... there's not much this layout can do about that. This layout works well when the left column is the shorter one but that's it.

    There is a method that will work and it's only a little more complicated. Have a look at a demo I've made here.
    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


  •  

    Posting Permissions

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