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.
Related
Using a header tag with an h1, the h1 is showing with all the font modifications. The background image will not show. I have verified the image location is valid by using the same code for an img tag. The header will also not push down the lower elements when the screen reduced. Below is the html and css:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Dasmoto's Arts & Crafts</title>
<link rel="stylesheet" href="./resources/css/index.css">
</head>
<body>
<header>
<h1>Dasmoto's Arts & Crafts</h1>
</header>
<section id="brushes">
<h2>Brushes</h2>
<img src="./resources/images/hacksaw.webp" alt="">
<h3>Hacksaw Brushes</h3>
<p>Made of the highest quality oak, Hacksaw brushes are known for their weight and ability to hold paint in large amounts. Available in different sizes.</p>
<p class="links">Starting at $3.00 / brush.</p>
</section>
<section id="frames">
<h2>Frames</h2>
<img src="./resources/images/frames.webp" alt="">
<h3>Art Frames (assorted)</h3>
<p>Assorted frames made of different material, including MDF, birchwood, and PDE. Select frames can be sanded and painted according to your needs.</p>
<span class="links">Starting at $2.00 / frame.</span>
</section>
<section id="paint">
<h2>Paint</h2>
<img src="./resources/images/finnish.jpeg" alt="">
<h3>Clean Finnish Paint</h3>
<p>Imported paint from Finland. Over 256 colors available in-store, varying in quantity (1 oz. to 8 oz.). Clean Finnish paint microbinds to canvas, increasing the finish and longevity of any artwork.</p>
<span class="links">Starting at $5.00 / tube.</span>
</section>
</body>
</html>
header {
position: relative;
width: 100%;
height: 130px;
background-image: url('./resources/images/pattern.jpeg');
background-size: cover;
background-position: center;
}
header h1 {
position: absolute;
margin: 0;
font-family: Arial, Helvetica, sans-serif;
font-size: 100px;
font-weight: bold;
color: khaki;
text-align: center;
}
h2 {
font-family: Arial, Helvetica, sans-serif;
font-size: 32px;
font-weight: bold;
color: white;
}
section img {
display: block;
height: 150px;
width: 150px;
}
section p {
display: inline;
font-family: Arial, Helvetica, sans-serif;
}
#brushes h2 {
background-color: mediumspringgreen;
}
#frames h2 {
background-color: lightcoral;
}
#paint h2 {
background-color: skyblue;
}
.links {
display: inline;
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
color: blue;
}
Missing Background Image
The problem here is the relative path ./resources/images/pattern.jpeg, relative means, relative to the file where you call it.
In your case, the css is in your CSS file, so the relative path to your image will end up like ./resources/css/resources/images/pattern.jpeg
The dot slash ./ means "Look for the file in current directory" where your current directory for the css file is the css folder.
So either use the correct relative path like ../images/pattern.jpeg or an absolute path like https://www.your-domain.com/resources/images/pattern.png
Header not pushing down content
Two problems here
First, you set a fixed height for the header element
Second, your h1 has position: absolute and therefore doesn't give and "height" on it's own to the header element.
Removing both should give the expected result.
See below example, also note that I've change the background pattern so you see it's working just fine when setting a correct file path.
header {
position: relative;
width: 100%;
background-image: url('https://img.freepik.com/vektoren-kostenlos/zufaelliges-quadratisches-halbtonmuster_1409-1062.jpg?w=2000');
background-size: cover;
background-position: center;
}
header h1 {
margin: 0;
font-family: Arial, Helvetica, sans-serif;
font-size: 100px;
font-weight: bold;
color: khaki;
text-align: center;
}
h2 {
font-family: Arial, Helvetica, sans-serif;
font-size: 32px;
font-weight: bold;
color: white;
}
section img {
display: block;
height: 150px;
width: 150px;
}
section p {
display: inline;
font-family: Arial, Helvetica, sans-serif;
}
#brushes h2 {
background-color: mediumspringgreen;
}
#frames h2 {
background-color: lightcoral;
}
#paint h2 {
background-color: skyblue;
}
.links {
display: inline;
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
color: blue;
}
<header>
<h1>Dasmoto's Arts & Crafts</h1>
</header>
<section id="brushes">
<h2>Brushes</h2>
<img src="./resources/images/hacksaw.webp" alt="">
<h3>Hacksaw Brushes</h3>
<p>Made of the highest quality oak, Hacksaw brushes are known for their weight and ability to hold paint in large amounts. Available in different sizes.</p>
<p class="links">Starting at $3.00 / brush.</p>
</section>
<section id="frames">
<h2>Frames</h2>
<img src="./resources/images/frames.webp" alt="">
<h3>Art Frames (assorted)</h3>
<p>Assorted frames made of different material, including MDF, birchwood, and PDE. Select frames can be sanded and painted according to your needs.</p>
<span class="links">Starting at $2.00 / frame.</span>
</section>
<section id="paint">
<h2>Paint</h2>
<img src="./resources/images/finnish.jpeg" alt="">
<h3>Clean Finnish Paint</h3>
<p>Imported paint from Finland. Over 256 colors available in-store, varying in quantity (1 oz. to 8 oz.). Clean Finnish paint microbinds to canvas, increasing the finish and longevity of any artwork.</p>
<span class="links">Starting at $5.00 / tube.</span>
</section>
Your index.html is probably in the root of your project, whereas your CSS stylesheet is in /resources/css/index.css.
You are using relative paths to include the images.
A relative file path points to a file relative to the current page.
Because your index.html and index.css are not in the same directory, they have different relative paths. That's why the image can be loaded from your HTML file, but not from your stylesheet.
You can now rather use everywhere the same absolute path, or you adjust the relative path in your CSS stylesheet.
This should be the correct relative path from your CSS file to your pattern.jpeg.
background-image: url('../images/pattern.jpeg');
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
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'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.
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.