NEW student trying to code a "Responsive" website with HTML 5 /CSS

Question

OK, so I learned how to do XHTML / HTML / CSS four years ago in college. But, as we all know, (4) years on the internet is a long time. I'm using Treehouse to re-learn what I already knew, but then also hopefully learn some new tips and tricks that I didn't know. I'm currently working on my DJ website and trying to make it a Responsive website using HTML & CSS. For the most part, it seems to be working, but I'm constantly having issues with my page "breaking." Things not centering up properly, items not scaling correctly, etc.

Now again, I'm relearning this, so maybe I'm making a beginners mistake, but I'm about to pull my hair out trying to fix it. I'm used to making static websites with pixel dimensions, but ever since I tried doing this one to be able to fit on mobile and other devices, I've used percentages which work for the most part. The other deal is that the first page has a video that spans the entire page. I read a tutorial that said the only way to do that with HTML / CSS was to use a "z-index," and the only way to properly use the "z-index" was to make things positioned in "relative" mode. So, most everything on the page is positioned in "relative" mode. I can upload the codes/files as I'm sure that will help you all see what I'm doing. If it's still up, you can go to www.DJKNKT.com to see the first page on what I want it to look like. It's through Squarespace, but I'm trying to save money, and also I don't like the lack of flexibility that comes from using templates. I'd much rather learn to code and have control over everything about the page. Including (hopefully soon) learning JQuery / JavaScript and PHP.

Answer 1 · 2016-12-26T23:14:26Z

December 26, 2016 11:14pm

Hi Troy,

first clean up your Markup by wrapping your links in an unordered list.

<footer>
    <ul>
      <li><a href="http://www.facebook.com/djknkt"><img alt="Facebook" src="images/Facebook.png"></a></li>
      <li><a href="http://www.twitter.com/djknkt"><img alt="Twitter" src="images/Twitter.png"></a></li>
      <li><a href="http://www.instagram.com/djknkt"><img alt="Instagram" src="images/Instagram.png"></a></li>
      <li><a href="http://www.youtube.com/assortedflavasTV"><img alt="Youtube" src="images/Youtube.png"></a></li>
      <li><a href="http://www.soundcloud.com/djknkt"><img alt="Soundcloud" src="images/Soundcloud.png"></a></li>
      <li><a href="http://www.bandsintown.com/djknkt"><img alt="BandsInTown" src="images/BandsInTown.png"></a></li>
    </ul>
</footer>

To center the unordered list items you have to add text-align: center; to the footer ul selector in your given stylesheet. The text-align property influences child elements which are displayed as inline-block. See this working in my Codepen Example.

Answer 2 · 2016-12-26T09:34:07Z

December 26, 2016 9:34am

Here's the HTML thus far for the first page with the video on it....

'''html

<!DOCTYPE html>

<html> <head> <meta charset="utf-8" /> <title>DJ KNKT | Christian Turntablist</title> <link rel="stylesheet" href="css/normalize.css"> <link href="https://fonts.googleapis.com/css?family=Arimo|Raleway" rel="stylesheet">
<link rel="stylesheet" href="css/promo_page.css"> </head>

<main>
    <div>Christian DJ. Turntablist. Lover of Art.</div>
    <ul>
        <a href="index.html"><li>Booking Form</li></a>
        <a href="pages/news.html"><li>Enter Site</li></a>
        <a href="index.html"><li>You Shall Not Pass</li></a>
    </ul>
</main>  <!-- end of "main" div --> 

<footer>
    <section>
        <a href="http://www.facebook.com/djknkt"><img alt="Facebook" src="images/Facebook.png"></a>
        <a href="http://www.twitter.com/djknkt"><img alt="Twitter" src="images/Twitter.png"></a>
        <a href="http://www.instagram.com/djknkt"><img alt="Instagram" src="images/Instagram.png"></a>
        <a href="http://www.youtube.com/assortedflavasTV"><img alt="Youtube" src="images/Youtube.png"></a>
        <a href="http://www.soundcloud.com/djknkt"><img alt="Soundcloud" src="images/Soundcloud.png"></a>
        <a href="http://www.bandsintown.com/djknkt"><img alt="BandsInTown" src="images/BandsInTown.png"></a>
    </section> <!-- end of unordered list -->
</footer>

<video id="bgVid" autoplay loop muted>
        <source src="videos/CaptiveFree_Event.mov" type="video/mp4" />
        Your browser does not support the video tag. Please download the newest version of your preferred browser.
</video>

</body> </html> '''

