Welcome to the Treehouse Community
Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.
Start your free trial
Zachary Baker
Courses Plus Student 11,504 PointsIssues with my CSS
I'm having issues floating my bottom two pictues in this file and my footer is coming up. Help me please! I've just incorporated bootstrap and it won't agree with me now.
Zachary Baker
Courses Plus Student 11,504 Points/* Web Fonts -------------------- */
@font-face {
font-family: 'Abolition Regular';
src: url('../fonts/abolition-regular-webfont.eot');
src: url('../fonts/abolition-regular-webfont.eot?#iefix') format('embedded-opentype'),
url('../fonts/abolition-regular-webfont.woff') format('woff'),
url('../fonts/abolition-regular-webfont.ttf') format('truetype');
}
/* Base Styles -------------------- */
* {
box-sizing: border-box;
}
body {
background-color: #fff;
color: #878787;
margin: 0;
font: 1em/1.5 "Helvetica Neue", Helvetica, Arial, sans-serif;
}
h1,
h2 {
font-family: 'Abolition Regular', Helvetica, Arial, sans-serif;
}
h1 {
font-size: 5.625rem; /* 90px/16px */
text-transform: uppercase;
font-weight: normal;
line-height: 1.3;
text-shadow: 0 1px 1px rgba(0,0,0,.8);
margin: 12px 0 0;
}
h2 {
font-size: 3.3125em; /* 53px/16px */
font-weight: normal;
line-height: 1.1;
margin: 0 0 .5em; /* 0 0 26px */
text-align: center;
}
h3 {
font-size: 1.25em; /* 20px/16px */
color: #48525c;
line-height: 1.2;
margin-bottom: 1.7em; /* 34px */
font-family: 'Abolition Regular', Helvetica, Arial, sans-serif;
}
h4 {
font-size: 1em;
color: black;
font-family: 'Abolition Regular', Helvetica, Arial, sans-serif;
}
p {
margin: 0 0 50px 0;
text-align: center;
}
img {
max-width: 100%;
margin-bottom: 20px;
border-radius: 10px;
}
ul,
ol {
margin: 30px 0;
}
li {
margin-bottom: 10px;
}
/* Pseudo-classes ------------------ */
a:link {
color: rgb(255, 169, 73);
text-decoration: none;
}
a:visited {
color: lightblue;
}
a:hover {
color: rgba(255, 169, 73, .4);
}
a:active {
color: lightcoral;
}
/* Main Styles --------------------- */
.body {
height: 850px;
background: linear-gradient(#fff, transparent 90%),
linear-gradient(0deg, #fff, transparent),
#ffa949 url('../img/weird.jpeg') no-repeat center;
background-size: cover;
color: white;
}
.title {
font-size: 1.625rem; /* 26px/16px */
letter-spacing: .065em;
font-weight: 200;
border-bottom: 2px solid;
padding-bottom: 10px;
}
.intro {
font-size: 1.25em; /* 20px/16px */
line-height: 1.6;
color: initial;
}
.primary,
.main-header,
.main-footer {
text-align: center;
}
.primary {
padding-top: 25px;
padding-bottom: 95px;
}
.secondary {
padding-top: 80px;
padding-bottom: 70px;
border-bottom: 2px solid #dfe2e6;
}
.callout {
font-size: 1.25em;
border-bottom: 3px solid;
padding: 0 9px 3px;
margin-top: 20px;
display: inline-block;
}
.t-border {
border-top: 2px solid #dfe2e6;
}
/* Layout Styles ------------------ */
.primary {
width: 75%;
padding-left: 50px;
padding-right: 50px;
margin: auto;
max-width: 960px;
}
.secondary {
width: 50%;
}
.box {
width: 70%;
justify-content: center;
color: white;
text-align: left;
padding: 10% 24%;
border-top: 10px solid #B3E5FC;
margin: 0 auto;
background: #434a52 url('../img/BK.jpeg') no-repeat center;
background-size: cover;
box-shadow: inset 0 0 50px 10px rgba(0,0,0, .8);
border-radius: 10px;
}
.arrow {
width: 50px;
margin-top: 25pxpx;
}
.content {
width: 400px;
float: left;
}
.learning img {
border-bottom: 10px solid #B3E5FC;
border-radius: 5px;
margin-left: 25px;
}
.tips img {
border-bottom: 10px solid #B3E5FC;
border-radius: 5px;
}
.wrapper {
height: calc(100vh - 260);
}
.content {
width: 85%;
max-width: 1150px;
margin: 0 auto;
}
.main-footer p {
margin: 0 0 .5em 0;
}
.main-footer a {
margin: 0 0 25px 0;
}
/* CUSTOMIZE THE NAVBAR
-------------------------------------------------- */
/* Special class on .container surrounding .navbar, used for positioning it into place. */
.navbar-wrapper {
position: absolute;
top: 0;
right: 0;
left: 0;
z-index: 20;
}
/* Flip around the padding for proper display in narrow viewports */
.navbar-wrapper > .container {
padding-right: 0;
padding-left: 0;
}
.navbar-wrapper .navbar {
padding-right: 15px;
padding-left: 15px;
}
.navbar-wrapper .navbar .container {
width: auto;
}
/* Carousel base class */
.carousel {
height: 500px;
margin-bottom: 60px;
}
/* Since positioning the image, we need to help out the caption */
.carousel-caption {
z-index: 10;
}
/* Declare heights because of positioning of img element */
.carousel .item {
height: 500px;
background-color: #777;
}
.carousel-inner > .item > img {
position: absolute;
top: 0;
left: 0;
min-width: 100%;
height: 500px;
}
/* Floated Columns ------------------ */
.learing col,
.tips col,
.learning h3,
. {
width: 300px;
float: left;
margin-top: 5px;
margin-right: 25px;
margin-bottom: 25px;
padding: 10px;
}
/* Float Clearfix ------------------ */
.group:after {
content: "";
display: table;
clear: both;
}
/* Media Queries -------------------- */
@media (min-width: 769px) {
.primary-content,
.secondary-content {
width: 90%;
}
.box {
padding: 10% 12%;
}
}
@media (max-width: 768px) {
.primary-content,
.secondary-content {
width: 100%;
padding: 20px;
border-top: none;
}
.main-header {
max-height: 380px;
padding: 50px 25px 0;
}
.title {
font-size: 1.3rem;
border: none;
}
h1 {
font-size: 5rem;
line-height: 1.1;
}
.arrow {
display: none;
}
.intro {
font-size: 1rem;
}
.learning,
.tips {
float: none;
width: 100%;
}
.main-footer {
padding: 20px 0;
}
}
`Moderator edited: markdown was added to the question to properly render the code. Please see the Markdown Cheatsheet link at the bottom of the "Add an Answer" section for tips on how to post code to the Community.
Zachary Baker
Courses Plus Student 11,504 PointsThis is the code I need help with... it's added after the primary content div and just before the footer.
<div class="content">
<div class="learning col">
<img src="img/bk1.png" alt="Learning">
<h3>Keep on learning!</h3>
<p>
Never stop learning, no matter what. There is a whole world of development on the web, and the following list is only scratching the surface of potentital for web development...
</p>
<ul>
<li><a href="#php">PHP</a></li>
<li><a href="#js">Javascript and JQuery</a></li>
<li><a href="#sql">SQL</a></li>
<li><a href="#ofcourse">HTML and CSS</a></li>
</ul>
</div>
<div class="tips col">
<img src="img/hello.png" alt="Preparation">
<h3>Preparation for development</h3>
<p>
One of most important things when it comes to development is preparation....
</p>
<ol>
<li>Map out your project.</li>
<li>Write the Pseudo Code first.</li>
<li>Test Consistently and test in small blocks.</li>
<li>If you can, improve.</li>
</ol>
</div>
</div><!-- End .secondary-content -->
3 Answers
Rodrigo Villalobos
2,546 PointsSince your markup reads
<div class="learning col">
your CSS should be
.learning.col,
.tips.col {
instead of
.learing col,
.tips col,
.learning h3,
. {
Rocky Balboa
19,039 PointsHi so i had a quick look and the issue was when using floats sometimes to stop the container collapsing you need to use the clearfix class to resolve this issue. Also the CSS you have written is good but to make it even better I suggest using SCSS to make sure you are not over-writing your rules which you have set further down the style sheet, its kool even i sometimes set out to write organised CSS but it quickly does get out of control. when writing valina CSS keep the B.E.M - Block Element Modifier methodology in mind.
keep it up!!!
<!DOCTYPE html>
<html>
<head>
<title>Messing Around with CSS</title>
<link rel="icon" type="image/png" href="C:\Users\zmb50\Desktop\Test Site\img/buckethead.png">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="style.css">
<meta name="viewport" content="width=device-width">
</head>
<body>
<div class="wrapper">
<div class="main-header">
<header>
<div class="navbar-wrapper">
<div class="container">
<nav class="navbar navbar-inverse navbar-static-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Project name</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#contact">Contact</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li class="dropdown-header">Nav header</li>
<li><a href="#">Separated link</a></li>
<li><a href="#">One more separated link</a></li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
</div>
</div>
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-generic" data-slide-to="1"></li>
<li data-target="#carousel-example-generic" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="img/night1.png" alt="...">
<div class="carousel-caption">
<h1>Fun with CSS</h1>
<h2 class="title">Messing Around and Designing</h2>
<img class="arrow" src="img/arrow.svg" alt="Down arrow">
</div>
</div>
<div class="item">
<img src="img/night2.png" alt="...">
<div class="carousel-caption">
<h1>It Never Stops</h1>
<h2 class="title">Messing Around and Designing</h2>
<img class="arrow" src="img/arrow.svg" alt="Down arrow">
</div>
</div>
<div class="item">
<img src="img/night3.png" alt="...">
<div class="carousel-caption">
<h1>Keep on Learning!</h1>
<h2 class="title">Messing Around and Designing</h2>
<img class="arrow" src="img/arrow.svg" alt="Down arrow">
</div>
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</header>
</div>
<div class="body">
<div class="primary">
<p class="intro">
This page represents some of the fun things you can do with CSS. From gradients and transparencies, to foreign fonts... the design limits are endless!
</p>
<p><a class="callout" href="#more">Find out more</a></p>
<div class="box">
<h2>A box with with links inside.</h2>
<p>
This is an example of a div with links inside. <a href="#ClickingMyWay?">Link 1</a>, <a href="#Okay,KeepClicking">Link 2</a>.
</p>
</div><!-- End .box -->
<p><a class="callout" href="#ClickAgain">Another possible link</a></p>
</div><!-- End .primary-content -->
<div class="secondary clearfix">
<div class="content">
<img src="http://placehold.it/350x150" alt="Learning">
<h3>Keep on learning!</h3>
<p>
Never stop learning, no matter what. There is a whole world of development on the web, and the following list is only scratching the surface of potentital for web development...
</p>
<ul>
<li><a href="#php">PHP</a></li>
<li><a href="#js">Javascript and JQuery</a></li>
<li><a href="#sql">SQL</a></li>
<li><a href="#ofcourse">HTML and CSS</a></li>
</ul>
</div>
<div class="content">
<img src="http://placehold.it/350x150" alt="Preparation">
<h3>Preparation for development</h3>
<p>
One of most important things when it comes to development is preparation....
</p>
<ol>
<li>Map out your project.</li>
<li>Write the Pseudo Code first.</li>
<li>Test Consistently and test in small blocks.</li>
<li>If you can, improve.</li>
</ol>
</div>
</div><!-- End .secondary-content -->
<footer class="main-footer clearfix">
<p>© Zachary Baker 2016</p>
<p><a href="#top">Back to top »</a></p>
</footer>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</body>
</html>
/* Web Fonts -------------------- */
@font-face {
font-family: 'Abolition Regular';
src: url('../fonts/abolition-regular-webfont.eot');
src: url('../fonts/abolition-regular-webfont.eot?#iefix') format('embedded-opentype'),
url('../fonts/abolition-regular-webfont.woff') format('woff'),
url('../fonts/abolition-regular-webfont.ttf') format('truetype');
}
/* Base Styles -------------------- */
* {
box-sizing: border-box;
}
body {
background-color: #fff;
color: #878787;
margin: 0;
font: 1em/1.5 "Helvetica Neue", Helvetica, Arial, sans-serif;
}
h1,
h2 {
font-family: 'Abolition Regular', Helvetica, Arial, sans-serif;
}
h1 {
font-size: 5.625rem; /* 90px/16px */
text-transform: uppercase;
font-weight: normal;
line-height: 1.3;
text-shadow: 0 1px 1px rgba(0,0,0,.8);
margin: 12px 0 0;
}
h2 {
font-size: 3.3125em; /* 53px/16px */
font-weight: normal;
line-height: 1.1;
margin: 0 0 .5em; /* 0 0 26px */
text-align: center;
}
h3 {
font-size: 1.25em; /* 20px/16px */
color: #48525c;
line-height: 1.2;
margin-bottom: 1.7em; /* 34px */
font-family: 'Abolition Regular', Helvetica, Arial, sans-serif;
}
h4 {
font-size: 1em;
color: black;
font-family: 'Abolition Regular', Helvetica, Arial, sans-serif;
}
/*p {*/
/*margin: 0 0 50px 0;*/
/*text-align: center;*/
/*}*/
img {
max-width: 100%;
margin-bottom: 20px;
border-radius: 10px;
}
ul,
ol {
margin: 30px 0;
}
li {
margin-bottom: 10px;
}
/* Pseudo-classes ------------------ */
a:link {
color: rgb(255, 169, 73);
text-decoration: none;
}
a:visited {
color: lightblue;
}
a:hover {
color: rgba(255, 169, 73, .4);
}
a:active {
color: lightcoral;
}
/* Main Styles --------------------- */
.body {
height: 500px;
background: linear-gradient(#fff, transparent 90%),
linear-gradient(0deg, #fff, transparent),
#ffa949 url('../img/weird.jpeg') no-repeat center;
background-size: cover;
}
.title {
font-size: 1.625rem; /* 26px/16px */
letter-spacing: .065em;
font-weight: 200;
border-bottom: 2px solid;
padding-bottom: 10px;
}
.intro {
font-size: 1.25em; /* 20px/16px */
line-height: 1.6;
color: initial;
}
.primary,
.main-header,
.main-footer {
text-align: center;
}
.primary {
padding-top: 25px;
padding-bottom: 95px;
}
.secondary {
padding-top: 80px;
padding-bottom: 70px;
border-bottom: 2px solid #dfe2e6;
}
.callout {
font-size: 1.25em;
border-bottom: 3px solid;
padding: 0 9px 3px;
margin-top: 20px;
display: inline-block;
}
.t-border {
border-top: 2px solid #dfe2e6;
}
/* Layout Styles ------------------ */
.primary {
width: 75%;
padding-left: 50px;
padding-right: 50px;
margin: auto;
max-width: 960px;
}
.secondary {
width: 100%;
}
.box {
width: 70%;
justify-content: center;
color: white;
text-align: left;
padding: 10% 24%;
border-top: 10px solid #B3E5FC;
margin: 0 auto;
background: #434a52 url('../img/BK.jpeg') no-repeat center;
background-size: cover;
box-shadow: inset 0 0 50px 10px rgba(0,0,0, .8);
border-radius: 10px;
}
.arrow {
width: 50px;
margin-top: 25px;
}
.content {
width: 50%;
float: left;
padding: 40px;
}
.content img {
display:block;
margin:auto;
}
.content p, h3, ul, ol {
text-align: center;
list-style: none;
}
.wrapper {
height: calc(100vh - 260);
}
.main-footer {
margin-top: 50px;
}
.main-footer p {
margin: 0 0 .5em 0;
}
.main-footer a {
margin: 0 0 25px 0;
}
/* CUSTOMIZE THE NAVBAR
-------------------------------------------------- */
/* Special class on .container surrounding .navbar, used for positioning it into place. */
.navbar-wrapper {
position: absolute;
top: 0;
right: 0;
left: 0;
z-index: 20;
}
/* Flip around the padding for proper display in narrow viewports */
.navbar-wrapper > .container {
padding-right: 0;
padding-left: 0;
}
.navbar-wrapper .navbar {
padding-right: 15px;
padding-left: 15px;
}
.navbar-wrapper .navbar .container {
width: auto;
}
/* Carousel base class */
.carousel {
height: 500px;
margin-bottom: 60px;
}
/* Since positioning the image, we need to help out the caption */
.carousel-caption {
z-index: 10;
}
/* Declare heights because of positioning of img element */
.carousel .item {
height: 500px;
background-color: #777;
}
.carousel-inner > .item > img {
position: absolute;
top: 0;
left: 0;
min-width: 100%;
height: 500px;
}
/* Floated Columns ------------------ */
.learing col,
.tips col,
.learning h3,
. {
width: 300px;
float: left;
margin-top: 5px;
margin-right: 25px;
margin-bottom: 25px;
padding: 10px;
}
/* Float Clearfix ------------------ */
.group:after {
content: "";
display: table;
clear: both;
}
/* Media Queries -------------------- */
@media (min-width: 769px) {
.primary-content,
.secondary-content {
width: 90%;
}
.box {
padding: 10% 12%;
}
}
@media (max-width: 768px) {
.primary-content,
.secondary-content {
width: 100%;
padding: 20px;
border-top: none;
}
.main-header {
max-height: 380px;
padding: 50px 25px 0;
}
.title {
font-size: 1.3rem;
border: none;
}
h1 {
font-size: 5rem;
line-height: 1.1;
}
.arrow {
display: none;
}
.intro {
font-size: 1rem;
}
.learning,
.tips {
float: none;
width: 100%;
}
.main-footer {
padding: 20px 0;
}
}
i changed the style sheet link cause i was lazy****
Zachary Baker
Courses Plus Student 11,504 PointsI just did the adjustment, and it did nothing, the test is still not wrapping arounf the image.
Rodrigo Villalobos
2,546 PointsCan you maybe put your code in a JSFiddle so I can take a better look?
Zachary Baker
Courses Plus Student 11,504 PointsZachary Baker
Courses Plus Student 11,504 Pointsindex.html
Moderator edited: markdown was added to the question to properly render the code. Please see the Markdown Cheatsheet link at the bottom of the "Add an Answer" section for tips on how to post code to the Community.