How can I get the following CSS to apply to only a specific class as oppose to all links on my page
a:link, a:visited {
display: block;
width: 149px;
font-weight: bold;
color: #FFFFFF;
background-color: #98bf21;
text-align: center;
padding: 4.7px;
text-decoration: none;
text-transform: uppercase;
}
add your class in the css if it's a class you're referening to
a.MyClass:link, a.MyClass:visited {
display: block;
width: 149px;
font-weight: bold;
color: #FFFFFF;
background-color: #98bf21;
text-align: center;
padding: 4.7px;
text-decoration: none;
text-transform: uppercase;
}
or the id
a#MyId:link, a#MyId:visited {
display: block;
width: 149px;
font-weight: bold;
color: #FFFFFF;
background-color: #98bf21;
text-align: center;
padding: 4.7px;
text-decoration: none;
text-transform: uppercase;
}
Related
I am a beginner that learning CSS and JS. I faced a problem in CSS. Please help... thanks
My page
This is the page that I get the problem, and how can I align the text in one line and put them in average space. Check below what I imagine...
This is what I want
Imagine
This is CSS code
body {
background: #292929;
}
h1 {
font-family: Roboto;
background-color: #292929;
display: flex;
align-items: center;
justify-content: center;
color: #ffff
}
div {
align-content: center;
}
.yesButton {
margin-left: 350;
left: 100;
bottom: 0;
width: 65;
margin: initial;
background-color: #575757;
color: #ffff;
text-align: right;
cursor: pointer;
}
.yesButton p {
float: left;
color: #ffff;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 12px;
}
.yesButton p:hover {
background: #3d3d3d;
color: #ffff;
}
.noButton {
margin-left: 500;
left: 100;
bottom: 0;
background-color: #575757;
color: #ffff;
text-align: left;
cursor: pointer;
}
.noButton p {
float: left;
color: #ffff;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 12px;
}
.noButton p:hover {
background: #3d3d3d;
color: #ffff;
}
div p{
clear: both;
display: inline-block;
overflow: hidden;
white-space: nowrap;
}
Thanks a lot...
First of all you should share your complete code.I assumed that you are using two <p> tags which you want to display in one line.
There are multiple solutions to do this and to make this better. But I am using your approach i.e <p> tag and made some minor changes to make the things happen.
Following is the code snippet for the <p> tag implementation. I updated your CSS which you can compare.
Also enhance your skills of HTML and CSS.
Checkout this;
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
body {
background: #292929;
}
h1 {
font-family: Roboto;
background-color: #292929;
display: flex;
align-items: center;
justify-content: center;
color: #ffff
}
div {
align-content: center !important;
}
.yesButton {
margin-left: 350;
left: 100;
bottom: 0;
width: 65;
margin: initial;
background-color: #575757;
color: #ffff;
text-align: right;
cursor: pointer;
}
.yesButton p {
float: left;
color: #ffff;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 12px;
}
.yesButton p:hover {
background: #3d3d3d;
color: #ffff;
}
.noButton {
margin-left: 500;
left: 100;
bottom: 0;
background-color: #575757;
color: #ffff;
text-align: left;
cursor: pointer;
}
.noButton p {
float: left;
color: #ffff;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 12px;
}
.noButton p:hover {
background: #3d3d3d;
color: #ffff;
}
div p {
/*clear: both;
display: inline-block;
overflow: hidden;
white-space: nowrap;*/
text-align:center;
}
div {
width: 50%;
float:left;
color:#fff;
}
</style>
</head>
<body>
<div><p>No .....</p></div>
<div><p>Yes .....</p></div>
</body>
</html>
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{
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'm trying to add a badge after the h1 on this page: http://69.175.87.138/~plnew/portfolio-item/verde-rosa/ Unfortunately it is not lining up with the h1. I have tried a number of things to get it to display correctly: negative margins, different display: values, different line-heights, etc. Nothing seems to be working so I thought I would ask here.
h1 {
font-size: 55px;
line-height: 35px;
font-weight: 300;
color: #595959;
margin-bottom: 15px;
font-family: "lust-display",sans-serif;
}
h1::after {
display: inline;
margin-left: 10px;
font-size: 14px;
font-family:"freight-sans-pro", lato, sans-serif;
background-color: #C9B39E;
color: #FFF;
border-radius: 5px;
padding: 5px;
content:"Marble";
}
<h1 class="entry-title">Verde Rosa</h1>
JSFiddle
Try adding vertical-align: middle to the :after pseudo-element.
h1 {
font-size: 55px;
line-height: 35px;
font-weight: 300;
color: #595959;
margin-bottom: 15px;
font-family: "lust-display", sans-serif;
}
h1::after {
display: inline;
margin-left: 10px;
font-size: 14px;
font-family: "freight-sans-pro", lato, sans-serif;
background-color: #C9B39E;
color: #FFF;
border-radius: 5px;
padding: 5px;
content: "Marble";
vertical-align: middle;
}
<h1 class="entry-title">Verde Rosa</h1>
Not sure if this is what you were looking for based on the short description, but have you tried vertical-align?
h1::after {
display: inline;
margin-left: 10px;
font-size: 14px;
font-family: "freight-sans-pro", lato, sans-serif;
background-color: #C9B39E;
color: #FFF;
border-radius: 5px;
padding: 5px;
content: "Marble";
vertical-align: middle;
}
I'm only a year in to Web Design. I've been learning menus at Lynda.com and specifically have a problem creating a sub menu.
I've made the sub menu how I want it, however when I flick between the list items on my menu they change over too quickly.
See on the picture below:
http://s22.postimg.org/699f35hm9/macca_travel.png
If you look at the position of the cursor, it is still on the 'About' tab, but the 'Blog' hover has lit up and has been selected.
The two sections with sub menus are the 'Blog' tab and the 'Photos' tab. These two tabs don't cross over smoothly and I think it's because for whatever reason they're selecting too quickly.
I don't know why :)
Here is my CSS:
#font-face {
font-family: 'telegraficoregular';
src: url('../FONTS/telegrafico-webfont.eot');
src: url('../FONTS/telegrafico-webfont.eot?#iefix') format('embedded-opentype'),
url('../FONTS/telegrafico-webfont.woff2') format('woff2'),
url('../FONTS/telegrafico-webfont.woff') format('woff'),
url('../FONTS/telegrafico-webfont.ttf') format('truetype'),
url('../FONTS/telegrafico-webfont.svg#telegraficoregular') format('svg');
font-weight: normal;
font-style: normal;
}
.cf:after {
content: "";
display: table;
clear: both;
}
html, body, head, nav, article, aside, section, h3, h4, footer, ul, li {
margin: 0;
padding: 0;
}
/*Global Styles*/
html {
background: white;
margin: 0;
padding: 0;
}
body {
width: 100%;
height: 1200px;
margin: 0 auto;
padding: 0;
background: white;
font-family: serif, arial, helvetica, georgia;
font-size: 16px;
color: black;
}
h1 {
font-family: telegraficoregular;
font-size: 3em;
color: white;
padding: 0;
margin:0;
text-align: center;
}
h2 {
font-family: telegraficoregular;
font-size: 1em;
font-style: italic;
color: white;
padding: 0;
margin: 0;
text-align: center;
}
p {
font-family: serif;
font-size: 1.1em;
color: black;
text-align:left;
padding-left:70px;
}
h4 + p {
font-family: serif;
font-size: 1.1em;
color: black;
text-align:left;
padding-left:70px;
padding-top: 10px;
}
/*Nav Styles */
header {
background:#6593b5;
width: 100%;
height: 160px;
margin:0 auto;
}
nav {
background: black;
height: 2em;
}
nav ul li {
float: left;
}
nav ul li a {
display: block;
padding:0 2em;
line-height: 2em;
color: white;
font-family: telegraficoregular;
text-decoration: none;
}
li, ul {
position: relative;
margin: 0;
padding: 0;
}
ul.SubMenu {
float: none;
width: auto;
height: auto;
list-style: none;
background: black;
color: white;
position: absolute;
left: -9000em;
}
ul.SubMenu li{
float: none;
}
ul.SubMenu li a{
display:block;
border-bottom: 1px solid white;
padding: .2em 2em;
white-space: nowrap;
}
li:hover ul {
left: 0;
}
li:hover ul {
left: 0;
}
/* Article Styles */
article {
width: 896px;
padding: 32px;
}
/*Section Styles */
section.China {
text-align: center;
margin: 80px auto;
padding: 20px;
}
section h3 {
font-family: telegraficoregular;
font-size: 2em;
border-bottom: 1px solid black;
padding: 5px;
}
section h4 {
font-family: telegraficoregular;
font-size: 1.4em;
padding-top: 60px;
padding-left: 70px;
text-align: left;
text-decoration: underline;
}
section.China img {
position: relative;
top: 20px;
border-radius: 5px;
}
section.Australia {
text-align: center;
margin: 20px auto;
padding: 20px;
}
section.Australia img {
position: relative;
top: 20px;
border-radius: 5px;
}
section.Thailand {
text-align: center;
margin: 20px auto;
padding: 20px;
}
section.Thailand img {
position: relative;
top: 20px;
border-radius: 5px;
}
/* Link Styles*/
a:hover {
color: orange;
height: 32px;
background: black;
}
ul.SubMenu li a:hover {
background: orange;
color: white;
}
/* About Styles */
#AboutContent{
width: 960px;
height: 1200px;
margin: 0 auto;
padding: 0;
background: white;
font-family: serif, arial, helvetica, georgia;
font-size: 16px;
color: black;
}
#AboutHeader {
text-align: center;
margin: 20px auto;
padding: 20px;
}
#AboutHeader img {
display: block;
margin: 0 auto;
text-align: center;
}
#AboutHeader h2 {
font-family: telegraficoregular;
font-size: 1.5em;
text-decoration: underline;
color: black;
padding: 0;
margin-top: 20px;
text-align: center;
}
h2 + img {
position: relative;
top: 50px;
border-radius: 5px;
}
#AboutHeader p {
font-family: serif;
font-size: 1.1em;
color: black;
text-align:left;
padding:50px 0 0 100px;
}
/*Photos Content */
#PhotoContent{
width: 960px;
height:auto;
margin: 0 auto;
padding: 0;
background: white;
font-family: serif, arial, helvetica, georgia;
font-size: 16px;
color: black;
}
/* Photos Gallery */
#ChinaPhotos {
width: 960px;
height:1200px;
margin: 0 auto;
padding: 0;
background: white;
font-family: serif, arial, helvetica, georgia;
font-size: 16px;
color: black;
}
#ChinaPhotos h3 {
font-family: telegraficoregular;
font-size: 2em;
border-bottom: 1px solid black;
padding: 5px;
text-align: center;
margin-top: 20px;
}
#ChinaPhotos img {
margin-top: 20px;
border: 1px solid black;
}
#ChinaPhotos a .Thumb:hover {
width: 320px;
height: 240px;
}
/* Container Styles */
#Content {
width: 960px;
height: auto;
margin: 0 auto;
padding: 0;
background: white;
font-family: serif, arial, helvetica, georgia;
font-size: 16px;
color: black;
}
/* Footer Styles */
.Footer {
width: 100%;
height: 160px;
background: black;
}
.Footer p {
font-family: telegraficoregular;
color: white;
font-style: italic;
line-height: 160px;
text-align: center;
}
Thanks Joe
Add the following to each section of your CSS:
ul.SubMenu {
margin-top: 2em;
}
nav ul li a {
float: left;
}
nav ul li {
display: block;
}