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;
}
Related
As the title says, I'm having issues with the hover action. Not sure what's causing it.
body {
font-family: -apple-system-system-ui,BlinkMacSystemFont, "Gurmukhi MN Regular";
font-size: 15px;
line-height: 1.5;
padding: 0;
margin: 0;
}
/* Global */
.container{
width: 80%;
margin: auto;
overflow: hidden;
}
/* Header */
header{
background: #3e3e3e;
color: white;
padding-top: 15px;
min-height: 50px;
}
header a{
color: white;
text-decoration: none;
font-size: 21.73px;
}
header ul{
margin: 0;
padding: 0;
}
header li{
display: inline;
padding: 0 140px 0 140px;
margin-left: 40px;
margin-right: 40px;
text-align: center;
}
header .current a{
font-size: 21px;
font-weight: bold;
border-radius: 12px;
background-color: #2d2d2d;
padding: 8px;
height: 5px;
}
header li a:hover{
font-size: 21px;
font-weight: bold;
border-radius: 12px;
background-color: #2d2d2d;
padding: 8px;
height: 5px;
}
I'm working on my first website for my portfolio. I've done all the markup for the first page and I've started styling it, but I'm stuck on the navigation bar. It's only the hover action that isn't working as I want it to. I'm trying to make it so that there's a rounded box behind it in a darker shade than the navigation bar, but the hover effect moves the text to the right a little bit. I read somewhere that it could be padding but I'm not entirely sure.
Appreciate any help, I'm new to all this.
Alex
The tag in the default state doesn't have the same values of padding and font-size of when it's on hover.
Try correct your code like this:
header a{
color: white;
text-decoration: none;
font-size: 21px;
padding: 8px;
height: 5px;
}
Seems you are using header a for simple action and header li a for hovering kindly try to replace your code with the following, If there is any question feel free to ask, if it solves your problem , then vote up to acknowledge our combine effort.
Thank You.
Best Wishes,
body {
font-family: -apple-system-system-ui,BlinkMacSystemFont, "Gurmukhi MN Regular";
font-size: 15px;
line-height: 1.5;
padding: 0;
margin: 0;
}
/* Global */
.container{
width: 80%;
margin: auto;
overflow: hidden;
}
/* Header */
header{
background: #3e3e3e;
color: white;
padding-top: 15px;
min-height: 50px;
}
header a{
color: white;
text-decoration: none;
font-size: 21.73px;
}
header a:hover{
font-size: 21px;
font-weight: bold;
border-radius: 12px;
background-color: #2d2d2d;
padding: 8px;
height: 5px;
}
header ul{
margin: 0;
padding: 0;
}
header li{
display: inline;
padding: 0 140px 0 140px;
margin-left: 40px;
margin-right: 40px;
text-align: center;
}
header .current a{
font-size: 21px;
font-weight: bold;
border-radius: 12px;
background-color: #2d2d2d;
padding: 8px;
height: 5px;
}
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;
}
I made have made my first CSS class, but I have got a little problem, the buttons are centered, but thats not what I want.
View: http://prntscr.com/6i30xg
I would like them so they start at the left side only. But when using float: left;to the .body class it will results in
View: http://prntscr.com/6i327q
But I would like that the buttons are on the edge like the homepage.
#import url(http://fonts.googleapis.com/css?family=Muli:300,400,300italic,400italic);
/* Typography
–––––––––––––––––––––––––––––––––––––––––––––––––– */
h1, h2, h3, h4, h5, h6
{
margin-top: 0;
margin-bottom: 2rem;
font-weight: 300;
}
h1
{
font-size: 4.0rem;
line-height: 1.2;
letter-spacing: -.1rem;
}
h2
{
font-size: 3.6rem;
line-height: 1.25;
letter-spacing: -.1rem;
}
h3
{
font-size: 3.0rem;
line-height: 1.3;
letter-spacing: -.1rem;
}
h4
{
font-size: 2.4rem;
line-height: 1.35;
letter-spacing: -.08rem;
}
h5
{
font-size: 1.8rem;
line-height: 1.5;
letter-spacing: -.05rem;
}
h6
{
font-size: 1.5rem;
line-height: 1.6;
letter-spacing: 0;
}
p
{
margin-top: 0;
}
/* Buttons
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.btn
{
display: inline-block;
height: 38px;
padding: 0 30px;
color: #555;
text-align: center;
font-size: 11px;
font-weight: 600;
line-height: 38px;
letter-spacing: .1rem;
text-transform: uppercase;
text-decoration: none;
white-space: nowrap;
background-color: transparent;
border-radius: 4px;
border: 1px solid #bbb;
cursor: pointer;
box-sizing: border-box;
}
.btn
/* Form
–––––––––––––––––––––––––––––––––––––––––––––––––– */
/* Programming :D
–––––––––––––––––––––––––––––––––––––––––––––––––– */
code {
padding: .2rem .5rem;
margin: 0 .2rem;
font-size: 90%;
white-space: nowrap;
background: #F1F1F1;
border: 1px solid #E1E1E1;
border-radius: 4px;
}
pre > code
{
display: block;
padding: 1rem 1.5rem;
white-space: pre;
}
/* Content
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.content
{
border-width: 20px 20px 0px 20px;
border-radius: 28px 28px 0 0;
box-sizing: border-box;
margin-top: 120px;
max-width: 1280px;
margin-left: auto;
margin-right: auto;
min-height: 100%;
}
.header
{
}
.header span
{
color: #fff;
float: left;
margin-left: 28px;
margin-top: 28px;
font-family: 'Muli', sans-serif;
font-weight: 300;
font-size: 24px;
}
.header ul
{
color: #fff;
float: right;
margin-right: 28px;
margin-top: 28px;
}
.header ul li
{
float: right;
border: 1px solid #fff;
padding: 5px 20px;
border-radius: 11px;
margin-right: 12px;
}
.header ul li a
{
color: #fff;
font-family: 'Muli', sans-serif;
font-weight: 300;
font-size: 11px;
text-decoration: none;
}
.body
{
padding-top: 148px;
}
.footer
{
}
Just remove margin-left: auto; and margin-right:auto; from your content class. OR You can replace auto with any fixed number of pixels like 10px. Setting the margins left and right to auto makes the content to align center of the page. So do not use auto.
You content class should look like,
.content
{
border-width: 20px 20px 0px 20px;
border-radius: 28px 28px 0 0;
box-sizing: border-box;
margin-top: 120px;
max-width: 1280px;
margin-left: <some value in pixels>;
margin-right: <some value in pixels>;
min-height: 100%;
}
Remove text-align: center; from .btn class
i'm trying to have the height auto adjust based on the content that's in the div.. i realize to do this, I shouldn't have a height: xpx;.
my popover is:
.popover {
position: absolute;
top: 0;
left: 0;
height: 120px;
z-index: 1010;
display: none;
max-width: 276px;
text-align: left;
white-space: normal;
background: #fff;
padding: 10px;
font-size: 12px;
}
what's currently in the div of that popover is:
span.details{
display: block;
font-family: Georgia,serif;
margin: 0 0 15px 0;
color: #888;
}
span.status{
display: block;
margin-bottom: 10px;
margin-top: -7px;
}
span.status strong{
font-size:x-small;
vertical-align:top;
}
span.date{
display: inline-block;
float: right;
font-style: italic;
font-weight: bold;
font-size: 11px;
}
span.url{
display: inline-block;
font-style: italic;
font-size: 12px;
font-family: "Arial Black", Gadget, sans-serif;
margin-right: 5px;
}
what it looks like without the height: 120px;
http://sc-cdn.scaleengine.net/i/2952f44fb396097037f8f5eaeabc52cd.png
what it looks like with the height: 120px;
http://sc-cdn.scaleengine.net/i/614d383b7cba18a7f7a9bc017f53b9c4.png
any ideas here guys? i just want it to adjust to whatever is in the box!
.popover {
display:block;height:100%
}
try this
This is my first post here (I'm very new to all this), but I hope I'm asking it correctly.
I'm creating a webpage for my Master's thesis, and I need to have three parallel columns of text that will scroll independently of each other, much like this template
I cannot seem to get the CSS from this template to work on my website, and I'm wondering what I'm doing wrong, or if there is a better way to achieve this effect.
Thanks so much for you help!
Here's my CSS for my website
body {
padding:0;
width:100%;
height: 100%;
max-height: 100%;
overflow; hidden;
margin: 0;
border: 0;
background:#FFFFFF;
}
#title {
margin-bottom: 5px;
background: #fff;
width:100%
z-index: 20;
width: 100%;
padding-top: 30px;
}
#title h1 {
font-family: Sorts Mill Goudy, Garamound, serif;
font-size: 50px;
text-align: center;
font-weight: 100;
color: 696969;
line-height: 1px;
letter-spacing: 10px;
margin-top: 20px;
}
#title h2 {
font-size: 16px;
font-family: Sorts Mill Goudy, serif;
text-align: center;
font-weight: 100;
color: #999;
line-height: 20px;
letter-spacing: 0px;
}
#title ul {text-align:center;
padding-left, padding-right: 10px;
padding-top: 30px;
}
#title ul li {
display:inline;
font-family: "gill sans mt", "sans-serif";
text-align: center;
list-style:none;
margin-left:0px;
padding-left: 30px;
padding-right: 30px;
}
#title p{
font-family: Sorts Mill Goudy Italic, Garamound, serif;
size: 14px;
font-weight: 300;
background: #eee;
padding: 10px;
margin-left: 80px;
margin-right: 80px;
margin-top: 20px;
margin-bottom: 15px;
text-decoration: none;
color: #000;
}
#title a {
color:#000;
text-decoration: none;
text-decoration: underline;
}
#title a:hover {
color: #A9A9A9;
text-decoration: underline;
}
/* column settings */
#allcol {
position: relative;
}
#allcol h4{
text-align: center;
}
#col1 {
font-family: Sorts Mill Goudy, Garamound, serif;
text-align: left;
float:left;
background:#DCDCDC;
padding-bottom:10px;
padding-top: 10px;
padding-left:1.5%;
padding-right:1.5%;
margin-left: 0px;
width:30%;
overflow: scroll;
}
#col2 { font-family: Sorts Mill Goudy, Garamound, serif;
text-align: left;
background: #fff;
float:left;
padding-bottom:10px;
padding-top: 10px;
padding-left:1.5%;
padding-right:1.5%;
width:30%;
overflow: scroll;
}
#col3 { font-family: Sorts Mill Goudy, Garamound, serif;
text-align: left;
float:left;
background:#DCDCDC;
padding-left:1.5%;
padding-right:1.5%;
padding-bottom:10px;
padding-top: 10px;
width:30%;
overflow: scroll;
}
#footer {
clear:both;
float:left;
width:100%;
border-top:1px solid #000;
}
http://jsfiddle.net/78PrJ/
Here is a working example. As mentioned, you'll have to set the div height.
Add this CSS: #col1, #col2, #col3{ height: 500px; } You're already using overflow: scroll, so the scrollbars will appear,
overflow:scroll only works if the height is specified in px. If you specify the height in %age it won't work.