This is my first post. I'm still learning CSS and your help is much appreciated.
I have been trying to create a Div that contains an image with a transparent overlay with a semi transparent border at the bottom. On hover, a second transparent overlay is added making the bottom border darker. I then have another div containing some title text, the title text should change colour on hover anywhere in the parent Div as well as the whole thing be linked on click.
The closest thing to it is on Vimeo here:
http://vimeo.com/categories
I have managed to achieve all of this and it has been working fine in IE and Firefox and safari etc. But with IE10 the text no longer changes colour on hover nor is the div clickable.
Here's my CSS:
.videoCatThumbImg {
position:relative;
background:#FFFFFF;
width: 178px;
height: 178px;
padding: 5px 5px 5px 5px;
margin: 10px 0px 0px 0px;
border: 1px solid #CCCCCC;
line-height:normal;
float:left;
}
.videoCatTskin {
position: absolute; top: 5px; left: 5px;
}
.videoCatThumbHover {
position: absolute; top: 5px; left: 5px; display: none;
}
.videoCatThumbImg:hover .videoCatThumbHover{
display: block;
}
.videoCatTitle {
position:absolute;
top:5px; left:5px;
display:block;
width:173px;
height:26px;
padding:152px 0px 0px 5px;
Font-size:18px;
font-weight:bold;
color: #ffffff;
}
.videoCatTitle:hover {
color: #5798ca;
}
and here's my HTML:
<div class="videoCatThumbImg">
<img src="http://www.mydomain.com/images/vcat/image_thumb.gif" alt=""/>
<img class="videoCatTskin" src="http://www.mydomain.com/images/vcat/thumb_hover.png" alt=""/>
<img class="videoCatThumbHover" src="http://www.mydomain.com/images/vcat/thumb_hover.png" alt=""/>
<div class="videoCatTitle">Some Text Here</div>
</div>
Any advice on what I'm doing wrong is very welcome.
Similar to this answer, try adding a background (transparent image or same-color will work), to the hover classes that don't have it (.videoCatThumbImg:hover).
Just had the problem. None of the solutions were working (border, background, hasLayout).
In the end, I switched to XHTML 1 Strict doctype and it worked, if it can help...
Related
I'm looking to find out how to add another box inside my box which would be faded to act as a title bar for that specific box (If that makes sense)!
So basically, in the SOCIALBOX I'm looking to get a sub-faded bar at the top inside which would act as a title bar.
After a few comments of people saying they're not sure what I mean, I created a quick image in photoshop to act as some reference point.
Code Snippet:
body {
background: url("../images/backgroundimage.jpg") repeat 0 0;
}
/* CSS MENU BAR CODE GOES HERE */
#menubar {
width: 98.5%;
height: 40px;
background-color: #000000;
position: fixed;
border: 2px solid #ffffff;
}
.inside_text {
color: #FFFFFF;
float: right;
margin: 11px 7px 0 0;
}
.inside_text2 {
color: #FFFFFF;
float: left;
margin: 11px 0 0 7px;
}
/* CSS SOCIALBOX (RIGHT) GOES HERE */
#socialbox {
width: 40%;
height: 40%;
position: relative;
float: right;
margin: 0 8px 0 0;
background-color: #000000;
border: 2px solid #126b72;
}
<div id="menubar">
<div class="inside_text">
PLACEHOLDER TEXT
</div>
<div class="inside_text2">
PLACEHOLDER TEXT
</div>
</div>
<br />
<br />
<br />
<div id="socialbox">
</div>
So you are asking for a faded line within SOCIALBOX div, to serve as underline for a title?
If thats correct create another class
.title-bar
{
border-bottom:3px;
solid black;
opacity:0.3;
}
position with margin-left & margin-top values inside that class based on where you want it within SOCIALBOX.
for example:
.title-bar
{
border-bottom:3px;
solid black;
opacity:0.3;
margin-left:50px;
margin-top:30px;
float:left;
}
create a:
<div class="title-bar"></div>
and place that inside
<div id="socialbox"></div>
BTW make it a habit to use float:left when positioning divs with CSS, try to avoid position:absolute or fixed, unless absolutely necessary. It just comes out cleaner this way.
I want to display a chat bubble behind some text. Essentially the questions boils down to properly scaling background images.
I am mostly an Android developer and this is easy to do with a .9 image. I want to be able to do the same for an HTML page.
What i want is create a image that i can specify which sections strech and which dont. This would allow me to best scale the image as a background.
Currently my attempt looks like this.
Here is my code for this.
<div style="background-image: url(../home_images/chat_right.png);background-size: 100% 100%; background-repeat:no-repeat;"><em>“What RiteCare has done for my child is an amazing gift. Watching him grow in front of my eyes has been so incredible.” </em> ~Margaret</div>
You can just use plain old CSS. There's no reason to have to stretch and skew an image.
<div class="chatBubble">
<div class="message">
And then, this one time, at band camp....
</div>
</div>
<div class="triangle-down">
</div>
Applicable CSS:
.message {
color: #000;
font-size:14pt;
font-weight:bold;
text-align:left;
}
.chatBubble {
border: 5px solid purple;
border-radius:10px;
background-color:white;
padding:15px;
}
.triangle-down {
width: 0;
height: 0;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-top: 20px solid purple;
position:relative;
float:right;
right:10%;
}
Example here:
https://jsfiddle.net/fh5gg77r/
I'm trying to have it so that an image of a yellow cog sits inside a div with a yellow border and a white background, and then upon hover the cog changes to white and the background changes to yellow. I'm currently setting the first image as the background of the div, and then using div:hover to change the background on hover, however the spacing etc. doesn't quite work and the border doesn't go around the image properly. Is it possible to have it so the image is inside a link rather than as the background of the div? Here is the code I'm using:
HTML:
<div id="settings">
</div>
CSS:
#settings {
border: 4px solid #ffff00;
padding: 10px 20px 10px 20px;
background: #fff url(img/cog_yellow.png) 0 0 no-repeat;
}
#settings:hover {
background: #ffff00 url(img/cog_white.png) 0 0 no-repeat;
}
Any ideas?
It is possible although not very efficient. You can have two images and show and hide them based on hover:
HTML
<div class="button_link">
<img src="http://www.placecage.com/50/50"/>
<img src="http://www.placecage.com/60/50"/>
</div>
CSS
.button_link a:last-child{
display: none;
}
.button_link:hover a:first-child{
display: none;
}
.button_link:hover a:last-child{
display: block;
}
FIDDLE
If you can post a fiddle recreating the issue with the images you're using there is probably a more efficient way of doing this with just CSS and no additional HTML involved
UPDATE
This is how I would do this, with just CSS:
NEW FIDDLE
You can use this instead:
#settings a{
display:block;
width:100px; /* adjust your width */
height:100px;/* adjust your height */
border: 4px solid #ffff00;
padding: 10px 20px 10px 20px;
background: url(img/cog_yellow.png) 0 0 no-repeat;
}
#settings a:hover {
background: url(img/cog_white.png) 0 0 no-repeat;
}
I'm having a bit of a problem with my codes. I have a transparent/glassy looking navigation bar on my page. I am trying to add a logo over it, however when I do, the logo as well is transparent and can see through it.
I think the problem may be that the navigation bar is coming before the logo, but in my codes, I have the logo coming first.
#nav {
background: #000;
height: 40px;
opacity: 0.15;
border-bottom-right-radius: 0.6em;
border-bottom-left-radius: 0.6em;
}
<div style="border-bottom-right-radius: 0.6em;
border-bottom-left-radius: 0.6em;
box-shadow: 0px 0px 7px #000000;
width: 960px;">
<div id="nav">
</div>
</div>
The logo image is just a regular < img > tag with a bit styling centering it in the center.
Your question indicates the logo is outside the navigation container, but your symptoms indicate that it is a child of the nav bar. Even if it is not, your code is flawed, and you will soon experience similar issues on the children of the nav element.
The CSS opacity setting changes the opacity of the whole element, including children. Try setting a background color using rgba:
#nav {
background: #000;
background: rgba(0,0,0,.15);
height: 40px;
border-bottom-right-radius: 0.6em;
border-bottom-left-radius: 0.6em;
}
The rgba background will fail in older browsers (IE8 and before), the #000 background is a fallback for them.
You could also create a semi-transparent png file and set it as the fallback background, this will work for IE7 and later (and IE6 if you use a png transparency hack):
#nav {
background: url('semitransparent.png');
background: rgba(0,0,0,.15);
height: 40px;
border-bottom-right-radius: 0.6em;
border-bottom-left-radius: 0.6em;
}
If you have the logo inside of the "#nav" it will be transparent. you will have to give the logo a:
.logo{position:absolute;}
And move it over the navigation.
You can try raising the z-level of the image so that it "floats" above the other elements in the visual order.
<img src="image.png" style="z-index: 1000" />
Although it sounds like your image is inheriting styles from the parent element. If you're placing the image inside the #nav element, then this is probably the case. Make sure you set opacity: 1; on the image style in that case.
Side note: You might also want to extract that styling out of the element tag and into your CSS to make it clearer.
i think u should want this .
CSS
#nav {
background: rgba(0,0,0,0.1);
height: 40px;
border-bottom-right-radius: 0.6em;
border-bottom-left-radius: 0.6em;
color:black;
margin:10px 0 0 0;
position:relative;
padding-left:110px;
}
.logo{
position:absolute;
top:0;
left:0;
width:100px;
height:25px;
background:green;
}
HTML
<div style="border-bottom-right-radius: 0.6em;
border-bottom-left-radius: 0.6em;
box-shadow: 0px 0px 7px #000000;
width: 960px;margin:10px 0 0 10px;">
<div id="nav">
<div class="logo">Logo here </div>
your navi here
</div>
</div>
Live demo http://jsfiddle.net/rohitazad/yNMbt/
Let assume that I have image with border: 1 px solid black because i want it to have border. But for more i want rounded corners so i give border-radius: 10px. But this now looks bad because corners don't have border. Is there possibility in html and css to do something which give borders to corners or answer is maybe somewhere in (for example) in jQuery?
sure just put the border on too.. and where there's a background color you can use an image, however IE support will be non-existant, but you might try CSSPie for enhancement for it. I think also some browsers do have a problem clipping on image to the round corners but am not too sure on overall support or fixes, perhaps putting the border on a parent div then rounding the image inside it might give a neat effect?
Example Fiddle
div, img {
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
border: 1px solid #000;
background: #0f0;
width: 200px;
margin: 50px;
text-align: center;
line-height: 40px;
}
HTML:
<div>rounded with border</div>
<img src="http://placekitten.com/100/100/" alt="">
Update: Webkit browsers do have problems with this if it's actually an image that needs rounding with borders, here's one workaround that seems to help:
New Example Fiddle
(view with webkit to see difference between second and third images)
HTML:
<div class="ri"><img src="http://placekitten.com/100/100/" alt=""></div>
CSS:
div {
margin: 50px;
text-align: center;
line-height: 40px;
width: 100px;
height: 100px;
}
.ri {
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
-webkit-background-clip: padding-box;
border: 1px solid #000;
}
.ri img {
display: block;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
-webkit-background-clip: padding-box;
}
the background-clip is supposed to help the background clip to the padding-box, which should in theory stop a background-image or color from extending into the border, but in itself it doesn't appear to work very well, so I nested the image and rounded both it and the parent div and then put the border onto the parent div, Webkit was happy ;)
You might try this curved-corner project on Google Code that purports to allow the border-radius CSS property to work cross-browser.
you can write with css3 & for IE you can download piecss3 js.
Example
div{
width:200px;
height:200px;
background:red;
color:#fff;
-moz-border-radius:10px;
-webkit-border-radius:10px;
-khtml-border-radius:10px;
border-radius:10px;
border:2px solid yellow;
behavior: url(PIE.htc);
}
check this
http://jsfiddle.net/sandeep/KDBGV/
The other ways is:
CSS:
.container {
background:gray;
color:#fff;
margin:0 15px;
}
.rtop, .rbottom {
display:block;
background:#fff;
}
.crvtop *, .crvbottom {
display: block;
height: 1px;
overflow: hidden;
background:gray;
}
.r1{margin: 0 5px}
.r2{margin: 0 3px}
.r3{margin: 0 2px}
.r4{margin: 0 1px; height: 2px}
HTML:
<div class="container">
<b class="crvtop">
<b class="r1"></b>
<b class="r2"></b>
<b class="r3"></b>
<b class="r4"></b>
</b>
Place the content here
<b class="crvbottom">
<b class="r4"></b>
<b class="r3"></b>
<b class="r2"></b>
<b class="r1"></b>
</b>
</div>
This is going to work in all the browsers.
Cheers and Enjoy :)
Well Cris,
The classes are for the spanned elements to create a curvy edges. Simply modify
.rtop, .rbottom {
display:block;
background:#fff;
}
.crvtop *, .crvbottom {
display: block;
height: 1px;
overflow: hidden;
background:gray;
}
with
.crvtop, .crvbottom {
display:block;
background:#fff;
}
.crvtop *, .crvbottom * {
display: block;
height: 1px;
overflow: hidden;
background:gray;
}
and it will work
Hope that helps..