Trouble with css

Discussion in 'HTML and CSS' started by Newcoder8888, Mar 20, 2020.

  1. Newcoder8888

    Newcoder8888

    Joined:
    Mar 20, 2020
    Messages:
    3
    Likes Received:
    0
    Hi, please could someone help with my code. For some reason my css is not responding to certain classes for example I'm able to style my .pineapple class however my .eye, .mouth and .leftball are not working! Also when I add another class selector to my css it comes up white not yellow.

    P.s I'm using code pen currently

    Here is my code:

    <div id="container">
    <div class="pineapple"> </div>
    <div class="leftball"> </div>
    <div class="cball"> </div>
    <div class="rightball"> </div>
    <div class="eye"> </div>
    <div class="eye"> </div>
    <div class="mouth"> </div>
    <div class="leftarm"> </div>
    <div class="rightarm"> </div>
    <div class="rightleg"> </div>
    <div class="leftleg"> </div>
    </div>

    body{
    background-color: pink
    }

    #container{

    }

    .pineapple{
    width: 200px;
    height: 280px;
    background-color: yellow;
    border-radius: 60%;
    margin: auto;
    margin-top: 160px;
    border-top-left-radius: 50% 40%;
    border-top-right-radius: 50% 40%;
    border-bottom-left-radius: 50% 40%;
    border-bottom-right-radius: 49% 40%;
    }

    .eye{
    width: 10px;
    height: 10px;
    margin-top: 80px;
    background-color: black;
    border-radius: 30%;
    float: left;
    padding: 2px;
    margin-left: 50px;
    }
    .mouth {
    width: 30px;
    height: 25px;
    background: black;
    position: absolute;
    left:375px;
    border-bottom-left-radius: 133px;
    border-bottom-right-radius: 136px;
    overflow: hidden;
    margin: 0, auto;
    margin-top: 125px;
    margin-left: 78px;
    }
    .leftball{
    position:absolute;
    width:80px;
    height:80px;
    background-color: green;
    margin:0 auto;
    margin-top: -79.5px;
    border-top-left-radius: 50%;
    border-top-right-radius:50%;
    border-bottom-left-radius: 50%;
    border-bottom-right-radius:50%;
    {
     
    Newcoder8888, Mar 20, 2020
    #1
    1. Advertisements

  2. Newcoder8888

    sunfighter

    Joined:
    Nov 27, 2019
    Messages:
    114
    Likes Received:
    16
    It's hard to help when you don't tell us the problem(s) your having. "are not working!" is not a good explaination of the problem.

    So this is what I see:
    In pineapple class you have border-radius: 60%; just a waste of space since you change it soon after.
    In eye class, why padding: 2px; Nothing in the div. at 10pxs hard to see even if something there. The float moves the eyes out of the containing div. A couple of ways of fixing that. I used
    Code (Text):

    #container{
        float: left;
        width: 100%;
    }
     
    Floats should be cleared. You don't. You do use position: absolute; on the next two selectors so you don't notice the problem here. Maybe on you next selector(?) Anyway, let me caution you about using position: absolute; - it will get you into trouble sooner or later. Spend some time now learning CSS-Grid and Flex Box. They are the future and will replace positions in the future.

    For the mouth class margin: 0, auto; negated by next two rules. overflow: hidden; Not used nor needed. When you use position: absolute; you should have a TOP rule. The mouth is outside of the container, To get the most out of use position: absolute; in a container use postion:relative; on the container!

    leftball class:
    Code (Text):

    margin:0 auto;
    margin-top: -79.5px;
     
    can be stated as margin: -79.5px auto 0; BUT position: absolute; changes all that. Pick one, not both.

    And
    Code (Text):

    border-top-left-radius: 50%;
    border-top-right-radius:50%;
    border-bottom-left-radius: 50%;
    border-bottom-right-radius:50%;
     
    Can and should be replaced by border-radius:50%;
     
    sunfighter, Mar 20, 2020
    #2
    1. Advertisements

  3. Newcoder8888

    sunfighter

    Joined:
    Nov 27, 2019
    Messages:
    114
    Likes Received:
    16
    Code (Text):

    <style>
    html {
        box-sizing: border-box;
    }
    *, *::before, *::after {
        box-sizing: inherit;
    }
    body{
    background-color: pink
    }
    #container{
        float: left;
        width: 100%;
        position: relative;
    }
    .pineapple{
    width: 200px;
    height: 280px;
    background-color: yellow;
    margin: auto;
    margin-top: 160px;
    border-top-left-radius: 50% 40%;
    border-top-right-radius: 50% 40%;
    border-bottom-left-radius: 50% 40%;
    border-bottom-right-radius: 49% 40%;
    }
    .eye{
        width: 10px;
        height: 10px;
        margin-top: 80px;
        background-color: black;
        border-radius: 30%;
        float: left;
        padding: 2px;
        margin-left: 50px;
    }
    .mouth {
        width: 30px;
        height: 25px;
        background: black;
        position: absolute;
        left:375px;
        top:4px;
        border-bottom-left-radius: 133px;
        border-bottom-right-radius: 136px;
        margin-top: 125px;
        margin-left: 78px;
    }
    .leftball{
        width:80px;
        height:80px;
        background-color: green;
        margin: -79.5px auto 0;
        border-radius:50%;
    }
    </style>
     
     
    sunfighter, Mar 20, 2020
    #3
  4. Newcoder8888

    Newcoder8888

    Joined:
    Mar 20, 2020
    Messages:
    3
    Likes Received:
    0
    Thank you for all your comments. I have a lot to learn
     
    Newcoder8888, Mar 24, 2020
    #4
  5. Newcoder8888

    sunfighter

    Joined:
    Nov 27, 2019
    Messages:
    114
    Likes Received:
    16
    No problem. Here to help.
     
    sunfighter, Mar 25, 2020
    #5
    1. Advertisements

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments (here). After that, you can post your question and our members will help you out.