I have a problem with my button. When I wish to click on my button, normally the color of the button which is "blue" should change of color in black.
It seems my background color (black) is not whole???
.more-information{
position:absolute;
height: 33px;
width: 158px;
background-color: #005dbe;
color: white;
line-height: 33px;
border:none;
padding:7px 0 7px 0;
border-radius:20px;
text-transform: uppercase;
text-align: center;
font-weight: bold;
}
.more-information a{
color: #f2f2f2;
text-decoration: none;
display: block;
height: 100%;
width: 100%;
}
.more-information a:hover{
background-color: black;
color: white;
}
<div class="more-information">Login</div>
I moved most of the CSS from the outer div to the <a> instead and now it behaves as you might expect.
.more-information{
position:absolute;
height: 33px;
width: 158px;
}
.more-information a{
color: #f2f2f2;
text-decoration: none;
display: block;
background-color: #005dbe;
color: white;
line-height: 33px;
border:none;
padding:7px 0 7px 0;
border-radius:20px;
text-transform: uppercase;
text-align: center;
font-weight: bold;
}
.more-information a:hover{
background-color: black;
color: white;
}
<div class="more-information">Login</div>
Try this.
.more-information{
position:absolute;
height: 33px;
width: 158px;
background-color: #005dbe;
color: white;
line-height: 33px;
border:none;
padding:7px 0 7px 0;
border-radius:20px;
text-transform: uppercase;
text-align: center;
font-weight: bold;
}
.more-information a{
color: #f2f2f2;
text-decoration: none;
display: block;
height: 100%;
width: 100%;
}
.more-information:hover{
background-color: black;
color: white;
}
<div class="more-information">Login</div>
Change
.more-information a:hover{
to
.more-information:hover{
Related
Here is my problem code and advice me something fot the portfolio pls https://codepen.com/LukaBarliani/pen/xrGyRy
Run your CSS through any CSS Linter and you will know why.
http://csslint.net/
Your CSS works fine after fixing some issues and ran through a CSS beautifier.
body,
html {
width: 100%;
height: 100%;
}
body,
h1,
h2,
h3,
h4,
h5,
h6 {
font-family: "Lato", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-weight: 700;
}
body {
background-image: url("");
background-repeat: no-repeat;
}
.button1 {
background-color: #008CBA;
border: none;
color: white;
padding: 12px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
border-radius: 8px;
}
.button2 {
background-color: #4CAF50;
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
border-radius: 8px;
}
.button3 {
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
border-radius: 8px;
}
.intro-message {
position: relative;
padding-top: 20%;
padding-bottom: 20%;
}
.intro-header {
padding-top: 50px;
padding-bottom: 50px;
text-align: center;
background: url('https://40.media.tumblr.com/1b916597d3e174399cb7adadddb66ede/tumblr_nt5uk4psl31ud7rr3o1_1280.jpg') no-repeat center center fixed;
background-size: cover;
height: 855px;
}
li {
float: left;
border-right: 1px solid #bbb;
}
a {
display: block;
padding: 8px;
background-color: #dddddd;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
position: fixed;
top: 0;
width: 100%;
border: 1px solid #e7e7e7;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
/* Change the link color to #111 (black) on hover */
li a:hover {
background-color: #111;
}
.active {
background-color: #4CAF50;
}
li:last-child {
border-right: none;
}
I need to reproduce following button:
I have already tried to create it, but the arrow on the right is not the same as in the picture. How can I reproduce the same white arrow?
.sBtn {
display: inline-block;
background: #908589;
border: 0;
color: #fff;
font-weight: 700;
font-size: 1.2em;
letter-spacing: 0.04em;
line-height: 2.5em;
padding: 0 0 0 1em;
outline: none;
text-decoration: none;
margin-top: 14px;
}
...and so on...
https://jsfiddle.net/jobgaraux/h81z00jL/1/
Here I made it for you jsFiddle
Edited HTML:
<span class="arrowBtn"> <span class="icon"></span></span>
You can create CSS3 arrow from borders:
.sBtn-go .arrowBtn .icon {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 0;
height: 0;
border-style: solid;
border-width: 15px 0 15px 13px;
border-color: transparent transparent transparent white;
}
may be this will help youl
.sBtn {
display: inline-block;
background: #908589;
border: 0;
color: #fff;
font-weight: 700;
font-size: 1.2em;
letter-spacing: 0.04em;
line-height: 2.5em;
padding: 0 0 0 1em;
outline: none;
text-decoration: none;
margin-top: 14px;
}
.arrowBtn {
display: inline-block;
line-height: 2.5em;
text-align: center;
background: #333;
color: white;
font-size: 1em;
width: 2.5em;
transition: margin 200ms;
margin-left: .75em;
position:relative;
left:2px;
}
.sBtn-go .arrowBtn {
background-color: #B6AFB1;
}
.sBtn-go .arrowBtn:hover {
}
.sBtn-go .arrowBtn {
background-color: desaturate(darken(#F8AD6C,5%),5%);
}
<button class="sBtn sBtn-go" name="search">Search<span class="arrowBtn">►</span></button>
.sBtn {
display: inline-block;
background: #908589;
border: 0;
color: #fff;
font-weight: 700;
font-size: 1.2em;
letter-spacing: 0.04em;
line-height: 2.5em;
padding: 0 0 0 1em;
outline: none;
text-decoration: none;
margin-top: 14px;
}
.arrowBtn {
display: inline-block;
line-height: 2.5em;
text-align: center;
background: #333;
color: white;
font-size: 1em;
width: 2.5em;
transition: margin 200ms;
margin-left: .75em;
}
.sBtn-go .arrowBtn {
background-color: #B6AFB1;
}
.sBtn-go .arrowBtn:hover {
}
.sBtn-go .arrowBtn {
background-color: desaturate(darken(#F8AD6C,5%),5%);
}
<button class="sBtn sBtn-go" name="search">Search<span class="arrowBtn">►</span></button>
I want a text-area with black background to be within DIV with white background. Text-area should not fill the complete DIV so the DIV's white color is still seen around text-area. DIV itself should occupy only 80% of the screen's width (or browser's tab). The problem is that the DIV's white background ain't seen around text-area.
.mydiv {
vertical-align: middle;
width: 80%;
text-align: left;
padding-top: 10px;
padding-left: 20px;
padding-right: 20px;
background: white;
}
.mytextarea {
height: 100px;
width: 100%;
position: relative;
padding: 2px 2px;
font-size: 12px;
font-weight: bold;
float: left;
border-radius: 10px;
font-family: 'Helvetica', cursive;
color: white;
text-decoration: none;
background-color: black;
border-bottom: 4px solid #2980B9;
border: 2px solid blue;
outline: 0;
}
You can use display:inline-block; instead of float:left;
.mytextarea {
height: 100px;
width: 100%;
position: relative;
padding: 2px 2px;
font-size: 12px;
font-weight: bold;
display: inline-block;
border-radius: 10px;
font-family: 'Helvetica', cursive;
color: white;
text-decoration: none;
background-color: black;
border-bottom: 4px solid #2980B9;
border: 2px solid blue;
outline: 0;
}
Jsfiddle
.mydiv {
vertical-align: middle;
width: 80%;
text-align: left;
padding-top: 10px;
padding-left: 20px;
padding-right: 20px;
background: red;
}
.mytextarea {
height: 100px;
width: 100%;
position: relative;
padding: 2px 2px;
font-size: 12px;
font-weight: bold;
display: inline-block;
border-radius: 10px;
font-family: 'Helvetica', cursive;
color: white;
text-decoration: none;
background-color: black;
border-bottom: 4px solid #2980B9;
border: 2px solid blue;
outline: 0;
}
<div class="mydiv">
<textarea class="mytextarea"></textarea>
</div>
I'm designing a website and having a problem with my links. When I click on them they shift to the left. Sometimes this prevents them from actually being clickable. I have not been able to find a single solution through googling and have no idea what part of my code is causing this. Any help would be appreciated.
Website
body {
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
color: #151515;
font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
background-color: #F9F9F9;
font-style: normal;
font-variant: normal;
font-weight: lighter;
font-size: small;
list-style-type: none;
text-align: center;
}
#header {
background-color: #171717;
float: left;
text-align: center;
height: 75px;
width: 100%;
}
#header1 {
padding-top: 21px;
background-color: #171717;
width: 20%;
float: left;
text-align: center;
}
#header2 {
background-color: #171717;
float: left;
text-align: center;
width: 20%;
padding-top: 33px;
font-size: 11px;
}
#header2 ul {
list-style-type: none;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
padding-left: 0px;
padding-top: 0px;
padding-right: 0px;
padding-bottom: 0px;
background-color: undefined;
font-size: small;
}
#header2 a {
width: 20%;
display: block;
float: left;
text-align: center;
font-size: 11px;
font-weight: bold;
text-decoration: none;
color: #CCCCCC;
}
#header2 a:hover , a:active, a:focus{
text-decoration: none;
color: #ffffff;
float: left;
}
#header3 {
float: left;
width: 20%;
text-align: center;
font-size: 11px;
padding-top: 23px;
font-weight: bold;
-webkit-box-shadow: 0px 0px;
box-shadow: 0px 0px;
}
#search {
width: 15%;
}
#search input[type="text"] {
background-repeat: no-repeat;
background-position: 10px 6px;
background-image: url(https://gray.secure-host.com/thefilterconnection/shopsite_sc/store/html/media/search-dark.png);
background-color: #909090;
border: 0 none;
font: bold 12px Arial,Helvetica,Sans-serif;
color: #CCCCCC;
padding-top: 6px;
padding-bottom: 6px;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
text-shadow: 0 2px 2px rgba(0, 0, 0, 0.3);
-webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(0, 0, 0, 0.2) inset;
-moz-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(0, 0, 0, 0.2) inset;
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(0, 0, 0, 0.2) inset;
-webkit-transition: all 0.7s ease 0s;
-moz-transition: all 0.7s ease 0s;
-o-transition: all 0.7s ease 0s;
transition: all 0.7s ease 0s;
padding-left: 35px;
}
#header4 {
width: 20%;
text-align: center;
float: left;
padding-top: 16px;
font-size: 11px;
font-weight: bold;
color: #CCCCCC;
}
#header5 {
width: 20%;
background-color: #171717;
text-align: center;
padding-top: 13px;
font-size: 11px;
font-weight: bold;
float: left;
color: #CCCCCC;
}
#productmenucontainer {
background-color: #171717;
width: 100%;
clear: both;
float: center;
height: 30px;
}
#productmenu {
width: 100%;
background-color: #171717;
padding-top: 3px;
text-align: center;
right: auto;
left: auto;
max-width: 100%;
}
#container1 {
float: left;
width: 100%;
background-color: #EBEBEB;
position: relative;
right: 75%;
}
#container2 {
float: left;
width: 100%;
background-color: #FFFFFF;
overflow: hidden;
position: relative;
}
#container3 {
min-width: 740px;
max-width: 1000px;
margin-left: auto;
margin-right: auto;
clear: left;
float: none;
display: inline-block;
-webkit-box-shadow: 1px 1px 5px 1px #DBDBDB;
box-shadow: 1px 1px 5px 1px #DBDBDB;
width: 100%;
}
#sidebar1 {
float: left;
width: 17%;
position: relative;
left: 75%;
padding-left: 4%;
padding-top: 2%;
text-align: left;
padding-bottom: 2%;
padding-right: 4%;
}
#sidebar1 ul {
list-style-type: none;
margin-left: -25px;
margin-top: 2px;
float: left;
width: 100%;
text-align: left;
}
#main {
float: left;
width: 64%;
position: relative;
left: 75%;
padding-left: 4%;
padding-top: 2%;
padding-bottom: 2%;
padding-right: 4%;
}
#footer {
background-color: #F9F9F9;
font-weight: lighter;
padding-top: 4px;
font-size: 11px;
text-align: center;
clear: left;
padding-bottom: 4px;
color: #6C6C6C;
min-width: 740px;
max-width: 1000px;
width: 100%;
margin-right: auto;
margin-left: auto;
position: relative;
display: inline-block;
}
#disclaimer {
text-align: center;
float: left;
width: 23%;
padding-top: 5px;
padding-bottom: 5px;
padding-left: 1%;
padding-right: 1%;
}
#creditcards {
width: 35%;
float: left;
padding-top: 5px;
}
#share {
width: 20%;
text-align: center;
float: left;
padding-top: 5px;
}
#follow {
float: left;
padding-top: 5px;
width: 20%;
}
#copyright {
clear: left;
float: left;
text-align: center;
padding-top: 5px;
width: 100%;
background-color: #626262;
color: #F3F3F3;
font-size: x-small;
font-weight: bold;
font-style: italic;
}
a:link {
color: #575757;
text-decoration: none;
font-weight: bold;
font-size: small;
}
a:visited {
color: #6C6C6C;
}
a:hover, a:active, a:focus {
text-decoration: none;
color: #7F7F7F;
}
.menu {
background-color: #B1CCE0;
text-align: center;
width: 100%;
min-width: 740px;
max-width: 1000px;
left: auto;
right: auto;
float: left;
margin-left: auto;
margin-right: auto;
}
.menu > span {
display:inline-block;
margin:0 auto;
}
#nav {
display: inline;
text-align: left;
position: relative;
list-style-type: none;
z-index: 1000;
}
#nav > li {
float: left;
padding: 0;
position: relative;
color: #6C6C6C;
}
#nav > li > a {
border: 1px solid transparent;
color: #CCCCCC;
display: block;
font-size: small;
padding: 3px 10px;
position: relative;
text-decoration: none;
font-weight: bolder;
-webkit-box-shadow: 0px 0;
box-shadow: 0px 0;
text-shadow: 0px 0;
}
#nav > li > a:hover {
background-color: #e4ecf4;
border-color: #999;
}
#nav > li.selected > a {
background-color: #171717;
border-color: #999999 #999999 #FFFFFF;
z-index: 2;
}
#nav li div {
position:relative;
}
#nav li div div {
background-color: #FFFFFF;
border: 1px solid #999999;
padding: 12px 0;
display: none;
margin: 0;
position: absolute;
top: -1px;
z-index: 1;
width: 190px;
}
#nav li div div.wrp2 {
width: 380px;
background-color: #171717;
}
#nav .sep {
left:190px;
border-left:1px solid #E3E3E3;
bottom:0;
height:auto;
margin:15px 0;
position:absolute;
top:0;
width:1px;
}
#nav li div ul {
padding-left: 10px;
padding-right: 10px;
position: relative;
width: 170px;
float: left;
list-style-type: none;
background-color: #171717;
}
#nav li div ul li {
margin:0;
padding:0;
}
#nav li div ul li h3 {
border-bottom: 1px solid #E3E3E3;
color: #4F87C5;
font-weight: bold;
margin: 0 5px 4px;
padding-bottom: 3px;
padding-top: 3px;
font-size: small;
}
#nav li div ul li h3 a {
color: #4F87C5;
font-weight: bold;
font-size: small;
}
#nav li div ul li h3 a:hover {
color: #89B3E1;
font-weight: bold;
font-size: small;
}
#nav li ul ul {
padding-top: 0;
padding-right: 0;
padding-left: 0;
padding-bottom: 0;
bottom: 8px;
}
#nav li ul ul li {
margin-bottom: 1px;
padding-top: 3px;
padding-right: 5px;
padding-left: 5px;
padding-bottom: 3px;
}
#nav li ul ul li a {
color: #CCCCCC;
display: block;
text-decoration: none;
font-size: 10px;
font-weight: bold;
}
#nav li ul ul li a:hover{
background-color: #171717;
color: #ffffff;
}
#header2 a:hover , a:active, a:focus{
text-decoration: none;
color: #ffffff;
**float: left;**
}
This is the part I'm most suspicious of. What happens without the float: left - or, if you apply it to those links in their original CSS rule, not the :active one?
You have an issue in your css file demopage.css on line 61, you need to remove a:active and a:focus from that declaration. Basically on every click on all a tags on your page they get a float: left value. So if you remove them from it everything will work perfectly :)
I have tested it on your site and it works :)
So from this
#header2 a:hover, a:active, a:focus {
text-decoration: none;
color: #ffffff;
float: left;
}
to this
#header2 a:hover {
text-decoration: none;
color: #ffffff;
float: left;
}
I'm sort of a noob to developing websites, but hope to learn more. The problem I'm having is that my main page content goes under my footer if the page holds more and more content. ( https://i.imgur.com/LeqVBwl.png )
Either I'm doing something wrong, or I'm just missing something but, here's how I did it:
How could I fix this? Do I have to add/remove something?
The "position: absolute" is so it says at the bottom
CSS:
body {
margin: 0 0 65px;
background: #000000 url(../images/bg.png);
padding-bottom: 65px;
}
#menu {
height: 50px;
padding-left: auto;
padding-right: auto;
background: #ccc no-repeat left top;
font-family: Arial, Helvetica, sans-serif;
}
#menu ul {
margin: 0;
padding: 0;
list-style: none;
line-height: normal;
}
#menu li {
float: left;
}
#menu a {
display: block;
float: left;
padding: 18px;
margin-right: 1px;
background: lightgray no-repeat;
text-decoration: none;
font-size: 10px;
color: #FFFFFF;
}
#menu a:hover {
color: #FFFFFF;
background: darkgray;
}
.main {
width: 1300px;
margin-right: auto;
margin-left: auto;
margin-top: 20px;
border: 1px black solid;
}
.content {
font-family: "Trebuchet MS", Helvetica, sans-serif;
margin-top: 40px;
margin-right: auto;
border: 1px solid #ccc;
width: 800px;
float: left;
background: white;
border-radius: 2px;
}
.content h2 {
font-size: 18px;
font-weight: bold;
border-bottom: 1px solid #ccc;
text-align: center;
}
.sidebar {
font-family: "Trebuchet MS", Helvetica, sans-serif;
margin-top: 40px;
margin-left: 30px;
margin-right: auto;
border: 1px solid #696969;
width: 300px;
float: right;
background: #EDEDED;
border-radius: 2px;
}
.sidebar h2 {
font-size: 15px;
font-weight: bold;
border-bottom: 2px solid #ccc;
text-align: center;
}
#footer {
font-family: "Trebuchet MS", Helvetica, sans-serif;
background: #ccc no-repeat left;
border-top: 3px solid;
left: 0;
bottom: 0;
height: 65px;
width: 100%;
}
#footer .footer-content {
font-weight: bold;
color: #262626;
font-size: 14;
}
#footer .footer-content a {
color: #545454;
text-decoration: none;
font-size: 14px;
}
#footer .footer-content a:hover {
color: #6E6E6E;
text-decoration: none;
font-size: 14;
}
HTML:
<div id="footer">
<div class="footer-content">
<center>
Home | Forums | Contact | Signup |Login
</center>
</div>
</div>
Fixed
I seemed to have fixed my problem. I just added:
<div style="clear: both;"> </div>
It's because you're footer has position: absolute; applied, this means it jumps out of the normal flow of the page. To fix it, add a padding equal to the height of the footer to the bottom of the page.
body {
padding-bottom: 65px;
}