Answer the question
In order to leave comments, you need to log in
O
O
Oleg Efimchuk2016-09-05 18:25:41
Oleg Efimchuk, 2016-09-05 18:25:41
How to correctly position the inner element in a responsive layout?
<!DOCTYPE html>
<html class="no-js" lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<link rel="shortcut icon" href="favicon.png">
<title>proekt4_Crios</title>
<!-- <link rel="stylesheet" href="main.css"> -->
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<script src="/picturefill-master/src/external/matchmedia.js"></script>
<script src="/picturefill-master/dist/picturefill.js"></script>
<script src="/Respond-master.js"></script>
<script src="../dest/respond.src.js"></script>
</head>
<style>
@media screen and (min-width: 768px){
*{
margin: 0;
padding: 0;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
body {
background-image:url(images/1a.png);
background-repeat: no-repeat;
background-size: 100%;
font: 100%/1.5em 'Montserrat-Regular','Montserrat-Bold';
width: 100%;
height: auto;
text-align: center;
}
figure{
display: block;
line-height: 0;
width:100%;
height: auto;
}
.header{
width: 100%;
background-color:#000;
opacity: 0.5;
padding: 0% 0% 12% 0%;
}
.q1{
width: 100%;
height: auto;
line-height: 0;
margin: 0 auto;
z-index: 1;
position: absolute;
}
.q1 img{
width: 21%;
height: auto;
}
.q2{
background-color:#CF4;
height: auto;
width: 100%;
z-index: 2;
position: absolute;
}
.q2_vl{
float: left;
background-color:blue;
border: 1px solid #000;
height: auto;
width: 30%;
position: absolute;
z-index: 3;
}
.q2_vl .nav {
position: relative;
margin: 3.06% 0% 0% 13.453%;
padding: 1.31% 1.31% 1.31% 1.31%;
background-size: 36.363%;
background-image: url(images/m2.png);
background-color: green;
border: 1px solid #000;
background-position: center;
background-repeat: no-repeat;
box-shadow: 0 0 33px rgba(74, 88, 99, 0.15);
border-radius: 50%;
float: left;
height: 99px;
width: 40%;
}
.q2_vl .nav ul{
display: none;
}
li{
padding: 1% 8% 1% 8%;
min-width: 200px;
background-color: red;
border-radius: 5%;
border-bottom: #000;
}
li:hover{
display: block;
background-color: #FF3366;
}
.q2_vl .nav:hover {
padding: 1% 2% 1% 2%;
margin: 1.5% 0% 21.9% 4%;
border: 1px solid #000;
box-shadow: 0 0 33px rgba(74, 88, 99, 0.15);
height: auto;
max-width:40%;
border-radius: 1%;
position: absolute;
z-index: 999;
background-color: #F7F8FB;
}
.q2_vl .nav:hover ul{
background-color: #F7F8FB;
box-shadow: 0 0 40px #EEF6FA;
border-radius: 3%;
border: 1px solid #EEF6FA;
z-index: 999999;
}
.q2_vl .nav:hover ul, li{
max-width: 100%;
display: block;
background-color: #F7F8FB;
border-bottom: 1px solid #000;
}
.q2_vr{
background-color:green;
float: right;
width: 30%;
}
.z{
background-color:yellow;
border: 5px solid #000;
width: 100%;
text-align: center;
}
.z_1{
color: blue;
font-size: 2.1em;
height: 88px;
width: 100%;
height: auto;
}
.z_2{
color: blue;
font-size: 2.1em;
width: 100%;
height: 88px;
}
.Simple_PSD_Template{
background-color:green;
opacity: 0.5;
height: auto;
text-align: center;
width:100%;
position: absolute;
z-index: 1;
}
.Simple_PSD_Template img{
width:100%;
z-index: 1;
}
.Simple_PSD_z_index{
border: 8px solid #000;
position: absolute;
margin: 4% 0% 0% 0%;
z-index: 11;
width:100%;
height: auto;
}
.Simple_PSD_a_p {
color: red;
border: 8px solid #000;
font-size: 1.48em;
word-spacing: 0.17em;
height: auto;
text-align: left;
position: absolute;
z-index: 22;
}
.Simple_PSD_lorem_b_p {
color: rgba(74, 88, 99, 0.25);
font-size: 0.55em;
height: auto;
letter-spacing: 0.05em;
}
.Simple_PSD_button_explore_p {
color: #43a9ff;
background-image: url(images/Prostokąt-zaokrąglony-1b.png);
background-size: 100%;
background-repeat: no-repeat;
font-size: 0.44em;
font-weight: bold;
height: auto;
letter-spacing: 0.02em;
text-transform: uppercase;
}
.Simple_PSD_button_explore_p a{
color: #43a9ff;
}
.imgSimple{
position: absolute;
z-index: 1;
width: 100%;
height: auto;
}
@font-face {
font-family: 'Montserrat-Regular';
src: url('fonts/Montserrat-Regular.otf');
}
@font-face {
font-family: 'Montserrat-Bold';
src: url('fonts/Montserrat-Bold.otf');
}
@font-face {
font-family: Montserrat-Regular;
src: url('fonts/Montserrat-Regular.otf');
}
@font-face {
font-family: Montserrat-Bold;
src: url('fonts/Montserrat-Bold.otf');
}
.container{
display: table;
width:100%;
}
.container .cols{
float: left;
}
.container .cols.col-1{width:8.333333333333333%;}
.container .cols.col-2{width:16.66666666666667%;}
.container .cols.col-3{width:25%;}
.container .cols.col-4{width:33.33333333333333%;}
.container .cols.col-5{width:41.66666666666667%;}
.container .cols.col-6{width:50%;}
.container .cols.col-7{width:58.33333333333333%;}
.container .cols.col-8{width:66.66666666666666%;}
.container .cols.col-9{width:75%;}
.container .cols.col-10{width:83.33333333333333%;}
.container .cols.col-11{width:91.66666666666666%;}
.container .cols.col-12{width:100%;}
}
.container:before,
.container:after,
.row:after,
.row:before,
.clear:before,
.clear:after{
display:table;
}
.container:after,
.row:after,
.clear:after{
content: " ";
clear: both;
}
/*/mediaquery*/
}
</style>
<body>
<!-- 1 beg <div class="container"> -->
<div class="container">
<!-- <header> -->
<div class="header">
<div class="q1">
<figure>
<img sizes="(min-width: 1em) 80vw, 100vw"
srcset="images/5.jpg 360w,
images/5.jpg 80w,
images/5.jpg 100w"
alt="bbb">
</figure>
</div>
<div class="q2">
<div class="q2_vl">
<div class="nav">
<ul>
<li>menu-1</li>
<li>menu-2</li>
</ul>
</div>
</div>
<div class="q2_vr">
<div class="search">
</div>
</div>
</div>
<div class="z">
<div class="z_1">
crios
</div>
<div class="z_2">
free
</div>
</div>
</div>
<div class="Simple_PSD_Template">
<div class="Simple_PSD_z_index">
<div class="Simple_PSD_a_p">
<p>Simple PSD template with cool stuff</p>
</div>
<div class="Simple_PSD_lorem_b_p">
<p>Lorem ipsum dolor sit amet, consectetur adipsing elit.</p>
</div>
<div class="Simple_PSD_button_explore_p">
<a href="https://validator.w3.org/whatsnew.html">explore template</a>
</div>
</div>
<div cla1ss="imgSimple">
<figure>
<img sizes="(min-width: 1em) 80vw, 100vw"
srcset="images/kon450.png 360w,
images/kon700.png 80w,
images/kon2000.png 100w"
alt="bbb">
</figure>
</div>
</div>
</div>
<!-- 1 end <div class="container"> -->
</body>
</html> 1 answer(s)
@oiu
O
Oleg Efimchuk, 2016-09-05 @oiu
1) The main task is to place several blocks with text above the block that will be the background image of the parent.
2) You can give positioning to the class ( .Simple_PSD_Template ) that comes after (header).
3) Is it possible and correct to position the class (.q1) (.q2) inside (header).
Similar questions
R
A
S
K
Didn't find what you were looking for?
Ask your questionAsk a Question
731 491 924 answers to any question