Answer 3 · 2016-12-26T09:35:20Z

December 26, 2016 9:35am

Here is the CSS......

'''css

/Main Stylesheet for DJ KNKT promotional page/

{ margin: 0px; padding: 0px; }

body { /background-image: url("../images/bg.png");/ background-color: black; background-repeat: repeat; font-family: 'Raleway', sans-serif; font-weight: bolder; font-size: 1.2em; }

/******************************************************* ---- HEADING SECTION ---- *******************************************************/

header { /background: rgba(200, 0, 0, 1);/ width: 100%; max-width: 1024px; margin: 0 auto; /z-index: 1000;/ position: relative; }

logo {

width: 75%; max-width: 600px; margin: 0 auto; padding: 2% 0; display: block; position: relative; }

/******************************************************* ---- MAIN SECTION ---- *******************************************************/

main { /background: rgba(0, 0, 200, 1);/ color: white; width: 100%; /height: 400px;/ max-width: 1024px; margin: 0 auto; position: relative; text-align: center; }

main ul { /background-color: white;/ color: white; width: 100%; max-width: 1024px; margin: 0 auto; padding: 0; list-style: none; position: relative; text-align: center; }

main ul li { display: inline-block; padding: 1.25%; margin: 2% 0.5%; float: none; border: 2px solid white; font-size: 0.75em; }

main ul a { color: white; text-decoration: none; }

main ul a:hover li { background-color: white; color: #777; text-decoration: none; }

main p { padding-top: 10%; padding-bottom: 2%; }

@media screen and (max-width: 600px) { main ul li { display: block; padding: 2% 0; margin: 2% 10%; } }

/******************************************************* ---- FOOTER SECTION ---- *******************************************************/

footer { /background: rgba(0, 0, 170, 1);/ width: 100%; max-width: 1024px; margin: 0 auto; padding: 0; position: relative; display: block; }

footer ul { /background-color: #cf0;/ list-style-type: none; width: 100%; margin: 0 auto; padding: 0; display: block; position: relative; }

footer li { background: rgba(0, 170, 0, 1); width: 5%; margin: 0 auto; padding: 0; clear: both; display: inline-block; }

footer img { /width: 60%;/ padding: 0; }

footer section { margin: 0 auto; }

footer a { opacity: 0.5; }

footer a:hover { opacity: 1; }

/******************************************************* ---- VIDEO SECTION ---- *******************************************************/

bgVid {

min-width: 100%; min-height: 100%; width: auto; height: auto; top: 50%; left: 50%; position: fixed; z-index: -100; -ms-transform: translateX(-50%) translateY(-50%); -moz-transform: translateX(-50%) translateY(-50%); -webkit-transform: translateX(-50%) translateY(-50%); transform: translateX(-50%) translateY(-50%); background-size: cover; }

'''

Answer 4 · 2016-12-26T13:49:49Z

December 26, 2016 1:49pm

Hi Troy, welcome to Treehouse. Please specify your problem so that people can help you with a concrete line of code. Otherwise it is difficult to comprehend your issues. Why do you want to use the z-index? And what do you want to achieve in the solution? Furthermore try to use the Markdown Cheatsheet correctly for making your code more readable.

Regards, Mathis

Answer 5 · 2016-12-26T19:06:31Z

December 26, 2016 7:06pm

Ok, let me try to be a little bit clearer...

My opening page of my website should look like (http://www.djknkt.com). I'm currently re-doing it in HTML/CSS and I've got most of it figured out, but my footer won't center up. I'm wondering if its because of my lack of knowledge in responsive coding. Below is the HTML & CSS code used to try and center up my footer, with its icons.

Answer 6 · 2016-12-26T19:07:27Z

December 26, 2016 7:07pm

Also, I'm trying to do the Markup like the Cheatsheet says to do, but its not working. At least not for the CSS portion.

Welcome to the Treehouse Community

Looking to learn something new?

Troy Cooke

Troy Cooke

NEW student trying to code a "Responsive" website with HTML 5 /CSS

6 Answers

mathisvester

mathisvester

Troy Cooke

Troy Cooke

Troy Cooke

Troy Cooke

Troy Cooke

Troy Cooke

logo {

bgVid {

mathisvester

mathisvester

Troy Cooke

Troy Cooke

Troy Cooke

Troy Cooke

Troy Cooke

Troy Cooke

Troy Cooke

Troy Cooke

Troy Cooke

Troy Cooke