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

CSS

Posted by Pratibha Soni
Pratibha Soni
7,561 Points

My image project

Hello, I heve done my Web design course from treehouse.com and as I have finished it, I have started a simple image as my first project for practice. But I am struck in one point where I want to finish this by using only css for coding. The Image is: http://www.wikihow.com/images/f/f6/Learn-HTML-Step-5.jpg

My codes for this project is:

HTML :

<!doctype html><html lang="en"><meta charset="utf-8"><title>My Page</title><link rel="stylesheet" href="style.css"><div class="container"><header class="main-header global">W3Schools<span>.com</span></header><hr><div id="main-content"> <p> AND </p></div><hr><footer class="main-footer global"><span  class="test1"> Coecademy</span> <span class="line"></span><span  class="test">Learn</span><span class="line"></span><span  class="test">Teach</span></footer></div></body></html>

CSS:

.container {margin: auto;   width: 1000px;  height: 600px;  background: #010469;}
.global {  text-align: center;}
.main-header {  height: 150px;  color: white;  font-size: 125px;  font-family:}
.main-header span{  color: #93F263;}
#main-content {  color: black;  font-size: 100px;  text-align: center;  font-family: impact;}
.main-footer {  color: white;  font-size: 50px;  font-weight: bold;  padding: 2px 5px 2px 5px;  font-family: cursive;  display: online-block; }
.line { width:.1px; height: 50px; border: 1px solid black; position: middle; }

I am struck for the Line property as it doesn't get changed as it is there on the real image.. All suggestions are welcome.

2 Answers

Chris Henry
PLUS
Chris Henry
Courses Plus Student 1,253 Points
Chris Henry
Chris Henry
Courses Plus Student 1,253 Points

Hi,

I will first of all admit that I still have some way to go in my own progress through the course.

However, were I to attempt this, I would have tried instead to use three div sections, inline, in the bottom section. I would envisage that black backgrounds with white borders (thicker on the bottom, thin on the sides), with appropriate widths and margins, should position the 3 boxes to match the image you are replicating, and allow you to place the text inside them, in a similar fashion to how you did "main-content".

Apologies that a suggestion is all that I can confidently offer, but hopefully it will be enough to help you make progress!

Pratibha Soni
Pratibha Soni
7,561 Points
Pratibha Soni
Pratibha Soni
7,561 Points

First of all thanks so much for replying.... Yes, you are right about this, in fact I have created this project in that manner as we'll where I managed every term in the box. But my this question is also related to my other project where I can't create the box for this or I can say I am finding out other way to manage a vertical line by CSS as I didn't get much solutions over the internet. So I am trying to make one project in as many ways I can make..... I believe this could be the best practice manner for me......

Any more suggestions would be welcomed.......

Thanks