Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

CSS

Header Logo and links get messed up!

Heres how it looks like http://imgur.com/a/8yJNS

i didnt make the website for mobile first, so im scaling it down from desktop,

Please i need help with this, it feels like ive tried everything!

heres the code for the responsive css

@media screen and (max-width: 480px) {

    .intro-pic {
        position:relative;
        top: 10px;
        width: 65%;
        margin: 0 auto;
      left: 20px;
      right: 20px;
    }

     .main-header {
        position:relative;
        height: 150px;
     }


    #nav ul {
       position: relative;
       white-space: nowrap;
       bottom: -70px;
       left: 35px;
       margin: 0 auto;
    }

    .quote {

    }



}

@media screen and (min-width: 670px) {


}

CSS

:root {
    font-family: 'Josefin Sans', sans-serif;
    min-height: 98%;
    border-bottom: 40px solid #008B8B;
    border-top: 10px solid #007D7D;
}

body {
    background-color:#0099FF;
background-image:
radial-gradient(white, rgba(255,255,255,.2) 2px, transparent 40px),
radial-gradient(white, rgba(255,255,255,.15) 1px, transparent 30px),
radial-gradient(white, rgba(255,255,255,.1) 2px, transparent 40px),
radial-gradient(rgba(255,255,255,.4), rgba(255,255,255,.1) 2px, transparent 30px);
background-size: 550px 550px, 350px 350px, 250px 250px, 150px 150px; 
background-position: 0 0, 40px 60px, 130px 270px, 70px 100px;
    color: #E6E68A;
    line-height: 1.62;
}

#container {
    max-width: 940px;
    margin: 0 auto;
    padding: 0 5%;
}

h1, h2 {
    margin-bottom: .78em;
    font-weight: bolder;
    font-size: 28px;
    text-shadow: 1px 1px 1px black;
}

p {
    font-weight: bold;
    font-size: 18.88px;
    margin: 1.3em 0;
}

a.Other-links {
    text-decoration: none;
    color: #336633;
}

a.Other-links:hover {
   text-decoration: underline;
   color:#003300;
}

a.nav-links  {

  background-color: #339933;
  margin: 5px 0px 0px 2px;
  padding: 0px 5px 0px 5px;
  border-radius: 15px;
  text-decoration:none;
  color: #fff;
  border: 2px solid black;
}

.nav-links:hover {
    background-color:#336633;
    padding: 2px 5px 2px 5px;
    box-shadow: 0px 0px 1px black;

}

#nav a {
    padding: 5px 15px 5px 15px; 
    width: 100%;
}

#nav ul  {
    list-style: none;   
    margin: 0px 28px;
    padding: 0;
}

#nav li {
    display: inline-block;
}


#nav {
    text-align: right;
    margin: 20px 0 0;
    position: relative;
    top: -60px;
    left: -40px;

}

#copyright {
    max-width: 100%;
    text-align: center;
    margin-top: 64px;

}

header {
    float: left;
   margin: 0 0 40px 0;
   padding: 5px 0 0 0;
   width: 100%;
}


header {
    background:#008B8B;
    border-color: #008B8B;

}

header {
    border-bottom: 10px solid #007D7D;
}


.intro-pic {
    margin: auto 30px;
}

.treehouse-logo {
    width: 200px;
    height: 200px;
    border: 3px solid black;
    border-radius: 30px;
}

.treehouse-logo:hover {
    box-shadow: 0px 0px 10px black;
}

.quote {
    display: inline-block;
    position: relative;
    top: -100px;
    color: #272727;
    text-shadow: 1px 1px 1px #272727, 1px 1px 1px #272724 ;
}


.pic-ofme {
    display:block;
    margin-left: auto;
    margin-right: auto;
    border: 3px solid darkgreen;
    border-radius: 50%;
}


#Secondary > h1{
    text-align: center;
}

and this is the html

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <link rel="stylesheet" href="css/normalize.css" type="text/css">
  <link rel="stylesheet" href="css/responsive.css" type="text/css"
  <link href='http://fonts.googleapis.com/css?family=Josefin+Sans:700' rel='stylesheet' type='text/css'>
  <link rel="stylesheet" href="css/style.css" type="text/css">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Erdrag Official Website</title>
</head>
<body>
    <header class="main-header">
      <a href="index.html">
      <img class="intro-pic" src="img/mainlogo.png" title="Home" alt="logo">
      </a>
      <div id="nav">
        <ul>
          <li><a class="nav-links selected" href="index.html">Work</a></li>
          <li><a class="nav-links" href="about.html">About</a></li>
          <li><a class="nav-links" href="contact.html">Contact</a></li>
        </ul>
      </div>
    </header>

10 Answers

Johnatan Guzman
PLUS
Johnatan Guzman
Courses Plus Student 2,360 Points

First of all, one of your links in the head section is not properly closed. Also you should try to avoid position: relative to position your main elements and also limit the use of id's ( in fact, you should never use id's if you are not working with javascript). That said, you should start position your main elements with margin and padding.

