Ok here is my problem, I've got a div with a hover effect on it, it changes colors when the mouse is over the div, in turn the text inverts colors so that it remains readable. Now my problem is that the links themselves don't follow the color schemes and attacking the links on their own outside the div won't work until the mouse hovers directly over the link itself. Can anyone point me in the right direction.
The HTML
<div id="gs_home_blackbar">
<div id="ic_box_1"><span style="LINE-HEIGHT: 24px; FONT-SIZE: 20px"><strong>An Emerging Leader </strong></span><br />
This is where text goes</div>
<div id="ic_box_2"><br /> This is where text goes</div>
</div>
<div id="ic_box_3" class="a"><br /><br />This is where my link goes</div>
</div>
and here is the CSS that controls this section
#ic_box_3 {
color:#fff;
position:absolute;
background:#000;
margin:-130px 0px 0 860px;
padding:27px 10px 10px 10px;
text-align:left;
width:230px;
height:93px;
font-family:Arial, Helvetica, sans-serif;
font-size:13px;
color:#fff;
border-left:dotted 1px #fff;
}
#ic_box_3:hover {
position:absolute;
background:#fff;
margin:-130px 0px 0 860px;
padding:27px 10px 10px 10px;
text-align:left;
width:230px;
height:93px;
font-family:Arial, Helvetica, sans-serif;
font-size:13px;
color:#000;
border-left:dotted 1px #000;
}
Use a selector like this:
#ic_box_3:hover a {
/* settings for anchors inside a hovered div */
}
Then if you need the situation where both are hovered, use this one:
#ic_box_3:hover a:hover {
/* etc */
}
It seems like you are trying to make a link look like a button with a hover over effect. You don't have put it in a div and style the div. You can just style the anchor tag itself. Basically apply all those styles that you gave to the div to the anchor itself and tweak as needed.
Related
I have this block:
For example: I add the text: Last News in the world.
I would like to have the width of the block as wide as the text, but the corners should still remain as a curve.
CSS:
.cat-box-title h2 {
background: transparent url(.../images/testtitle.png) repeat-y;
padding-left: 5px;
color:#5E5E5E;
float:left;
margin-right:10px;
font-size: 22px;
font-family: BebasNeueRegular, arial, Georgia, serif;
}
HTML:
<div class="cat-box-title">
title
</div>
Your solution will be more easy if you use the border-radius instead of background image.
.round-btn
{
background:#4679bd;
color: #FFF;
border-radius:5px;
padding : 10px;
border:none;
}
of-course you need to check the browser compatibility whether your browser supports this property or not. If not then you need to use some hack.
JsFiddle Demo
and if you goes with background-image solution then you need to use two images; one for left side border-radius and another one for right side and use the background-color for rest of the button.
CSS:
.cat-box-title {
background-color: #4679bd;
color:#5E5E5E;
float:left;
border-radius:5px;
margin-right:10px;
font-size: 22px;
padding: 5px;
font-family: BebasNeueRegular,arial,Georgia, serif;
}
I'm trying to override the default form styling for two form elements so that the text box and button are both the same height and are side by side so that it looks like they are one element.
In some browsers it looks fine but in some they are a pixel or two off vertically.
Here is a jsfiddle demo. Opera and Firefox on OS X are giving me issues.
http://jsfiddle.net/QS3ec/6/
*, *:before, *:after {-moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;}
input[type="text"] {
background-color: #fafafa;
padding: 7px;
font-family: helvetica, arial, sans-serif;
font-size: 1.2em;
margin-bottom: 20px;
display: block;
border: solid 2px #bbb;
color: #6f6f6f;
}
input[type="submit"] {
background-color: #fafafa;
font-family: helvetica, arial, sans-serif;
font-size: 1.0em;
font-weight:bold;
padding: 7px;
color: #6f6f6f;
}
input[type="submit"]:hover {
background-color: #ff379f;
color: #fafafa;
}
#subscription-email-text-field {
display:inline-block;
font-size:0.9em;
font-weight:400;
border:0;
width:250px;
height:32px;
margin:0;
}
#subscribe-button {
display:inline-block;
border-width:0px 0px 0px 1px;
margin:0;
height:32px;
}
<div style="background-color:black; padding:20px;">
<form>
<input type="text" id="subscription-email-text-field" name="email" placeholder="Enter Email for Newsletter"><!--
--><input type="submit" id="subscribe-button" value="subscribe">
</form>
</div>
One simple fix is to modify the following CSS rule:
#subscription-email-text-field {
vertical-align: top;
display:inline-block;
font-size:0.9em;
font-weight:400;
border:0;
width:250px;
height:32px;
margin:0;
}
Adding vertical-align: top takes care of the baseline alignment.
See demo at: http://jsfiddle.net/audetwebdesign/EmAnr/
Footnote:
To add the left border on the button element, remember to add the border styling,
which can be done as follows:
#subscribe-button {
display:inline-block;
border: 1px solid black;
border-width:0px 0px 0px 1px;
margin:0;
height:32px;
}
All I've done is increased the height of the submit box:
height: 46px;
http://jsfiddle.net/QS3ec/9/
This is really tough. I've Tested in Safari, Firefox, Opera and Chrome on Mountain Lion so this may not be the right solution.
I believe the problem is that the inputs are replacement elements that have been rendered by the browser using non-CSS mechanisms so styling may not apply as you would expect. I had a similar question in the past that shed some light on this sort of thing. There always seems to be strange behavior when trying to style old UI components, buttons, inputs, etc.
Display Table Cell inconsistency.
Problem is the padding you have given to the text box. On certain
browsers padding has only horizontal effect on input type = button or submit.
// fix
add 'box-sizing: content-box' rule to the input[type='submit'] { } closure.
This will do on certain browsers as only few have implemented it.
As a workaround set height of the submit button to
"height of text-box + ( 2 * padding given to text-box')
inorder to account for the missing vertical padding.
This is the best way to achieve your goal (cross-browser).
eg: height of your text-box = 32px. so height of the button = 32 + 2 * 7 = 46px
This is what I want the chicklet box to look like:![]1
For some reason I can not use negative margins to get the twitter image to go to the center of the box. Is there something wrong with my parent-child relationship?
My css is in an external sheet, but here it is:
<style type="text/css">
#chicklet_container {
margin:20px auto 0px auto;
width:540px;
height:215px;
}
#chicklet_box {
margin:0px 0px 10px 0px;
width:190px;
height:160px;
border-style:solid;
border-width:33px 5px 5px 5px;
border-color:#45BA88;
position:relative;
}
#chicklet_box2 {
margin:-30px 0px 10px 0px;
width:190px;
height:160px;
border-style:solid;
border-width:0px 0px 30px 0px;
border-color:#3f4040;
}
#chicklet_text {
text-align:center;
margin:-196px 0px 0px 0px;
color:#FFF;
width:190px;
font-family:"Verdana, Geneva, sans-serif";
font-size:27px;
line-height:20px;
}
#chicklet_text2 {
text-align:center;
margin:139px 0px 0px 0px;
color:#FFF;
width:190px;
font-family:"Proxima, Nova, Ultralight";
font-size:26px;
line-height:20px;
}
#chicklet_box img {
margin:-250px 0px auto 5px;
}
</style>
Here is the html:
<div id="chicklet_container">
<div id="chicklet_box">
<div id="chicklet_box2">
</div>
<div id="chicklet_text">Follow Me</div>
<div id="chicklet_text2">#soandsoandso</div>
<img src="images/twitter.jpg" alt="">
</div>
</div>
Why are you using so much margin to align the twitter bird image or text. Use as low margins as possible. Instead this, try using that image position:absolute; and top ,left properties. It'll be more clean. But one thing to remember if you are using absolute position for an element ,check if its outer or parent element is positioned or not, if it is not then things may go worse and that child element might go somewhere else.
Negative margins are not a hack - W3C even says: "Negative values for margin properties are allowed..."
Read More: http://www.smashingmagazine.com/2009/07/27/the-definitive-guide-to-using-negative-margins/
I do agree in this case though they may be over-emphasized.
Why do you have Chicklet Box 2 inside of Chicklet Box 1? I'm assuming each box represents an icon... am I wrong?
I want to make a reusable tooltip. The span following the image is not showed, when you go over it the span must appear. But is doesn't work. Does anybody has an idea? The span stay forever in display none.
Html code
<div>
<div>Sharing</div>
<img class="info-tooltip" src="system-help.png" alt="Info">
<span>sdfmhdsjlfhsdljkqhfjkldsqfhljkqdshflsqd</span>
</div>
ccs code
.info-tooltip + span{
display: none;
}
.info-tooltip:hover + span{
display:block;
position:absolute;
width: 105px;
line-height:8px;
top:10px;
left:15px;
background-color: #E9F2FF;
padding:5px;
font-size:10px;
color:#444444;
text-decoration:none;
font-family:Verdana, Arial, Helvetica, sans-serif;
z-index:100040000;
}
you should try to surround your image with a div tag:
<div class="info-tooltip"><img src="system-help.png" alt="Info"></div>
Following menu, I expect entire area to be click-able, but IE it doesn't, reason is I'm using text shadow filter, if I remove filter: dropshadow() and apply float:left; my expectation will be set, any workaround to make this done.
HTML
<div><a href='#'>Home</a></div>
<div><a href='#'>Contact us</a></div>
<div><a href='#'>Feedback</a></div>
<div><a href='#'>Products</a></div>
CSS
a{
color:#f00;
font-size:15px;
text-shadow: -1px -2px 2px #212121;
filter: dropshadow(color=#212121, offx=-1, offy=-2);
padding: 13px 0 0 16px;
display:block;
height:25px;
width:100%;
zoom:1;
line-height: 30px;
}
div {
height:40px;
padding-top:5px;
border:#999 solid 1px;
margin-bottom:5px;
}
Fiddle also for reference http://jsfiddle.net/eHgKs/
many of the css doesn't work on IE
a simple work around as I prefer is to put an image of each of the link
I know it's not worth but still.