I am using the code below, but .under is not rising above (and covering up) #portfolio_content .img img as it should on hover.
#portfolio_wrap {
overflow:hidden;
width:980px;
float:left
}
#portfolio_content {
float:left;
clear:both;
margin:0 auto;
overflow:hidden;
width:650px!important
}
#portfolio_content ul {
list-style:none
}
#portfolio_content .img a { }
#portfolio_content .img a:hover { }
#portfolio_content .img {
display:block;
float:left;
height:210px;
margin:0 35px 35px 0!important;
overflow:hidden;
padding:0;
width:307px
}
#portfolio_content .img img {
display:block;
position:absolute!important;
overflow:hidden;
z-index:3!important
}
#portfolio_content .img .title, #portfolio_content .img .title a {
font-size:22px;
margin:100px 0 10px 0;
float:left!important;
width:307px;
text-align:center;
position:relative
}
.desc {
font-size:13px;
display:block;
text-align:center!important;
margin:0 auto!important;
width:307px
}
.under {
z-index:2!important;
display:inline;
position:absolute;
width:307px;
height:210px
}
.under:hover { z-index:4!important }
Any thoughts? I am assuming this is related to z-index, but I don't know what I have done wrong.
Without seeing the page rendered, I would have to assume the problem is that you cannot actually hover over .under (z-index:2) as it is hidden under the #portfolio_content .img img (z-index:3) initially and therefore you would just be hovering the img instead.
You cannot hover over .under since it's always "under" your images, tw16 is right.
Instead of playing with z-indexes, try actually placing .under inside .img but on top of your images and with display:none, and then do something like :
.img:hover .under{
display:block;
}
I might add your markup isn't quite optimized and .img should be directly placed on the a tags, not on useless inside spans, which are waaaay too many anyway :)
Edit : (as answer to comment)
In case there is no image to show, your markup will be different (as i suppose generated by a server side script, like php) as when there is one to display (for instance you won't echo the img tag).
You can as well use that condition to write 2 differents classes, for instance .img and .no-img :
.no-img .under{
display:block;
}
.img .under{
display:none;
}
.img:hover .under{
display:block;
}
Related
I want the first picture to be aligned to the right bored of the black div, but I can't move the picture "Char" from where it is.
http://www.charlestonshop.it/homepageteo.html
<style type="text/css">
html, body {
width:100%;
height:100%;
margin:0;
}
div#container {
height:100%;
}
div#container div {
width:50%;
height:100%;
float:left;
background-repeat:no-repeat;
background-size:contain;
}
div#container div#left {
/* background-image:url('http://www.charlestonshop.it/charback9.jpg');*/
background-position: right;
background-color: black;
}
div#container div#right {
/* background-image:url('http://www.charlestonshop.it/charback10.jpg');*/
background-position: left;
background-color: white;
}
.charleft img{
max-width:100% !important;
height:auto;
display:block;
}
.charright img{
max-width:100% !important;
height:auto;
display:block;
float:right;
}
</style>
Add the below to your css, if you already have rules in place- add the additional styles as outline below:
#left{
position:relative; /* have a reference point for child positioning */
}
.charleft img{
position:absolute; /* position absolutely */
right:0; /* position on the right hand side of the parent, #left */
}
The benefit of this as opposed to using float, is you wont have to either clear the float, or accommodate for any changes it may later inflict on your layout.
You have to add float: right to .charleft div which contains the image
.charleft{
float: right;
}
it's very easy to do, just add this to your css code.
#left > .charleft{
float: right;
}
That's all.
I have two images which both need to be in the HTML (so no background image), and on hover of one, it swaps for the other.
I thought I had the code working but it seems to be glitchy. I can't work out the issue.
JSFiddle here: http://jsfiddle.net/5tCju/
Here is my CSS:
#wrapper img.on,
#wrapper.gridWrap img.on {
display:none;
}
#wrapper img.default:hover img.on,
#wrapper img.default:hover img.on {
display:inline;
}
#wrapperimg.default:hover,
#wrapper img.default:hover {
display:none;
}
Any way this can be done by swapping the images between display:block; and display:inline; ?
To get this to work, you need to set the :hover pseudo-class to the parent container (.wrapper) instead of the images.
jsFiddle Demo
#wrapper
{
display: inline-block;
}
#wrapper:hover img.default,
#wrapper img.on
{
display:none;
}
#wrapper:hover img.on,
#wrapper img.default
{
display:inline-block;
}
Here is the Pure CSS Solution.
WORKING DEMO
The HTML:
<div class="images"> </div>
The CSS:
.images{background: url(http://icons.iconarchive.com/icons/icojoy/maneki-neko/256/cat-2-icon.png) no-repeat 0 0; height:300px; width:300px;}
.images:hover{background: url(https://si0.twimg.com/profile_images/2940708431/842924fb3e2cc1f7fddf1b195c3f6c81.jpeg) no-repeat 0 0; height:300px; width:300px; cursor:pointer;}
I hope this is what you are looking for.
Playing with the display property forces the browser to re-create the page flow, thus the flickering. A usual solution is to avoid the <img> tag and play with background-image but, if you want to use your current markup, you can simply place one image above the other:
#wrapper{
position: relative;
}
#wrapper img{
position: absolute;
}
... and the hide/display the second one:
#wrapper img.on{
opacity: 0;
}
#wrapper img.on:hover{
opacity: 1;
}
(Updated fiddle)
display would probably work better but I haven't tried it.
#wrapper img.on{
display:none;
}
#wrapper:hover img.default{
display:none;
}
#wrapper:hover img.on{
display:block;
}
UPDATED FIDDLE
your mistake was your were not using :hover properly. .on is not a child of .default thats why the statement #wrapper img.default:hover img.on was not working..as .on and .default both are child of #wrapper thats why you should use :hover for your wrapper in order to change images
Simple CSS Solution:
#wrapper img { position: absolute; float: left; }
#wrapper .on { display: none; }
#wrapper:hover .on { display: block; }
http://jsfiddle.net/5tCju/3/
Reversed version:
#wrapper img { position: absolute; float: left; }
#wrapper:hover .on { display: none; }
http://jsfiddle.net/5tCju/4/
Basically, the current setup has space between the top of the page and the #header div. I want to remove that space. Tried searching, came up with adding
position:absolute;top:0;left:0;
to the #header div, it works (positions it at the top without space) but the rest of my divs loose all their structure. How to position it at the very top and preserve the current layout of the rest of the divs?
I am also using an image underneath the divs as a background. Using this code.
body
{
background-image:url('../imagez/bestone1400.jpg');
background-repeat:no-repeat;
background-position:top, center;background-size:100%; 2000px;
}
Thanks in advanced.
#container
{
width:100%;
}
#header
{
background-color:#FFA500;
height:400px;
}
#leftcolumn
{
background-color:#FFD700;
height:200px;
width:10%;
float:left;
}
#content
{
background-color:#EEEEEE;
height:200px;
width:80%;
float:left;
}
#rightcolumn
{
background-color:#FFD700;
height:200px;
width:10%;
float:right;
}
#footer
{
background-color:#FFA500;
clear:both;
text-align:center;
}
There is likely padding or margin on html or body. Try something like:
html, body {
padding: 0;
margin: 0;
}
There may also be padding or magins on divs or other elements, so a universal selector might work:
* {
padding: 0;
margin: 0;
}
But it is generally good practice to implement a css reset, like this one, which may be the best solution.
You should remove the Default browser padding, margin and border, use:
/*reset default browser settings */
html, body {
margin: 0px;
padding: 0px;
border: 0px;
}
I want to know the best way to achieve the below image in CSS+HTML.
I'm having difficulty explaining in words what I want, so I guess a picture would make it more clear:
While the second and third parts are doable. I'm curious to know the best way to achieve the first one (Blue menu). If i split my page into three parts (based on the menus), in the case of blue, my div items must float out of the horizontal width of the menu, but within the vertical.
Thoughts wise ones?
Working Fiddle
You can see i have used position:relative on parent and position:absolute on child to make it flow out of that li element.
ul {
list-style:none;
width:906px;
height:600px;
}
li {
float:left;
display:inline-block;
border:1px solid #ccc;
width:300px;
height:600px;
text-align:center;
position:relative;
}
.selected {
background:yellow;
}
.div {
position:absolute;
left:-150px;
width:600px;
height:80px;
border:1px solid #000;
background:#fff;
z-index:2;
}
#div-1 {
top:30px;
}
#div-2 {
top:140px;
}
#div-3 {
top:250px;
}
You can do it by position: absolute.
.blueDiv{
position:relative;
}
.innerDiv{
position:absolute;
top: (your choice);
left: 50%;
margin-left: -(innerDivSize / 2);
}
If you don't have the width of the elements inside ... you can try to push them to the left and right by:
.innerDiv{
position:absolute;
top: (your choice);
left: 0;
right: 0;
}
But that will work only if the parent element is not on the very left or very right of the page.
In the videos playlist at the bottom, video description (background black) needs to go 20 pixels down. You will understand it better if you view the website with Firefox.
[links not working anymore]
#content #videos .playlist { float:left; width:442px; height:292px; margin:10px 0; background:#FFFFFF url(images/bg_videoplaylist.gif) repeat-x; background-position:-1px 0; border:1px solid #083684; position:relative; overflow:hidden; }
#content #videos .playlist .entries { position:absolute; width:10000em; height:60px; }
#content #videos .playlist .entries .video { float:left; width:422px; height:60px; font-size:14px; font-weight:bold; text-decoration:none; padding:20px; background:transparent url(images/player_entry.gif) 0 0 no-repeat; }
#content #videos .playlist .entries .playing { background-position:0px -80px; }
#content #videos .playlist .entries .paused { background-position:-432px -80px; }
#content #videos .playlist .entries .progress { opacity:0.8; }
#content #videos .playlist .entries em { float:right; color:red; font-style:normal; margin:14px; }
#content #videos .playlist .entries .description { float:right; width:442px; height:212px; background:#000 url(http://flowplayer.org/img/player/btn/play_large.png) right bottom no-repeat; }
#content #videos .playlist .entries .description p { color:#FFF; width:422px; height:192px; font-size:12px; font-weight:none; text-decoration:none; padding:10px; position:absolute; }
None of the suggestion above worked. I solved it with margin-left:-20px. Hate internet explorer!
IE6/7 has issues with mixing floats and absolute positioning. Try removing the position:absolute from #content #videos .playlist .entries .description p
Your link is broken, the correct url should be http://pangeaadvisors.org/SS.jpg
In Firefox 3.5 I see it exactly the
same as your screenshot of IE (20
pixels raised).
In IE6 I see it aligned to the base
but with 20px on the left
and IE7 the same as IE6 but with some glitch
in the scrolling.
In firefox the first 2 items are miss-placed, but the 3rd item in the playlist is displayed correctly. The factor effects this is the length of the title. Longer title display fine, shorter with the 20px gap, the line-height pushes the time-stamp down.
If you add another div inside the "video" wrapping around the title and define a height and width on this with overflow:hidden, it should standardize and stop the issue of some blocks being different heights to others.
With this done you can then use a couple of CSS hacks to write rules for any misbehaving browsers by using
position:relative;
top:XXpx
A little down-and-dirty but should work just fine. Can't be more specific since I can't actually re-create your problem in my browsers.