i have problem with my page, when it reaches to 768X1024 a big space below my footer exist, i looked some answers here at stackoverflow but i can't find one. can you help to fix it?
here's my http://jsfiddle.net/craybac/pb0d6zda/5/
and here's the image problem:
![enter image description here][1]
Use position absolute instead of position relative
.footer {
position: absolute;
bottom: 0;
width: 100%;
}
Use postion:absolute,solve your problem.
here is
fiddle link:
Still your problem is not solved.use the below css
html,
body{
height:100%;
}
use some id wrapper after body and close that tag in before closing body tag.
and add the below css.
#wrapper {
min-height:100%;
position:relative
}
Related
I am looking at making an animation using auto-animate and 2 slides.
The animation is made of 5 images.
Using <image> stack me the images on an horizontal line .. using divs stack them vertically.
I would like the second slide to arrange the images on a diagonal.
The best for me would be to position the images freely but I don't know how to do that :( ?
To position an item in CSS, try this:
<style>
#image1 {
position: absolute;
top: 100px;
left: 100px;
}
</style>
<img src='my-image.jpg' id='image1'/>
See https://www.w3schools.com/cssref/pr_class_position.asp for more details.
:)
I'm new in using bootstrap 3. I need your help on how to make images responsive while using position absolute, top and left? My images are on top of one image and whenever I re-size the browser the images will not be in their place anymore(desktop size).
from http://www.w3schools.com/cssref/pr_class_position.asp
so something like this: (in one of the relevant .css files)
img.topleftStuck {
position: absolute;
left: 100px;
top: 150px;
}
then something like this:
<img src='path/to/crappy_image.gif' class=topleftStuck>
this can also be achieved with div in similar fashion.. :)
I have two containers which are positioned absolutely one below the other like so:
<header>
<div class="vcenter">
...
</div>
</header>
<div id="wrapper">
...
</div>
CSS:
header {
position: absolute;
top: 0;
height: 70%;
}
.vcenter {
position: relative;
margin-top: -50px;
top: 50%;
}
#wrapper {
position: absolute;
width: 100%;
top: 70%;
}
I'm centering .vcenter vertically with relative positioning. This works fine in all major browsers. Only on IOS Safari on the Ipad it's bugging. Check out the site I'm working on. .vcenter is the container of the logo.
I'm inspecting it through Xcodes IOS-Simulator and also checked on an real Ipad. Is this possibly an IOS Safari Bug? Does somebody have a workaround? I want to keep my header dynamically resizing vertically (height: 70%)...
Thanks in advance for your thoughts.
Desktop Screenshot (how it should be):
IOS-Simulator Ipad Screenshot (how it should't be):
I can't really explain it, but using position: absolute seems to fix your problem:
.vcenter {
position: absolute;
margin-top: -50px;
top: 50%;
width: 100%; /* needed to add to fix horizontal positioning */
}
I think it has something to do with using absolute positioning and percentages on the header. If you inspect the height of the html & body, they aren't actually as tall as your content - so maybe computing a 50% positioning for the vcenter is getting messed up. Not sure...
Have you tried using the transform solution? It generally covers your bases for things like iOS rendering issues (of which there are several more than just this scenario).
Write your class like this (it'll break for IE9 and below, but that's what browser shimming is for and you can use your existing code for the shim using Modernizr)
.vcenter {
position: relative;
top: 50%;
transform: translateY(-50%);
}
That should render .vcenter at the vertical center for all modern browsers as well as iOS Safari.
Okay so I have these divs called "latestWorkTitle" which are positioned absolute and are placed on top of the corresponding image to show its title.
However, I can't get this properly to work. The titles don't show at the corresponding image and when I resize my browser window everything shifts and so on.
I tried creating this jsbin http://jsbin.com/uhoxef/1 with a part of my code to illustrate how it should look like and what is going wrong. Even all the titles go on top of each other in the code while they should be on top of the corresponding images... I'm just basically totally lost at this.
I think the HTML was confusing itself. I also made the thumbnail class the relative layer. HTML renders as we read, from left to right. So putting the title before the image causes the image to show on top and cover the text.
HTML:
<div class="thumbnail">
<a href="portfoliodetail.php?id=10">
<img src="http://www.hlnarchitects.com/img/plain_red.png" />
<div class="latestWorkTitle">title1</div>
</a>
</div>
CSS:
.thumbnail {
position: relative;
overflow: hidden;
float: left;}
.portfolioOverview img {
width: auto;
height: auto;}
.latestWorkTitle {
text-align: right;
font-size: 11px;
text-transform: uppercase;
background: yellow;
position: absolute;
padding: 6px;
top: 0;
left: 0;}
For this to work, each thumbnail class needs to be the relative start for each individual layer. So the thumbnail class is set to relative.
Any object set to absolute (.latestWorkTitle) within this layer will start from the top and left position of the relative object.
You'll need to adjust some details to taste but I hope this helps.
is there a way to alter a background when you rollover a link? im making a degree show website and want a large sample image to appear in the background when you rollover the link of persons name. i have an image appearing, however its covering all the text and in a fixed position over the link. is there a way to do this so it just alters the background image and stays behind all the other text on the page?
heres what im working with
#hover_img img
{
display:none;
}
#hover_img:hover img
{
display:block;
position:absolute;
top:0px;
padding-top:0px;
}
html
<div id="hover_img">LINK<img src="image" alt="" /></a></div>
thanks!
** fiddle http://jsfiddle.net/5yhsL/ **
Add z-index: -1 to the image on hover:
#hover_img:hover img
{
display:block;
position:absolute;
top:0px;
padding-top:0px;
z-index: -1;
}
You can accomplish this by putting the text inside another element adjacent to your image element. Absolutely positioned elements will take dominance over their neighbors, and one way you can get around that is by assigning a value to the position property for subsequent elements.
Here is a jsfiddle I've whipped up:
http://jsfiddle.net/93mpW/3/