Links to examples removed
Problem: Webkit browsers (Chrome and Safari) are having an issue with the rotation class I created on the page. If I remove the rotation class on the content div, the large images that appear on hover appear in the correct position.
Firefox has no issue with the rotated content div. I am on a Mac so I cannot test IE.
You've given the .thumbnail class position:relative so it's creating it's own position context. The fixed position you've given .thumbnail:hover span will work with it's 0 top position as the top of the .thumbnail parent.
Just take away position: relative from .thumbnail and set the top position for .thumbnail:hover span to the value you want it placed (relative now, to the top of the window, because it has position: fixed.
Hope my explanation was clear enough!
First of all, it's enaugh to set only in .thumbnail:hover span{visibility:visible}
The rest code should be such
.thumbnail span {
position: absolute;
padding: 0px;
visibility: hidden;
color: black;
text-decoration: none;
height:530px;
overflow: hidden;
top: 0;
left: 460px;
}
The position should be the same. In your code you wrote absolute but in hover mode set fixed. And if you want the image to appear in the same place you should position it relative to #portfolio but not .thumbnail. So add these:
#portfolio {position:relative}
Remove
.thumbnail {position:relative}
Related
i have this jsfiddle which as you can see when you hover of the Link the Hidden link should display but because of the position absolute it doesnt. Any idea how to make the link display without changing the position: absolute
I tried z-index to no go
The hidden link has position: absolute; and top: 100%;, so it displays 100% from top (thats why scrollbar appears after hover). Change the top property to something different and you will see the result.
The link are displayed, but in the bottom of the page, if you change the CSS you must see the link:
.wrapper .nav ul {
display: none;
position: absolute;
width: 200px;
top: 10px;
left: 0;
}
It's actually appearing; however, it's relative to the previous element in the hierarchy that has a relative position.
.wrapper {
height: 33px;
position:relative;
}
I'm not sure which element you want it relative to. In my example, I made it relative to your wrapper.
In your css .wrapper .nav ul {}, you have the top: 100%;. If you change that to say, 100px, it shows. Of course position it where you want by adjusting the pixels.
I cannot get the orange background behind DONATE at the bottom of my page right to stay put in larger browser windows. I have tried every css trick I can find. Please help!
Thanks,
Janet
http://dev30.ncld.org/
You missed this trick then:
#footer .footer-col-orange {
margin-left: 790px; // adjust accordingly
left: initial;
}
This will keep your donate box relative to the footer element, and not to the left page border and will work on all displays.
The other option is to set the position of #footer .padding element to relative.
There you go :
#footer .padding {
/* padding: 15px 20px 0px 100px; */
width: 1010px;
/* position: absolute; */
margin-left: auto;
margin-right: auto;
background-color: #0A6DA1;
padding-top: 15px;
position: relative; /* First part */
}
#footer .footer-col-orange {
position: absolute;
/* background-position: right; */
right: -2em; /* second part, feel free to put what you want */
}
When you set a position: absolute; to an element, it will pull it out of the HTML flow, and you can give it coordinates (top, left, right; bottom). This coordinates are relative to the first parent with a relative position. As you didn't set any parent element to be the relative, you positioned your element relative to the document.
Your orange box is current positioned absolutely, as you know. This means that is is relative to the browser window. The left edge of that window, because you have `left:900px'. What we want is for it to be relative to the footer, which is centered.
To do this, we need to set the parent container of the orange box to position:relative. This will cause the orange box's position to depend on it's parent instead of the window.
#footer .padding {
position:relative;
}
Then, it's just a matter of setting the yellow box to the right position. Given that it's on the right side, I'd delete the left value entirely and set right:-45px instead.
#footer .footer-col-orange {
left:auto;
right:-45px
}
With these, it'll line up perfectly with the edge of the white box above:
You are going to run into an issue with inline styling. You not only have your styles applied by CSS, they are duplicated inline. You're going to either need to set !important in the new CSS that I've provided (not best practice), or better, remove the inline styling. If you provide some more information about how your side is built (WordPress, HTML template, etc) I can help with removing the inline styling.
I am developing a webpage for images on a carousel. How can I move an image down in a DIV, or even center it vertically?
Here is my CSS code:
.carousel .item {
height: 900px;
background-color: #777;
}
.carousel-inner > .item > img {
display: block;
margin-left: auto;
margin-right: auto
}
Here is a URL to the webpage in question to show you that the image is too high: http://www.canninginc.co.nz/canluciddream/screenshots.html
EDIT
Ok, I have edited the code by changing the:
margin-top: 50px;
I am still after the image to be lower in the div. I can increase the top margin, but this leaves a white background. What would be the best way to move the image a little bit lower?
First of all make the .item position relative and then
on css:
.carousel-inner > .item > img {
position:absolute;
top:25%;
left:25%;
}
This will center the image vertically
Give margin top of 130px to the image and it looks cool!
margin-top: 130px;
Put image inside the main body, set the main body to position: relative, then set the image to position: absolute; top: 0; left: 0;
If you can't put the image inside the main body, then add a negative margin-top to the main body.
Your problem is not the image being placed too high - it is fixed header. So set margin-top:50px instead of -80px for .myCarousel.
The reason the image is going behind the navigation bar at the top is because you have the navigation bar's position set to fixed. This removes it from the rest of the page for styling purposes, in that the other divs/elements do not recognize it when they position themselves. If you remove the position: fixed; css on that item, the other elements will position relative to that one. Another option would be to add enough of a top margin to the image element to push it down below the top bar by default, whichever you prefer.
I am trying to make a simple html site:
http://www.williamcharlesriding.com/test/index3.html
The problem is the buttons, which are png's and I am trying to position over the various areas of the background image, using css like this:
.but1 {
opacity:0;
filter:alpha(opacity=0);
position:fixed;
top:463px;
left:36px;
}
However I have noticed in different browsers and depending on the zoom factor the buttons can be way off their intended mark. Any advice on this would be appreciated,
Thanks
Set your .content container to position: relative and change each button div from position: fixed to position: absolute. The relative position on the container will make the absolute position relative to your div, rather than the browser.
.content {
padding: 10px 0;
background-color: #5a5958;
margin-left: auto;
margin-right: auto;
position: relative;
}
I would probably add another class to each, so you could do something like this:
<div class="but but1">
<div class="but but2">
.but { position: absolute; }
.but1 { top: 463px; left: 36px; }
Normalize.css might help, it contains default CSS for all browsers. Be sure to include it before your main CSS. Sorry, as the other answer states the problem is that you are positioning relative to the browser window, not the parent element.
Have a problem with relative positioned span and img not being correctly positioned in IE7.
You can see the problem at:
http://bookgroupaustralia.obiweb.com.au/
The 'NEW' and 'SALE' spans should be top right of the title, and the cart image in the bottom right. They are correctly positioned in IE8,FF,Safari,Chrome. In IE7 they are appearing lowers than expected.
IE7 doesn't appear to be picking up the margin correctly.
Try setting a position: relative; declaration on your productItem class. Then instead of setting margin values for your .listing span.badge classes, try setting the following values:
top: 0;
left: 0;
You'll also need to do the shopping cart icon (your img.cart class). Again, you want this image to be absolutely positioned at the bottom right corner of each list item:
.listing ul li.productItem img.cart, .listing ul li.productItemLast img.cart {
bottom: 5px;
cursor: pointer;
position: absolute;
right: 5px;
}
You may want to adjust the bottom and right positions a bit.
That should take care of it.