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!

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

Posted January 7, 2015 10:40pm by

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;
}

January 7, 2015 10:41pm

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

January 7, 2015 11:15pm

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.

January 8, 2015 3:15pm

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);
}

January 9, 2015 1:49pm

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>

January 9, 2015 3:22pm

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

January 9, 2015 3:30pm

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!

January 9, 2015 4:01pm

Was alot of trouble to fix. But I did it : http://codepen.io/sheez44/pen/Qwdabj

January 9, 2015 4:20pm

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

January 9, 2015 4:51pm

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

January 9, 2015 4:54pm

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?

January 9, 2015 5:29pm

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?

January 9, 2015 5:40pm

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

January 9, 2015 5:46pm

what do you mean with rezising your example?

January 9, 2015 5:49pm

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

January 9, 2015 5:51pm

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

January 9, 2015 5:55pm

have u also copied the html? I made some change there too

January 9, 2015 6:10pm

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

January 9, 2015 6:41pm

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

January 9, 2015 6:45pm

yes 100% correct,

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

January 9, 2015 7:08pm

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

January 9, 2015 9:14pm

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

January 9, 2015 10:19pm

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

January 9, 2015 11:41pm

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

 ```<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!

January 9, 2015 11:53pm

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

January 10, 2015 9:04am

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)

Posting to the forum is only allowed for members with active accounts.
Please sign in or sign up to post.

Welcome to the Treehouse Community

Looking to learn something new?

erdragerdragsson

erdragerdragsson

Header Logo and links get messed up!

erdragerdragsson

erdragerdragsson

10 Answers

Johnatan Guzman

Johnatan Guzman

erdragerdragsson

erdragerdragsson

erdragerdragsson

erdragerdragsson

Johnatan Guzman

Johnatan Guzman

erdragerdragsson

erdragerdragsson

Johnatan Guzman

Johnatan Guzman

erdragerdragsson

erdragerdragsson

Johnatan Guzman

Johnatan Guzman

erdragerdragsson

erdragerdragsson

erdragerdragsson

erdragerdragsson

Johnatan Guzman

Johnatan Guzman

erdragerdragsson

erdragerdragsson

Johnatan Guzman

Johnatan Guzman

erdragerdragsson

erdragerdragsson

Johnatan Guzman

Johnatan Guzman

erdragerdragsson

erdragerdragsson

erdragerdragsson

erdragerdragsson

Johnatan Guzman

Johnatan Guzman

erdragerdragsson

erdragerdragsson

Johnatan Guzman

Johnatan Guzman

erdragerdragsson

erdragerdragsson

Johnatan Guzman

Johnatan Guzman

erdragerdragsson

erdragerdragsson

Johnatan Guzman

Johnatan Guzman