I have the head done, but the eyes won't appear to me. should i use grid or flex ?
#e1 #e2 are the eyes and i put them with head circle in a container cnt-head.
Here"s the HTML:
<body>
<div id="container">
<div id="hat" ></div>
<div id="hat-white" ></div>
<div id="hat" ></div>
<div id="hat-long" ></div>
<div id="cnt-head" >
<div id="head" ></div>
<div id="e1"></div>
<div id="e2"></div>
</div>
</div>
</body>
Here's the CSS :
body{
height: 100%;
width: 100%;
}
#container{
width: 400px;
height: 300px;
background: #dd6b4d;
}
.sman{
margin: auto;
}
#hat{
background: #0E1F2B;
width: 30px;
height: 12px;
}
#hat-white{
background: #FFFFFF;
width: 30px;
height: 8px;
}
#hat-long{
background: #0E1F2B;
width: 45px;
height: 4px;
}
#cnt-head{
height: 30px;
width: 45px;
overflow: hidden; /* This hide the div under another */
}
#head{
background: #FFFFFF;
position: relative;
width: 45px;
height: 45px;
border-radius: 50px;
top: -5px;
}
#e1{
height: 8px;
width: 8px;
border-radius: 50px;
background: #0E1F2B;
}
#e2{
height: 8px;
width: 8px;
border-radius: 50px;
background: #0E1F2B;
}
Every answer will be good thx, and is it possible to draw the whole snowman in 1 div ? or atleast 3 divs for every body part?
CodePudding user response：
Hope it's work for you !!!
body{height: 100%;width: 100%;}
#container{width: 400px;height: 300px;background: #dd6b4d;}
.sman{
margin: auto;
}
#hat{
background: #0E1F2B;
width: 30px;
height: 12px;
}
#hat-white{
background: #FFFFFF;
width: 30px;
height: 8px;
}
#hat-long{
background: #0E1F2B;
width: 45px;
height: 4px;
}
#cnt-head{
height: 30px;
width: 45px;
overflow: hidden; /* This hide the div under another */
position: relative;
}
#head{
background: #FFFFFF;
position: relative;
width: 45px;
height: 45px;
border-radius: 50px;
top: -5px;
}
#e1{
height: 8px;
width: 8px;
border-radius: 50px;
background: #0E1F2B;
position: absolute;
left: 10px;
top: 10px;
}
#e2{
height: 8px;
width: 8px;
border-radius: 50px;
background: #0E1F2B;
position: absolute;
right: 10px;
top: 10px;
}<div id="container">
<div id="hat" ></div>
<div id="hat-white" ></div>
<div id="hat" ></div>
<div id="hat-long" ></div>
<div id="cnt-head" >
<div id="head" ></div>
<div id="e1"></div>
<div id="e2"></div>
</div>
</div>CodePudding user response：
If you right click on the element then select inspect, then in the code hover on your eye div you can see that they are there but below your snowmans head. In this case I would reccomend using a pseudo-element on your head to make the eyes start in the top left position inside that div. Plus that you now can remove the div if you dont wanted it.
body{
height: 100%;
width: 100%;
}
#container{
width: 400px;
height: 300px;
background: #dd6b4d;
}
.sman{
margin: auto;
}
#hat{
background: #0E1F2B;
width: 30px;
height: 12px;
}
#hat-white{
background: #FFFFFF;
width: 30px;
height: 8px;
}
#hat-long{
background: #0E1F2B;
width: 45px;
height: 4px;
}
#cnt-head{
height: 30px;
width: 45px;
overflow: hidden; /* This hide the div under another */
}
#head::before, #head::after{
content: "";
height: 8px;
width: 8px;
left:12px;
top:15px;
border-radius: 50px;
background: #0E1F2B;
position: absolute;
}
#head::after{
left:26px!important;
}
#head{
background: #FFFFFF;
position: relative;
width: 45px;
height: 45px;
border-radius: 50px;
top: -5px;
} <div id="container">
<div id="hat" ></div>
<div id="hat-white" ></div>
<div id="hat" ></div>
<div id="hat-long" ></div>
<div id="cnt-head" >
<div id="head" ></div>
</div>
</div>Sidenote: remember to make id's unique:)
CodePudding user response：
body {
height: 100%;
width: 100%;
}
#container {
width: 400px;
height: 300px;
background: #dd6b4d;
}
.sman {
margin: auto;
}
#hat {
background: #0E1F2B;
width: 30px;
height: 12px;
position: absolute;
left: 185px;
top: 0px;
z-index: 19;
}
#hat-middle {
background: #0E1F2B;
width: 30px;
height: 12px;
position: absolute;
left: 185px;
top: 16px;
z-index: 18;
}
#hat-white {
background: #FFFFFF;
width: 30px;
height: 8px;
position: absolute;
left: 185px;
top: 8px;
z-index: 17;
}
#hat-long {
background: #0E1F2B;
width: 45px;
height: 4px;
position: absolute;
left: 178px;
top: 28px;
z-index: 16;
}
#cnt-head {
height: 30px;
width: 45px;
overflow: hidden;
/* This hide the div under another */
}
#head {
background: #FFFFFF;
width: 45px;
height: 45px;
border-radius: 50px;
position: absolute;
left: 177px;
top: 25px;
z-index: 3;
}
#scarf_Center {
background-color: rgb(255 156 20);
position: absolute;
left: 168px;
top: 59px;
width: 65px;
height: 16px;
z-index: 15;
border-radius: 10px 10px 10px 10px;
border: 4px solid #dd6b4d;
}
#e1_right {
height: 8px;
width: 8px;
border-radius: 50px;
background: #0E1F2B;
position: absolute;
left: 205px;
top: 40px;
z-index: 5;
}
#e2_left {
height: 8px;
width: 8px;
border-radius: 50px;
background: #0E1F2B;
position: absolute;
left: 185px;
top: 40px;
z-index: 4;
}
#head_bottom {
background-color: rgb(255, 255, 255);
position: absolute;
left: 164px;
top: 60px;
width: 80px;
height: 80px;
z-index: 1;
border-radius: 50%;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
</head>
<body>
<div id="container">
<div id="hat" ></div>
<div id="hat-white" ></div>
<div id="hat-middle" ></div>
<div id="hat-long" ></div>
<div id="scarf_Center"></div>
<div id="e1_right"></div>
<div id="e2_left"></div>
<div id="head" ></div>
<div id="head_bottom" ></div>
</div>
</body>
</html>