I want a container in which there is a block rectangle, and inside that block I want 2 rectangles, 1 positioned at top and other at bottom, and then I want a circle in side that box. the first containers position must be fixed and others must not affect spaces with each other. I want all elements to have a fixed position so that I can enter text anywhere I want without any changes being made. I also want to apply a php for each loop on li, so these elements must be scrollable. Thank You.
.image{
position: relative;
background-color: #f2f2f2;
display: block;
box-shadow: 5px 5px 5px #aaaaaa;
width: 480px;
height: 640px;
padding: 0.5px;
margin-left:auto;
margin-right: auto;
margin-bottom: 30px;
}
.top_bar{
background-color: #3f51b5;
position: absolute;
display: block;
box-shadow: 5px 5px 5px #aaaaaa;
width: 478px;
height: 52px;
padding: 1px;
}
.middle_bar{
background-color: #f2f2f2;
position: absolute;
display: block;
width: 478px;
height: 534px;
padding: 1px;
margin-top: 38px;
}
.bottom_bar{
background-color: #3f51b5;
position: absolute;
display: block;
box-shadow: 5px 5px 5px #aaaaaa;
width: 478px;
height: 45px;
padding: 1px;
margin-left: auto;
margin-right: auto;
margin-bottom: 1000px;
}
.dot {
background-color: #f50057;
position: absolute;
background-color: solid black;
border-radius: 50%;
box-shadow: 5px 5px 5px #aaaaaa;
display: block;
margin-right: auto;
margin-left: auto;
}
.text_center_white {
position: relative;
top: 50%;
transform: translate(0,-50%);
text-align: center;
color: white;
}
.text_center_black {
position: relative;
top: 50%;
transform: translate(0,-50%);
text-align: center;
color: black;
}<html>
<head>
<title>DS</title>
</head>
<body>
<div class="image">
<div class="top_bar"> <div class="text_center_white">Text</div>
<div class="bottom_bar">
<div class='middle_bar'> <div class="text_center_black" ><p>Hello</p></div>
<div class="dot"> <div class="text_center_white">< 33 ></div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Aucun commentaire:
Enregistrer un commentaire