I would float the navigation element to the right and the image (plus link) to the left (you might wanna put a div around it and float the div to the left (both divs should add up to around 100% if you have to account for margin and/or padding). Then, when you resize ur browser and the navigation and the div element (with image link) are breaking, you should remove the floats and make both elements 100% so that they stay on top of eachother.

this is how it looks like now. http://imgur.com/a/piWtf i cant seem to get it to work.

heres the code

RESPONSIVE

@media screen and (max-width: 720px) {


    .nav {
      clear: both;
      width: 100%;
      height: 100%;
    }

    .main-logo {
      clear:both;
      width: 100%;
      height: 100%;
    }

    .quote {

    }

    .copyright p{
      font-size: 16px;
    }



}

CSS

:root {
    font-family: 'Josefin Sans', sans-serif;
    min-height: 98%;
    border-bottom: 40px solid #008B8B;
    border-top: 10px solid #007D7D;
}

body {
    background-color:#0099FF;
background-image: url('http://i.imgur.com/BiSmXaq.png'), url('http://i.imgur.com/XHuy0NJ.png'), url('http://i.imgur.com/okpRxJU.png');
    -webkit-animation: snow 20s linear infinite;
    -moz-animation: snow 20s linear infinite;
    -ms-animation: snow 20s linear infinite;
    animation: snow 20s linear infinite;
    color: #E6E68A;
    line-height: 1.62;
}

.container {
    max-width: 940px;
    margin: 0 auto;
    padding: 0 5%;
}

h1, h2 {
    margin-bottom: .78em;
    font-weight: bolder;
    font-size: 28px;
    text-shadow: 1px 1px 1px black;
}

p {
    font-weight: bold;
    font-size: 18.88px;
    margin: 1.3em 0;
}

.nav a.selected {
      background-color: #336633;
    }

a.Other-links {
    text-decoration: none;
    color: #336633;
}

a.Other-links:hover {
   text-decoration: underline;
   color:#003300;
}

a.nav-links  {

  background-color: #339933;
  margin: 5px 0px 0px 2px;
  padding: 0px 5px 0px 5px;
  border-radius: 15px;
  text-decoration:none;
  color: #fff;
  border: 2px solid black;
}

a.nav-links:hover {
    background-color:#336633;
    padding: 2px 5px 2px 5px;
    box-shadow: 0px 0px 1px black;

}

.nav a {
    padding: 5px 15px 5px 15px; 
    width: 100%;
}

.nav ul  {
    list-style: none;   
    margin: 0px 28px;
    padding: 0;
}

.nav li {
    display: inline-block;
}


.nav {
    text-align: right;
    margin: 30px;  
    float: right;


}

.main-logo {
    float:left;
    margin: 30px;
}

.copyright {
    max-width: 100%;
    text-align: center;
    margin-top: 64px;

}

header {
    float: left;
   margin: 0 0 40px 0;
   padding: 5px 0 0 0;
   width: 100%;
}


header {
    background:#008B8B;
    border-color: #008B8B;

}

header {
    border-bottom: 10px solid #007D7D;
}


.intro-pic {
    margin: auto 30px;
}

.treehouse-logo {
    width: 200px;
    height: 200px;
    border: 3px solid black;
    border-radius: 30px;
}

.treehouse-logo:hover {
    box-shadow: 0px 0px 10px black;
}

.quote {
    display: inline-block;
    position: relative;
    top: -100px;
    color: #272727;
    text-shadow: 1px 1px 1px #272727, 1px 1px 1px #272724 ;
}



/* ABOUT PAGE */
.pic-ofme {
    display:block;
    margin-left: auto;
    margin-right: auto;
    border: 3px solid darkgreen;
    border-radius: 50%;
    box-shadow: 0 0 5px black;
}


.Secondary > h1{
    text-align: center;
}

.about-text {
    text-decoration: underline;
}

.social-icon {
    display: inline-table;
    width: 40px;
    height: 40px;
    margin-bottom: -20px;
    margin-left: 10px;
    -webkit-transition:all .2s ease-out;
  -moz-transition:all .2s ease-out;
  -ms-transition:all .2s ease-out;
  -o-transition:all .2s ease-out;
  transition:all .2s ease-out;
}

.social-icon:hover {
   -webkit-transform:translate(0px,-12px);
  -moz-transform:translate(0px,-12px);
  -ms-transform:translate(0px,-12px);
  -o-transform:translate(0px,-12px);
  transform:translate(0px,-12px);
}

when i put a div around the header image, like this, My links in the navigation gets pushed up so i cant see them anymore, any idea what i can do?

<body>
    <header class="main-header">
    <div class="main-logo">
      <a href="index.html">
      <img class="intro-pic" src="img/mainlogo.png" title="Home" alt="logo">
      </a>
    </div>
      <div id="nav">
        <ul>
          <li><a class="nav-links selected" href="index.html">Work</a></li>
          <li><a class="nav-links" href="about.html">About</a></li>
          <li><a class="nav-links" href="contact.html">Contact</a></li>
        </ul>
      </div>
    </header>
Johnatan Guzman
PLUS
Johnatan Guzman
Courses Plus Student 2,360 Points

Can you put ur code on codepen.io or something with placeholder images. That makes it easier for us to fix the problem.

http://codepen.io/anon/pen/VYPrNd here it is, but the header is messed up because i couldnt place a image there ( i didnt figure out how to insert a image on codepen)

but maybe u can insert a placehold image if you have one!

I tried the new code, but still when i resize the links wraps and dont go under the logo?

can it be something wrong with my rel links in the head tags

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
    <link rel="icon" href="favicon.ico" type="image/x-icon">
    <link rel="stylesheet" href="css/normalize.css" type="text/css">
    <link rel="stylesheet" href="css/responsive.css" type="text/css">
    <link href='http://fonts.googleapis.com/css?family=Josefin+Sans:700' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" href="css/style.css" type="text/css">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

// erdrag

Johnatan Guzman
PLUS
Johnatan Guzman
Courses Plus Student 2,360 Points

Try resizing my example, it should work. I created a new div in the html file.

yeah i have the code you wrote, but it still does not work, is there something wrong with my <link> tags? in the head section, do they need a different order or something?

ive tried exactly the code you wrote, can it be something with the heading being cut off in the codepen? that makes it work better?

Johnatan Guzman
PLUS
Johnatan Guzman
Courses Plus Student 2,360 Points

You should try resizing my example in codepen, if it works (like it does here) then you havent copied it right

what do you mean with rezising your example?

Johnatan Guzman
Johnatan Guzman
Courses Plus Student 2,360 Points

open my example and resize the browser (thats how you test responsiveness)

yeah ive tried it, and it seems to work on codepen, but for some strange reason it does not work on my browser, therefor i was wondering if i have a problem with the link tags

// erdrag

yeah, i copied the html, the css, and the rensponsive,

so it must be something about the link tags in the head section, thats in a wierd order

Now it Works! for some strange reason, i had to put the responsive css in the style.css folder hmmm

just a quick sum up so i got it right, (tell me if i got something wrong)

You added the div "image" to the intro pic to make it an block element , then you gave the div a width of 50% and to float to the left then you gave the nav links a width of 50% and float right, and the header is 100% so both of the elements sized up to the full width of the header

then in the media querie you gave the div"image" a width of 100% and the nav a width of 100% and the .intro-pic a width of 100% so they couldnt be side by side, so they would get on top of eatchother, then u added margin 0 auto; on the header img to make it centered to the the div"image",

but how did the navigation stay centered all the time?

// erdrag

Johnatan Guzman
PLUS
Johnatan Guzman
Courses Plus Student 2,360 Points

yes 100% correct,

And they are centered because i used text-align: center

Oh okey, making layout for desktop is the most non-difficult part, but i always seem to have problems when it comes to make layout with smaller screens, i should have started with mobile version first haha :)

