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
Related
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.
I am doing this assignment for school and I need to side the background behind the slogans and little images so that it perfectly encloses the words. However, I can't get the width tag to work. Please help me find the source of this issue. Sorry for poor formatting. I am in a bit of a time crunch.
<!DOCTYPE html>
<html>
<head>
<title>MNSportsInc</title>
</head>
<center><p><font size="8">Minnesota Sports Inc.</font></p></center>
<style>
h1 {color: white; background: black; font-family: times; font-size:
120%; width: 300}
h2 {color: white; background: black; font-family: times; font-size:
120%; width: 500}
h3 {color: white; background: black; font-family: times; font-size:
120%; width: 500}
h4 {color: white; background: black; font-family: times; font-size:
120%; width: 500}
h5 {color: white; background: black; font-family: times; font-size:
120%; width: 500}
h6 {color: white; background: black; font-family: times; font-size:
120%; width: 500}
</style>
<body>
<center>
<h1><img src="Twins.gif">Twins
get wins!<img src="Twins.gif"></h1>
<!--Twins-->
<h2><img src="Wild.png">Crack a
smile for the Wild.<a href="https://www.nhl.com/wild"><img src="Wild.png">
</a></h2><!--Wild-->
<h3><img src="Vikings.png">Buy
things for the Vikings.<a href="http://www.vikings.com/"><img
src="Vikings.png"></a></h3><!--Vikings-->
<h4><a href="http://www.nba.com/timberwolves/"><img src="Wolves.jpg">
</a>Fans pull the Wolves!<a href="http://www.nba.com/timberwolves/"><img
src="Wolves.jpg"></a></h4><!--Timberwolves-->
<h5><img src="UofM.png">Beat
the Gophers? No sir!<a href="http://www.gophersports.com/"><img
src="UofM.png"></a></h5><!--UofM-->
<h6><a href="http://crimson-activities.com/"><img src="Crimson.jpg">
</a>The Crimson have Risen.<a href="http://crimson-activities.com/"><img
src="Crimson.jpg"></a></h6><!--Crimson-->
</center>
</body>
</html>
All your settings for the width property (not tag) lack a unit, so those settings are ignored according to CSS specs. They work if you append e.g. the px unit (for CSS pixel) to them: width: 500px. Pixels are what you probably meant to use. It’s a completely different question how to set the background so that it “perfectly encloses the words”; you probably need a different approach, like using inline elements (which take just as much width as needed).
<!DOCTYPE html>
<html>
<head>
<title>MNSportsInc</title>
</head>
<center><p><font size="8">Minnesota Sports Inc.</font></p></center>
<style>
h1 {color: white; background: black; font-family: times; font-size:
120%; width: 300px}
h2 {color: white; background: black; font-family: times; font-size:
120%; width: 500px}
h3 {color: white; background: black; font-family: times; font-size:
120%; width: 500px}
h4 {color: white; background: black; font-family: times; font-size:
120%; width: 500px}
h5 {color: white; background: black; font-family: times; font-size:
120%; width: 500px}
h6 {color: white; background: black; font-family: times; font-size:
120%; width: 500px}
</style>
<body>
<center>
<h1><img src="Twins.gif">Twins
get wins!<img src="Twins.gif"></h1>
<!--Twins-->
<h2><img src="Wild.png">Crack a
smile for the Wild.<a href="https://www.nhl.com/wild"><img src="Wild.png">
</a></h2><!--Wild-->
<h3><img src="Vikings.png">Buy
things for the Vikings.<a href="http://www.vikings.com/"><img
src="Vikings.png"></a></h3><!--Vikings-->
<h4><a href="http://www.nba.com/timberwolves/"><img src="Wolves.jpg">
</a>Fans pull the Wolves!<a href="http://www.nba.com/timberwolves/"><img
src="Wolves.jpg"></a></h4><!--Timberwolves-->
<h5><img src="UofM.png">Beat
the Gophers? No sir!<a href="http://www.gophersports.com/"><img
src="UofM.png"></a></h5><!--UofM-->
<h6><a href="http://crimson-activities.com/"><img src="Crimson.jpg">
</a>The Crimson have Risen.<a href="http://crimson-activities.com/"><img
src="Crimson.jpg"></a></h6><!--Crimson-->
</center>
</body>
</html>
htmlcssimagewidth
Header tags, like h1 are block level elements, so the "try" to stretch over the width of parent or window.
You can change its display style to block to change this:
h1 {color: white; background: black; font-family: times; font-size:
120%; width: 300px;display:inline-block}
See the fiddle I"ve made here: https://jsfiddle.net/v3f13vtb/
You should put your CSS stylings in a different file and then link to it, I think the reason your styling isn't working inline is because of the fact that you aren't telling it what to do. 500(of what) 500px? 500%? Try writing it more semantically and see what happens.
I've tried reducing the vertical space between two lines of text using various CSS properties, such as margin-top and padding, but nothing seems to work.
The two lines look like so:
I want them much closer together, so that they are almost touching. No matter what I do with the margin-top property, though, it's not enough and eventually gets to a point where I'm making things even worse.
Here is the CSS and HTML:
<style>
.jumbotronjr {
padding: 12px;
margin-bottom: -16px;
font-size: 21px;
font-weight: 200;
line-height: 2.1428571435;
color: inherit;
background-color: white;
}
.titletext {
font-size: 2.8em;
color: darkgreen;
font-family: Candara, Calibri, Cambria, serif;
margin-left: -32px;
}
.titletextjr {
font-size: 1.4em;
color: darkgreen;
font-family: Candara, Calibri, Cambria, serif;
margin-left: -32px;
}
</style>
</head>
<body>
<div class="container body-content">
<div class="jumbotronjr">
<div class="col-md-3" style="margin-top: 1cm">
<img src="http://www.proactusa.com/wp-content/themes/proact/images/pa_logo_notag.png" alt="PRO*ACT usa logo">
</div>
<div class="col-md-9">
<label class="titletext" style="margin-top: 0.1cm;">eServices Reporting</label>
<br/>
<label class="titletextjr" style="margin-top: -2cm;">Purchasing Report for RB Kitchen</label>
</div>
</div>
What change or addition do I need to make to get these lines closer together (specifically, for the second line to move up vertically)?
There is a large space between them because your .jumbotronjr class has a line-height: 2.1428571435;. Remove this and it will remove the space between your text.
.jumbotronjr {
padding: 12px;
margin-bottom: -16px;
font-size: 21px;
font-weight: 200;
line-height: 2.1428571435; /* <--- Remove this */
color: inherit;
background-color: white;
}
JSFiddle
The limited-flexibility with vertical space is due to the <br> tag. The alternative approach would be to remove the <br> and display the labels as blocks in order to get the stacked appearance. Then, as you can see, your spacing margins and paddings (even line-heights) work as intended.
.jumbotronjr {
padding: 12px;
margin-bottom: -16px;
font-size: 21px;
font-weight: 200;
line-height: 2.1428571435;
color: inherit;
background-color: white;
}
.titletext {
font-size: 2.8em;
color: darkgreen;
font-family: Candara, Calibri, Cambria, serif;
margin-left: -32px;
display:block;
}
.titletextjr {
font-size: 1.4em;
color: darkgreen;
font-family: Candara, Calibri, Cambria, serif;
margin-left: -32px;
display:block;
}
<div class="container body-content">
<div class="jumbotronjr">
<label class="titletext" style="margin-top: 0.1cm;">eServices Reporting</label>
<label class="titletextjr" style="margin-top: -2cm;">Purchasing Report for RB Kitchen</label>
</div>
</div>
Do you have any control over the markup? The use of the <label> tag here is incorrect. From Mozilla Developer Network - "The HTML Label Element () represents a caption for an item in a user interface. It can be associated with a control either by placing the control element inside the element, or by using the for attribute." - https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label
For proper semantics, I would recommend changing these to header tags as they seem to convey a heading on the page.
By simply changing these elements and removing the <br> tag I believe you will achieve the desired effect:
<h1 class="titletext" style="margin-top: 0.1cm;">eServices Reporting</h1>
<h2 class="titletextjr" style="margin-top: -2cm;">Purchasing Report for RB Kitchen</h2>
If you insist on using the <label> tags, you could adjust the line height to a value of "1".
Why don't you play with line-height instead of using margins etc? This is a quite big value:
line-height: 2.1428571435;
Put sth smaller in there according to your needs.
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 noticed when I have a <h2> tag directly below an <h1> tag there is a large gap between the two. No padding or margin is set and I've normalised the css using normalize.css. Why does this gap exist?
Fiddle here: fiddle
Here is a screen shot:
html (normalize.css is active on this html)
<div class="header">
<div class="wrapper">
<h1>Portfolio of...</h1>
<h2>Jing Xue</h2>
</div>
</div>
css
.wrapper {
width: 940px;
margin: 0 auto 0 auto;
}
/* header ------------------------------------------------------------------ */
.header {
text-align: center;
padding: 40px 0 0 0;
margin-bottom: 40px;
}
.header h1 {
font-family: 'Delius Swash Caps', cursive;
font-size: 250%;
color: rgb(200,50,50);
/* margin-bottom: -50px; */
}
.header h2 {
font-family: 'Playfair Display SC', serif;
font-size: 450%;
color: rgb(59,67,68);
}
Further Question
For what ever the reason for this big gap between "portfolio of..." and "Jing Xue", is the correct way to reduce the gap to give a negative top/bottom margin on the corresponding <h..>?
h1 through h4 tags have a default margin. You need to remove that margin in your CSS.
.header h1 {
font-family: 'Delius Swash Caps', cursive;
font-size: 250%;
color: rgb(200,50,50);
margin:0;
}
.header h2 {
font-family: 'Playfair Display SC', serif;
font-size: 450%;
color: rgb(59,67,68);
margin:0;
}
This is normal behaviour for these elements..
You forgot to take the default margin-top off of your h2 element. Simply add margin-top:0px; to your h2 class.
Here is a working jsFiddle.
Your class should now look like below:
.header h2 {
font-family: 'Playfair Display SC', serif;
font-size: 450%;
color: rgb(59,67,68);
margin-top:0px;
}
Here is an image from W3 regarding some default styles of elements:
See more about default styles of elements here on W3.org.