I have the following code for a section on my website: http://jsfiddle.net/qda6bkze/
The problem is, I can't get it to be responsive. Ideally, I'd like for the orange box and the picture to align themselves so that the picture overlaps the orange box. Something like this: http://puu.sh/bMb8M.jpg
I know I'll have to use media queries, but I was wondering what changes to make in order for the image to align itself under the orange block, since right now it sits to the right no matter how big the browser window is.
Here's what i have for CSS now:
.home-feature4 {
position:relative;
max-width:1200px;
}
#boxy {
width:1200px;
height:790px;
}
.feature4text, .orangeblock, .orangephoto {
position: absolute;
text-align: center;
}
.feature4text {
z-index: 2;
color:#32719a;
font-family:"Scout", sans-serif;
text-transform:uppercase;
font-size:12pt;
top: 100px;
left: 120px;
width:425px;
}
.orangeblock {
z-index:1;
top: 280px;
left: 20px;
}
.orangephoto {
z-index: 3;
top: 0px;
left: 600px;
}
Take out the top and left properties and add float: left;
Like so:
.orangephoto {
z-index: 3;
float: left;
}
A reference for the float property (and others) from W3 Schools
You need to give your div an "ID" and place the image inside the div. I wrote some mark up for you below feel free to copy it and make adjustments for it to work on your site. Let me know if you have any further questions I would be happy to help.
/* Your can adjust the CSS however you see fit for your Project */
#orangeblock {
width:410px; /* Give your background block extra pixels needed for your border */
height:310px; /* Same with your height */
background-color:#CCC;
}
#orangeblock img {
width: 390px; /* your image size shouls always be smaller than your div size */
height: 290px; /* This will allow you to see the background image */
padding: 10px; /* Your padding will have to be adjusted to get the image where your want */
/* you can also use padding-left: padding-right: padding-top: padding-bottom: and place whatever pixels you like */
}
<html>
<head>
</head>
<body>
<div id="orangeblock">
<img src="https://cdn.shopify.com/s/files/1/0636/3475/files/home-ossection-04-photo.jpg">
</div>
</body>
</html>
Related
I want to create responsive popup banner with close button here is my simple scenario:
<div class="banner">
<img src="...">
X
</div>
And my CSS:
.banner img{
max-width:100%;
max-height:100%;
position:absolute;
}
.close-btn{
position:absolute;
right:0;
z-index:2;
color:red;
background:#000;
padding:4px;
}
As you can see I stretch image depending on width and height.
Problem: I want close-btn to stick to the right side of the image and overlap it. To solve this the banner must be the same width as the image. If banner has position:absolute its width and height of course is 0.
Is it possible to achieve only with CSS?
Here is fiddle: http://jsfiddle.net/fjckls/qq590xz5/
I need image to be responsive to width and height
To make your image fully width AND height responsive, first off, you need to alter your units. You're currently using %'s which is all well and good, but for the 'fully height responsive' concept, the % units aren't much help.
Instead, you should look into using vh (view-height) and vw (view-width) units, since these are for the actual viewport that the user can see currently.
In order to position your 'x' over the top right of your image, you're going to have to alter your css slightly.
You could possibly include a css rule for your banner, first off. Something like:
.banner {
position:relative;
display:inline-block;
}
Whilst removing the 'position:absolute' rule from your image, since now your banner div will be the size of your image (not the default '100% of screen' that divs are set to originally).
This leaves us one problem, you haven't actually set where abouts you want the 'x' to appear vertically, so it will default to 'where it would position normally', which, in this case, would be below the image. To tackle this, you would need to add a top: or bottom: declaration to your 'x' class, and in my case, i've chosen to set it to the top (top:0;).
The overall fiddle can be shown here
or here:
.banner img {
max-width: 100vw;
max-height: 100vh;
}
.close-btn {
position: absolute;
right: 0;
top: 0;
z-index: 2;
color: red;
background: #000;
padding: 4px;
}
.banner {
position: relative;
display: inline-block;
}
<div class="banner">
<img src="http://sockets.hogwartsishere.com/media/book_covers/l-bunny.jpg" /> X
</div>
I have updated the link
http://jsfiddle.net/qq590xz5/3/
<div class="banner">
<div style="position:abolute;">
<img src="http://sockets.hogwartsishere.com/media/book_covers/l-bunny.jpg">
X
</div>
</div>
.banner img{
max-width:50%;
max-height:100%;
}
.close-btn{
position:absolute;
z-index:2;
color:red;
top:1%;
background:#000;
padding:4px;
}
Have a look
Thanks
try this..
Html
<div class="banner">
<img src="http://sockets.hogwartsishere.com/media/book_covers/l-bunny.jpg">
X
</div>
CSS
.banner{
position:relative;
width:200px;
}
img{
max-width:100%;
}
.close-btn{
position:absolute;
right:0;
top:0;
z-index:1;
color:red;
background:#000;
padding:4px;
}
Fiddle Demo
I found a solution that keeps the image centered horizontally and the x button on the top right of the image. It involves:
1) Making the .banner absolutely positioned, with margins from each window edge. This centers the entire .banner, however you might want to use fixed position if you need it to scroll along with the user's viewport.
It'll work as long as there aren't any other positioned elements as its parents.
.banner {
position: absolute;
top: 5%;
left: 25%;
right: 25%;
bottom: 5%;
}
2) Making a thing that sticks around the image, which will serve as a positioning guide for the little X.
<div class="shrinkwrap">
<img src="...">
X
</div>
.shrinkwrap {
/* shrink-wraps this div around its content;
as a side-effect, lets this div be centered with text-align: center; */
display: inline-block;
/* new positioning context! */
position: relative;
/* keeps the responsiveness */
max-width: 100%;
height: 100%;
}
3) Positioning the shrinkwrapper to always be in the center of the .banner.
.banner {
/* ... */
text-align: center;
}
.close-btn {
/* ... */
top: 0;
}
The finished version of this is here: http://jsfiddle.net/boxmein/qq590xz5/5/
Hi!
This seems like a stupidly simple question, but I cannot seem to horizontally center the header DIV.
http://jsfiddle.net/1ucwafx6/
as you can see, the light blue rounded square is almost centered, but not quite. I've tried on multiple systems, browsers, and screen resolutions and the outcome is always the same. It is slightly further to the right. I really don't understand what is wrong here. I have also tried margin: 0 auto; however then it just doesn't do anything and just stays on the very left hand side.
It's due to the default margin on the body. Just set
body { margin:0; }
and you'll see the fix.
This should help you center it, assuming you want the position to stay fixed with your current HTML markup.
JS FIDDLE
#header {
position: fixed;
width: 90%;
background-color: #3498db;
left: 50%;
transform: translate(-50%, 0);
margin-top: 25px;
border-radius: 10px;
}
I removed the position fixed and set left and right margins to auto and it centers just fine.
http://jsfiddle.net/1ucwafx6/3/
CSS:
#header {
/* position: fixed; */
width: 90%;
background-color: #3498db;
margin-left:auto;
margin-right: auto;
margin-top: 25px;
border-radius: 10px;
}
Just add
#header {
left:0;
}
http://jsfiddle.net/1ucwafx6/4/
I'm wondering if someone could help me e to create a fixed/sticky header... Not quite sure how to make this happen with CSS or HTML (sorry, I'm a neophyte).
My site is http://www.oliviafialkow.com/ and I would like my logo to stay fixed as visitors scroll down the page, like this example: http://lockebride.tumblr.com/
Any help would be wonderful--thanks!
My header HTML is as follows:
<div class="logo">
{{^customize.images.logo.url}}
<!--No Logo-->
<h1>{{site.title}}</h1>
{{/customize.images.logo.url}}
{{#customize.images.logo.url}}
<!--Logo Uploaded-->
<h1><img src="{{customize.images.logo.url}}" alt="{{site.title}}"></h1>
{{/customize.images.logo.url}}
</div>
My header CSS is:
/***** site_name color *****/
.logo h1 a {
color: {{{customize.colors.site_name}}};
}
/***** subtitle color *****/
.logo h2 {
color: {{{customize.colors.subtitle}}};
position: fixed
}
Thank you!
I regularly use this solution:
position: fixed;
width: [your-width-here]
margin: auto;
This will auto-center it; no weird calculations or ~48%'s in your CSS.
However, if you want to exactly mirror what is seen on the page you mentioned:
.parent-div {
float: right;
right: 50%;
position: fixed;
z-index: 19999;
}
.child-div {
position: relative;
float: right;
right: -50%;
}
Alongside position: fixed, you also need to provide a top: 0 and left: calc(50% - [width of your logo]
Add this into your .logo div:
position: fixed;
top: 0;
left: calc(50% - 80px);
z-index: 10;
The logo will then be taken out of the flow of the document, and so you should add a spacer of some sort to fill in the space originally occupied by the logo image.
Edit your css like this
#site-header {
padding-top: 110px;
margin-bottom: 50px;
}
#site-header .logo h1 img {
width: 100%;
}
.logo {
font-size: 100%;
position: fixed;
left: 45%;
top: -21px;
width: 10%;
z-index: 1000;
}
Important, you must use a png logo.
Try with
.logo {
left: 50%;
position: fixed;
top: -20px;
}
For the logo really to be centered, you need a 2nd div inside with margin-left: 50%
In your case you can just add the margin to the #site-header .logo h1 class in line 91 of your CSS:
#site-header .logo h1 {
margin-left: -50%;
font-size: 1.8em;
line-height: 1.2;
text-align: center;
}
Usually you'd go with
<div class="logo" style="left: 50%; position: fixed;">
<div style="margin-left: -50%;">
// Your logo goes here
</div>
</div>
Position fixed is the easiest solution here, I've made a jsFiddle for you to... well... fiddle :) and see how to achieve what you want: jsFiddle. Please note that you need a transparent png logo to make this look as it should (your current is a jpeg with white background).
.logo-placeholder {
height: 180px; /* height of your logo */
}
.logo {
position:fixed;
top:0;
right:0;
left:0;
height:180px;
text-align:center;
z-index: 100;
}
.logo-placeholder just keeps the space that would normally be taken by your logo that is now "floating" above the rest of the content of the page. So you need to add it to your HTML:
<div class="logo-placeholder"></div>
<div class="logo">
<!-- your not modified html -->
</div>
This should work for both variants: image (if you have it uploaded) or text (if you don't).
However, I can see your webpage is responsive and just changing your logo to position:fixed would probably ruin user xperience and the visuals on mobile. iOS devices (which are most important for now in terms of mobile browsing) doesn't like fixed positioning and have some weird behaviour in terms of scrolling: they only update the position of an element once you end scrolling, and not while you do it (like normal desktop browser). That would result in your logo jumping all over the place while scrolling.
Also, using such big logo on small mobile screen would occupy most of the viewport which is not good either (not to mention problems with navigation caused by your logo overlapping buttons etc.).
So, if I were you I would add this CSS to make your change not affect mobile at all:
#media only screen and (max-width: 600px) {
.logo {
position: static; /* that is just default positioning */
}
.logo-placeholder {
display:none; /* we don't need tht anymore since logo is back on its place :) */
}
}
And here's the fiddle for the version with media-query: jsFiddle - you can scale the viewport to see it working.
I want an out put similar to this Image..!
following is what i've tried to do.JSfiddle
P.S: I cannot edit the structure of the content.
Since you can't edit the HTML, you can't use floating properly, which would be the perfect solution.
But then you can use absolute positioning:
div {
width: 500px;
min-height: 100px; /* image height */
position: relative;
text-align: justify;
}
img {
width:100px;
position: absolute;
top: 0;
right: 0;
}
p:first-child {
max-width: 400px; /* wrapper width - image width */
}
Demo
I am stuck in making images inside background of a class responsive.The website url .
It would be very helpful if you could help me out i am using bootstrap and nivo slider.
The css and the html that i am using for the slider are given below.
The css:
.slider-wrapper {
width: 310px;
height: 650px;
background: url("images/iPhone.png") center center ;
background-size:cover;
}
.nivoSlider {
position:relative;
width:290px;
height:512px;
top:60px;
bottom:65px;
left:23px;
right:24px;
overflow: hidden;
}
.nivoSlider img {
position:absolute;
top:0px;
left:0px;
width:100%;
height: 100%
}
The html:
<div class="slider-wrapper ">
<div id="slider" class="nivoSlider">
<img src="" />
<img src="" />
</div>
</div>
And a screenshot of the above code (with additional html ) on a laptop:
Here is the website url. Try viewing it below 380px width as that's when the problem occurs.
I want the image to be visible properly at less than 380px.
I want the all the images to become smaller and be in the center and properly aligned below 380px but i get this:
.
I would be more than thankful if you could help me out
It's a little hard to debug without seeing the whole picture, but I think you need to be using max-widths like the code below. This will prevent your divs/images from becoming larger than you want, but will allow them to be smaller if necessary.
.slider-wrapper {
max-width: 310px;
max-height: 650px;
background: url("images/iPhone.png") center center ;
background-size:cover;
}
.nivoSlider {
position:relative;
max-width:290px;
max-height:512px;
top:60px;
bottom:65px;
left:23px;
right:24px;
overflow: hidden;
}
.nivoSlider img {
position:absolute;
top:0px;
left:0px;
max-width:100%;
height: auto;
}
Absolute positioned elements need to be put in a floated container to move responsively. The mobile content will move in sync with the screen shell if you put the absolute container into a floated one. I ran into this exact same problem on one of my projects - it's a surprisingly easy solution.
Pen:
http://codepen.io/staypuftman/pen/tFhkz
Note the pink absolute positioned element moves as you resize the screen while staying inline with the blue box. The whole blue box with the pink absolutely positioned element inside will float together as unit to any width.
HTML:
<div class="hero-background">
<div class="hero-text-area-container">
<h3 class="hero-text-effects">Eaters: Find Your Favorite Food Truck</h3>
</div>
<div class="iphone-backdrop">
<div class="hero-image-band-container"></div>
</div>
</div>
CSS (background colors are to show elements):
.hero-background {
background: #dedede;
height: 100%;
margin-top: 4em;
min-height: 20em;
min-width: 100%;
}
.hero-text-area-container {
background: #d6ffd1;
float: left;
margin: 0% 6%;
max-height: 25em;
padding-top: 11em;
position: relative;
vertical-align: middle;
width: 55%;
}
.hero-background .hero-text-area-container h3 {
background: #f7f7f2;
opacity: .8;
padding: 1em;
text-align: center;
}
.iphone-backdrop {
background: #d1e2ff;
float: left;
height: 120px;
max-width: 320px;
padding-top: 2em;
position: relative;
width: 100px;
}
.hero-image-band-container {
background: #ffd1d1;
height: 80px;
position: absolute;
width: 80px;
top: 13%;
left: 0;
bottom: 0;
right: 0;
}
Change the css in nivo-slider.css from:
.nivoSlider img {
position:absolute;
top:0px;
left:0px;
width:100%;
height:100%
}
To
.nivoSlider img {
position:absolute;
top:0px;
left:0px;
/* now this is the important things for your problem */
vertical-align: baseline !important;
max-width: none !important;
}
i found the answer.It was posted to me by a user.So I'm sharing it if anyone else gets into any trouble:
"So to not have all the things in the comments I post an answer.
The "problem" on screen-/ viewport widths of 380px and below has several issues.
On your outer <div> with the class slider-wrapper3 (it's the one which holds the iPhone as background image) you should use the following in your CSS:
.slider-wrapper3 {
background-size: contain; /* you use cover */
background-repeat: no-repeat;
/* keep the rest of your actual code */
}
and remove the width setting (width: 310px;) at least for your small screen layout!
By doing so you have then fixed the position and size of the container (and also the background image).
So you still need to adjust the image sizes (probably in your slider script, or wherever the image's dimensions come from)."
Try this:
#media(max-width: 380px) {
.nivoSlider{
position:relative;
width:94%;
height:378px;
top:85px;
bottom:0px;
left:8px;
overflow: hidden;
}