I'm looking for a solution how to position a div to exact position on background. I have a background image ( http://www.jewelryplatform.com/coming-soon.jpg ) and I need to position whole div with form, etc. on the center of the image where you can see the box for that. Second problem that the image will be resizing with windows size. Is there any easy way how to do that?
do you have much experience with css and media queries?
You can add breakpoints in your css and then assign specific style to an element at that breakpoint.
#formDiv{ position: absolute; left 50%; top:50%}
#media only screen and (max-width: 995px) {
#formDiv{ position: absolute; left 25%; top:25%}
}
I've created a fiddle that will keep a form over the center of a div.
The key is to do left: 50% for the form that will center it, and then negatively margin-left half its width to keep it center. The same applies for the top: 50%. Because everything is positioned using percentages it will move when you resize the box.
As mentioned in the previous response, you can also use media queries to resize the size of the form at different resolutions as well.
UPDATE
Also you can consider resizing the background image when the screen size changes. This can be achieved by setting the background-size property with again 100%. Here is a great resource for how to use it
Related
I need to list the thumbnail images on a page, all of which have fixed height and width. Once I hover any of them, I want the larger image display at a fixed position, i.e. top:50px and left:50px within its wrapper. The size of the larger image is also fixed, i.e. width:100px, and height: 100px.
I followed the instruction on
http://cssdemos.tupence.co.uk/image-popup.htm
but I could not figure out to put the larger image at a fixed position.
I would appreciate if you could help me in this
Thanks,
Position fixed, places the image(element) an amount of pixels based on the whole window. Not to the wrapper.
Position absolute places the image an amount of pixels based on its wrapper.
So try adding this.
.larger-image {
position: absolute;
top: 50px;
left: 50px;
}
If for some reason it doesn't work, please post your relevant code.
Looking at this site I've noticed that the background image that displays the page bleeds out of the sides of the monitor. Is there a way to fix this?
img src="img/laptop.png" id="laptop" class="tour" alt="laptop" />
The laptop is a png with a transparent center. I was then apply a class to the laptop which would apply a background image behind the laptop. ie
.tour { background: url("../img/tour.jpg") center top no-repeat; }
The problem occurs when some of the images are larger than the width of the laptop
The simplest way would be to make the background of the image of the laptop white, which would then cover up the part of the image which 'bleeds out'.
Another quick solution would be to resize all the background images so that they fit properly within the monitor.
I think the way to do it properly is to have an absolutely positioned element which fits within the bounds of the laptop screen and shows the image.
Something along the lines of
<div class='image-container' style='position: relative;'>
<div id='background' style='position: absolute; left: 100px; right: 100px; top: 30px; bottom: 120px;></div>
<img src='img/laptop.png' />
</div>
This would need some proper measurement/testing of the actual margins on the image, and would need changes to the javascript and css to work/look right.
Don't specify a width for the "container clearfix" class, and then add an appropriate width, say about 920px to the monitor, so that it's size is more appropriate to cover the photos you're using.
I need an div that will be always at the bottom of the page, margin 172px at the left, and 383px at the right.
This div will have some images and text and left and right buttons. When you hover the mouse at the right button, for example, the content that was "invisible", after reaching the div's width limit, will start appearing from the right, sliding the content for the left.
I tried using position:fixed; bottom:0px, but I couldn't margin the div, and the width of it doesn't change when the screen size changes...
For example, this would be exactly what I want (the black div at the bottom):
If you know any jquery plugin that does what I want or if you know how to do something like this, please help me!
If you're using position: fixed, margin can not be applied. You can specify the left and right attributes though.
position: fixed;
right: 383px;
bottom: 0;
left: 172px;
I know it's not exactly what you're asking for, but you can then set the white-space and overflow attributes on that div to make it so that it will show a horizontal scrollbar.
white-space: nowrap;
overflow: auto;
The user would use the scrollbar on the bottom to move the content of the div. Here's an example: http://jsfiddle.net/rustyjeans/5nv84/
To use jQuery set overflow: hidden and add some functions that adjust the scrollLeft of the div, then add some controls that call those functions when they're hovered. Here's an example: http://jsfiddle.net/rustyjeans/FtSGn/
This shouldn't be too hard to do. You want a containing div that has the dimensions of the viewer. Then, have a div inside that one, with position absolute and dimensions that extend beyond the viewer in width. When the arrows are hovered over use jquery to change the "left" css property of the inner div. Did that help?
EDIT:
The outer div should have "position: relative;" to insure that the inner div is positioned relative to its margins.
I've having an issue with the background images i have embedded into my carousel. click here I've noticed when i click from one slide to another the background image on my site moves out of place. The margin-top for my carousel is current set to margin-top:-275px; and the background image is set to margin-top:-64px; I am slight concerned about these settings.
Does anyone have a solution to this problem?
In order to activate the slides click the thin red tab under the nav bar
I guess that's because you have
.rslides li {
top:0;
}
It does nothing with position:relative (and the current slide has it), but it moves down the slide with position:absolute (hidden slides).
When you click a tab, there's a moment in which the new one is fading in, but it doesn't have position:relative yet. Then, in that moment, the new slide isn't where you want.
So remove that line.
The jumping is occurring because you are switching the LI items from position: absolute; to position: relative; at the end of the animation toggle. This can be avoided by removing your CSS rule:
.rslides li { left: 0; top: 0; }
Specifying width and height is fine, but as soon as you specify left and top - then switch from relative to absolute positioning, you get that jump you're seeing.
As for the positioning of each panel - it has to do with the way you are laying out your boxes. The sizes you are specifying are not large enough for the content you are providing. For instance: <div id="header"> is 37px tall, which is the appropriate size for the social media buttons, but you also have it as the container for the #nav-menu UL - which is another 102px tall.
It appears that in order to correct this and make things overlap, you are using negative margins - which is getting you all thrown off.
My suggestion would be to use a standardized layout system, such as any of the following:
http://cssgrid.net/
http://960.gs/
http://www.1kbgrid.com/
http://foundation.zurb.com/docs/grid.php
And use it to perform your layout tasks, rather than trying to self-craft overlapping layers with mixed absolute/relative positioning.
Alternatively, if you're going to go the overlapping layers route (again, not suggested), really commit to it. Position things absolutely throughout the layout.
In order to accomplish this, you might consider CSS rules like:
#header {
display: block;
position: absolute;
left: 50%; top: 0px;
height: 139px; /* Your Social media links height + nav buttons height */
width: 1018px; /* Your current width */
margin-left: -509px; /* Half the width - centers on page */
}
Again - this is MUCH more work, MUCH harder to maintain and MUCH less elegant - but will yield you at least a consistent spacing / sizing.
First, here's is my rough example: http://demindu.com/sandbox/simple.html
What I'm trying to do:
Create a content div: let's say 400px tall and 700px wide, like the example. The content box has a margin of 50px in each direction. The content div should always be centered both vertically and horizontally, regardless of screen resolution. The black background should extend from the centered content area all the way to the right side of the screen, but not to the left.
The only way I can think of possibly doing this is something using window.innerWidth & window.innerHeight in JavaScript, but I don't know enough to know if this is even possible.
The amount of blank space above and below the middle section would need to be:
window.innerHeight - height of the div (in this example: 500px [400px box with two 50px margins]) / 2
The blank space to the left of the black bar would need to be:
window.innerWidth - width of the div (in this example: 800px [700px box with two 50px margins]) / 2
My question to you is: Is this possible in JavaScript? Is this possible somehow with pure CSS?
You can do this entirely in CSS with 4-point absolute positioning. You will need two elements:
The first item spans from the right of the screen to the center where the content is positioned. This element uses absolute positioning for the top, left, and right coordinates of the element (we can leave bottom unspecified as it's taken care of by the height.)
The second item is nested in the former. This item has a fixed width to ensure the content itself remains in the specified width you've chosen. We can also set the height and padding on this object and the parent will inherit it's height. Don't use margins to simulate padding - it can cause cross browser issues when you're just trying to do some positioning tricks as we are here.
So your HTML code would look something like this:
<div id="my_centered_design">
<div id="my_centered_design_content">
<p>This is just some example text.</p>
</div>
</div>
And you're CSS would look like this:
div#my_centered_design {
background: #000;
margin-left: -400px;
margin-top: -250px;
left: 50%;
position: absolute;
right: 0;
top: 50%;
}
div#my_centered_design_content {
background: #333;
height: 400px;
/* I think you actually want padding for
the effect you're trying to accomplish */
padding: 50px;
width: 700px;
}
Essentially this is the same trick as the Joe2Tutorial except we are applying additional positioning rules to adhere the centered element to the right side of the screen.
I think this pure css solution would suit you best: http://www.joe2torials.com/view_tutorial.php?view=37
A very quick google resulted in this piece of code.
this code does not align a div in the middle. what you actually for your own website is that you put the following div css
.main {
width: 140px;background-color: #252525; float: left;margin-top: 25px; }
inside a table that is aligned to be centered. so, basically you're using the table's centering feature to center your left floated div simply as a content. you're not doing anything through div or css for that matter. the piece of css code you offered doesn't not anything about centering a div in the middle.