I have more than 2 image items placed in various positions against a full screen background image (container). I only need the two image items in the center to align horizontally down the middle of the page/screen. This also needs to be responsive ie. when the browser window is contracted horizontally I want the two items to move towards the middle in tandem with each other. With the code I am trying, one of the two items is not lining up with the other, and is in fact moving a little left of center when the browser screen is contracted to mimic portrait mode. What is the issue? I am positioning absolutely and using margin: auto on both. Here is the code. Would appreciate any light.
PS, for some reason the arrow is moving up and down in the jfiddle, while retaining its horizontal alignment; this is not happening in my case; in my case the arrow is only retaining its vertical position (as i want it), but moving off centre when i contract the browser width (which is not what i want; i need it to keep it horizontal position at the center as well).
If you want the two divs horizontally and vertically (i.e. the dead center of the screen!) you can use the following CSS...
#div1,
#div2 {
position: absolute;
top: 0;
right: 0;
left: 0;
bottom: 0;
margin: auto;
}
If you want the images to respond to the screens width then adding a maximum width on the images would fix that.
img {max-width: 100%;}
Related
I'm pretty new to coding and need to pick some of your brains in order to fix this issue which is occurring on a holding page that I'm currently coding.
The company logo is positioned in the bottom corner and at certain screen size overlaps and interferes with the text (when you manually resize the browser window). I've used media queries so this doesn't happen on devises.
I'm not sure whats possible, but I always need the logo to be in the bottom right hand corner. But I'd like the logo to disappear from the screen when the logo starts interfere with the text , ideally I'd like the user to have to scroll down to see the logo at this point.
This the site in question http://embalmer-tiger-47168.bitballoon.com/
Heres My HTML
<img class="logo--master" src="assets/images/logomark.png" alt="Proud Robinson Logo">
</div>
Heres my CSS
.logos {
position: absolute;
bottom: 55px;
right: 55px;
}
.logo--master {
width: 7em;
}
Many thanks in advance :)
You would need your logo to have a relative position to your text. You can use position:relative. After that if it still doesn't respond like you would like it to, you can position it in a div that as the same width as the page (width:100%) and you can use de margin of your logo to center it (usually margin-left:auto; margin-right:auto; will work, but you might have to use %). Hope this will help you.
Absolutely positioning an element takes it out of the normal flow of the page, so that other elements don't know it's there and will overlap. If you apply a right and bottom margin to .container that matches the size of the logo, the content in .container won't overlap. The logo is about 7em tall/wide (per the width you gave it in css) and is 55px from the right/bottom, so a right/bottom margin of calc(7em + 55px) on .container should leave room for the logo.
div.container {
margin: 0 calc(7em + 55px) calc(7em + 55px) 0;
}
Hi could someone help with a problem I have.
Basically it's just a landing page with a photo that covers the whole background.
Next I have a graphic that depicts some text which I want centered vertically and horizontally using absolute positioning.
I've managed to do that and get it okay in terms of it's position when the viewport is 1200px wide however if you resize your browser the background and then the text graphic resizes accordingly but the text graphic shifts too much to the left. I would like it to still shrink when resizing the browser but to retain it's horizontally centered position as much as possible.
You can see it here
www.juanchandler.com/test/
the css is all the head of the document so you can view source.
Could someone please advise me on how I can correct this.
Not the best job with the centering... Try this for the small image:
.the-text {
margin: auto;
left: 0;
right: 0;
top: 0;
bottom: 0;
}
Of course, remove the previous margins.
What is the best way to reproduce this effect
in any resolution? Is there any way to force this elements (header, content area, menu items and footer) to always have the same relative position to each other, so that they stay always perfectly aligned without ever breaking the curved effect, or should I go for a CSS mask?
So far all the elements are images, except the text.
It's quite simple. To have an element always appear in the centre, add to its css
margin: 0 auto;
As to the footer, first make a background div (with your image set as background) with
width: 100%;
And inside of it put a div with again:
margin: 0 auto;
And then put all these divs and images in the main container with
position: absolute;
bottom: 0px;
From my experience, it is always better to use margins, paddings and fixed widths than relative or fixed positioning when working on a layout.
I am assuming I will need Javascript for this, but perhaps there is a CSS trick I'm not aware of.
I have a web page based on a square background image. Ideally, the user would always set the browser as a square, but I know that won't happen.
Because the image is square, if the image is set to fill the browser at 100%, the width is always the same as where the "bottom" of the page should be.
Thus, to position an element dynamically horizontally (so the page can be resized but still hold it's structure), the top position of said element is a percentage of the width.
In other words, if I have a horizontal bar that should ALWAYS be positioned 85% from the top of the image, the top position can be defined as 85% of width (top:85% [of browser width]). If you simply define the top of the horizontal bar as 85% (top:85%;), the horizontal bar's position will vary with the height of the browser window (whereas if you set it as 85% of the width it would be exactly where I want it).
As mentioned before, this is likely an easy thing to do with Javascript, but I don't know Javascript. I assume there isn't a function in CSS that will allow positioning by calculating a percentage of width, but that would be ideal.
Any help is greatly appreciated! Thanks in advance.
======================================
(source: renboy.com)
Unfortunately I'm a new user and the interface won't allow me to post a photo.
The page is square (a large, square image). There is a horizontal navbar who's top should be positioned 85% from the top of the image (it would be defined as (top:85%;) if the browser were opened to the exact same size and dimension (square) of the image).
However, if someone drags the bottom of their browser down (to make a tall rectangle), 85% will not be where I want it over the image. HOWEVER, 85% of the width will ALWAYS be in the exact right spot (because the image always fills 100% of the width). So, if I could define the horizontal position as 85% of the browser width (instead of height), the navbar would be exactly where I want it, no matter what dimensions the browser is open to. Thanks in advance for any possible solutions.
==================
Doing more research, it would seem that the answer might lie in Jquery (using position or maybe outerWidth or possibly something like var winWidth = $(window).width();), but I have no experience with Java/Javascript. Any help out there? Again, I want to set the position of the div holding the horizontal navigation bar to 85% of the width of the browser window. Thanks!
http://jsfiddle.net/f7RMA/
<div class="box">
<img src="http://renboy.com/images/squareWeb.jpg">
<div class="bar"></div>
</div>
CSS:
.box {
position: absolute;
z-index: -1;
top: 0;
left: 0;
width: 100%;
}
.box img {
display: block;
width: 100%;
}
.box .bar {
position: absolute;
width: 100%;
height: 10%;
top: 85%;
}
WTF happens: .box is set to 100% width. The image inside is also set to 100%. Images in non-crappy browsers keep their aspect ratio when they are resized by only one side. .box wants contain the image entirely, so its height will be set to image's height. Because .box is positioned absolute, you can put the .bar inside the .box and position it vertically as you wish, because .box now has a well-defined height.
Check out this picture to see what I am trying to accomplish. Basically I want to use a full screen background image and then overlay a div (in the linked picture, this is the gray area in the middle with the red lines around it) after the logo and nav on the left that will always have a 100% height regardless of scrolling.
The only way I think I can pull this off is to use a background image for the gray area that is repeated vertically, and then make a div for the full screen background image and change the z-indexes around to get the desired layering.
The css I was using for the overlay div was:
#overlay
{
position: absolute;
left: 360px;
top: 0;
bottom: 0;
width: 600px;
height: 100%;
}
But when you have to scroll for larger content, the div always ends at the "fold" and then the background image takes over for the rest of the content.
Are there any tricks I can take advantage of to do this in purely CSS? Also, I don't want to use CSS3 multiple backgrounds because of cross-browser concerns.
Try deleting the height: 100% and changing the position to relative.
You may need to add some padding and margins to get it exactly how you want but this should just about fix it.