I have two images on the background of the website I am working on, now for me on a 15" screen the position of these look fine, just behind and right/left of the content container. But on a big widescreen (or just other much larger screen sizes than mine) they end up being further away from the content container and look like they are on their own.
They are percentage based but, 25% from the left/right on my screen is different to someone with a widescreen. I need them in the same position regardless. X% from the center is probably more like it. Anyone know a suitable option? I've attached some code of what the images are using right now.
http://bit.ly/1aNgkfa
CSS for the background image of the herbs on the homepage (top-left)
.herb-bg-img {
margin-left: -15%;
margin-top: 5%;
position: absolute;
float: left;
z-index: -2;
}
CSS for the background image of the peppers on the homepage (bottom-right)
.peppers-bg-img-index {
float: right;
position: absolute;
margin-top: -30%;
margin-left: 880px;
z-index: -2;
}
Use the left property along with a minus margin-left to align as needed:
.herb-bg-img {
position: absolute;
left: 50%;
margin-left: -600px; // Change as needed
margin-top: 5%;
z-index: -2;
}
Same with the right-hand image, only use a positive margin-left instead.
This should stay the same regardless of screen width.
You're positioning these two images absolutely. They should be absolutely positioned in relation to a parent element with position: relative, however. Right now they are in relation to the page, which will continue to cause you problems.
I'd recommend adding position: relative to your .container elements.
Related
So I have a little circle div that says "request invite" which is inside a larger container div.
I want the circle #request-invite div to be positioned in a very particular location (but still flexible and moving with the resizing of the browser window).
At the moment I have got it at the correct location I want, but the position is completely fixed is not flexible with the resizing of the browser window.
Here's what I have:
https://jsfiddle.net/t0j9hwos/
The css that I am struggling with is:
#request-invite {
position: absolute;
margin: 0 auto;
top: -10px;
left: 860px;
width: 100px;
height: 100px;
background-color: white;
border-radius: 50%;
line-height: 100px;
text-align: center;
color: #d31027;
vertical-align: middle;
font-size: 22px;
transform: rotate(10deg);
}
Any ideas how I can get the positioning of the #request-invite div circle how I want it?
Thanks,
Josh
Apparently your present solution fits to a particular window width. Let's say that the window is 1200px wide. So you can convert your left: 860px; to a relative measurement - relative to the window width. Percentage would be the first choice.
So you calculate, which percentage 860px is in relation to 1200px (your assumed window width - replace that with your actual width value). 860:1200 equals 0,716666... , so that's 71,66666 percent.
So instead of left: 860px; you now use left: 71,6666%;, or maybe even better left: 71,6666vw;. As I said, replace the 1200 with your actual window width (at which the positioning works as desired) when calculating that value.
I don't see the circle in your example code.
From what I understand, position:fixed or position:sticky could be what you are looking for.
See: https://developer.mozilla.org/en-US/docs/Web/CSS/position
You could use vw for viewport-width (in percent) and than adjust it using margins like that:
position: absolute;
top: 0;
margin-top: -10px;
left: 50vw;
margin-left: 20px;
jsfiddle Demo based on your code
just got a question regarding relative & absolute positioning and applying clearfix to the main container cos I've written the code and it's not behaving as I expected.
Structure-wise this is a simple page about product history. nav-bar with drop-down menu at the top across the screen, then a big hero image across the screen, followed by a few paragraphs and a simple footer, that's it.
here's my problem:
I need to put 3 components in the hero image area - the hero image itself, one title word on the top left corner and one logo on the top right corner. What I've done is: I created a div and used the hero image as background image. I set the position value of the div to relative. I created another div to hold the title word and set the position to absolute, using top and left to give it a location. Following the same logic, I created another div to hold the logo and set it to float right, with position set to absolute and top and right to give a location. I've applied clearfix to the main div and everything looks ok on my screen (resolution 1280 x 1024) until I saw it on the wide screen(1680 x 1050) --- the logo is not on the hero image! It's to the right side of the hero image.
What caused this? I thought by putting 2 divs inside the main div and applying clearfix, the three will "get together" and act as one and won't separate... Is it because I haven't written any code for responsive layout? Or was it because I shouldn't have used the hero image as the background? Would this problem be solved if I used z-index instead to specify the stack order of hero image, logo and title word?
Below is my code and any help would be much appreciated!
<div id="history-content" class="clearfix">
<div id="history-image-text">HISTORY</div>
<div id="stamp">
<img src="./images/logo.png">
</div>
</div>
#history-content {
background-image: url('./images/heroimage.jpg');
min-height: 307px;
background-repeat: no-repeat;
position: relative;
}
#history-image-text {
color: #fff;
position: absolute;
top: 20px;
left: 50px;
font-size: 20px;
font-weight: bold;
}
#stamp img {
width: 10%; /*not sure I'm doing the right thing here either*/
height: 40%; /*not sure I'm doing the right thing here either*/
float: right;
position: absolute;
right: 100px;
top: 20px;
}
.clearfix:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
height: 0;
line-height: 0;
}
Few things:
Absolutely positioned elements are taken out of normal flow, hence doesn't affect the size of their parent.
Since they're out of normal flow, float has no effect on them (as far as i know)
Absolutely positioned elements shrink wraps to fit it's contents unless width and height is set explicitly or stretched using the top, right, bottom & left properties.
Now your parent div #history-content doesn't have any height set, and all of it's content of are absolutely positioned, So it's not visible (height 0)
applying a proper height for the parent seems to fix the issues for me.
Side note: unlike what you think, you don't have two absolutely positioned<div>'s, #stamp img absolutely positions the <img> inside div#stamp, for the same reason mentioned above, div#stamp is also invisible (height 0) you'll get the same result with and without it. And without floats
As others have said, float doesn't have an effect on absolute positioned elements, and so technically you don't need clearfix in this case.
I'm not exactly sure why your logo is positioned outside the outermost container #history-content, but you could try to put a border around the #history-content to further troubleshoot.
EDIT: Maybe check your hero image dimension, is it smaller than 1608px in width?
<div id="history-content">
<div id="history-image-text">HISTORY</div>
<div id="stamp">
<img src="./images/logo.png">
</div>
</div>
I've changed your CSS below
#history-content {
background-image: url('./images/heroimage.jpg');
min-height: 307px; /*set whatever minimum height you wish*/
background-repeat: no-repeat;
position: relative;
}
#history-image-text {
color: #fff;
position: absolute;
top: 20px;
left: 50px;
font-size: 20px;
font-weight: bold;
}
#stamp {
display: block;
position: absolute;
right: 100px;
top: 20px;
width: 10%; /*set width of image in containter instead*/
height: auto;
}
#stamp img {
max-width: 100%; /*image width will not stretch beyond 100% of container*/
height: auto;
}
JSFiddle: http://jsfiddle.net/5L9WL/3/
I'm looking to center text both vertically and horizontally over an image that grows when the page gets wider.
I originally had the image set as the background for a div of fixed height, in which case it was relatively easy to center it, but because background images aren't structural, I couldn't set the height to be an automatic function of the width, and I had to toss this option out when I went for a more responsive design.
So I've currently got a div with two elements in it, img and overlay text. The image width is set to 100% of the width of its container, and the height varies accordingly. As a consequence, though, I can't set the overlay text to be postion:absolute and top:80px or something, because the distance from the top will have to vary. And even doing top:25% or whatever doesn't work, because a) if that page width shrinks to squeeze the text, or if there's just more text, the vertical centering is thrown off when there are more/less lines, and b) the percentage is arbitrary -- it's not 50 or something, because that would put the top of the text overlay 50% down the image, when I want the center of the overlay to be there.
I've looked, among other things, at this post, which is definitely close -- but in both solutions, the image height is incapable of resizing, and in the former, the JS loads at page load, but then freezes, so that if I change page width/height, things get out of whack. Ideally, this solution wouldn't involve JS for just that reason (even if it reloaded on every resize, that feels non-ideal), but if that's the only solution, I'll take it.
Also, just for added details/fun, I've set a max-height on the image, because I don't want it to exceed roughly 300px height, even on a cinema display.
Basic fiddle of current attempt here, and identical code below. Any ideas? Thanks!
html
<div class='quotation_div'>
<img src='http://www.mountainprofessor.com/images/mount-ranier-mount-features-2.jpg'>
<div class='overlay'>
<p>Any reasonable amount of text should be able to go here. I want it to be able to center vertically even if it takes up 2 or 3 lines.</p>
</div>
</div>
css
.quotation_div {
position: relative;
display: table;
}
img {
width: 100%;
max-height: 300px;
}
.overlay {
z-index: 99;
width: 70%;
margin-left: 15%;
vertical-align: middle;
position: absolute;
top: 25%; /* Obvious problem, cause it's arbitrary */
}
p {
text-align: center;
color: red;
font-size: 165%;
font-weight: lighter;
line-height: 2;
}
You can use CSS background-size to set the width to 100% and the height will be calculated to maintain aspect ratio.
Here's a fiddle using that technique.
If you want the image as an HTML element then I suggest you set it's position to absolute and use the same method of disply:table-cell to center the overlay:
Here's a fiddle using that method, this one stretches the image because of the max-height.
Please Try the below css for .overlay as in your fiddle
.overlay {
z-index: 99;
width: 70%;
/* height: 100%; */
/* margin-left: 15%; */
/* vertical-align: middle; */
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
or this is the updated fiddle link http://jsfiddle.net/hLdbZ/284/
I use this combination:
.CONTAINER {
position: relative;
text-align: center;
}
.TEXT {
text-align: center;
position: absolute;
top: 50%;
left: 0;
right: 0;
}
.IMG {
//for responsive image
width: 100%;
height: auto;
}
I just added to the html
<div align="center"></div>
to surround your existing code to get the image to center
hope that helps
I have a simple question, and want to know if you can solve it for me..
Anyway, the question is, how do i place a box in the right side of the page, that wont affect any of the appearence of the css that is currently on the page :)
Use position: absolute;. To define the position, you can use the top, left, right, bottom properties to specify the respective offsets. In your case, you probably want right:
.rightbar {
position: absolute;
top: 0px; /*how many pixels from top*/
right: 25px; /*how many pixels from right*/
width: 50px;
height: 150px;
}
If you want your div to stay visible even after you scroll, use position: fixed;.
Little demo: little link.
Okay i'm trying to center some content, but, I want to keep the absolute attribute to keep the content within a certain height on the page, but at the same time, i want the content perfectly centered. How do I center it if absolute takes specific coordinates? Everyone has different sized monitors so giving the coordinates to center it will fail.
#logo {
position: absolute;
top: 25px;
left: 0px;
}
#logo {
position: absolute;
top: 25px;
width: 100px;
left: 50%;
margin-left:-50px;
}
Make the left position 50% and then give it a negative margin to pull it back by half the width.
Demo