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
Laura Brasington
2,949 PointsHi, for some reason my nav is breaking out of my header when I apply a breakpoint and float it to the right.
Sorry there is so much code to sift through. As far as I can tell, the floats are not recognizing their parent element once they are floated with the break point. Is there some line of code that I am forgetting that forces the content to stay in their parent element. I am having a similar problem on my contact page, so any help with this would be greatly appreciated! (And if you happen to see any other glaring error in my code, feel free)
Here is my html code from top to end of header: <!DOCTYPE html> <html lang="eng"> <head> <meta charset="utf-8"> <title>WAKAME | Cheltenham</title> <link rel="stylesheet" type="text/css" href="normalize.css"> <link href='http://fonts.googleapis.com/css?family=Playfair+Display:400,700,400italic,700italic|Open+Sans' rel='stylesheet' type='text/css'> <link rel="stylesheet" type="text/css" href="wakamestyle.css"> <link rel="stylesheet" type="text/css" href="wakameresponsive.css"> </head> <body> <header> <a href="wakameindex.html" id="logo"> <h1>WAKAME</h1> </a> <img src="Wakame Images\wakamelogo.jpg" alt="Wakame Logo" id="logo-pic"> <h4 id="h4">Asian Eatery and Noodle Bar</h4> <h2 id="h2">CHELTENHAM</h2>
<nav>
<ul>
<li><a href="wakameindex.html" class="selected">Home |</a></li>
<li><a href="gallery.html">Gallery |</a></li>
<li><a href="menu.html">Menu |</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</nav>
</header>
This is my CSS as it applies to the header and nav:
/HEADINGS/
header { background: #676a37; width: 100%; padding-top: 30px; /border: 1px solid #3d401b;/ }
logo-pic {
display: block;
max-width: 150px;
margin: 30px auto;
border-radius: 100%;
}*/
/*{ font-family: 'Playfair Display: italic', serif; font-size: 1em; font-weight: normal; margin-bottom: -10px; font-color: } */
logo {
text-align: center;
margin: 0;
}
/All headings text- cream/
h1, h2, h3, h4, h5, h6 {
font-family: 'Open Sans', sans-serif;
color: #FAF2D0;
text-align: center;
}
h1 { font-family: 'Playfair Display', serif; margin: 40px 0 15px 0; font-size: 3.5em; font-weight: normal; line-height: 0.8em; }
h4 {
font-family: 'Open Sans', serif;
font-size: .75em;
color: #3d401b;
}
h2 {
font-family: 'Open Sans', serif;
font-size: 1em;
color: #3d401b;
}
/Navigation/
nav { text-align: center; padding: 5px 0; margin: 5px 0 0;
}
nav { background: #575b27; border-top: 2px solid #3d401b; border-bottom: 2px solid #3d401b; max-width: 100%;
}
nav ul{ list-style: none; margin: 0 10px; padding: 0;
}
nav li { display: inline-block;
}
nav a , nav a:visited { color: #FAF2D0; }
nav a.selected, nav a:hover{ color: #AFA992 }
Here are my media queries:
@media screen and (min-width: 480px) { /********************** Contact Page ***********************/
#map-div {
width: 50%;
float: left;
}
#contact-div {
width: 40%;
float: right;
}
}
/**********************
Gallery
***********************/
#gallery li {
width: 45%;
float: left;
}
@media screen and (min-width: 669px) { /********************** Header ***********************/ nav { background: none; border: none; float: right; font-size: 1.125em; margin-right; 5%; text-align: right; width: 45%; }
#logo {
float: left;
margin-left: 5%;
text-align: left;
width: 45%;
}
h1 { font-size: 5em; }
h2 { font-size: 0.825em; margin-bottom: 20px; }
/adds a very nice accent strip of a darker colour/ header { border-bottom: 5px solid #3d401b; margin-bottom: 60px; padding-bottom: 40px; } /div beneath the header/ #wrapper { clear: both; } }
2 Answers
James Home
12,011 PointsTry editing your post so that the markdown code is easier to read. It would be helpful to have a link to the page/codepen/workspace.
When things break their position for me it is usually to do with it lacking a clearfix.
Laura Brasington
2,949 PointsThanks James, Sorry about the crazy code, I wrote it in notepad++ not workspaces, so obviously I couldn't link it so I just copied and pasted it and that was how it presented- really confusing I know. I will do it differently next time.
I will try the clearfix, thanks
Ana Gledovic
7,465 PointsAna Gledovic
7,465 PointsHi Laura, could you please rewrite your css to make it nice and clear? It is confusing at the moment, looks like it has a lot of syntax errors.