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}
Related
So I'm having a problem where some buttons in a seperate div are binding to a header I've absolute positioned the logo's and the intro section is a separate div.
Heres the html including buttons that aren't working
<div class="header">
<div class="logo-right">
<img src="/img/project-logo.png" alt="Hedonist Project" />
<img src="/img/drinks-logo.png" alt="Hedonist Drinks" />
</div>
<div class="logo">
<img src="/img/logo.png" alt="Hedonist Events" />
<h4>a creative drinks consultancy</h4>
</div>
</div>
<div class="intro">
<div class="container">
<div class="intro__text editable"><h3>Hedonist Events are an events agency
for bar staff, bar management, events production and pop-up bars.</h3>
<div class="intro__buttons">
<a class="btn" href="#contact">get in touch</a>
<a class="btn" target="_blank" rel="noopener" href="deck.html">see the event deck</a>
</div>
Heres the css
.logo {
display: flex;
position: absolute;
top: 5.3em;
left: 6.5em;
right: 0;
bottom: 0;
img {
height: 3.5em;
width: auto;
padding-right: 1.5em;
}
#media (max-width: 850px) {
display: block;
left: 4.3em;
}
}
.logo-right {
position: absolute;
top: 5.3em;
right: 12.5em;
bottom: 0;
img {
height: 3.5em;
width: auto;
padding-right: 1.5em;
}
#media (max-width: 1300px) {
right: 8em;
}
#media (max-width: 950px) {
display: none;
}
}
.header {
height: 20em;
width: 100%;
#media (max-width: 1000px) {
height: 10em;
}
}
When using absolute in this case the header as to be relative:. Also using absolute position and you want to align a tag left just use "left" no need for "right" unless you want it to fill the whole space of the relative container. Update your code with the below
.logo {
display: flex;
position: absolute;
top: 5.3em;
left: 6.5em;
img {
height: 3.5em;
width: auto;
padding-right: 1.5em;
}
#media (max-width: 850px) {
display: block;
left: 4.3em;
}
}
.logo-right {
position: absolute;
top: 5.3em;
right: 12.5em;
img {
height: 3.5em;
width: auto;
padding-right: 1.5em;
}
#media (max-width: 1300px) {
right: 8em;
}
#media (max-width: 950px) {
display: none;
}
}
.header {
height: 20em;
width: 100%;
position: relavtive;
#media (max-width: 1000px) {
height: 10em;
}
}
I have two lists that's location I would like to move as the screen size gets smaller. When the screen reaches 327px in length, I would like the "headlogo" to be centered on the screen, and everything else exactly as it is... how do I do this?
#charset "utf-8";
/* CSS Document */
body {
margin: 0;
padding: 0;
background-color: #DDDCDC;
}
ul {
list-style-type: none;
}
li {
display: inline;
padding: 10px;
}
.secondlist {
margin-top: 30px;
}
#headlogo {
width: 80px;
margin-left: 10px;
margin-top: 10px;
}
.firstlist {
position: relative;
float: left;
}
.secondlist {
position: absolute;
right: 0;
margin-right: 50px;
margin-top: 50px;
z-index: 2;
}
li#about {
width: 5px;
}
#media only screen and (max-width: 610px) {
.firstlist {
position: relative;
float: left;
}
.secondlist {
position: relative;
right: 0;
margin-right: 50px;
margin-top: 50px;
z-index: 2;
text-align: center;
}
li {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
li.listli {
line-height: 30px;
}
#headlogo {
width: 80px;
margin-left: 10px;
margin-top: -22px;
}
}
#media only screen and (max-width: 424px) {
#headlogo {
margin-top: -3px;
}
}
#media only screen and (max-width: 394px) {
#headlogo {
margin-top: 7.5px;
}
}
#media only screen and (max-width: 327px) {
#centerme {
display: inline-block;
position: relative;
top: 30px;
}
.firstlist {
float: none;
display: block;
left: 0;
right: 0;
margin-left: auto;
margin-right: auto;
}
li.listli {
position: relative;
top: -10px;
}
}
<div id="centerme">
<ul class="firstlist">
<a class="alist" href="http://www.coopertimewell.com">
<li class="listl" id="image">
<img id="headlogo" src="images/logotestme.png" />
</li>
</a>
</ul>
</div>
<ul class="secondlist">
<a class="alist" href="#">
<li class="listli" id="home"><strong>HOME</li></a>
<a class = "alist" href = "http://www.coopertimewell.com/about"><li class = "listli" id = "about">ABOUT ME</li></a>
<a class = "alist" href = "http://www.coopertimewell.com/work"><li class = "listli" id = "work">PORTFOLIO</li></a>
<a class = "alist" href = "http://www.coopertimewell.com/contact"><li class = "listli" id = "contact">CONTACT</li></a>
</ul>
If you would only center it horizontally u have to edit #center in the 'max-width: 327px' query to the following:
#centerme {
display: block;
position: relative;
top: 30px;
width: 100%;
text-align: center;
}
I made the #center div a 100% width and set the text-align to center, which affects the image also. So this way you can center the image horizontally.
Or if you would center it horizontally and vertically you can use:
#centerme {
display: block;
position: relative;
top: 50%;
transform: translateY(50%);
-webkit-transform: translateY(50%);
width: 100%;
text-align: center;
}
With the same code from above I added
top: 50%;
transform: translateY(50%);
to center it horizontally.
Goodluck!
This should centre it below 327px;
#media (max-width: 327px){
#headlogo{
display: block;
margin: 0 auto
}
}
Check this out for more info
You can do
#media (max-width: 327){
#headlogo{
//with your code her//
}
}
Or you can use a new css file with media added
<link rel="stylesheet" media="screen and (max-width: 327px)" href="small.css/>
With this line you can add a complete new css if your screen will be 327px or smaller.
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 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;
I tired many ways, but I can't get this media query to work.
"#Content" just doesn't change left position when I resize the window !
must be a way to make it run correctly !
Here's the code:
index.html
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css" type="text/css" media="screen" />
<title>index</title>
</head>
<body>
<div id="layout">
<div id="fixed-sidebar">
</div>
<div id="content">
content to make error visible !
</div>
</div>
</body>
</html>
style.css
* {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
#layout {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
#fixed-sidebar {
position: fixed;
top: 0;
bottom: 0;
left: 0;
width: 460px;
background-color: rgb(33, 40, 46);
overflow: hidden;
padding: 20px;
color: white;
}
#content {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 460px;
overflow-y: scroll;
padding: 20px;
background-color: lightgrey;
}
#media screen and (min-width: 1151px) {
#fixed-sidebar { width: 460px; }
#Content { left: 460px; }
}
#media screen and (max-width: 1150px) and (min-width: 700px) {
#fixed-sidebar { width: 40%; }
#Content { left: 40%; }
}
Here is a jsfiddle: http://jsfiddle.net/X3U2f/1/
What I'm doing wrong ? :/
(PS: I tried to put them important but still ignoring left position !)
Thank you
"What I'm doing wrong ? :/ "
You're using a capital 'C' for the ID within the #media rules, but class and ID attribute values are case-sensitive in HTML, so you'll need to change #Content to #content:
#media screen and (min-width: 1151px) {
#fixed-sidebar { width: 460px; }
#content { left: 460px; }
}
#media screen and (max-width: 1150px) and (min-width: 700px) {
#fixed-sidebar { width: 40%; }
#content { left: 40%; }
}
http://jsfiddle.net/X3U2f/