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 Alejandro Jerez
Alejandro Jerez
10,987 Points

Need help with practice website (CSS) =)

Hi, I am trying to make a website for practice based on the style from webpass.net. I am having a couple of problems with my attempt. (My attempt does not even get close to the webpass website)

First: I can't manage to get the logo and the nav items on the same line and centered on the element.

Second: The background photo I have for #backPhoto wont fit the parent element even though I have the background-size: cover; property.

Third: How can I get the 6 list items inside #jobList to be on 2 rows, 3 items on top and 3 on the bottom.

All of your help will be greatly appreciated and any other suggestions apart from my questions would be great. Here is the link to my workspace:

https://teamtreehouse.com/workspaces/6364652

Thanks

2 Answers

danditomaso
danditomaso
3,192 Points
danditomaso
danditomaso
3,192 Points

It looks like the link to your workspace has expired. I get a Page Not Found error when I try and follow the link you provided. Can you post the code into your reply and I'll be able to review it.

Alejandro Jerez
Alejandro Jerez
10,987 Points

<!DOCTYPE html> <html> <head> <link rel="stylesheet" type="text/css" href="practicecss.css"> <title>Tek Guys</title> </head> <body> <div id="nav"> <img id = "logo" src="tekguyswhite.jpeg"> <ul> <a href="#"><li>Residential</li></a> <a href="#"><li>Business</li></a> <a href="#"><li>Faq's</li></a> <a href="#"><li>Blog</li></a> <a href="#"><li>Contact Us</li></a> </ul> </div> <div id="backPhoto"> <div id="infoBox"> <h3>Simple Urban Internet</h3> <p>Nicaragua - Miami - Pennsylvania - Texas</p> </div> </div> <div id="jobList"> <ul> <li><h4>Clear and Simple</h4> <p>Our prices are public and terms are clear. No more fine print. No more hidden fees.</p> </li> <li><h4>Fast Internet Speed</h4> <p>TekGuys delivers synchronous 100, 200, or 500 Mbps speeds to residential customers and 10 - 1000 Mbps to commercial customers.</p> </li> <li><h4>Internet Specific ISP</h4> <p>TekGuys is a building specific ISP. You'll find our network in buildings built after 1995 and with 10 units or more.</p> </li> <li><h4>No Contracts</h4> <p>No one enjoys being locked into something they don't like. You can cancel your service at any time. No questions asked.</p> </li> <li><h4>Local Support</h4> <p>Expect quick and direct communication from our support team in your city.</p> </li> <li><h4>Modem Free</h4> <p>Our Internet service does not require a modem. Just plug your Ethernet cord to the jack and you're ready to go.</p> </li> </ul> </div> <footer> <ul> <li>Product</li> <li>Company</li> <li>My Account</li> <li>Contact Us</li> <li>Social</li> <li>Policies</li> </ul> </footer> </body> </html>

/***************************** Full Body *****************************/ body{

background-color: #0000FF;
color: white;

} /***************************** Navigation *****************************/

logo {

display: inline-block; text-align: left; padding: 10px 10px 0px 10px; margin: 0px; }

nav {

height: 150px;
width:100%;
border: 1px solid white;
margin-left: auto;
margin-right: auto;

}

nav ul{

text-align: center;

}

nav ul li {

vertical-align: center;

}

nav ul a {

padding: 0px 20px;
display: inline-block; 
list-style: none;
text-decoration: none;
color: white;

} /***************************** Upper Body *****************************/

backPhoto {

background: url('sobe.img');
background-size: cover;
background-repeat: no-repeat;
background-position: center;
height: 500px;
width: 100%;
border: 1px solid white;
margin-top: 20px;

}

infoBox{

margin-top: 130px;
margin-bottom: 0px;
margin-left: auto;
margin-right: auto;
border: 1px solid white;
width: 50%;
height: 40%;
border-radius: 20px;
background-color: black;
opacity: 0.7;

}

infoBox h3{

text-align: center;
margin: 20px 0px 0px 0px;
text-decoration: none;

}

infoBox p{

padding-top: 90px;
text-align: center;
text-decoration: none;

} /***************************** Lower Body *****************************/

jobList {

height: 30%;
width: 100%;
border: 1px solid white;
margin-top: 20px;

}

jobList ul{

list-style: none;
margin: auto;

}

jobList ul li{

border: 1px solid white;
width: 15%;
display: inline-table;
padding: 20px;
margin: 30px;

}

danditomaso
danditomaso
3,192 Points
danditomaso
danditomaso
3,192 Points

Hi Alejandro, The first thing I noticed was you were missing a opening and closing <html></html> tag. These should be inserted between the <!DOCTYPE html> and the <head> tag, and the closing tag should be inserted after the </head> tag. I'm still reviewing everything else, try the changes I suggested and see if they help you.

