Trouble with css


Joined
Mar 20, 2020
Messages
3
Reaction score
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%;
{
 
Ad

Advertisements

Joined
Nov 27, 2019
Messages
127
Reaction score
19
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:
#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:
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:
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%;
 
Joined
Nov 27, 2019
Messages
127
Reaction score
19
Code:
<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>
 
Ad

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. After that, you can post your question and our members will help you out.

Ask a Question

Top