thanks for helping me with this, i appreciate it!

// erdrag

Johnatan Guzman
Johnatan Guzman
Courses Plus Student 2,360 Points

Well, thats because your css is a mess (no offense), you use too much unnecessary css. I liked ur naming though, altough u never used any html5 properties. I learned a lot by using this website http://designshack.net/articles/css/5-steps-to-drastically-improve-your-css-knowledge-in-24-hours/ . You really have to understand positioning and floats. After that, if you are interested, you should learn sass. Vanille css is a pain to write, read and to maintain.

Good luck

haha its okay, im aware of that, this is the first time ive been doing a website without major help (atleast most of it) but yeah its a mess, but do i need to use html5 properties for layout? i mean cant you do that in CSS

im currently on the Web design track, so im still learning about layouts, the website looks neat, im gonna check it out, and see where it leads,

and on the web design track, eventually they are gonna go through "Sass"

kind regards. // erdrag

Johnatan Guzman
PLUS
Johnatan Guzman
Courses Plus Student 2,360 Points

Its good practice to use html5 elements when writing ur markup

so instead of ```<div class="nav"> </div>

you use the html 5 elements 
```<nav></nav>
``` or

<header>

 ```<footer>

etc

Again, I didnt say it to you to offend you, but to encourage you to write better css next time, and Im very confident you will. The less hacky code (it means that the site might look ok in the browser, but is a mess behind the scenes because you have to compensate for bad code) you write, the less problems you will have writing maintainable css. Practice makes perfect!

Yeah, but how come when i tried to change the <div class="nav"> to </nav> now. and change all in the Css folder, the links still gets wierd padding and such.

when you select something inside the nav you do like this right?

for example if i wanna select the anchor element inside the nav

nav a { padding: 5px; }

or do i have to use any of the (+ , > , ~ ) selectors

// erdrag

Johnatan Guzman
PLUS
Johnatan Guzman
Courses Plus Student 2,360 Points

yes correct you should use nav a etc

the + > ~ are selectors that are explained in the link that I gave you, I find my myself using them not a lot (but that is my mistake)