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.
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;
}
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%;}
A bit of a newbie question, but I've had this problem for a while now and i need it fixed. Hopefully one of you guys can help.
I have a textbox near the bottom of my page. It's position is fixed, however, whenever I resize the browser window, it moves with the bottom of the page. I've tried it with absolute and rlative positioning too, but still, same problem. Ive been reading up on CSS positioning, and assumed I understood it, until this little problem.
I have a header bar at the top of my page which is position: fixed, and that doesn't move, so I'm wondering what the difference is?
Illustrations of the problem are here:
The bottom image is the normal view, and the top is the textbox moving ahen the window is shrunk.
http://imgur.com/a/cdZsV
My textbox is named "typetextbox" and the header banner is "cfbanner"
The CSS is:
#cfbanner{
position: fixed;
top: 0px;
left: -130px;
z-index:-20
}
#typetextbox{
left: 130px;
bottom: 50px;
position: fixed;
width: 850px;
Im sure this is easily fixable. A little help would be very appreciated!
The behavior of your typetextbox seems right, since you specify the box to be fixed and the distance to the bottom to be 50px.
W3Schools.com writes:
An element with fixed position is positioned relative to the browser window.
See here.
So if you shrink your browser window, the text box will stick to the bottom of your window, hence, as you wrote:
it moves with the bottom of the page
If you want the box to stick at the given position, remove the "bottom" attribute and specify the "top" attribute, just as you did it with "#cfbanner".
I have been working at this for the past day and a half. So any help will be greatly appreciated.
The general layout has a top bar and a side bar which are position fixed. I want the content container to fill the rest of the page without a scroll bar unless it is necessary due to content. I am not sure if it is possible to do purely in CSS or if I will need to modify my html structure as well. I have posted a fiddle below to show the most simple example possible.
http://jsfiddle.net/wU2Hd/
Again, any help or pushes in the right direction will be greatly appreciated, this has been throwing me for a loop.
It's not impossible. Check out this JSFiddle I forked from yours.
I did not need to change the HTML structure, but there were some important changes made to the CSS.
First I removed the height: 100%; from html, body. This was forcing the scroll bar to appear.
Then I removed the height and width declarations from .content, and gave #shell-content absolute positioning:
#shell-content {
background: #FFFFFF;
position:absolute;
left: 100px;
top: 86px;
bottom: 0px;
right: 0px;
overflow-y: auto;
}
The left and top are values based on the explicit height you gave to your header and the explicit width you gave to your menu. The overflow-y: auto tells it to only show the scroll bar if the content out-grows its available space, but not otherwise.
The JSFiddle has some crazy-long lorem ipsum text to show the effect. If you change it to less text, the scrollbar will disappear entirely.
The problem is that you are setting
#shell-content{
height:100%
}
body{
height:100%
}
Which means the body fills to fit the window, and then the shell-content expands to fill that space (the EXACT size of its direct parent), but is displaced by shell-top-wrapper, so it overflows. You should either decide on a relative height for the shell top wrapper, or change the height of the shell-content dynamically (using javascript).
Here is a take off of your fiddle: http://jsfiddle.net/eeMz4/. You'll see that with the large image in the content area, it scrolls. If you take the image OUT and replace it with text or something smaller than the available space, the scrollbar goes away.
The trick was adding overflow:auto to #shell-content.
Cheers!
Cynthia
I made a few small changes: http://jsfiddle.net/wU2Hd/5/
- remove the height from content
- remove the height from content-shell
- set the body background to white
- set the sidebar background to grey
This will not actually stretch up the content, but it will appear like it does. Scrollbar will appear automaticly when the content becomes bigger then the viewport.
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.