So I'm not unable to use margin that consists of three texts. I tried adding it both in html and css, none of them worked. Am I supposed to format it in a different way?
.middlelectureread {
margin-left: 740px;
font-family: Arial, Helvetica, sans-serif;
font: bold;
font-size: 20px;
}
.middlecaptivityread {
margin-left: 210px;
font-family: Arial, Helvetica, sans-serif;
font: bold;
font-size: 30px;
}
.middleprotestread {
margin-left: 210px;
font-family: Arial, Helvetica, sans-serif;
font: bold;
font-size: 30px;
}
<span class="middlelectureread">READ MORE</span><span class="middlecaptivityread">READ MORE</span><span
class="middleprotestread">READ MORE</span>
Like Neffy wrote you shouldn't use span here. Span element is inline and shouldn't be a container to postion elements. For such things we have divs or HTML5 semantic elements like Section, Header, Footer etc. span can be useful when we want to style for example a part of some text, paragraph.
<p>If you do it you will see a <span class="warning">warning</span>sign</p>
And if we apply color to this span it will work.
Related
very new to this and have tried several fixes without success.
Inside h1, my fonts are all correct and reacting as expected:
h1 {
position:relative;
left: -10px;
top: -16px;
padding: 2em;
height: 3em;
width: 100%;
background: #545454;
font-family: "Avenir Light", sans-serif;
font-size: .7em;
text-align: center;
color: darkgray}
h1 p {
font-weight: 30;
word-spacing: 30px;}
But the text isn't responding anywhere else on my page, even when inserted under body, body p, into each individual element... It's driving me nuts!
body {
margin: 0, 0;
padding: 0, 0;
overflow-x: hidden;
background: #765264;
color: white;
font-family: "Avenir Light", sans-serif;
font-size: 16px;
line-height: 1.5;
}
body p {
font-size: 1em;
font-family: "Century Gothic";
font-weight: 30;
letter-spacing: 1px;
}
Weirdly, inserting letter-spacing above seemed to make the spacing larger.
Here's my HTML, for reference:
<head>
<div class="header" id="myHeader">
<h1>
<link rel="stylesheet" href="peytonsite.css">
<p>
<img src="https://static.wixstatic.com/media/058e45_e590acfd22c440f4b5c89450738f321d~mv2.png/v1/fill/w_100,h_100,al_c,q_85,usm_0.66_1.00_0.01/058e45_e590acfd22c440f4b5c89450738f321d~mv2.webp">
<a>HOME</a>
<a>SKILLS</a>
<a>PORTFOLIO</a>
<a>EXPERIANCE</a>
<a>CONTACT</a>
</p>
</h1>
</div>
</head>
<article>
<section id="LANDING">
<img id="LongLogo" src="https://static.wixstatic.com/media/058e45_0291502c1e424532bbd24f9cfd50fd1e~mv2.png/v1/fill/w_1466,h_348,al_c,q_90,usm_0.66_1.00_0.01/Long%20Logo.webp">
<p>PASSIONATE DESIGN</p>```
Please help!
Update:
30 isn't a valid font-weight, and, your font may not necessarily have a boldness available to it.
Try: font-weight: bold;
or: font-weight: 300; (300 is usually non-bold)
A few other ideas:
You probably want a comma between h1 p { in your second CSS block.
Secondly- Is your target text within a <p> block?
For debugging purposes, what happens if you append !important to your styles? Does that show what you want?
What happens if you delete the h1 p { ... block, and add this in at the bottom of your CSS?
p {
font-weight: 300!important;
word-spacing: 30px!important;}
If nothing changes, I suspect you don't have the right CSS selectors.
Here is a CodePen of your CSS correctly applying
I can't make the text bold
I tried this, but it does not work:
.auth_subm {
height: 20pt;
width: 130pt;
font: 10pt Arial, Helvetica, sans-serif, bold;
margin: 2pt;
margin-right: 0px;
text-align: center
}
<input value="how get answers" type="button" class="auth_subm" />
You've placed bold in your comma-separated list of font names, so if there isn't a generic sans-serif font available it will look for one named bold.
See the documentation for font. Order matters.
Put bold at the front of the list of properties in the shorthand.
.auth_subm {
height: 20pt;
width: 130pt;
font: bold 10pt Arial, Helvetica, sans-serif;
margin: 2pt;
margin-right: 0px;
text-align: center
}
<input value="how get answers" type="button" onclick="location.href='otv.html'" class="auth_subm" />
Instead of using font-weight bold on input field, you should change your input field to a button field.
However don't forget to say it's a submit button in type!
Example
<button type="submit">
<b>Bold text!</b>
</button>
Add a class with font weight like below
.auth_subm {
height: 20pt;
width: 130pt;
font: bold 10pt Arial, Helvetica, sans-serif;
margin: 2pt;
margin-right: 0px;
text-align: center;
text-transform: uppercase;
font-weight:700;
}
Check this http://jsfiddle.net/c8kdhbmy/2/
New to HTML and CSS and trying to replicate sites to get some practice. I'm having some trouble replicating a section on the airbnb website where it lists the explore, contact and book. For some reason, I float the image to the left and my h3 and p tags should not overlap the image. I've made sure to display the image as a block, but the h3 and p tags overlap and my margins won't work. Not sure what I'm doing wrong.a
Thanks
Here's the css
.feat-box {
background-color: red;
float: left;
margin-top: 20px;
width: 282px;
}
.feat-box h3 {
font-size: 22px;
font-family: Shift, 'Helvetica Neue', Helvetica, Arial, sans-serif;
color: rgb(57, 60, 61);
margin-left: 10px;
padding-top: 10px;
}
.feat-box p {
font-size: 17px;
font-family: Shift, 'Helvetica Neue', Helvetica, Arial, sans-serif;
color: rgb(57, 60, 61);
margin-left: 10px;
}
.feat-box img {
float: left;
display: block;
}
.feat-box-container {
margin: auto;
width: 900px;
}
Here's my html
<div class="feat-box-container">
<div class="feat-box">
<img src="http://www.somanyfoods.com/wp-content/uploads/2014/05/contacts.png"/>
<h3>Explore</h3>
<p>Find the perfect place.</p>
</div>
<div class="feat-box">
<img src="http://www.somanyfoods.com/wp-content/uploads/2014/05/contacts.png"/>
<h3>Contacts</h3>
<p>Message hosts.</p>
</div>
<div class="feat-box">
<img src="http://www.somanyfoods.com/wp-content/uploads/2014/05/check-mark.png"/>
<h3>Book</h3>
<p>View your itinerary.</p>
</div>
</div>
Try adding
display:inline
to your
.feat-box p
you might have to play around a little with the margins to get the text to align, but it fixed it for me.
If your learning CSS I'd advice installing firebug, it's an add-on that will help you better understand how CSS works.
I have a list in my sidemenu, the settings don't seem to read past the css of the .body class in stylesheet -
ul.develop
{
list-style-type:square;
color: #FFF;
margin:0;
padding:0;
margin-top:0.6cm;
}
li.develop
{
font-family: 'Arial', sans-serif;
font-size: 11px;
font-weight: normal;
color:#fff;
}
My body class is -
body {
font-family: 'Arial', sans-serif;
font-size: 12px;
font-weight: normal;
}
The list then is defaulting to body class 12px, if I change body to 11px, the list is fine but I want to keep 12px for actual body of main content of copy on site.
I tried using !important but unsure that is correct?
Thanks
I think you may have .develop on ul not li, try putting your font rules on the ul.develop rule as they will apply to the li's underneath.
ul.develop
{
list-style-type:square;
color: #FFF;
margin:0;
padding:0;
margin-top:0.6cm;
font-family: 'Arial', sans-serif;
font-size: 11px;
font-weight: normal;
}
Put your 'body' related CSS above/ before the other styles. It reads it top down. Hope that works!
I have 2 paragraphs as
<p style="color:#333333; line-height: 20px; font-size: 16px; font-family: Helvetica, Arial, sans-serif; font-weight:bold; margin:0; padding:0; text-align: left;">Title of para</p>
<p style="color:#767676; line-height: 20px; font-size: 12px; font-family: Helvetica, Arial, sans-serif; text-align: left; margin-bottom: 1cm; margin-top:0; padding:0;">Text</p>
I want to have 0 space between the 2 paragraphs but at the same time have some fixed space at the top of the 1st paragraph and at the bottom of the second paragraph.
I am creating an html email, hence the inline styles.
It works fine in some clients. But in entourage and gmail, the space between the 2 paragraphs does not go away. :(
http://jsfiddle.net/jnuHD/
I've added
height:12px;
to the first paragraph. Seems to work.
I'm guessing that some built-in styles in Gmail are overriding the margins and paddings you've set. Have you tried adding the !important flag to their values and seeing if that helps?
Adding some background color shows that the problem is within the p tags not between them
http://jsfiddle.net/hs3A2/
Do you need the line height styling? if not the following reduces the spacing:
http://jsfiddle.net/UTZ8y/
You can also use line height to reduce the spacing further:
http://jsfiddle.net/99zcM/1/
Maintaining the line-height you can use positioning to adjust the "spacing":
<div style="position:relative;">
<p style="line-height: 20px; font-size: 16px;
font-family: Helvetica, Arial, sans-serif; font-weight:bold;
margin:0; padding:0; text-align: left;">Title of para
</p>
<p style="color:#767676; line-height: 20px; font-size: 12px;
font-family: Helvetica, Arial, sans-serif; text-align: left;
margin-bottom: 1cm; margin-top:0; padding:0;
position:relative;top:-5px;">Text</p>
</div>
See it working here: http://jsfiddle.net/Md9Na/
I'm not sure how well this will work on various email clients and beware of overlap