Jump to content

AJBrewster

Members
 View Profile  See their activity

  • Posts

    3

  • Joined

  • Last visited

AJBrewster's Achievements

Newbie

Newbie (1/7)

0

Reputation

  1. AJBrewster
    Quick update on this but I got around to redoing it. Decided to rewrite it all as mobile first and so far I have it all working as I wanted on mobiles, tablets and desktops. Did the CSS in a slightly different format with classes instead of just ID's and made use of the meta tags Gonna do a few more random little projects and then move onto JavaScript Thank you very much for the advice guys, greatly appreciate it! Until my next issue
  2. AJBrewster
    First off, thank you very much for giving a hand and taking the time by going through it all and giving more advice than I asked for, I greatly appreciate it! I will run through this all tomorrow as it's getting a bit late now and I will let you know how I get on! I'm probably just going to rewrite it all to include the metatags and mobile first design! I was kicking myself after I had completed the CSS and realised I could have used a class instead of loads of different ID's! All good practice either way! Edit: Those validator checks are a good shout too, didn't even know about them!
  3. AJBrewster
    First off, first post here so hope I'm not breaking any rules, apologies if I am. Also, apologies for the poor code, my first go at making a website! I have already noticed that I could've optimised it much better than what it is currently with classes and such, so apologies to anyone that is willing to go through it and help me! Anyway, as it stands I have the page working on my desktop whenever I load it up, however, whenever I load it up on a smaller device such as a tablet or mobile phone, there is a lot of white space off to the right and the scrolling Nav Bar I have goes out of alignment into the white space. I currently have it uploaded to my server at https://voidwebdesign.co.uk (Ignore the lame domain name, just needed something to work with and all the good ones I came up were taken ) so you can see how it reacts on your devices. Here is the code: HTML <!DOCTYPE html> <head> <title>Garrett's Kennels & Dog Training</title> <link rel="stylesheet" type="text/css" href="css/normalise.css"> <link rel="stylesheet" type="text/css" href=""> <link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Architects+Daughter|Cinzel"> </head> <body> <div id="nav"> <ul> <li>Navigation</li> <a href="#about"><li>About</li></a> <a href="#kennel"><li>Kennel</li></a> <a href="#training"><li>Training</li></a> <a href="#booking"><li>Booking</li></a> <a href="#contact"><li>Contact</li></a> </ul> </div> <aside id="left"> <div id="socialmedia"> <a href=""><img src="imgs/social media/facebook.png"></a> <br> <a href=""><img src="imgs/social media/twitter.png"></a> <br> <a href=""><img src="imgs/social media/instagram.png"></a> <br> <a href=""><img src="imgs/social media/youtube.png"></a> </div> </aside> <aside id="right"> </aside> <header> <h1>Garrett's Kennels and Dog Training</h1> <h2>Obedience and Second Home</h2> <div id="about"> <h3>About</h3> <div id="aboutfill"> <p>Bla bla bla filler text bla bla bla Bla bla bla filler text bla bla. Bla bla bla filler text bla bla bla Bla bla bla filler text bla bla. Bla bla bla filler text bla bla bla Bla bla bla filler text bla bla. Bla bla bla filler text bla bla bla Bla bla bla filler text bla bla. Bla bla bla filler text bla bla bla Bla bla bla filler text bla bla. </p> <div id="aboutgallery"> <img src="imgs/kieran/kieran1edit.png"> <img src="imgs/kieran/kieran2edit.png"> <img src="imgs/kieran/kieran3edit.png"> </div> <p>Bla bla bla filler text bla bla bla Bla bla bla filler text bla bla. Bla bla bla filler text bla bla bla Bla bla bla filler text bla bla. Bla bla bla filler text bla bla bla Bla bla bla filler text bla bla. Bla bla bla filler text bla bla bla Bla bla bla filler text bla bla. </p> </div> </div> </header> <section> <div id="body"> <div id="kennel"> <h3> Kennel</h3> <div id="kennelfill"> <p>Bla bla bla filler text bla bla bla Bla bla bla filler text bla bla. Bla bla bla filler text bla bla bla Bla bla bla filler text bla bla. Bla bla bla filler text bla bla bla Bla bla bla filler text bla bla. Bla bla bla filler text bla bla bla Bla bla bla filler text bla bla. Bla bla bla filler text bla bla bla Bla bla bla filler text bla bla. Bla bla bla filler text bla bla bla Bla bla bla filler text bla bla. </p> <div id="kennelgallery"> <img src="imgs/kennel/kennel1.png"> <img src="imgs/kennel/kennel2.png"> </div> </div> </div> <div id="training"> <h3>Training</h3> <div id="trainingfill"> <p>Bla bla bla filler text bla bla bla Bla bla bla filler text bla bla. Bla bla bla filler text bla bla bla Bla bla bla filler text bla bla. Bla bla bla filler text bla bla bla Bla bla bla filler text bla bla. </p> <div id="traininggallery"> <img src="imgs/training/training1.png"> <img src="imgs/training/training2.png"> <img src="imgs/training/training3.png"> </div> <p>Bla bla bla filler text bla bla bla Bla bla bla filler text bla bla. Bla bla bla filler text bla bla bla Bla bla bla filler text bla bla. Bla bla bla filler text bla bla bla Bla bla bla filler text bla bla. Bla bla bla filler text bla bla bla Bla bla bla filler text bla bla. </p> <br> <p>Bla bla bla filler text bla bla bla Bla bla bla filler text bla bla. Bla bla bla filler text bla bla bla Bla bla bla filler text bla bla. Bla bla bla filler text bla bla bla Bla bla bla filler text bla bla. Bla bla bla filler text bla bla bla Bla bla bla filler text bla bla. </p> </div> </div> <div id="booking"> <h3>Booking</h3> <div id="bookingfill"> <p>Bla bla bla filler text bla bla bla Bla bla bla filler text bla bla. Bla bla bla filler text bla bla bla Bla bla bla filler text bla bla. Bla bla bla filler text bla bla bla Bla bla bla filler text bla bla. Bla bla bla filler text bla bla bla Bla bla bla filler text bla bla. </p> </div> </div> </div> </section> <footer> <div id="contact"> <h3>Contact</h3> <div id="contactfill"> <ul id="openingtimes"> <li>Opening Times:</li> <li>Monday: 0900 - 1700</li> <li>Tuesday: 0900 - 1700</li> <li>Wednesday: 0900 - 1700</li> <li>Thursday: 0900 - 1700</li> <li>Friday: 0900 - 1700</li> <li>Saturday: 1000 - 1700</li> <li>Sunday: 1000 - 1400</li> </ul> <div id="emailcontact"> <p>Email Address: yourboijimbo@boi.com</p> <p>Contact Number: 01476 801 801</p> </div> <div id="contactgallery"> <a href="https://uk.trustpilot.com/"><img src="imgs/social media/trustpilot2.png"></a> </div> </div> </div> <div id="copyright"> <p>©Jimmy Boi 2017</p> </div> </footer> </body> CSS html { width: 100%; height: 100%; margin: 0px; padding: 0px; overflow-x: hidden; } body { padding: 0% 0%; margin: 0% 0%; position: relative; font-family: 'Architects Daughter', cursive; } #nav { padding: 0% 0%; margin: 0% 0%; position: fixed; top: 30%; left: 70%; z-index: 2; } #nav li { list-style: none; text-decoration: none; text-align: center; color: black; } #nav a { padding: 0% 0%; margin: 0% 0%; list-style: none; text-decoration: none; text-align: center; color: black; } #nav a:link { text-decoration: none; } #nav a:visted { text-decoration: none; } #nav a:hover { text-decoration: none; } #nav a:active { text-decoration: none; } #nav li { padding: 0% 0%; font-size: 2.5em; font-size: 2vw; font-weight: bold; } #nav a li { padding: 7.5% 0%; font-size: 1.5em; font-size: 1.3vw; font-weight: bold; } /******************************* SIDE PANELS *******************************/ #left { width: 12.35%; height: 100%; padding: 0 0 0 0; margin: 0 0 0 0; position: absolute; left: 0%; background-color: #ffffff; border-right-style: solid; border-color: black; } #left a img { max-width: 50%; max-height: 50%; position: relative; top: 300px; left: 25%; } #socialmedia { position: ; top: ; } #right { width: 12.5%; height: 100%; padding: 0 0 0 0; margin: 0 0 0 0; position: absolute; left: 87.5%; background-color: #ffffff; border-left-style: solid; border-color: black; } #right a img { } /******************************* HEADER & UPPER PAGE *******************************/ header { max-width: 75%; height: auto; position: relative; left: 12.5%; background-image: url("E:/Documents/Development/Web Dev/Garrett's Kennels/imgs/kieran/kieranbackground.png"); background-size: 100% 100%; z-index: 1; } header h1, h2 { padding: 0% 0%; margin: 0% 0; text-align: center; } header h1 { padding: 7.5% 0% 0% 0%; font-size: 3.5em; font-size: 3vw; } header h2 { padding: 1% 15% 0% 0%; font-size: 2em; font-size: 1.8vw; } #about { padding: 0% 0%; margin: 0% 0%; max-width: 100%; height: auto; } #about h3 { text-align: left; padding: 12.5% 0% 0% 7.5%; margin: 0% 0%; font-size: 2em; font-size: 1.5vw; } #aboutfill { max-width: 75%; } #aboutfill p { text-align: left; padding: 0% 0% 0% 14%; margin: 0% 0%; font-size: 1.5em; font-size: 1vw; } #aboutgallery { padding: 0.5% 0% 0.5% 17.5%; margin: 0% 0%; width: 100%; height: auto; } #aboutgallery img { max-width: 25%; height: auto; } /******************************* SECTION *******************************/ section { padding: 0% 0%; margin: 0% 0%; max-width: 75%; left: 12.5%; position: relative; } #body { padding: 0% 0%; margin: 0% 0%; } #kennel { padding: 0% 0%; margin: 0% 0%; max-width: 100%; height: auto; background-color: #666666; color: white; } #kennel h3 { text-align: left; padding: 1% 0% 0% 7.5%; margin: 0% 0%; font-size: 2em; font-size: 1.5vw; } #kennelfill { max-width: 75%; } #kennelfill p { text-align: left; padding: 0% 0% 0% 14%; margin: 0% 0%; font-size: 1.5em; font-size: 1vw; } #kennelgallery { padding: 0.5% 0% 0.5% 17.5%; margin: 0% 0%; } #kennelgallery img { max-width: 25%; height: auto; } #training { padding: 0% 0%; margin: 0% 0%; max-width: 100%; height: auto; } #training h3 { text-align: left; padding: 1% 0% 0% 7.5%; margin: 0% 0%; font-size: 2em; font-size: 1.5vw; } #trainingfill { max-width: 75%; } #trainingfill p { text-align: left; padding: 0% 0% 0% 14%; margin: 0% 0%; font-size: 1.5em; font-size: 1vw; } #traininggallery { padding: 0.5% 0% 0.5% 17.5%; margin: 0% 0%; } #traininggallery img { max-width: 25%; height: auto; } #booking { padding: 0% 0%; margin: 0% 0%; max-width: 100%; height: auto; } #booking h3 { text-align: left; padding: 1% 0% 0% 7.5%; margin: 0% 0%; font-size: 2em; font-size: 1.5vw; } #bookingfill { max-width: 75%; } #bookingfill p { text-align: left; padding: 0% 0% 0% 14%; margin: 0% 0%; font-size: 1.5em; font-size: 1vw; } /******************************* FOOTER *******************************/ footer { padding: 0% 0%; margin: 0% 0%; max-width: 75%; left: 12.5%; position: relative; font-family: 'Cinzel'; font-weight: bold; color: white; background-color: #666666; } #contact { padding: 0% 0% 0% 0%; margin: 0% 0% 0% 0%; max-width: 100%; height: auto; } #contact h3 { text-align: left; padding: 1% 0% 0% 7.5%; margin: 0% 0%; font-size: 2em; font-size: 1.5vw; } #contactfill { max-width: 75%; } #contactfill p { text-align: left; padding: 0% 0% 0% 10%; margin: 0% 0%; font-size: 2em; font-size: 1.5vw; } #emailcontact { padding: 2.5% 0% 0% 0%; margin: 0% 0% 0% 0%; } #openingtimes { list-style: none; padding: 2.5% 0% 0% 10%; margin: 0% 0% 0% 0%; font-size: 1.5vw; } #contactgallery { padding: 0% 0% 0% 10%; margin: 0% 0%; } #contactgallery img { max-width: 25%; height: auto; } #copyright { position: relative; left: 70%; bottom: 50px; font-size: 1em; font-size: 1vw; } Thank you to anyone that is willing to help, I will greatly appreciate it
×
×
  • Create New...