I've been working on this for hours, and reading over 20 articles and I still have no idea how to do this. I have a background, in which I want text to be positioned in a certain place. Everything is fine until I view it on a monitor with a larger resolution. The background re-sizes fine, but the text is no longer in the place I want it to be.
These images hopefully will clearly describe my situation.
How I want the text to look at any resolution (this is on a 1440 x 900 monitor) http://dl.dropbox.com/u/9134840/demo/1.PNG
This is how it looks on a 1080p Monitor:
http://dl.dropbox.com/u/9134840/demo/2.PNG
<body>
<div id="blah">
<p id="pr">This is a paragraph!</p>
</div>
</body>
</html>
body {background-image:url(back.jpg); background-size:cover;}
#blah{font-size:large; left:300px; top:200px; position:absolute;}
edit: I tried both suggestions, using divs and positioning the text absolutely and relatively and still a no go, the text still moves.
#contain{
position:relative;
width:7000px;
margin:0 auto;}
#blah{font-size:large; left:100px; top:200px; position:absolute;}
I'm not looking for a fixed positioning, because I'm going to be adding content so I need to scroll vertically through the page without the text moving.
Your #blah div needs to be positioned inside a relative div. You might have problems with that if you absolutely positioning something in relation to the body. Place it inside another div or use fixed positioning.
#containerDiv {position:relative;}
#blah {position: absolute; top:200px; left:300px;}
<div id="containerDiv "><div id="blah"></div></div>
Or
#blah {position: fixed; top:200px; left:300px;}
In this case your div will always remain the same place if you resize the window. If you want it to be centered, use something like:
#containerDiv {position:relative; width:700px; margin:0 auto;}
#blah {position: absolute; top:200px; left:300px;}
Also bare in mind that background-size:cover; will not work in versions of IE.
Examples:
http://jsfiddle.net/mYcXX/1/ (absolute) vs http://jsfiddle.net/mYcXX/2/ (fixed)
This looks like fixed layout.
If so why just not cut the central part of the background and put it in a div with style:
{
width:960px; // maybe more or less - the width of the central image
margin-left:auto;
margin-right:auto
}
And position the paragraph relating to that container (the div)
I believe you can solve this problem by separating the background image style from your container. I could be wrong, but try something like this...
body{
background: url(black.png) top center no-repeat;
}
#container{
width: 960px;
margin: 0 auto;
}
I would recommend relying on the natural flow of the dom as much as possible. Basically, don't ever rely on position: absolute unless ABSOLUTELY necessary. And even then its probably a hack.
Okay, I figured it out myself, big thanks to yisela for the guidance. Ultimately though, here's what I did. I looked at a site, like yahoo.com and saw that they had everything centered and had a white background. So no matter what resolution you had, it will still look neat. With that in mind, I made sure my image was gray, and change the background to gray so it all blended in.
Now, as for the container stuff. I placed the image in a container by itself, and centered it. Then I just set the paragraph relative to the container. That way the text will stay in the same position.
html{ background-color:gray }
body{ }
#contain{
width:1280px;
height:2000px;
margin-left:auto;
margin-right:auto;
background-size:cover;
background: url(back6.png);
}
#blah{font-size:large; left:120px; top:230px; position:relative;}
<div id="blah">
<p id="pr">This is a paragraph!</p>
</div>
</div>
</body>
</html>
And now..I think I'll happily go back to c#, after this wonderful experience with CSS.
Related
I'm working on a mobile version of my website, and I'm having trouble vertically-centering two divs. Since it is a mobile site, my css needs to work on any type of screen resolution, so this is where I'm having the problem. Also, different images will be used depending on what page you are on, so the resolution of the image is not static either. I need a way to center both my image div and text div no matter their height or width.
I've made a fiddle here to start out with. As you can see, I chose the green area to be the "screen" for the phone, and I want both the picture to center vertically, and the text to be on top of the picture and center vertically as well. Any help?
What I have so far... (in my jsfiddle)
HTML:
<div id = "screen">
<div class = "overlay" id = "picture"><img src = "http://www.startingtofeelit.com/wp-content/uploads/2013/10/Tennis-Mean-Streets.jpg" /></div>
<div class = "overlay" id = "text">This is where the text would appear</div>
CSS:
#screen {
width:360px;
height:640px;
background-color:#0f0;
position:relative;
overflow:hidden;
display:table-cell;
vertical-align:middle;
}
.overlay {
position:absolute;
top:0;
left:0;
}
#picture {
}
#picture img{
width:100%;
}
#text {
background-color:#000;
width:100%;
opacity:0.5;
color:#fff;
}
For vertically centering you can set margin top/bottom to auto.
If I understand where you want the text, this should work.
Html
<div id = "screen">
<div class = "overlay" id = "text">This is where the text would appear</div>
<div class = "overlay" id = "picture"><img src = "http://www.startingtofeelit.com/wp-content/uploads/2013/10/Tennis-Mean-Streets.jpg" /></div>
</div>
and css
#screen {
width:360px;
height:640px;
background-color:#0f0;
position:relative;
overflow:hidden;
display:table-cell;
vertical-align:middle;
}
#picture {
margin: 0 auto;
}
#picture img{
width:100%;
}
#text {
position: absolute;
top:50%;
background-color:#000;
width:100%;
opacity:0.5;
color:#fff;
}
So it doesn't seem like there is a pure css way to do it, so I ended up using jQuery instead. I made a fiddle in case you want to see how I did it, but the jist of it was this.
On document load, find any item with class "overlay" and apply a negative margin-top of half it's height to center it. Because it already has a position of absolute and top:50%, this will vertically center the item.
$(document).ready(function(){
$(".overlay").each(function(){
$(this).css("margin-top", $(this)[0].scrollHeight/2*-1);
});
});
It's pretty simple, and I wish there was a way to do it in pure css, but this way works as well. Thanks for all the help.
After the discussion in the comments I've determined this question is not nearly thought out well enough to attempt to answer and so this will stay simply in hopes that someone else that finds this page is helped by the answer
:::Initial answer:::
This question is easily much more difficult than you've made it seem. If it's a matter of fitting the image to the viewport of the device there is no single css solution and a javascript solution will be needed.
Let me explain, if the image is much taller than it is wide then to fit the image to the screen you'd want to set the height to something like 90% of the height (give some padding for the text etc). however since the image is variable size if the width is the greater value you'll want the width to something like 90%. Herein lay the problem, you wont want both the height and the width of the image to be 90% as that would distort the image. So there will need to be some javascript to flop around some classes here.
After that the css gets a bit hairy also, if you're looking for an overlay to display the same based on any position the user clicks on an image (assuming this is a sort of gallery) rather than an absolute positioned item at the top and left of the document you'll want a position: fixed; element which is positioned on the viewport.
All described before would need a bit of javascript again because there is no easy way to center something that is fixed without using negative margins of half its width/height.
An example of such a thing is here:
http://jsfiddle.net/5hHMa/2/
Here we have the css for the very fixed case which you have presented.
.overlay {
position:fixed;
top:50%;
left:50%;
margin-top: -150px;
margin-left: -150px;
}
#picture img{
width: 300px;
}
#text {
background-color:#000;
opacity:0.5;
color:#fff;
}
Ideally what you would do is instead of using a fixed value for the margins and width as I have you would determine these values and set them using javascript.
It is hard to form a complete solution for your problem with the limited information given, however hopefully this gives you a push in the correct direction.
So I know this is another centering question but I've been roaming around Google and SO for a couple days now without a solution so I'll ask now.
What I'm trying to do is horizontally center a fluid section element with a max width that has absolutely positioned elements inside it. The problem is, as you can see in my jsFiddle, the margins take up 50% of the available space with the other 50% used by the section. What I would like to do is keep the section perfectly centered but make the margins get smaller as the browser window closes in while keeping the section from re-sizing until the edges of the window gets to it.
I'd like to keep from using any table, table-cell solution because I read on CSS-Tricks that absolutely positioning elements inside table cells can be a real pain.
Edit Basically, the goal is to have the content take up as much space as possible without resizing until the view port width forces the content to be responsive.
Thank you for any bump in the right direction.
HTML:
<section id="wrapper">
<section id="content">
<p>Absolutely positioned imgs, btns, etc. go in here</p>
</section>
</section>
CSS:
#wrapper {
position:absolute;
width:50%;
height:300px;
margin-left:25%;
margin-right:25%;
outline:1px solid red;
}
#content {
position:absolute;
width:100%;
height:100%;
max-width:500px;
background:rgb(225, 112, 75);
}
You can use
#content {
display:inline-block;
text-align:center;
}
to center your elements that will have a display:inline-block; property too.
EDIT: Now that I've better read your question, you can also use
#content {
margin:0 25%;
}
to center your second section.
here's your fiddle updated. As you can see by this fiddle everything is centered AND responsive now.
EDIT-2: Maybe you want to add some media query to reach your goal. Just add something like this at the end of your CSS file:
#media screen and (max-width:720px){
#content{width:100%; margin:0px;}
}
this says that when screen reaches the width of 720 and under, #content (and every ID/CLASS you put in there) will behave as declared.
NOTE that #media queries are not crossbrowser, you may want to add a script to make them work on every browser, I find respond.js a nice tool to do this job.
Also note that the #media queries must be placed at least under the default properties that you are about to change on screen resizing, that is why is suggested to add them at the bottom of your css file.
HERE is another fiddle with media applied (just try to resize the box to see the effect)
I wonder if this is what you were looking for: jsfiddle
I changed your wrapper to this:
#wrapper {
position: fixed;
top: 50%;
left: 50%;
margin-top: -150px;
margin-left: -200px;
width:400px;
height:300px;
outline:1px solid red;
}
So that your div now sits in the middle of the screen
I want to create a layout where I want to display an image to the left and content on the right. The image should stay constant when the content scrolls.
The css I'm using:
<style type="text/css">
#page-container
{
margin:auto;
width:900px;
background-color:Black;
}
#header
{
height:150px;
width:650px;
}
#main-image
{
float:left;
width:250px;
height:500px;
background-image:url('../images/main-image.png');
position:fixed;
}
#content
{
margin-left:250px;
padding:10px;
height:250px;
width:630px;
background-color:Teal;
}
</style>
The HTML:
<div id="page-container">
<div id="header"><img src="someimagelink" alt="" /></div>
<div id="main-image"></div>
<div id="content"></div>
</div>
Alot of time on this site and I have understood that background-attachment:fixed positions the image in the entire viewport and not the element it is applied to.
My question is how do I go about creating that kind of layout?
I do not want to give that image as a background image, as if the window is resized, it might get hidden. I want scrollbars to appear if the window size is less than 900px( my page width) so that the image can be viewed at all times.
That happens with this code, however I would like the image to start at my element instead.
How do I go about doing this??
Thanks in Advance :)
Edited:
I took the advice and added a position:fixed property to #main-image. Using the HTML and CSS as shown above.
Now, I also want to fix the header so that it does not move. Basically, only my content section should scroll.
However, if I add a position:fixed to the header, my #main-image and #content now sit on top of my header.
If I add a margin-top:150px (since my header height is 150px) to the #main-image, it works fine and moves down appropriately.
However if I add a margin-top:150px to the #content, my header moves down by 150px and still sits on top of my #content.
Can someone please explain why this is happening?
Thanks in Advance :)
Take a look at this link:
http://www.barelyfitz.com/screencast/html-training/css/positioning/
You can learn how to position Div's with it.
This will solve your problem:
#main-image {position:fixed;}
EDIT:
I'm not sure of what caused your problem but here is the solution:
#content{
position:relative;
top:150px;
}
My Guess:
I think that happened because when using position:fixed those 2 div's were positioned relative to the the browser window, while the other one was relative to the document itself.
In this link you will see more about positioning and you can test some of these features related to the position property:
http://www.w3schools.com/cssref/pr_class_position.asp
About the fact that one div was positioned over another, you should search for the 'z-index' property. Firefox has a 3D mode so you can see this more clearly:
http://www.addictivetips.com/internet-tips/browse-internet-in-3d-using-mozilla-firefox-11-tip/
Set a min-width on html and body.
Have you tried setting your #page-container to relative and your #main-image container to absolute and setting the position using top, bottom, etc. Then you should also be able to float your #content container to the right.
i need to create a div in position fixed where i will put the image under a div with the rest of the content
i have put in my CSS header {
margin-bottom: 310px;
} to create a blank below space where there is gonna be my img in the div id="background" in position fixed below.
So then i have created the following id:
#background {
position:fixed;
width:100%;
height:100%;
top:130px;
left:0;
z-index: 1;
overflow:scroll;
}
and
#content {
width:100%;
height:100%;
top:60px;
left:0;
z-index:2;
overflow:scroll;
}
The id background is supposed to be the div where my image is gonna be placed right in the blank space l after the header, the id content is the div where i am gonna have my page content and it start from the top.
Here the page : http://fiddle.jshell.net/CGJmE/4/
The effect i want to achieve is exactly this : http://tommywebdesigner.com/Home%20Page.html
but using the div to gain more flexibility. My problem is that i cannot insert properly my div id background in the position fixed with the image.
I think it s something very simple at this stage, How would you do that?
Hope the explanation is clear
You need to do that with background-position: fixed
I've shown you in this jsfiddle: http://fiddle.jshell.net/CGJmE/7/
Good luck!
I do not understand why you put overflow: scroll on #background, it does nothing, really.
Same with the overflow:scroll on the #content. It is redundant.
In general I do not quite understand what your problem is: http://fiddle.jshell.net/CGJmE/6/
I added <div id="background"><img/></div> where you indicated.
This of course still lacks styling for the header and content. (I added background-color to .container so it doesn't look too ugly).
I assume you have that somewhere else?
If you need more help, please elaborate in more detail what your problem is.
So, I have this wonderful image here:
And what it is is a header for a website - click it to view it full size..
I need to re-create this using HTML/CSS/images and I can't figure out how. It has to be 100% width yet, the point where the gradient turns from one type to the other, has to remain in the same place on resize. To illustrate:
The area that is not blacked out must stay in the center of the page at all times and not move. The areas in black must extend to 100% of the screen width and have a tiled background gradient.
How can this be done?
I have tried something like this:
Where green is a div with a fixed width and centered yellow is the 'twirl' gradient bit and then red/blue are the tiling gradients. But this does not work because the tiling gradients to not match the position of the 'twirl' when the browser is resized.
Note: This must support IE7+ and must be cross-browser compatible and preferably uses no javascript.
I’m not sure why do you actually want to make this so hard by cutting the image up into pieces?
Take the image, extend the canvas to let’s say 5000px and just repeat the gradients to both sides. You’ll maybe add about 200 bytes (yes, bytes, not kilobytes) to the image size, but you’ll make it all up without adding 2 more requests for the separate backgrounds to the page.
And then just set the image to background-position: center top;
And as the center DIV is fixed width, you can either add a container to have the background or add the background to BODY for example.
Well, I think I've managed to do it..
<header>
<div id="bg-left"></div>
<div id="bg-right"></div>
<div id="header-content">
My header contents
</div>
</header>
And
header {
height:88px;
}
header #header-content {
width:1004px;
height:88px;
position:absolute;
left:50%;
margin-left:-502px;
background-image:url("/img/header-bg-middle.png");
}
header #bg-left, header #bg-right {
position:absolute;
height:88px;
}
header #bg-left {
background-image:url("/img/header-bg-left.png");
width:50%;
}
header #bg-right {
width:50%;
background-image:url("/img/header-bg-right.png");
right:0px;
}
So basically, I am creating a fixed width div in the center of the page, and then behind that I create two 50% width divs that have the appropriate gradient background.
Id do the same thing as you started doing with the one 'twirl' being centered, with two divs on the outside... the way I would do this is like this:
this is what i have:
<div style="width:100%">
<div style="background:#333; position:absolute; left:50%; top:0; width:50px; margin:auto; height:50px; z-index:10;">
</div>
<div style="width:50%; position:absolute; left:0; top:0; background-color:#060; height:50px; margin:0; z-index:1">
</div>
<div style="width:50%; position:absolute; right:0; top:0; background-color:#060; height:50px; margin:0; z-index:2">
</div>
</div>
</div>
which can be viewed here: http://sunnahspace.com/TEST.php
basically you have a container div, which if you decide to move this around at all id make relative positioned. then youd take the piece where the gradients change and make that your 1st inner div, with the different gradients your 2nd and 3rd div. Basically, the 1st div (the "twist") is positioned to stay in the same place of the browser (the middle, see the 50%, but this can be set to say 200px from the right, etc.) with the other two divs expanding when browser window sizes change. The z-index layers the css, so the 1st one having a z-index of 10 is on top (the number hardly matters so long as it is the highest number, but leaving it like this allows you to add more layers underneath without having to change the z-index, with the other two having z-indexes of 1 and 2, doesnt matter which order so long as they are less than the top div, this lets the first div sit on top of these two divs, hiding where they meet. Should work, let me know how it goes, and if need be ill fix a few things.
Is this what you want to do? http://jsfiddle.net/nnZRQ/1/