Jump to content

buza586

Members
  • Posts

    14
  • Joined

  • Last visited

Everything posted by buza586

  1. I also forgot to put this at the top of the code: <div id="googleMap" style="width:100%;height:400px;"></div> in my example above. It doesn't actually say anything but I've attached a picture. The map works for a moment and then I get the error. Which makes me think my code is right but I just don't know how to use my api from Google.
  2. I got the code below from W3Schools tutorial on Google maps. I also received an API code from google. When I try to put this on my site I get an error message in what looks like an iframe. I think I am suppose to do something additional with my api code. Google had me set a project name and then just generated a code. I don't know if I am suppose to do something besides generate that code in order for it to work for the specific map I want on my site. Can anyone tell me something obivous I am doing wrong or something that I still need to do on google? <script> function myMap() { var mapProp= { center:new google.maps.LatLng(51.508742,-0.120850), zoom:5, }; var map=new google.maps.Map(document.getElementById("googleMap"),mapProp); } </script> <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyARr9stC0XnoFmg2DEqjj5U8sTC_nkvg0A&q&callback=myMap"></script> <iframe width="450" height="250" frameborder="0" style="border:0" src="https://www.google.com/maps/embed/v1/search?AIzaSyARr9stC0XnoFmg2DEqjj5U8sTC_nkvg0A&q=Wayne+State+University" allowfullscreen> </iframe>
  3. I already did that search, still not quite understanding how it fits in with my classes websites.
  4. I have students creating sites that have multiple pages that link together through a nav bar and also have images with an external file source. When students send them to me obviously the images don't work because I don't have them saved in folders with their sites and also the links don't work to the other .htm pages for the same reason. My first thought was to have students send me all files so that they would all be in my downloads folder and in theory work. They work to an extent but images are distorted. My second solution was to use a zip file but that doesn't seem to work either. Any help with this is much appreciated.
  5. Thanks, I just made it one table and put the headers under the td and it worked great!
  6. I am making a site using a table with no borders to organize information on the page to display like a list. I was having issues with td pushing the adjacent td over where as I feel they should line up as left alignment. So I copied just the table information and the padding to another page just to simplify the HTML and locate the issue. Even with the code below, the alignment is still off. Even if I remove the padding the alignment is off. I have also tired changing the width of the table, no help. The only thing that seems to work is shortening the td content. Can anyone help me fix this? <!DOCTYPE html> <html> <style> .table { padding:150px; } </style> <body> <div class="table"> <table style="width:100%"> <tr> <th>Job</th> <th>Food</th> </tr> <tr> <td><p>Technology Teacher</p></td> <td><p>Lamb Karahi</p></td> </tr> <tr> <td><p>Previously a Manager</p></td> <td><p>Pho Thai</p></td> </tr> </table> <table style="width:100%"> <tr> <th>Movies</th> <th>Shows</th> </tr> <tr> <td><p>Count of Monte Cristo</p></td> <td><p>Chopped</p></td> </tr> <td><p>Good Will Hunting</p></td> <td><p>West World</p></td> </table> </div> </div> </body> </html>
  7. I have 2 lists I am trying to complete in my website. The first list I have is a navigation bar that runs horizontally. I have all of the css and html for that. In addition, under my gallery division I am trying to add another list to replace my table and make it layout similar to the table. When I add my list it is effected by the navigation bar css. To remedy this I added a class to the division that carries nav bar and added that syntax to my list css such as <div class="nav"> and nav, ul {}. This doesn't seem to be helping though. I don't want to give a class for every li or ul and I'm sure it is an easy fix but I need some help. <!DOCTYPE html> <html> <head> <style> * { box-sizing: border-box; } .header, .footer { background-color: #333;; color: lightgrey; padding: 50px; clear: both; } a {color:white;} .clearfix::after { content: ""; clear: both; display: table; } nav, ul { list-style-type: none; margin: 0; padding: 0; overflow: hidden; background-color: #333; position: fixed; top: 0; width: 100%; } .nav, li { float: left; font-family: arial; } .nav, li a { display: block; color: white; text-align: center; padding: 14px 16px; text-decoration: none; } li a:hover { background-color: #111; } #border1 { border: 3px solid #2990EA; padding: 10px; } .birthday { float: left; margin-right: 100px; margin-left: 400px; width:500px; } .footer a { text-decoration: none; clear: both; } .column { background-color: #ebecf6; overflow: hidden; clear: both; } .container { background-color:#909ca2; } div.gallery img { width: 300px; height: 250px; padding: 5px; float: left; margin-bottom: 50px; } .gallery1 { margin-left: 500px; } .table1 { padding:100px; } th { font-size: 200%; } tr { font-size: 150%; } tr, p { margin-left: 200px; } </style> </head> <body style="font-family: sans-serif;"> <div class="nav"> <ul> <li class="li" style="float:right"><a href="#about school">ABOUT SCHOOL</a></li> <li class="li" style="float:right"><a href="#about family">ABOUT FAMILY</a></li> <li class="li" style="float:right"><a href="#about me">ABOUT ME</a></li> <li id="border" style="float:right"><a href="#home">HOME</a></li> </ul> </div> <div class="header"> <h1 style="color: #e9cf76;text-align:center;font-size:300%">About Me</h1> </div> <div class="container"> <div class="gallery"> <img class="gallery1" src="bun.jpg" alt="Trolltunga Norway" width="100" height="100"> </div> <div class="gallery"> <img src="3eb.jpeg" alt="Trolltunga Norway" width="100" height="100"> <div class="gallery"> <img src="westworld.jpg" alt="Trolltunga Norway" width="100" height="100"> </div> <div class="list1"> <ul> <li>Technology Teacher</li> <li>Previously a Manager</li> </ul> <ul> <li>Lamb Karahi</li> <li>Pho Thai</li> </ul> </div> <div class="table1"> <table style="width:100%"> <tr> <th>Job</th> <th>Food</th> </tr> <tr> <td><p>Technology Teacher</p></td> <td><p>Lamb Karahi</p></td> </tr> <tr> <td><p>Previously a Manager</p></td> <td><p>Pho Thai</p></td> </tr> </table> </div> </div> <div class="column content"> <img class="birthday" src="birthday.jpg"> <h1 style="text-align:center;font-size:300%">Who am I?</h1> <p style="font-size: 150%">I have two children and a third on the way. My oldest child's name is Harper and her brother is called Nolan. The third baby gender is a mystery to all but me, and no I won't tell you! Minus the lack of sleep being a parent is the best thing that ever happened to me.</p> <p style="font-size: 150%"> teach technology at MMSA. I am one of the few teachers who can say that they have taught every single grade level. I graduated from Wayne State University with a Bachelor's Degree in Secondary Education in 2011. I have been teaching since 2013. </p> </div> </div> <div class="footer"> <p STYLE="text-align:center"><SPAN id="border1"><a href="https://www.weebly.com/" target="_blank">CREATE A FREE WEBSITE</SPAN></a></p> </div> </body> </html>
  8. How do you know I don't want the home button to the right?
  9. The height set worked when I put the background image in as an inline css instead of an internal css. I have little experience adding background-images so it was hard to figure out the different syntax for each. Thanks for the help, now the height set for .first works!
  10. I've made the height 100% and still no luck. I've also tried adjusting the height in pixels. No luck.
  11. I am trying to have my background in my division take up it's full height but it is only taking up the height of the header. I've tried setting the height but it doesn't budge. It will only fill as much content as I have in the section, the problem is I only want the one header and that's all. I am simply trying to recreate a webpage that I made on weebly with for my class in html but I am really stuck on this. I will post the code below and a screen shot. <!DOCTYPE html> <html> <head> <style> .first { background-image: url('trampoline.jpg'); margin-bottom: 1000px; background-size: cover; } .column { float: left; padding: 15px; } .clearfix::after { content: ""; clear: both; display: table; } ul { list-style-type: none; margin: 0; padding: 0; overflow: hidden; background-color: #333; } li { float: left; font-family: arial; } li a { display: block; color: white; text-align: center; padding: 14px 16px; text-decoration: none; } li a:hover { background-color: #111; } .footer { background-color: grey; color: white; padding: 15px; } </style> </head> <body> <ul> <li style="float:right"><a href="#news">HOME</a></li> <li style="float:right"><a href="#contact">ABOUT ME</a></li> <li style="float:right"><a href="#about">ABOUT FAMILY</a></li> <li style="float:right"><a href="#about2">ABOUT SCHOOL</a></li> </ul> <div class="first"> <h1>Hi, I'm Mr. Buza. Technology teacher</h1> </div> <div class="clearfix"> <div class="column content"> <h1>The City</h1> <p>Chania is the capital of the Chania region on the island of Crete. The city can be divided in two parts, the old town and the modern city.</p> <p>You will learn more about web layout and responsive web pages in a later chapter.</p> </div> </div> <div class="footer"> <p>Footer Text</p> </div> </body> </html>
  12. buza586

    Help with Float

    I am using the Float page in CSS from this site to teach my coding class and I was wanting students to float their image next to the paragraph and heading in the example below but I can't get it to work. Every time I have tried to add a picture it will only appear below the paragraph and not next to it. I've tried giving the image a class of "column pic", I've tried giving it it's own division and and floating it to the right, I've put these divisions in multiple places and used multiple css but I can't get it to work. I ended up using the absolute position property to move it to the position I wanted. Any help is appreciated! This is a link to the Tryit: https://www.w3schools.com/css/tryit.asp?filename=trycss_layout_cols <!DOCTYPE html> <html> <head> <style> * { box-sizing: border-box; } .header, .footer { background-color: grey; color: white; padding: 15px; } .column { float: left; padding: 15px; } .clearfix::after { content: ""; clear: both; display: table; } .menu { width: 25%; } .content { width: 75%; } .menu ul { list-style-type: none; margin: 0; padding: 0; } .menu li { padding: 8px; margin-bottom: 8px; background-color: #33b5e5; color: #ffffff; } .menu li:hover { background-color: #0099cc; } </style> </head> <body> <div class="header"> <h1>Chania</h1> </div> <div class="clearfix"> <div class="column menu"> <ul> <li>The Flight</li> <li>The City</li> <li>The Island</li> <li>The Food</li> </ul> </div> <div class="column content"> <h1>The City</h1> <p>Chania is the capital of the Chania region on the island of Crete. The city can be divided in two parts, the old town and the modern city.</p> <p>You will learn more about web layout and responsive web pages in a later chapter.</p> </div> </div> <div class="footer"> <p>Footer Text</p> </div> </body> </html>
×
×
  • Create New...