Code:
<style>
.RoundButton
{
text-align: center;
text-decoration: none;
font-size: 34px;
width: 70px;
height: 40px;
background-color: #ffffff;
border-radius: 15px;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
border: 5px solid #000000;
padding: 5px;
}
.RoundButton:link {color: #000000;}
.RoundButton:visited {color: #000000;}
.RoundButton:hover {color: #000000;border: 5px solid #ff0000;}
.RoundButton:active {color: #000000; border: 5px solid #0000ff;}
</style>
Then I have some HTML:
<center><div class="RoundButton">Hi</div></center>
When I view it it shows the default link colors, but the round button changing color
works. I looked on W3Schools, and their example looks like mine, but works. Help?
Please make your question more specific. What is the issue on your styling?
Then change the .RoundButton:hover to a:hover {} to what ever you like.
The HTML:
<div class="RoundButton">Hi</div>
The CSS
.RoundButton
{
text-align: center;
text-decoration: none;
font-size: 34px;
width: 70px;
height: 40px;
background-color: #ffffff;
border-radius: 15px;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
border: 5px solid #000000;
padding: 5px;
margin:0 auto;
}
.RoundButton:hover {color: #000000;border: 5px solid #ff0000;}
.RoundButton:active {color: #000000; border: 5px solid #0000ff;}
a:link {color: #000000;}
a:visited {color: #000000;}
The fiddle.
I centered the div using margin:0 auto instead of the <center> tag, and adjusted the CSS.
Related
I am trying to make to simple buttons. Easy. However they will not for some reason round off the corners of the outline. This is what i have for my HTML and CSS
<a class="login-worker" href="">LOG IN AS A WORKER</a>
<a class="login-user" href="">LOG IN AS A USER</a>
.login-worker,
.login-user {
font-size: 22px;
font-weight: 600;
outline: 3px solid #000000;
margin: 5px;
text-decoration: none;
color: #000000;
padding: 20px;
padding-right:75px;
padding-left:75px;
position: relative;
border-radius: 5px;
background-color: #248FD4;
}
Use border: solid 2px #000; not outline.
Example here
.login-worker,
.login-user {
display: block;
font-size: 22px;
font-weight: 600;
border: solid 2px #000;
margin: 5px;
text-decoration: none;
color: #000000;
padding: 20px;
padding-right:75px;
padding-left:75px;
position: relative;
border-radius: 5px;
background-color: #248FD4;
}
The cause seems to be outline: 3px solid #000000;
Change to:
border: 3px solid #000000;
border-radius: 5px;
After all, your question states Why won't my **border** round off it's corners?
But if it's outline you need then please see Outline radius? (user289112 provided link but removed his answer)
First heads up is that I'm in my first year at University and I could be making a dumb as balls mistake. However, when I try to get my a:selected to be the same length as my li:hover, the a:selected seems to be off by a few amount of pixels. I've been messing with the padding and still have no luck. Is there a specific reason with my CSS used or a technical problem/browser interpreting it differently?
Here's my CSS:
a {
font-family: Armata;
}
body {
background-image: url(http://i.imgur.com/26DXP2k.png);
background-repeat: repeat;
background-position: fixed;
}
#siteNavigation {
width: 100%;
margin: 55px 0px;
padding: 0px 0px 0px;
text-align: center;
}
#siteNavigation li:hover {
padding: 0px 0px;
background-color: #E03A00;
border-top: 10px solid #E03A00;
border-bottom: 3px solid #BDBFBE;
text-transform: uppercase;
color: #BDBFBE;
}
#siteNavigation a:hover {
color: #BDBFBE;
padding: 10px 45px;
}
#siteNavigation ul {
margin-top: 0px;
color: inherit;
}
#siteNavigation li {
margin: 0px;
padding: 0px 0px;
display: inline;
list-style: none;
color: #E03A00;
background-color: #BDBFBE;
border-bottom: 3px solid #E03A00;
border-top: 6px solid #BDBFBE;
border-left: 1px solid black;
border-right: 1px solid black;
}
#siteNavigation a {
margin: 0px;
padding: 0px 45px;
display: inline;
text-decoration: none;
color: #E03A00;
}
#siteNavigation #selected a {
margin: 0px;
padding: 0px 45px;
background-color: #E03A00;
border-top: 10px solid #E03A00;
border-bottom: 3px solid #BDBFBE;
text-transform: uppercase;
color: #BDBFBE;
}
Here's the HTML:
<!doctype html>
<head>
<title>First Web page</title>
<meta charset="utf-8" />
<meta name="author" content="Matthew Sharp" />
<meta name="description" content="Index page" />
<link href="http://fonts.googleapis.com/css?family=Armata%7cLobster%7cRoboto%7cPontano+Sans" rel="stylesheet" type="text/css">
<link href="main.css" rel="stylesheet" type="text/css">
<!-- Grey Color's {Light to dark}:
FCFFFD
E3E5E4
BDBFBE
7E7F7F
3F403F
ORANGE: E03A00 //Comment used for personal use due to non saved kuler -->
</head>
<body>
<nav id="siteNavigation">
<ul>
<li>
Home
</li>
<li id="selected">
Structure
</li>
<li>
Common Elements
</li>
<li>
CSS Selectors
</li>
<li>
Common CSS
</li>
</ul>
</nav>
<section id="bodyLayer">
</body>
And the results can be seen here:
Cheers.
Solution in JSFiddle
Basically, the problem is that you're applying the selected CSS to the a tag, when you wanted to apply it to the li tag.
The a tag captures the text and a small area around it based on the margin and padding, but the actual "cell" is represented by the li tag, so that's where you want to apply the selected CSS.
#siteNavigation #selected a { /*should be #siteNavigation li#selected*/
margin: 0px;
padding: 0px 45px;
background-color: #E03A00;
border-top: 10px solid #E03A00;
border-bottom: 3px solid #BDBFBE;
text-transform: uppercase;
color: #BDBFBE;
}
I also tidied up some of the CSS, like removing the unnecessary padding, the too-thick border-top for selected, and added this :
#siteNavigation #selected a{
color: #BDBFBE;
}
So the text color would be correct.
Check the JSFiddle for the detailed answer.
Here's a cleaned up version of your navigation:
Demo: http://jsfiddle.net/rxh17e3h/
Use float:left instead of display:inline-block
Use class="selected" istead of id
Control everything from the li. Don't assign hover to the a tag
a {
font-family: Armata;
}
body {
background-image: url(http://i.imgur.com/26DXP2k.png);
background-repeat: repeat;
background-position: fixed;
}
#siteNavigation {
width: 100%;
margin: 55px 0px;
padding: 0px 0px 0px;
text-align: center;
}
#siteNavigation ul {
margin-top: 0px;
color: inherit;
}
#siteNavigation li {
float:left;
margin: 0px;
padding: 0px 0px;
list-style: none;
border-bottom: 3px solid #E03A00;
border-top: 6px solid transparent;
border-left: 1px solid black;
border-right: 1px solid black;
background-color: #BDBFBE;
color: #E03A00;
}
#siteNavigation li a{
padding: 10px 45px;
color:inherit;
text-decoration: none;
}
#siteNavigation li:hover, #siteNavigation li.selected{
color: #BDBFBE;
background-color: #E03A00;
border-top: 6px solid #E03A00;
border-bottom: 3px solid #BDBFBE;
}
The problem is that quite simply you are putting an action on the tag and expecting it to behave in the same way as the same action on an tag. Quite simply the two tags hold a different space on your page. The contains your tag.
So apply the behaviour to one or the other.
Some just target the a tag with a:hover a:selected etc others will target li. Whenever I get problems like this I just comment out the dimension code and un comment until the error appears or just use firebug.
I want to show a p tag or legend tag or any html text like button. But how is it possible? I have tried with css but not working well.
I want to show it like button.
<p class="button" >Submit</p>
or
<a class="button" >Submit</a>
or
<legend class="button" >Submit</legend>
Now need the button class.
Just apply css styles and cursor: pointer; to it to make it appear that it's a button
.button{
display: inline-block;
background: #000;
border-radius: 4px;
font-family: "arial-black";
font-size: 14px;
color: #FFF;
padding: 8px 12px;
cursor: pointer;
}
JSFIDDLE
It is simple with css.
<p class='btn'> Button 1 </p>
And Your CSS
.btn{
float:left;
width:auto;
height:30px;
display:block;
border:1px solid #ff6600;
background:#00ff00;
color:#000;
line-height:30px;
text-align:center;
padding:0 20px;
border-radius:3px;
}
.btn:hover{
cursor:pointer;
}
jsfiddle : http://jsfiddle.net/ob67xnw4/1/
Try This.
Here is the Working FIDDLE
CSS
.button {
width: 75px;
background: #d2d2d2;
text-align: center;
float: left;
color: #000;
line-height: 32px;
text-decoration: none;
}
.button: hover{
width: 75px;
background: #0e567f;
color: #fff;
text-align: center;
float: left;
line-height: 32px;
text-decoration: none;
}
<p class='button'> Submit </p>
.button{
background: -webkit-linear-gradient(top, #CCB5B6 20%, #274936 70%);
width: 100px;
height: 40px;
font-family: sans-serif;
font-size: 25px;
text-align: center;
line-height: 40px;
color: #96F256;
border-radius: 10px;
box-shadow: 0 2px 5px 3px black;
cursor: pointer;
}
.button:hover{
color: white;
}
OUTPUT
I think you should use this code and it is working well. You can change Color according to you.
Live Demo
HTML Code:
<input class="round-button-circle" type="submit" value="Submit"/>
CSS Code:
.round-button-circle {
width: 150px;
height:50px;
border-radius: 10px;
border:2px solid #cfdcec;
overflow:hidden;
font-weight: 15px;
background: #4679BD;
box-shadow: 0 0 3px gold;
}
.round-button-circle:hover {
background:#30588e;
}
Result:
Had just got what did I want.
DEMO JSFIDDLE
.button {
display: inline-block;
outline: none;
cursor: pointer;
border: solid 1px #da7c0c;
background: #478dad;
text-align: center;
text-decoration: none;
font: 14px/100% Arial, Helvetica, sans-serif;
padding: .5em 2em .55em;
text-shadow: 0 1px 1px rgba(0,0,0,.3);
-webkit-border-radius: .5em;
-moz-border-radius: .5em;
border-radius: .3em;
-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2);
-moz-box-shadow: 0 1px 2px rgba(0,0,0,.2);
box-shadow: 0 1px 2px rgba(0,0,0,.2);
}
.button:hover {
background: #f47c20;
background: -webkit-gradient(linear, left top, left bottom, from(#f88e11), to(#f06015));
background: -moz-linear-gradient(top, #f88e11, #f06015);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f88e11', endColorstr='#f06015');
}
.button:active {
position: relative;
top: 1px;
}
I am trying following code for executing one alignment of boxes in right side with two adjacent box in row, please check below code why that main DIV class list_right css in not executing.
Fiddle link.
<style>
.list_right {
float:right;
padding:40px 5px 0px 0px;
width:37%;
position:relative;
}
.part_1 {
width:50%;
float:left;
line-height: 1.7;
}
.logos {
float: left;
width:160px;
margin-left:0px;
margin-bottom:8px;
padding-left: 45px;
padding-top: 1px;
padding-bottom: 3px;
text-decoration: none;
font-family:'Volkhov', arial;
font-size: 19px;
letter-spacing: 1.3px;
line-height: 2.14;
color: #6d6e71;
border: 1px solid;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
-webkit-box-shadow: #666 0px 2px 3px;
-moz-box-shadow: #666 0px 2px 3px;
box-shadow: #666 0px 2px 3px;
border-color: #41c7ee;
behavior: url(/css/pie/PIE.htc);
}
.logos:hover {
border-color: #6d6e71;
background-color: #41c7ee !important;
color: #ffffff !important;
text-decoration: none !important;
}
.site_1 {
background-image: url(http://i.imgur.com/ndWHvar.png) !important;
background-color: #f1f1f1 !important;
background-repeat:no-repeat !important;
background-position: 0px -5px !important;
height:36px;
}
.site_2 {
background-image: url(http://i.imgur.com/ndWHvar.png) !important;
background-color: #f1f1f1 !important;
background-repeat:no-repeat !important;
background-position: 0px -5px !important;
height:36px;
}
</style>
<div class="list_right">
<div class="part_1">
Sites
</div>
<div class="part_1">
Sites
</div>
<div class="d_hidden">
</div>
<div class="clear_both">
</div>
Seems to me (from your code) that you are not closing the list_right tag. Close it and it should work properly... try to indent your code, make it look more clean, so that in the future you will be able to see the problems yourself.
You have <style> tags in your css in your original fiddle link which demonstrates the problem your were having.
Delete them, they shouldn't be there.
That's what's interfering with the list_right class.
FIDDLE
This question already has answers here:
Why is this inline-block element pushed downward?
(8 answers)
Closed 8 years ago.
I have some HTML and CSS that creates inline block elements (divs) that one might find on a landing page. However, they only appear to be vertically aligned correctly when they contain some content (an unordered list) inside the divs. If there is no content in the div, the element get pushed down. Here is a jsfiddle. Here is the code. Can anybody explain why the third div block is not vertically aligned?
EDIT: While I'm comfortable that the "fix" to this issue is to ensure that each div uses "vertical-align:top" in the styling, I'm still a little puzzled as to why I'm required to use this styling in the first place. I would think that the div elements would always line up evenly, regardless of the content inside the divs.
<html>
<head>
<style type="text/css">
body {
font-family: Helvetica;
}
h1 {
margin: 0px;
padding: 10px;
font-weight: bold;
border-bottom: 1px solid #aaaaaa;
font-size: 12px;
}
a {
text-decoration: none;
}
ul {
padding-left: 20px;
}
li {
list-style-type: none;
font-size: 12px;
}
.landing-block {
display: inline-block;
background-color: #eeeeee;
margin-right: 30px;
width: 192px;
height: 140px;
border: 1px solid #aaaaaa;
-moz-box-shadow: 3px 3px 5px #535353;
-webkit-box-shadow: 3px 3px 5px #535353;
box-shadow: 3px 3px 5px #535353;
}
.header {
padding: 10px;
background-color: red;
border-bottom: 1px solid #aaaaaa;
color: #ffffff;
}
a:hover {
text-decoration:underline;
}
h1 > a {
color: #ffffff;
}
h1 > a:hover {
color:#ffffff;
}
li > a {
color: #000000;
}
li > a:hover {
color: #000000;
}
</style>
</head>
<body>
<div>
<div class='landing-block'>
<h1 style='background-color: #3991db;'>
<a href='#'>COMPANIES</a>
</h1>
<ul>
<li><a href='#'>Search Companies</a></li>
<li><a href='#'>New Company</a></li>
<ul>
</div>
<div class='landing-block'>
<h1 style='background-color: #9139db;'>
<a href='#'>PEOPLE</a>
</h1>
<ul>
<li><a href='#'>Search People</a></li>
<li><a href='#'>New Person</a></li>
<ul>
</div>
<div class='landing-block'>
<h1 style='background-color: #c2db39;'>
<a href='#'>Products</a>
</h1>
</div>
<div>
</body>
</html>
inline-block elements are vertical-align:baseline; by default. Change this to vertical-align:top;
.landing-block {
display: inline-block;
background-color: #eeeeee;
margin-right: 30px;
width: 192px;
height: 140px;
border: 1px solid #aaaaaa;
-moz-box-shadow: 3px 3px 5px #535353;
-webkit-box-shadow: 3px 3px 5px #535353;
box-shadow: 3px 3px 5px #535353;
vertical-align:top; /* add this rule */
}
add vertical-align:top; to .landing-block class
Set vertical-align: top for the .landing-block class declaration in your CSS.
Add float: left
.landing-block {
display: inline-block;
background-color: #eeeeee;
margin-right: 30px;
width: 192px;
height: 140px;
border: 1px solid #aaaaaa;
-moz-box-shadow: 3px 3px 5px #535353;
-webkit-box-shadow: 3px 3px 5px #535353;
box-shadow: 3px 3px 5px #535353;
float: left;
}
jsfiddle