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 8 of 8
  1. #1
    New Coder
    Join Date
    Apr 2013
    Posts
    16
    Thanks
    4
    Thanked 0 Times in 0 Posts

    div tag and styling...

    Hello,
    I have a problem with my div tags. I'm using different dif tags and they are all styed in and external styling sheet.
    However in one tag the mother tag (not sure if you call it the mother or parent tag) takes over the styling (see: www.Leinster TKD\Contacts.html). Whereas an other div tag keeps his own style (this one is also within the mother tag).

    Anyone with a solution?

    Here is the css:
    #wrapper {
    width: 800px;
    margin-top: 20px;
    margin-right: auto;
    margin-left: auto;
    color: #000;
    height: 100%;
    min-height: 800px;
    visibility:visible;
    position: relative;
    top: 15px;
    padding: 0px;
    margin-bottom: 20px;
    overflow: hidden;
    background-image: url(../Images/center_line.png);
    background-repeat: repeat-x;
    background-position: left;
    background-color: #FFF;
    }

    #wrapper #wrapper_left_col {
    position: relative;
    height: 100%;
    width: 75%;
    left: 0px;
    top: 0px;
    background-color: #ffffff;
    float: left;
    color: #130200;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    line-height: normal;
    vertical-align: top;
    text-align: left;
    border-right-width: thin;
    border-right-style: solid;
    border-right-color: #0904ac;
    }
    #wrapper #wrapper_left_col2 {
    position: relative;
    height: 100%;
    width: 75%;
    left: 0px;
    top: 0px;
    background-color: #ffffff;
    float: left;
    color: #130200;
    font-family: Verdana, Geneva, sans-serif;
    font-size: 16px;
    line-height: normal;
    vertical-align: top;
    text-align: left;
    padding-top: 0px;
    padding-right: 20px;
    padding-bottom: 10px;
    padding-left: 20px;
    }
    #wrapper #wrapper_Left_col_contact {
    background-color: #FFFfff;
    height: 100%;
    float:right;
    top: 0px;
    position: relative;
    width: 24%;
    margin: 0px;
    right: 0px;
    color: #000;
    font-family: Arial, Helvetica, sans-serif;
    }

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,678
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Hello wortmann,

    Actual link: http://leinster-tkd.com/Contacts.html

    Have a look at a simple 2 column layout for an idea how you can use floats and no positioning.

    On your site, positioned left_col is 75% wide but you fail to add in the padding. 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.

    The box model always seems to be the hardest concept for new coders to grasp but it's very important.

    You should also know, % and px never mix well - they just don't add up right. In otherwords, 75% plus 40px padding leaves how much room for right_col???
    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

  • #3
    New Coder
    Join Date
    Apr 2013
    Posts
    16
    Thanks
    4
    Thanked 0 Times in 0 Posts
    thanks a lot for your help.
    What intrigues me is that in my other pages it's all well and good. But in this particular page i cant seem to get it right.
    The reason why i used percentages (my first time) is so on tablets and phone sit will look good. Or am i wrong thinking this?

  • #4
    New Coder
    Join Date
    Apr 2013
    Posts
    16
    Thanks
    4
    Thanked 0 Times in 0 Posts
    [QUOTE=wortmann;1328718]thanks a lot for your help.
    What intrigues me is that in my other pages it's all well and good. But in this particular page i cant seem to get it right.
    The reason why i used percentages (my first time) is so on tablets and phone still will look good. Or am i wrong thinking this?.
    thanks a lot

  • #5
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,678
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Quote Originally Posted by wortmann View Post
    The reason why i used percentages (my first time) is so on tablets and phone sit will look good. Or am i wrong thinking this?
    There's nothing wrong with using percentages, you just need to make sure that left and right add up to 100% and using px measurements for padding mess that up.

    % widths inside a fixed px width container are not going to help the display on a mobile device much. Have you looked at that 2-column layout I linked you to? Build a test site with that and view it on your phone.

    Just a quick comparison between pages and your 20px left/right padding on #wrapper_left_col2 is the first thing I see.
    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

  • #6
    New Coder
    Join Date
    Apr 2013
    Posts
    16
    Thanks
    4
    Thanked 0 Times in 0 Posts
    thanks.that all makes sence. I'm trying to put all in precentages now.
    thanks again.

    One more little thing: I can see a dotted line through this page... not sure why. u got any idea>

  • #7
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,678
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Quote Originally Posted by wortmann View Post
    thanks.that all makes sence. I'm trying to put all in precentages now.
    thanks again.

    One more little thing: I can see a dotted line through this page... not sure why. u got any idea>
    Code:
    #wrapper {
        background-color: #FFFFFF;
        background-image: url("../Images/center_line.png");
        background-position: left center;
        background-repeat: repeat-x;
        color: #000000;
        height: 100%;
        margin: 20px auto;
        min-height: 800px;
        overflow: hidden;
        padding: 0;
        position: relative;
        top: 15px;
        visibility: visible;
        width: 800px;
    }
    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

  • #8
    New Coder
    Join Date
    Apr 2013
    Posts
    16
    Thanks
    4
    Thanked 0 Times in 0 Posts
    got it sorted. was a border line within the parent wrapper.


  •  

    Posting Permissions

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