I have looked for other ways to fix this including display:block; but none seem to work,
can any one tell me what I'm doing wrong?
Here's my code:
HTML:
<header>
<div id="menu">
<div id="item"><b>HOME</b></div>
<div id="login"><b>LOGIN</b></div>
<div>
</header>
CSS:
#login {
background-color: white;
color: black;
font-size: 20px;
line-height: 30px;
height: 30px;
width: auto;
border: 3px solid white;
border-radius: 30px;
text-align: center;
float: right;
margin-left: 10px;
margin-right: 10px;
padding-left: 10px;
padding-right: 10px;}
#login :hover {
background-color: black;
color: white;}
Here's the JSFiddle
The main problem I'm having is that for me in Chrome, the text background color changes but the padding does not, as I expected. I wish to find a way to do so.
If you want to change the background color of the div and not the text you should remove the space between #login :hover so that it is #login:hover
White-space matters for CSS selectors. If you put a space between it mean the next selector is for any descendant of the first selector.
When you have #login :hover it means that any hovered child/descendant element will be affected by the style rule but not #login itself.
Remove the space between the #login :hover so it will be #login:hover .
Related
In blue there are my div.
I would like with CSS make sure that the space between the div and the image there is and the button over the black top bar but I do not know how to do, any ideas?
My CSS
.login_reg{
float: right;
color: #e0e0ba;
width: 200px;
height: 200px;
}
.login_reg button{
color: #FFF;
font-weight: bold;
background-color: Transparent;
background-repeat:no-repeat;
border: none;
cursor:pointer;
overflow: hidden;
outline:none;
}
You can use a margin-top to set how tall the border is and space it out
you can use clear:both to avoid float:right impact for next div
Use margin-top in div having class .login_reg`
.login_reg{
float: right;
color: #e0e0ba;
width: 200px;
height: 200px;
margine-top: 50px;
}
How do you fix the grey border line so that it comes right down to the bottom of the green highlight instead of cutting off halfway?
I have provided my code below at codepen.
Thanks in advance for your help :)
html
<div id="status_bar">
<div class="admin_status_box">
<ul>
View & Delete posts
View & Delete members
</ul>
</div>
</div>
css
#status_bar {
width: 700px;
height: 60px;
background: #efefef;
float: left;
}
.admin_status_box {
background: #efefef;
height: 60px;
border-right: 1px solid #d6d6d6;
}
.admin_status_box ul {
margin: 0px;
padding: 0;
}
.admin_status_box li {
text-decoration: none;
}
.admin_status_box a {
text-decoration: none;
padding: 0 30px 0 30px;
text-align: center;
height: 60px;
float: left;
line-height: 60px;
border-right: 1px solid #d6d6d6;
}
.admin_status_box a.active {
border-bottom: 10px solid #619e4c;
}
.admin_status_box a:hover {
background: #fff;
}
First, your HTML should be valid by actually using <li> tags. Next, you need to know, that borders meet at an angle and the corners are interpolated. A nice example is
div.test {
height: 200px;
width: 300px;
border-radius: 40px;
border-width: 20px 0 5px 0;
border-color: #000;
border-style: solid;
}
So, in order to fix your problem, you need to assign the borders to different elements. If you insert the <li> tags you have two elements to work with. See the demo for the following code.
.admin_status_box li {
border-right: 1px solid #d6d6d6;
}
.admin_status_box a.active {
border-bottom: 10px solid #619e4c;
}
You need li elements to be the first child of a ul element. If you put each a element inside of a li element, you can then set the border on the li element and the border have the desired result. After this is done, make sure you remove the 1px border from .admin_status_box
It may take a bit of CSS to get them positioned exactly how you would want them.
See this edited codepen
EDIT Typo
You will have to add a separate div to act as the bar. You can't tell the side border to shorten because that's the behavior it's set. Best bet is to use the div you have commented out as green_box.
I just corrected the html, displayed the li's inline-block and added the border bottom to the li's instead of the link. http://codepen.io/anon/pen/hvcBI
How can I prevent the top edge from being cut off in this code: http://jsfiddle.net/ebW6F/?
HTML code:
<div id="text">
abcd efgh
</div>
CSS code:
#text {
display: inline;
border: 3px solid black;
padding: 10px;
font-size: 40px;
}
Here is one way to do that:
#text {
display: inline-block;
border: 3px solid black;
padding: 10px;
font-size: 40px;
}
Since you appear to be creating a box of some kind, use display:inline-block instead of just display:inline.
See: http://jsfiddle.net/ebW6F/2/
Can you make round cap underlines (as in the above image) with CSS? How?
Is there a way to do this with border-bottom? border-radius produces this stylish effect instead:
EDIT: I missunderstood what hpique wated, but this should work:
#test {
font-size: 50px;
background: transparent;
border-radius: 10px;
height: 10px;
width: 255px;
box-shadow: 0 55px 0 0 #000;
font-family: sans-serif;
}
<div id="test">Hello world</div>
Basically I'm putting the text on a div, and the box shadow will be of the same size as the set height and width for that div, just play with the height/width and you should get what you want...
JSBin Demo
Screenshot from the Demo:
Yes, it’s possible. Add a block element using :after with no content and give it desired width/height like so:
h1:after {
content:"";
float:left;
background:green;
width:100%;
height:6px;
border-radius: 3px;
}
Fiddle here: https://jsfiddle.net/toqL0agq/1/
I tried doing this same thing with the accepted answer, but found I was still getting the undesired result shown in the question. You can achieve this with a psuedo class:
HTML:
<span class="kicker">Hello World</span>
CSS:
.kicker {
font-size: 1rem;
position: relative;
&:after {
content: '';
display: block;
width: 100%;
height: 6px;
border-radius: 6px;
background: #000;
position: absolute;
bottom: 0;
left: 0;
}
}
One of the tricks i just learned is instead of working with div borders try adding an :after selector to the heading like :
h1:after{
content: " ";
display: block;
width: 1.5em;
height: .2em;
background-color: #f0860c;
border-radius: 10px;
}
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h1>test</h1>
</body>
</html>
No. If you want to do this purely with HTML+CSS you would need a secondary element to sit beneath the text, and then apply curvature and background colour to that. Alternatively, and cringe-worthy, in my opinion, you could use an image.
Like youtag's answer, my solution uses pseudo-elements—but my underline only runs the length of the text and can wrap onto multiple lines (with an underline running beneath each line of text).
Basically, I manually cap the ends of the element's border with pseudo-element circles before and after the element:
h1 a {
text-decoration: none;
position: relative;
border-bottom: 15px solid;
padding-bottom:3px;
}
h1 a:hover, h1 a:focus {
border-bottom: 15px solid #eb6d32;
}
h1 a:before, h1 a:after {
content: '';
height: 15px;
width: 15px;
background-color: currentColor;
border-radius: 15px;
position: relative;
display: inline-block;
vertical-align: text-bottom;
margin-bottom: -18px;
}
h1 a:before {
left: .2ex;
margin-left: -.4ex;
}
h1 a:after {
margin-right: -.4ex;
right: .2ex;
}
I use left and right on the pseudo-elements so the ends don't stick out too far past the text.
See my codepen.
you can do that by using a div beneath the text and setting its border-radius to 2000px. i think that will be simpler
HTML:
<div class="wrapper">
<span>Hell World</span>
<div class="underline"></div>
</div>
CSS:
.underline{
height:0px;border: 3px solid black;
border-radius: 2000px;
}
.wrapper{
display:inline-block;
}
JQUERY SNIPPET:
var arbitrarynumber = 5
$('.underline').width($('.underline').parent().width()-arbitrarynumber)
I have a couple of links encased in a border with a background... for some reason, the link is NOT clickable on the text, i.e., the cursor does not change to a hand on the link. It is only clickable on the BOTTOM border.... not sure why.
When I change around some of the CSS like the padding/margins/float, sometimes the links aren't even clickable at all. What could possibly be causing this??
THE CODE
<div id="teams">
<ul>
<li>Yankees</li>
<li>Phillies</li></ul>
</div>
CSS
#teams {
position: relative;
top: -10px;
left: -25px;
}
#teams a{
color: #000;
padding: 10px 0px 10px 0px;
}
#teams li {
background: #EEE;
padding: 7px 2px;
text-align: center;
width: 75px;
float: left;
margin: 15px;
font-size: 1.2em;
border: 2px solid #C8C8C8;
border-radius: 5px;
}
SOLVED
There was an invisible element blocking it. Credit to kei.
Right-click on the link and Inspect element. See if there are any transparent elements overlapping the link.