I have a large banner on my site, and the banner has rotating images, all inside of a <div>. It stretches across the whole page, and the images are large, 2000px wide, so that almost no matter what the screen width, the image will just keep expanding to the left and right.
How do I keep the center of the <div> positioned so that everything inside of it lines up with the content of the page (about 1000px), and stays there even when the page width is stretched?
Right now, the left side of the image just sticks to the left side of the page no matter what the width, so the image moves relative to the page content depending on the window's width. Here's the code on the <div> now
position: relative;
display: block;
width: 2000px;
height: 648px;
margin: 58px auto 0 auto;
Thank you!
The only way that I can seem to do this when the width exceeds that of the page is by using the CSS3 calc function :
left: -webkit-calc((2000px - 100%) / -2)
This will essentially set the left value to minus half of what is remaining. The -webkit- prefix makes this compatible with Chrome. You will have to add the other browser prefixes as necessary if you choose to implement this solution.
Have you tried :
<img style="position:absolute;left:50%;margin-left:-1000px;"/>
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;
}
Positioning responsively is the most confusing thing to me. Ill give a simple example to help portray what i can't figure out. I have a div. I make the width and height a percentage and position it on the page absolute, top 25% and left 5%. All of this looks fine but when i resize the page it moves to 25% and 5% of that smeller screen resolution, and i can't get it to just stay there. I have a min-width and height so that the actual div won't resize, just where it is positioned on the page. How do i position something on a web page so that it is responsive, yet will no move all over the place when i resize the browser window. Sorry if I'm not really good at explaining this, i just never really understood how to position correctly.
Example :
#example_div {
width: 10%;
height: 10%;
min-width: 100px;
min-height: 100px;
position: absolute;
top: 25%;
left: 5%;
}
percentage values are always relative to the parent element (i.e. the on around the current element, which can also be the body or window).
pixel values are absolute. You can combine pixel and percentage values. If you want your DIV to shrink when you resize the window, but stay at the same position, use percentage values for width and height, and pixel values for top or bottom and left or right.
I have a webpage with a sidebar that has navigation options for the site. The sidebar is a width of 6em (right: 0px, height: 100%, position: fixed).
I want the rest of the content to utilize most of the remainder of the page (100% of total width, minus 7em).
Right now, I'm using percent on the main content - is there a smarter/better way?
Thanks
Sure, keep the 100% width on the remaining page and add
padding-left: 7em;
(your remaining page should be placed inside a containing div)
It's hard to say without seeing some HTML, but I'd simply set your content div to 100% width and add right padding of 7em to accommodate the sidebar. What you do inside the content div is at your discretion.
If the main content is display: block, it will use up the entire usable area by default. There is no need to specify it to 100% width. To make sure there is no overlap, give it a right margin of 6em (or whatever the width of the navigation bar is). Depending upon some of your inner element styles, there may be problems, but it's unlikely.
http://jsfiddle.net/XFaeZ/
Notice how "content" is visible even though it's floated to the right. If the #content div were set at width: 100%, its margin would extend past the width of the page and "content" would be obscured.
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.
i have a problem with the entire content of my page.
The problem being without a scrollbar present my content is about 20px to the right, but when a scrollbar is present it shifts to the left.
I have to compensate for this for an absolute postioned div by positioning it over the content by 20px until a scrollbar is present as it rests at the right hand side of the page.
This is a crappy fault on my behalf but i just want an easy way to fix this. Any quick and easy suggestions? Would i be better off making the main content div an absolute one?
One quick and dirty way is to always force the scrollbar to be visible with:
html { overflow-y: scroll; }
Not ideal, but it standardizes the appearance if the lack of scrollbar offset is breaking your design.
If I'm understanding your problem correctly, your absolute div is 20px off when a scrollbar is present? If that is the case what you can do is set a parent div that wraps around your content and absolute div.
Be sure to set this wrapper div to position: relative; so now your absolute div will be positioned inside the relative div instead of the document level. If there is a scrollbar, the wrapper div will be offset to the left by 20px (the width of the scrollbar) and the absolute div will also.
<div class="wrapper">
your content goes here
<div class="absoluteDiv"></div>
</div>
.wrapper { position: relative; }
.absoluteDiv { position: absolute; }
I don't think your content is actually shifting in any sort of buggy way; it's just that the presence of the scroll bar makes the viewport narrower. If you're using a layout that depends on viewport width (e.g. fluid layout, or fixed-width with centered content), this will cause everything to move by half the width of the scroll bar when it appears.
AFAIK, there's no sure-fire way to compensate for that, since the width of the scroll bar isn't known.