I am trying to change the positions of the buttons which will scale down to mobile relative to the image div. I tried position/absolute; but it didn't take effect. Neither did the buttons stay relative inside the image div. I am not sure if the media queries will do the job or not. Any solutions?
<div id="hero-wrapper" class="main_wrapper hero">
<img src="images/home-hero-image.jpg" alt="fruute">
<div class="herobuttons"><div id="hero-shop-cookies" class="hero-btn">shop cookies</div>
<div id="hero-shop-gifts" class="hero-btn">shop gifts</div></div>
</div>
CSS
#hero-shop-cookies {
top: 398px;
left: 550px;
}
#hero-shop-gifts {
top: 398px;
left: 715px;
}
.main_wrapper hero{
width: 100%;
}
#hero-wrapper{
position: relative;
}
.hero-wrapper > .hero-btn a{
position: absolute;
left: 0;
right: 15px;
bottom: 20px;
top: 0;
background-color: red;
}
#media screen and (min-width: 768px) {
#nav-menu{
display: none;
}
#navigation li, #navigation a{
float:left;
}
.main_wrapper hero, .hero-btn{
width: 100%;
}
.herobuttons{
position: relative;
left: 0;
top: 0;
}
#slideshow-area{
width: 300px;
}
}
Change min-width: 768px; to max-width: 768px;
Related
I have three different elements. Two divs and 1 button. I'm trying to make them look nice, and not overlaps each other, but when the content of one div is bigger, everything is ruined. I tried to use overflow and min-height properties, but it didn't work. Any advice?
.lk .popup .popup-masterclass {
position: relative;
height: 48px;
}
.lk .popup .masterclass-text {
position: absolute;
top: 0;
left: 138px;
}
.lk .popup .popup-roundtable {
position: relative;
height: 48px;
}
.lk .popup-close-text {
font-size: 12px;
color: rgba(14, 17, 22, 0.5);
text-align: center;
margin-left: auto;
margin-right: auto;
position: absolute;
bottom: 80px;
left: 0;
right: 0;
}
#media screen and (min-width: 768px) {
.lk .popup .close-mobile {
display: none;
}
}
Inside .twig they all are next to each other like this:
<div class="popup-masterclass"></div>
<div class="popup-roundtable"></div>
<div class="popup-close-text close close-mobile">{{ t("lk.close.popup") }}</div>
And all of that looks like this:
I am trying to create a responsive design and using the position absolute to place my image in the right position. Now, is there a way to "lock down" two images to resize together with the size of the screen? I have to keep adjusting the image position using the #media query.
It's driving me insane now. What I want to achieve is both images to move together at the same time.
Have a look at this Fiddle or see the demo below:
body {
margin: 0;
padding: 0;
}
.wrapper {
position: relative;
left: 0;
top: 0;
margin-left: auto;
margin-right: auto;
text-align: center;
overflow: hidden;
max-width: 1200px;
}
.container {
display: inline-block;
max-width: 900px;
}
.absolutecontainerliquids {
height: 450px;
}
.basecloudcontainer {
position: relative;
}
.paddingtop {
padding-top: 30px;
}
.liquids {
position: absolute;
left: 10%;
z-index: 10;
width: 80%;
}
.cloud {
position: absolute;
left: 0%;
width: 100%;
z-index: 1;
}
.darkgrey {
background-color: #262626;
}
.lightgrey {
background-color: #cfcdc7;
}
.page1 {
z-index: 10;
}
.page2 {
padding-top: 40px;
}
.firstimagetabletlogostripes {
display: none;
}
.firstimagelogobottom {
display: none;
}
.firstimagelogo {
width: 64%;
left: 18%;
top: 27%;
position: absolute;
z-index: 1;
}
.blacktext {
color: black;
}
.paragraph {
text-align: center;
padding: 0 30px;
}
#media screen and (min-width: 340px) {
.firstimagelogo {
width: 65%;
top: 25%;
}
}
#media screen and (min-width: 500px) {
.firstimagelogo {
width: 30%;
top: 30%;
left: 35%;
z-index: 10;
}
.firstimagemlogostripes {
visibility: hidden;
}
.firstimagetabletlogostripes {
display: block;
position: absolute;
left: -35%;
top: 0%;
z-index: 2;
width: 120%;
}
}
#media screen and (min-width: 600px) {
.firstimagetabletlogostripes {
top: -10%;
left: -40%
}
}
#media screen and (min-width: 700px) {
.wrapper {
overflow: visible;
}
.absolutecontainerliquids {
height: 650px;
}
.firstimagetabletlogostripes {
top: -20%;
left: -45%;
width: 130%;
}
}
#media screen and (min-width: 800px) {
.firstimagetabletlogostripes {
top: -50%;
left: -50%;
width: 130%;
}
}
#media screen and (min-width: 900px) {
.firstimagetabletlogostripes {
top: -50%;
left: -50%;
width: 130%;
}
}
#media screen and (min-width: 1000px) {
.firstimagetabletlogostripes {
top: -60%;
left: -30%;
width: 120%;
}
.firstimagelogo {
width: 20%;
top: 25%;
left: 40%;
z-index: 10;
}
.firstimagelogotop {
display: block;
position: absolute;
top: -0%;
left: 70%;
width: 40%;
}
.firstimagelogobottom {
display: block;
position: absolute;
top: 70%;
left: 15%;
width: 40%;
}
}
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Base - E-Liquid</title>
<link href="styles.css" rel="stylesheet" type="text/css">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div class="wrapper darkgrey page1">
<div class="container">
<img class="firstimagemlogostripes" src="https://image.ibb.co/g5WJ66/mlogostripes.png" />
<img class="firstimagetabletlogostripes" src="https://preview.ibb.co/gFnrR6/stripes.png" />
<img class="firstimagelogo" src="https://image.ibb.co/gsPGtm/logofilled.png" />
<img class="firstimagelogobottom" src="https://preview.ibb.co/gkXEeR/imagelogobottom.png" />
</div>
</div>
<div class="wrapper lightgrey page2">
<div class="container absolutecontainerliquids">
<div class="paragraph blacktext">
<p>Ecstatic advanced and procured civility not absolute put continue. Overcame breeding or my concerns removing desirous so absolute. My melancholy unpleasing imprudence considered in advantages so impression. Almost unable put piqued talked likely
houses her met. Met any nor may through resolve entered. An mr cause tried oh do shade happy.
</p>
</div>
</div>
</body>
</html>
This is the HTML:
<div class="bck">
<div class="image-1"></div>
</div>
And CSS:
.bck {
background-image="image url"
}
.image-1 {
margin-top: 40px
margin-left: 40px
}
You can use div tag and put your both image in it. If you are using external css then create a class and apply that class to both of images.
Update:
This is Html file:
<div class="bck">
<div class="image-1"></div>
</div>
And css:
.bck{
background-image="image url"}
.image-1{
margin-top: 40px
margin-left: 40px}
So I have two <div> next to each other and I want to make it so when you have little space (Phone for example) it puts the second <div> under the first one with some space. When you're on a 16:9 ratio computer it has them next to each other.
body {
background: #FFFFFF;
}
.box {
float: left;
margin: 10px;
padding: 25px;
max-width: 300px;
height: 300px;
border: 1px solid black;
}
div {
max-width: 2480px;
z-index: 2;
left: 0;
position: absolute;
width: 100%;
height: 50px;
top: 0px;
color: #2D2E32;
background: #2D2E32;
}
/*Box1*/
div2 {
position: absolute;
color: #2D2E32;
background: #2D2E32;
width: 700px;
height: 950px;
top: 700;
left: 200;
}
div3
/*Box2*/
{
position: absolute;
color: #2D2E32;
background: #2D2E32;
width: 700px;
height: 950px;
top: 700;
right: 10%;
}
img {
max-height: 800;
max-width: 2480;
z-index: 1;
width: 100%;
height: 63%;
left: 10%;
}
div4 {
max-height: 59%;
z-index: -1;
position: absolute;
width: 100%;
height: 59%;
top: 5%;
color: #17181A;
background: #17181A;
left: 0;
}
div5 {
max-width: 2480;
max-height: 25;
z-index: 2;
left: 0;
position: absolute;
width: 100%;
height: 25px;
color: #2D2E32;
background: #2D2E32;
}
<body>
<div id="page1">
<!--Task-->
<a id="Task" class="smooth"></a>
</div>
<div2 id="page2">
<!--Box1-->
<a id="Info1" class="smooth" class="box"></a>
</div2>
<div3>
<!--Box2-->
<a id="Info1" class="smooth" class="box"></a>
</div3>
</body>
CSS Media Queries will solve this problem by allowing you to create styles that will be conditionally applied based on a query that you specify. Here's an example:
/* Develop "mobile-first, meaning that your normal styles should reflect how you want
the content to look on a mobile device
div elements will normally appear on their own line, but let's add a little space between
the lines
*/
div { margin:1em; }
/* When the viewport is not bigger than 760px and it is rotated to be wide
put divs next to each other and only move them down when the full width
of the viewport is used up */
#media screen and (max-width:760px) and (orientation:landscape) {
div {
float:left;
margin:auto; /* reset margins back to normal */
}
}
<div>Some div content</div>
<div>Some div content</div>
I need to layer multiple divobjects.
To look like this
Whenever I load the markup as an HTML file in the browser the top: feature isn't responding. Then, if I open firebug to check the CSS, it shows that the value is there. If I modify the value of top: then and only then do the elements with top applied to them snap to the value in the CSS file.
I am aware that an alternative is to use a negative margin-top combined with padding set in fixed units, but as margin-top is relative to the child and not the parent that isn't consistent under all circumstances. I'd rather use position:absolute inside of a position:relative container.
Here's a fiddle, for some reason the it isn't congruent with what I see on my html file. Nonetheless, it may be of some help visualizing things.
<!--here's the container-->
<div id="fale_container">
<!--here's the container for the top-layer-->
<div id="fale_textbox_0">
<div class="highlight0a" id="Fale"><h1 class="fale_heading" id="faleh1">Fale</h1></div>
<div class="highlight0a" id="que"><h1 class="fale_heading">que</h1></div>
<div class="highlight0a" id="nem"><h1 class="fale_heading">nem</h1></div>
<div class="highlight0a" id="um"><h1 class="fale_heading">um</h1></div>
</div>
<!--here's the markup in question, this needs to go behind the container cited above. this is where the problematic styles are located-->
<div id=fale_textbox_container>
<div id="fale_textbox_2">
<h1 id="fale_heading_2">Rápido</h1>
</div>
<div id="fale_textbox_3">
<h2 id="fale_subheading_2">Sem Sotaque</h2>
</div>
<div id="fale_textbox_1">
<h2 id="fale_subheading_1">GRINGO</h2>
</div>
CSS
.highlight0a{
position: relative;
height: 55.7px;
width: 100%;
margin-bottom:1%;
}
.fale_heading {
position: relative;
display: block;
width: 13.32756%;
float: left;
margin-right: 0.00666%;
margin-left: 13.33422%;
color: black;
font-size: 3em;
clear: right;
z-index: 10; }
#fale_container {
position: relative;
height: auto;
width: 100%; }
#fale, #que, #nem, #um {
z-index: 9; }
#fale:after {
content: '';
z-index: -1;
position: absolute;
background-color: #fff;
width: 9%;
height: 100%;
left: 13.334%;
min-width: 4em; }
#que:after {
content: '';
z-index: -1;
position: absolute;
background-color: #fff;
height: 100%;
width: 9.1%;
left: 13.334%;
min-width: 6em; }
#nem:after {
content: '';
z-index: -1;
position: absolute;
background-color: #fff;
height: 100%;
width: 10.5%;
left: 13.334%;
min-width: 4em; }
#um:after {
content: '';
z-index: -1;
position: absolute;
background-color: #fff;
height: 100%;
width: 7.3%;
left: 13.334%;
min-width: 2em; }
#fale_textbox_container, #fale_textbox_1, #fale_textbox_2, #fale_textbox_3 {
display: block;
position: relative;
width: 100%;
float: left;
margin-left: 0;
margin-right: 0;
height: auto; }
#fale_textbox_container {
background-color: black;
z-index: 0; }
#fale_textbox_1, #fale_textbox_2, #fale_textbox_3 {
padding: 2%;
top: -42%;
z-index: 2; }
#fale_textbox_1 {
height: 100px;
background-color: white; }
#fale_textbox_2 {
height: 60px;
background-color: #7C1A1A; }
#fale_textbox_3 {
height: 80px;
background-color: #3F3C3C; }
#fale_heading_2, #fale_subheading_1, #fale_subheading_2 {
position: absolute;
z-index: 4;
width: 13.32756%;
float: left;
margin-right: 0.00666%;
margin-left: 28.66858%;
color: black; }
#fale_heading_2 {
top: 10; }
#fale_subheading_1 {
font-size: 4em;
top: 10; }
#fale_subheading_2 {
top: 10; }
I'm not completely sure what you are trying to accomplish.
Maybe you mean the following:
#fale_textbox_container {
background-color: black;
z-index: 0;
position: absolute; // Added this one
}
.highlight0a {
position: relative;
height: 55.7px;
margin-bottom:1%;
display: inline; // And this one
}
http://jsfiddle.net/xqd3x91q/3/
And next time, please please outline the code a little bit better, hard to read. And sometime in English would give most users more feeling of what you are trying to do. For me it looks like it is some sort of book cover.
I'm trying to positioned the navigation in the middle position of the container, but I haven't can, yet. I'm using span for navigation.
I have positioned the parent containers as relative how is recommended and then assign position to span using top, right and left.
img{
max-width:600px;
}
.slider{
position: relative;
margin: 0 auto;
/*overflow: hidden;*/
width: 100%;
}
.slider ul{
/*white-space: nowrap;*/
list-style: none;
padding: 0;
position: relative;
}
.slider ul li{
margin-right: -4px;
width: 100%;
position: absolute;
display: none;
top: 0;
left: 0;
}
.slider ul li.active{
display: list-item;
}
/*Navegacion*/
.flechas-nav .anterior, .flechas-nav .siguiente{
position: absolute;
cursor: pointer;
}
.flechas-nav .anterior {
top: 50%;
}
.flechas-nav .siguiente{
right: 0;
top: 50%;
}
.flechas-nav span {
height: 100%;
width: 10%;
opacity: 0;
position: absolute;
z-index: 900;
}
.slider:hover .flechas-nav span {
opacity: 1;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="slider">
<ul class="slider-contenedor">
<li class="slide active">
<img class="img-responsive" src="http://i.imgur.com/Khgz4Qd.jpg" alt="">
</li>
<li class="slide">
<img class="img-responsive" src="http://i.imgur.com/Dc3XS7w.jpg" alt="">
</li>
<li class="slide">
<img class="img-responsive" src="http://i.imgur.com/aVzLCnM.jpg" alt="">
</li>
</ul>
<div class="flechas-nav">
<span class="anterior">Left</span>
<span class="siguiente">Right</span>
</div>
</div>
</div>
</div>
I put demo on jsfiddle.
How can I position vertical middle this span?
Demo
You have a few issues in your CSS. For one, when using position:absolute it removes the element out of the flow of the document. Both your image and text are being positioned absolute. so there is no height or width being registering in your document. That's why top: 50% isn't working. So start by removing the positioning from .slider ul li
.slider ul li{
margin-right: -4px;
width: 100%;
/*position: absolute;*/ //remove
display: none;
/*top: 0;*/ //not needed anymore
/*left: 0;*/ //not needed anymore
}
Now top:50% will work and the words "left" and "right" will seemingly be centered. There's a few more things:
Next, your div containers are display: block by default so they take the width of the document. Since your image is not width:100% the container is too large and the word "right" will disappear because the image isn't wide enough. (check out your demo and user4429928's answer - make the screen large and "right" will seem to disappear). You can set the container to display: inline-block so it wraps the image:
.container{
display: inline-block;
}
Now, I would remove the absolute positioning from .anterior and .siguiente and add the positioning to the parent instead and float the children:
.flechas-nav{
width: 100%;
position: absolute;
top: 50%;
color: #FFF;
transform: translateY(-50%); //read note below about this
}
.flechas-nav .anterior {
float: left;
}
.flechas-nav .siguiente{
float: right;
text-align: right;
}
Calling top:50% does not actually center an element, it positions it 50% from it's top. In this case becasue your text has very little height, it looks ok, but if you added height: 200px or something, you would see that it's not actually centered. To correct this you can use:
transform: translateY(-50%);
Now your content is centered and within its parent. And to fix the image rotating issue you can set the image thats fading out to absolute and the one that comes in to static:
FIDDLE
try the demo : http://jsfiddle.net/17ow14kf/2/
img{
max-width:600px;
}
.slider {
height: 210px;
margin: 0 auto;
position: relative;
width: 100%;
}
.slider ul{
/*white-space: nowrap;*/
list-style: none;
padding: 0;
position: relative;
}
.slider ul li{
margin-right: -4px;
width: 100%;
position: absolute;
display: none;
top: 0;
left: 0;
}
.slider ul li.active{
display: list-item;
}
/*Navegacion*/
.flechas-nav .anterior, .flechas-nav .siguiente{
position: absolute;
cursor: pointer;
}
.flechas-nav .anterior {
top: 50%;
}
.flechas-nav .siguiente{
right: 0;
top: 50%;
}
.flechas-nav span {
height: 100%;
width: 10%;
opacity: 0;
position: absolute;
z-index: 900;
}
.slider:hover .flechas-nav span {
opacity: 1;
}
.flechas-nav {
height: 50px;
margin-top: -25px;
position: absolute;
top: 50%;
width: 100%; color:#fff;
}
.flechas-nav .anterior {
left: 0;
top: 50%;
}