My CSS is doing some really strange things. I assume it's my code writing.

Question

I'm about ready to give up on the whole thing. I can't take a screen shot. I don't know where or how to upload my html or css. I'm defeated.

Answer 1 · 2015-10-13T15:50:25Z

October 13, 2015 3:50pm

Thx man, don't forget to up-vote! As for your other question, I'm not sure how you're expecting the text-decoration to work. You're using images for the links so text decoration would never change those. If you'd like them to change I would suggest changing the onhover to point the image to another picture. The list style hasn't been put in, which is why you're getting that bullet list. You can change it to whatever you'd like but I've changed it to be none here.

.image {
    max-width: 60%;
    margin: 2.5% 0 2.5% 2.5%;
    display: inline-block;
    border-top: 5px solid lightslategrey;
    list-style:none;
}

If you want them to line up in a row, you'd put the display property on the li instead of the ul item:

li {
    display:inline-block;
}

Answer 2 · 2015-10-10T00:23:42Z

October 10, 2015 12:23am

that's a lot of code to go through... is there something you want us to look for? What's not looking right? I didn't go through the CSS but your body tags are out of place. One should go above your header, not below it, and the other should go after your footer... if you have something more specific, could you describe it?

Answer 3 · 2015-10-13T14:11:42Z

October 13, 2015 2:11pm

Ok, I think I see what you're trying to do here. When I put that code into a live viewer, I see you've set the width to 60% but not told it where to position that block of code. By default it will take all p elements and block them out, shoving them to the left, constrained. If you add the auto margin property then it will center all that stuff on your page and in turn, center your text.

.text {
    max-width: 60%;
    text-align: center;
    line-height: 1.5;
    font: normal 1em Ubuntu, Helvetica, Arial, sans-serif;
    margin: 0 auto; /*this will center your stuff */
}

Answer 4 · 2015-10-11T22:40:35Z

October 11, 2015 10:40pm

I sent your code through an HTML beautifier, the same with your CSS, so its more readable. Maybe someone can see it more clearly then. Also, provide more context of your problem. I understand its probably very frustrating, but for anyone to help you, we need to know where to look :)

Keep your head up!

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>Lanai Lewis | UX Designer</title>
    <link rel="stylesheet" href="css/main.css">
    <link href='https://fonts.googleapis.com/css?family=Oswald:400,300,700|Slabo+27px|Lora:400,700|Ubuntu:400,300,700|Yanone+Kaffeesatz:400,300' rel='stylesheet' type='text/css'>
</head>
<header id="main-header">
    <h1>My name is Lanai Lewis.</h1>
    <h2 id="span">I create realms of peace. Come inside.</h2>
</header>
<nav>
    <ul id="nav-items">
        <li><a href="#About">About</a>
        </li>
        <li><a href="#Contact">Contact</a>
        </li>
    </ul>
</nav>

<body>
    <div id="portfolio">
        <section>
            <h3 id="Work">Work</h3>
            <ul class="image">
                <li>
                    <a href="img/logo.jpg"><img src="img/trees.jpg" alt>
                    </a>
                </li>
                <li>
                    <a href="img/sign.jpg"><img src="img/trees.jpg" alt="">
                    </a>
                </li>
                <li>
                    <a href="img/interior.jpg"><img src="img/trees.jpg" alt="">
                    </a>
                </li>
                <li>
                    <a href="img/exterior.jpg"><img src="img/trees.jpg" alt="">
                    </a>
                </li>
                <li>
                    <a href="img/details.jpg"><img src="img/trees.jpg" alt="">
                    </a>
                </li>
                <li>
                    <a href="img/process.jpg"><img src="img/trees.jpg" alt="">
                    </a>
                </li>
            </ul>
        </section>
    </div>
    <section>
        <h4 class="subheading" id="About">About</h4>
        <p class="text">UX design is one of my many passions. As a consumer myself, I notice and appreciate a good experience. Everytime I walk into a restaurant or shop with a particularly lovely ambience, I know it didn't happen by accident. I will create an enjoyable space in which your customers can interact with your organization and explore your products and services. I'm also a visual designer with a bachelor's degree in graphic design, so I'm able to not only conceive ideas but also bring them to reality.</p>
        <p class="text">I grew up in a small town outside of Seattle, called Bothell, in Washington state. I moved to Portland, Or in 2002, and fell in love with the area's golden summers, young culture, and phenomenal food. When I'm not working on design projects, I love to ride my motorcycle, salsa dance, read, cook and practice acupuncture.</p>
    </section>
    <section>
        <h5 class="subheading" id="Contact">Contact</h5>
        <p class="text">I am currently accepting new freelance and contract work within the realms of branding, web and ux design. Please contact me by email if you'd like to discuss a project. Contact me by phone only for urgent inquiries, please.</p>
        <ul class="list" id="contact-info">
            <li><a href="mailto:lanai.lewis@gmail.com">lanai.lewis@gmail.com</a>
            </li>
            <li><a href="tel:5037015380">503.701.5380</a>
            </li>
        </ul>
    </section>
</body>
<footer>
    <p>&copy; 2015 Lanai Lewis.</p>
</footer>

</html>

#main-header {
    max-width: 100%;
    padding: 2.5%;
    font: bold 2em Ubuntu, Helvetica, Arial, sans-serif;
    text-align: center;
    color: white;
    background: linear-gradient(to right, lightslategrey 62%, transparent) no-repeat right top;
}
.subheading {
    padding-top: 2.5%;
    margin: 2.5% 0 2.5% 0;
    font: normal 2em Ubuntu, Helvetica, Arial, sans-serif;
    text-align: center;
}
h1 {
    padding: 0;
    line-height: 1;
}
h2 {
    font: normal 1em "Yanone Kaffeesatz", Helvetica, Arial, sans-serif;
    line-height: 1;
    color: white;
}
#nav-bar {
    display: inline;
    padding: 0;
    margin: 0;
    list-style: none;
    text-decoration: none;
}
.text {
    max-width: 60%;
    font: normal 1em Ubuntu, Helvetica, Arial, sans-serif;
    line-height: 1.5;
    text-align: center;
}
.image {
    display: inline-block;
    max-width: 60%;
    margin: 2.5% 0 2.5% 2.5%;
    border-top: 5px solid lightslategrey;
}
.list {
    list-style: none;
    text-align: center;
    text-decoration: none;
}
nav li {
    display: inline;
    padding: 0 5px;
    font: normal 1em "Yanone Kaffeesatz", Helvetica, Arial, sans-serif;
    color: lightslategrey;
}
nav li a {
    text-decoration: none;
    color: lightslategrey;
}
a.link {
    text-decoration: none;
    color: white;
}
a.visited {
    color: cornsilk;
}
a.hover {
    color: powderblue;
}

Welcome to the Treehouse Community

Looking to learn something new?

Lanai Lewis

Lanai Lewis

My CSS is doing some really strange things. I assume it's my code writing.

Michael Hulet

Michael Hulet

Jacob Mishkin

Jacob Mishkin

Lanai Lewis

Lanai Lewis

4 Answers

Jason DeValadares

Jason DeValadares

Jason DeValadares

Jason DeValadares

Lanai Lewis

Lanai Lewis

Jason DeValadares

Jason DeValadares

Lanai Lewis

Lanai Lewis

Eivind Jonassen

Eivind Jonassen

Lanai Lewis

Lanai Lewis