Alejandro Jerez
Alejandro Jerez
10,987 Points

I do have them. For some reason they did not paste in the comment. Thanks for the help.

Ted Sumner
Ted Sumner
Courses Plus Student 17,967 Points

Refer to the markdown cheatsheet on how to format your code quotes. That really helps find errors and will sometimes highlight them for you.

Alejandro Jerez
Alejandro Jerez
10,987 Points

first time posting in the forum, im kind of confused. Try these ones please: (html) http://www.codeshare.io/RCsLN (css) http://www.codeshare.io/HvWHx

Ted Sumner
Ted Sumner
Courses Plus Student 17,967 Points

The Markdown for code is 3 ` follows immediately by the language of the code. Start your code on the next line. On the line after your code put three more `

I have to double space between the paragraph before the code and the code for some reason.

Alejandro Jerez
Alejandro Jerez
10,987 Points 
<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" type="text/css" href="practicecss.css">
        <title>Tek Guys</title>
    </head>
    <body>
        <div id="nav">
            <img id = "logo" src="tekguyswhite.jpeg">
            <ul>
                <a href="#"><li>Residential</li></a>
                <a href="#"><li>Business</li></a>
                <a href="#"><li>Faq's</li></a>
                <a href="#"><li>Blog</li></a>
                <a href="#"><li>Contact Us</li></a>
            </ul>
        </div>
        <div id="backPhoto">
            <div id="infoBox">
                <h3>Simple Urban Internet</h3>
                <p>Nicaragua - Miami - Pennsylvania - Texas</p>
            </div>
        </div>
        <div id="jobList">
            <ul>
                <li><h4>Clear and Simple</h4>
                    <p>Our prices are public and terms are clear. No more fine print. No more hidden fees.</p>
                </li>
                <li><h4>Fast Internet Speed</h4>
                    <p>TekGuys delivers synchronous 100, 200, or 500 Mbps speeds to residential customers and 10 - 1000 Mbps to commercial customers.</p>
                </li>
                <li><h4>Internet Specific ISP</h4>
                    <p>TekGuys is a building specific ISP. You'll find our network in buildings built after 1995 and with 10 units or more.</p>
                </li>
                <li><h4>No Contracts</h4>
                    <p>No one enjoys being locked into something they don't like. You can cancel your service at any time. No questions asked.</p>
                </li>
                <li><h4>Local Support</h4>
                    <p>Expect quick and direct communication from our support team in your city.</p>
                </li>
                <li><h4>Modem Free</h4>
                    <p>Our Internet service does not require a modem. Just plug your Ethernet cord to the jack and you're ready to go.</p>
                </li>
            </ul>
        </div>
        <footer>
            <ul>
                <li>Product</li>
                <li>Company</li>
                <li>My Account</li>
                <li>Contact Us</li>
                <li>Social</li>
                <li>Policies</li>
            </ul>
        </footer>
    </body>
</html>

/***************************** 
Full Body Customizations 
*****************************/
body{

    background-color: #0000FF;
    color: white;
}
/***************************** 
Navigation 
*****************************/
#logo {
display: inline-block;
vertical-align: middle;
padding: 10px 10px 0px 10px;
margin: 0px;
}
#nav {
    height: 150px;
    width:100%;
    border: 1px solid white;
    margin-left: auto;
    margin-right: auto;
}
#nav ul{
    text-align: center;
}
#nav ul li {
    vertical-align: center;
}
#nav ul a {
    padding: 0px 20px;
    display: inline-block; 
    list-style: none;
    text-decoration: none;
    color: white;
}
/***************************** 
Upper Body 
*****************************/
#backPhoto {
    background: url('sobe.img');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    height: 500px;
    width: 100%;
    border: 1px solid white;
    margin-top: 20px;
}
#infoBox{
    margin-top: 130px;
    margin-bottom: 0px;
    margin-left: auto;
    margin-right: auto;
    border: 1px solid white;
    width: 50%;
    height: 40%;
    border-radius: 20px;
    background-color: black;
    opacity: 0.7;
}
#infoBox h3{
    text-align: center;
    margin: 20px 0px 0px 0px;
    text-decoration: none;
}
#infoBox p{
    padding-top: 90px;
    text-align: center;
    text-decoration: none;
}
/***************************** 
Lower Body 
*****************************/
#jobList {
    height: 30%;
    width: 100%;
    border: 1px solid white;
    margin-top: 20px;
}
#jobList ul{
    list-style: none;
    margin: auto;
}
#jobList ul li{
    border: 1px solid white;
    width: 15%;
    display: inline-table;
    padding: 20px;
    margin: 30px;
}