I'm trying to set images in this style: one on top and other below this.
Actually I do something wrong and in my result images are one under other. Here is jsFiddle.
The second image is hidden by overflow:hidden in slider class.
Question:
Where I make mistake? I'm sure there is easy solution but I lost some time and can't find it.
P.S. If is it possible I'm looking solution with css changes only.
Change the css for your images to simply this:
img{
display:block;
}
that does the trick.
EDIT after comments:
img{
position: absolute;
z-index: -1;
top: 0px;
left:0;
}
That staples all your images over each other in the top left corner.
i think your img must
img
{
display:block; /*if you want top to bottom use display:inline;*/
}
I see you already marked an answer, but I already typed this up so here ya go :)
You can simplify your CSS a bit here as well by removing the floats and if you're only using images for your slider (no text beside the images), you can even simplify the HTML by removing the whole .photo div.
Simplified code:
<div class="slider">
<img src="http://lorempixel.com/754/453/" alt="Bottom Image" />
<img src="http://placehold.it/754x453" alt="Top Image" />
</div>
.slider {
overflow: hidden;
position: absolute;
top: 1px;
left: 371px;
width: 754px;
height: 453px;
}
img{
position: absolute;
z-index: -1;
top: 0px;
left:0px;
}
http://jsfiddle.net/daCrosby/MP6qN/8/
Related
I have web pages on http://rygol.cz/qlife/ and when I zoom out, the id="contacts" goes anywhere every iteration when I zoom out. I need something like
border: 0;
Because I need that text of will be every of bottom of
any ideas how to do that?
To align a div at the bottom of the content add {position: relative;} to the content div and {position: absolute; bottom: 26px;} to the div you want to align.
CSS:
#content-wrapper {
position: relative;
}
#leftcolumn {
padding-bottom: 110px; /* this will prevent the normal content in the left column to go under the aligned div */
}
#contacts {
margin-top: 0;
position: absolute;
bottom: 26px;
}
Demo: http://jsfiddle.net/NMDCF/
First of all, try to validate your HTML by using the following link : HTML Validation
try to fix those errors before trying to fix your id="contact"
as for the id="contact" use position:absolute or position:relative; that may solve your problem. if that did not work, use this display:block; or display:inline-block; both could help you achieve your goals.
Hey guys I simply cannot get this to work.
I have some content that is centred on the page using the margin: auto; "trick".
In this content I have an image. I need to make a color bar coming under the image continuing out to the sides of the browser. On the right side I need it to look like its coming up onto the image.
I have made this picture to try an graphically show what I mean: image
As you can see the bar runs from the left to the right side of the browser. The centred image is just placed on top of it and then an image positioned on the top of the image. But I haven't been able to get this working. Any one who would give it a go?
I tried positioning the bar relative and z-index low. This worked but the bar keep jumping around in IE 7-8-9. Centring the image wasn't easy either and placing that smaller image on top was even harder. It wouldn't follow the browser if you resized it. The problem here is that the user have to be able to upload a new picture so I cant just make a static image.
Please help I am really lost here
EDIT:
Tried the example below but when I run the site in IE 7-8-9 I have different results. link
I have made a jsFiddle which should work in Chrome and IE7-9: http://jsfiddle.net/7gaE9/
HTML
<div id="container">
<div id="bar1"></div>
<img src="http://placekitten.com/200/300"/>
<div id="bar2"></div>
</div>
CSS
#container{
width: 100%;
margin: 0 auto;
background-color: red;
text-align: center;
position: relative;
}
#bar1{
background-color: blue;
position: absolute;
top: 50%;
right: 0;
z-index: 1;
height: 30px;
width: 40%;
}
#bar2{
background-color: blue;
top: 50%;
left: 0;
z-index: 3;
height: 30px;
width: 40%;
position: absolute;
}
img{
text-align: center;
z-index: 2;
position: relative;
}
The key here is that the container is positioned relative, thus enabling absolute positioning of the child elements in relation to their parent. Use z-index to control how the elements are stacked.
A method I use for centering anything with css is:
.yourclass {
width:500px;
position:absolute;
margin-left:50%;
left:-250px;
}
'left' must be have of your width and then make it negative.
To date I have not experienced any problems with this.
i got a wrapper Im trying to fit image in and have a logo go over top of it lower middle Im having trouble coding it... i can get image on top or bottom or into the menu part below the wrapper but i cant seem to work it out
You do it using positioning.
Working example http://jsfiddle.net/UKxK6/
HTML :
<div id="wrapper">
<img class="bg" src="img path" />
<img class="logo" src="logo path" />
</div>
CSS:
wrapper {
position: relative;
}
#wrapper .bg {
position: absolute;
top: 0;
left: 0;
z-index: 5;
}
#wrapper .logo {
position: absolute;
top: 10px;
left: 10px;
z-index: 10;
}
Demo :
http://jsfiddle.net/pt4rV/
you can also use the float and clear attribute in your CSS may be it will help you. and also use MAX-WIDTH and MAX-height property so you are able to get proper output.
with max-height and max-width property you are able to set maximum height and width and use float:left or right and clear property as per your need to set the image.
I need to center a forward and back arrow on either side of an image within a larger div. The div's width and height vary according to the size of the image.
I have a live version of my work so far here: http://danapaigetrentlage.com/cfsa-comps/lff-aboutgoods.html
And here's a jsfiddle to play with: http://jsfiddle.net/thwackukulele/4zHyd/
Though I don't know how much use that will be without the images linked in.
You'll see the forward and backward arrows are at the top of the blue area to either side of the image. I want them to be centered horizontally and vertically within this blue area.
I know that I am using a lot of positioning, and if there's an all around better way to attack this layout, please let me know. This is the best I could come up with. I am eventually handing these layouts off to a developer who is adding database CMS functionality. So my code doesn't need to be perfect, it just has to illustrate my intentions so that he can understand.
Thanks for any help in advance!!
.framewrap-fb{ position:relative; }
.rightarrow, .leftarrow{ position:absolute; top:50%; margin-top:-32px; width:64px; height:64px}
.leftarrow{left:0}
.rightarrow{right:0}
Not sure I understand the question, thats alot of code to read through, maybe only post the code on the focus area.
Try:
.wrapper{
position:relative;
}
.left_arrow{
position:absolute;
left:0;
top:50%;
}
.right_arrow{
position:absolute;
right:0;
top:50%;
}
The solution is to absolute position the links to the div at 50% top and margin-top of negative half of the height of the link so:
http://jsfiddle.net/elclanrs/JKqnm/
html:
<div>
<img />
<a id="next"></a>
<a id="prev"></a>
</div>
css:
div {
position: relative;
height: 300px; /* Set size */
width: 500px;
background: blue;
}
#prev, #next {
position: absolute;
width: 24px;
height: 24px;
top: 50%;
margin-top: -12px;
background: red;
}
#prev {
left: -48px;
}
#next {
right: -48px;
}
I am making a very simple blog for my PHP project, but am having a simple problem. I can't get the image for my header to float all the way right.
I have a banner with some text on the left, I have a 1px slice repeating across the width of whatever resolution may be chosen (ensuring the banner fills any screen). I would like the image to always render on the right edge of the screen, again, independent of screen resolution. But it is coming in at a fixed position. Here is what I have written:
HTML:
<div id="header">
<img src="images/banner.jpg" alt="banner" title="Prairie"/>
<img class="right_image" src="images/banner_right_image.jpg" alt="elavator" title="prairie elevator"/>
</div>
CSS:
#header {
position: fixed;
top: 0px;
width: 100%;
height: 120px;
background: url(images/banner_right.jpg) repeat-x;
z-index: 1;
}
#header.right_image {
float: right;
position: fixed;
top: 0px;
z-index: 1;
}
What is the issue here?
Thanks for any input.
You should separate #header.right_image so that it is #header .right_image
Also remove position: fixed from #header.right_image
This works:
#header .right_image {
float: right;
}
Example: http://jsfiddle.net/FTBWU/
A link to your site would help!
I always throw at the top of my header:
* { margin:0; padding:0}
You probably have padding or margins inherintly applied to your html or body tags depending on what browser you're using. Try that - and the is there a URL I can see the whole thing at?
I don't know how well the float works with a fixed positioned element. Maybe try something like this for your image?
#header .right_image {
right: 0px;
position: fixed;
top: 0px;
z-index: 1;
}