Who wants to help... several issues here

Question

Hey...

I am attempting to re-design a website for a friend as part of a hands on learning project. And I mean learning as I go along....

So there are 6 issues I am currently facing - (please ignore the colouring in certain parts - I have done it this way to make it easier for you to see the issues)

you won't be able to see certain aspects because the files are located on my directory - but i'm hoping you'll be able to pick up on my mistakes by looking at the code/CSS.

The problems I am facing with this so far is the Webcam live feed - I cannot seem to make any style to the webcam display box - You will see an example of this with the Blue border... it's just not working
I cannot get the Facebook and email logos to sit in-line (these are at the very bottom of the page)
when you click on the Webcam to get the full size version, there needs a go back button I have no idea how to do this!
there's a bit at the bottom that should countdown how many seconds until the screen updates - but the seconds don't seem to be displaying.
I cannot get the title- h1 'Sherril.co.uk to adjust with he VPW using media queries..
The same problem as 5- with the webcam when reducing the VPW

Here is a link to the original website i am redesigning (http://sherril.co.uk/) - I did not write any of the JavaScript in this code - nor do i fully understand JavaScript yet - as i said i am very much learning as i go along - so please do not give me long complicated answers if avoidable - i am very fortunate to have my brother as a web developer so where i cant find help here i'm sure he can fix it)!

I realise everything is centre aligned and that's because i'm finding it a chore to position anything any where else - I would quite like to position the webcam to the left, and have the content in the footer sit beside the cam feed on the right, if anyone can explain how i do this easily feel free ...

if there's any code that looks like it's not doing anything it's probably not so please tell me!

Any way see what you guys think ...

here's my index page:

<!DOCTYPE html> <html> <head> <link href="images/favicon.ico" rel="shortcut icon">

<meta name="description" content="Sherril.co.uk gives you the unique experience of being able to check out what's happening in a beautiful valley on Dartmoor" />
<meta name="description" content="Dartmoor Valley Weather Webcam">
<meta http-equiv="refresh" content="43200">
<title>Sherril.co.uk | Webcam</title>

<link href="css/main.css" rel="stylesheet">
<link href="css/normalize.css" rel="stylesheet">
<script type="text/javascript" src="css/lytebox/lytebox.js"></script>
<link href="css/lytebox/lytebox.css" rel="stylesheet">

</head>

<body>

<header class="main-header">
    <h1>Sherril.co.uk</h1>

    <!-- Nav-menu -->

            <ul class="main-nav">
                <li><a href="index.html">Home</a></li>
                <li><a href="gallery.html">Gallery</a></li>
                <li><a href="iphone.html">MobileLite</a></li>
                <li><a href="snapshots.html">Snapshots</a></li>
                <li><a href="timelapse.html">Timelapse</a></li>

                <!-- POSSIBLY ADD THESE -->

                <!--   <li><a href="wildlife.html">Wildlife</a></li> -->
                <li><a href="weather-forecast.html">Weather</a></li>
            </ul>


</header>

<!-- Photo banner  each image is 350px by 223px -->

</div>

<!-- content for home page  -->

<h2>Unique Dartmoor Valley Overlook Webcam</h2>

<!--  TO GO TO THE LEFT -->

<p>This webcam displays a unique valley on Dartmoor, a place which people have come to for hundreds of years and have found peace and tranquility!<br> This website is here for anyone to appreciate the beautiful view from this valley, and share it for a moment or two.<br> You may just want to use this unique webcam view to see what the weather is doing in the valley- If so our timely snapshots can help.<br> You can either check out the weather live using the webcam or visit our <a href="gallery.html">Browsing Gallery</a></p>

</div>

<div class="secondary-content col">

    <a href="http://www.sherril.co.uk/webcam-large.jpg" class="live-Webcam" rel="lytebox" alt="Live Webcam" title='<a href="webcam-large.jpg">Download Full Size</a>'>
            <img name="campicture" src="http://www.sherril.co.uk/webcam.jpg" width="640" height="480" alt="Live Webcam" /></a>
    <p id="shadow">

</div>



<!-- footer with facebook/twitter to go here -->

<div class="main-footer">

    <!-- sunrise & sunset clock JS -->
     <p class="sunrise">Sunrise due at: 06:46 (GMT)<br>Sunset due at: 18:05 (GMT)<br>Image will automatically refresh in:<form NAME="form1"><input TYPE="text" NAME="clock" SIZE="2" VALUE>
    seconds<br></form><br>4 unique visitors in the last hour</p>

    <p>If you would like to get in contact with us please click on the email link below - <br>Or alternatively we'd love you to take a look at our Facebook page, click the Facebook link below!</p>

    </div>

</body>

<script type="text/javascript"> var _gaq = _gaq || []; _gaq.push(['_setAccount', 'UA-1667085-12']); _gaq.push(['_trackPageview']); (function() { var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true; ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s); })(); </script>

</div>

</div>

</body>

</script>

</html>

Here's my Main CSS page

{margin: 0; padding: 0;}

body { font: 1.1em/1.5 Helvetica, Verdana, sans-serif; background: #ffffff; }

/* Main Wrapper -------------------------------------------------------------------------------------------------------*/

.main-wrapper { width: 90%; overflow: hidden; margin: auto; background: #101211; }

/* header -----------------------------------------------------------------------------------------------------------*/

.main-header { width: 100%; margin: 25px auto; color: #E1EDC2; text-align: center; }

header h1 { text-align: center; font: 100 60px/1.5 Helvetica, Verdana, sans-serif; margin-bottom: 20px; }

/* Nav menu---------------------------------------------------------------------------------------------------------- */

.main-nav, .main-nav li { display: inline-block; }

.main-nav li { margin-right: 5px; border-radius: 5px; }

.main-nav a { padding: 8px; color: #E1EDC2; background-color: #3C624C; border-style: outset; text-decoration: none; width: 8em; display: block; }

.main-nav a:hover {color: white; text-decoration: none; background-color:#000000;} .main-nav a:active {background-color: #f4ebb9;}

/* photo banner ------------------------------------------------------------------------------------------------------*/

.photobanner { height: 233px; width: 3550px; margin-bottom: 30px; }

.photobanner img { -webkit-transition: all 0.5s ease; }

.photobanner img:hover { -webkit-transform: scale(1.1); -moz-transform: scale(1.1); -o-transform: scale(1.1); -ms-transform: scale(1.1); transform: scale(1.1); cursor: pointer;

-webkit-box-shadow: 0px 3px 5px rgba(0,0,0,0.2);
-moz-box-shadow: 0px 3px 5px rgba(0,0,0,0.2);
box-shadow: 0px 3px 5px rgba(0,0,0,0.2);

}

/* KeyFrame animations for banner ------------------------------------------------------------------------------------------- */

.first { -webkit-animation: bannermove 60s linear infinite; -moz-animation: bannermove 60s linear infinite; -ms-animation: bannermove 60s linear infinite; -o-animation: bannermove 60s linear infinite; animation: bannermove 60s linear infinite; }

@keyframes bannermove { 0% { margin-left: 0px; } 100% { margin-left: -2125px;} }

@-webkit-keyframes bannermove { 0% { margin-left: 0px; } 100% { margin-left: -2125px; } }

@-moz-keyframes bannermove { 0% { margin-left: 0px; } 100% { margin-left: -2125px; } }

@-ms-keyframes bannermove { 0% { margin-left: 0px; } 100% { margin-left: -2125px; } }

@-o-keyframes bannermove { 0% { margin-left: 0px; } 100% { margin-left: -2125px; } }

/* Main content -------------------------------------------------------------------------------------------------------*/

h1 {text-align: center;}

.primary-content.col { text-align: center; padding: 10px; color: #E1EDC2; margin: 50px 0 0 0; font-size: 1em; font-family: Helvetica, Verdana, sans-serif; }

/* Webcam ----------------------------------------------------------------------------------------------------- */

.secondary-content.col { margin: 60px 0 0 0; text-align: center; padding: 25px; height: 500px; background-color: #3C624C; }

.live-Webcam { border: 10px solid blue; }

/* footer ----------------------------------------------------------------------------------------------------- */

.main-footer { text-align: center; padding: 10px; color: #E1EDC2; }

/* Clock----------------------------------------------------------------------------------------------------- */

.sunrise { color: #E1EDC2; font-size: 1em; padding: 20px; text-align: center;

}

/icons ------------------------------------------------------------------------------------------------------/

.icon ul { display: inline; }

/* Media Queries -------------------------------------------------------------------------------*/

@media (max-width: 768px) {

.main-header,
.title,
.main-nav li,
.col {
    display: block;
    width: initial;
    height: initial;
    margin: initial;
}

.main-nav {
    padding-left: 1px;
}

.main-nav li {
    margin-top: 15px;
}

.h1 { display: block;}

.photobanner { display: none; }

}

Answer 1 · 2014-03-24T02:24:09Z

March 24, 2014 2:24am

Okay well I promise to be as constructive as I can :) You have taken on a rather large project for a new player in the web world, that is not to say it cannot be done. Rather than try to give you a long description I'd like to help you learn how to fix the items listed.

Id suggest the entire HTML deep dive, CSS Deep Dive, Intro to Programming, Javascript Deep Dive and Interactive Website series.

The HTML helps us spot things like your normalize.css needs to go before your main.css, it reads them top to bottom so you want the "top level" or main css to be last.

CSS is, well its the elephant in the room for most designers. I am a Web Developer and I still had to learn it even though I am atrocious at design because jQuery uses it (I'll get to that)

The Javascript courses may not be entirely needed because a lot of what you want to do can be found on the forums here or Stackoverflow, however jQuery would make your life a lot easier which is truncated Javascript. Andrew is a wonderful chap who covers jQuery in the Interactive Website videos.

Everything you need to do everything above is on this site. Its just important to take the following 3 things and keep them in mind:

It takes time to learn and master these skills, a hands on project is an excellent idea to learn what you need as you go.

Tackle the website in pieces, Id handle the CSS first.

And finally possibly most important of all to keep in mind is: The people teaching the videos have been doing this stuff for years, while a video may not cover your explicit problem by the end of a deep dive you should know enough to tackle 80%-90% of the issues above.

Now as an aside some of the format issues are likely due to the layout chosen in the CSS. Older websites used a float layout instead of the newer (and better) Grid system.

I did look over the old website, my initial response would: Wordpress or Bootstrap. But those are a bit more complicated for a newer person on the field.

I apologize for the extremely long reply, I am happy to help out on the project but since you made such an emphasis on learning as you I thought Id start by telling you what you needed to watch to complete it.

Welcome to the Treehouse Community

Looking to learn something new?

Tamsin Waters

Tamsin Waters

Who wants to help... several issues here

1 Answer

Curtis Schrum

Curtis Schrum