Jump to content

luke214

Members
 View Profile  See their activity

  • Posts

    66

  • Joined

  • Last visited

 Content Type 

Everything posted by luke214

  1. luke214
    No idea why, here's my css! Just a note, the #wrapper works exactly as intended, it doesn't move when the page is resized. But the #wrappernav for some reason is high above the screen, I'll attach a link to it so you can see. It seems as if no matter how much i change the margin height it never moves in line with the rest of the elements! I have a feeling the structure of my HTML is completely messed up. http://pasteboard.co/jjfhzZP1a.jpg P.S. Just did some testing, it seems whatever div tag is first in my HTML, that element ends up super high up on the screen with all the elements far below it. Here's my CSS and HTML; <!DOCTYPE html> <html lang="en"> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta charset="UTF-8"> <meta content="My website about Minerals and Rocks" name="description"> <meta content="minerals,rocks,earth,gems" name="keywords"> <meta content="index,follow/" name="robots"> <link href="styles.css" rel="stylesheet" type="text/css"> <link href="geode.ico" rel="icon"> <title>Information about Minerals and Rocks</title> </head> <body> <div id="wrappernav"> <nav id="navmenu"> <div id="textnav"> Rocks </div><br> <br> <br> <br> <div id="textnav1"> Minerals </div><br> <br> <br> <br> <div id="textnav2"> Locations </div><br> <br> <br> <br> <div id="textnav3"> Identification </div> </nav> </div> <div id="wrapper"> <noscript>Please enable Javascript</noscript> <header> <h1><ins>Welcome!</ins></h1> <p>Welcome to my website about Minerals and Rocks!<br> Hopefully you'll find 0some useful information to help you!</p> </header> <main id="content"> <article id="firstfont"> <h2>What is a Mineral</h2> <p>A mineral is a naturally occurring chemical compound. Most often, they are crystalline and abiogenic in origin.<br> A mineral is different from a rock, which can be an aggregate of minerals or non-minerals and does not have one<br> specific chemical composition, as a mineral does. The exact definition of a mineral is under debate, especially<br> with respect to the requirement that a valid species be abiogenic, and to a lesser extent with regard to it<br> having an ordered atomic structure. More information can be found <a href="https://en.wikipedia.org/wiki/Mineral" target= "_blank">here</a>!</p> <h2>What is a Rock?</h2> <p>In geology, rock or stone is a naturally occurring solid<br> aggregate of one or more minerals or mineraloids. For example,<br> the common rock granite is a combination of the quartz, feldspar<br> and biotite minerals. The Earth's outer solid layer, the lithosphere,<br> is made of rock.<br> Rocks have been used by mankind throughout history. From the Stone Age,<br> rocks have been used for tools. The minerals and metals found in rocks<br> have been essential to human civilization.<br> Three major groups of rocks are defined: igneous, sedimentary,<br> and metamorphic. The scientific study of rocks is called petrology,<br> which is an essential component of geology.<br> More information about rocks can be found <a href= "https://en.wikipedia.org/wiki/Rock_(geology)" target= "_blank">here!</a></p> </article> </main> </div> <div id="wrappertwo"> <h1><ins>Examples of Geodes</ins></h1> <p>Below is a short video showing different types of Geodes.<br> Take a look to see the different types you can find, or hopefully buy!</p> </div> <video controls="controls" id="Geodevideo" poster= "picofrock.png"><source src="Geodes.mp4" type="video/mp4"> Your browser does not support the video tag.</video> </body> </html>
  2. luke214
    Basically all I have on my html file is that view port thing, if I just add media queries to shrink all the elements would that be enough to make it mobile friendly? Or are there other tools I can use?
  3. luke214
    Ahh ok. So I guess for every element I make, I'd have to make a media query for it? So what exactly does the viewport tag do?
  4. luke214
    I've been thinking a lot about how to make all of my elements scale down with the size of someones device. I've read up that adding <meta name="viewport" content="width=device-width, initial-scale=1"> is a good start, so i've done that. I've also read that media queries are the way to go, so I was wondering if there was a way to add a media query to just scale EVERYTHING down a certain percentage depending on the users device? As you can tell I'm pretty new to all this haha. Thanks!
  5. luke214
    I FOUND THE SOLUTION! When I moved the video element in my HTML file ABOVE the nav section, so it happened before the textnav element it works! No idea why, some clarification would be good but I'm just happy it's working Guess my final question is which position i should use so the elements work best on different browsers and sizes when people zoom in and out!
  6. luke214
    Mine just turns completely white I'll add a picture attachment so you can see what i mean. You can't see it in the pic, but my mouse is over the Rocks word on the right. When it's finished transition I can see the poster image again on the video. Ahh i see what you mean. Resizing the page messes everything up What position would you recommend so that doesn't happen? Thanks for all the help by the way P.s. I've been researching and a few other people have had this problem and stated that adding this piece of code solves it, but it removes the poster image from my video which I don't want it to do. -webkit-backface-visibility: hidden;
  7. luke214
    I'm just using Google Chrome and it flickers if i add a transition to the textnav tag. I tried it in both IE and Firefox and there isn't an issue, but the video turns white only in Chrome. I'm pretty new, I just used it because it let me position stuff easier What would be the best alternative? Here's the proper css code that makes it flicker when you hover over the text on the right called "Rocks"; a:visited { color: green; } a:hover { color: red; } * { font-family: "Arial Black"; } body { background: #526F35; } #wrapper{ position: absolute; background: white; box-shadow: 0 0 50px 10px black; text-align: center; border: 5px solid black; width: 50%;; padding: 8px; margin: 10px; font-size: 17px; } #wrappertwo{ background: white; position: absolute; box-shadow: 0 0 50px 10px black; border: 5px solid black; padding: 8px; top: 70px; width: 23%; left: 1100px; font-size: 22px; text-align: center; } #Geodevideo{ position: absolute; box-shadow: 0 0 50px 10px black; border: 5px solid black; left: 1100px; top: 500px; width: 24%; } header{ font-size: 22px; } #wrappernav{ position: absolute; font-size: 30px; right: 0; top: 110px; text-align: center; background: #00CC33; border: 3px solid black; border-right: none; padding: 20px; font-weight: bold; } #textnav:hover { -moz-transform: scale(1.1); -webkit-transform: scale(1.1); -o-transform: scale(1.1); -ms-transform: scale(1.1); -webkit-transform: scale(1.1); transform: scale(1.1); transition: .5s ease-in; } #textnav1:hover { -moz-transform: scale(1.1); -webkit-transform: scale(1.1); -o-transform: scale(1.1); -ms-transform: scale(1.1); -webkit-transform: scale(1.1); transform: scale(1.1); } #textnav2:hover { -moz-transform: scale(1.1); -webkit-transform: scale(1.1); -o-transform: scale(1.1); -ms-transform: scale(1.1); -webkit-transform: scale(1.1); transform: scale(1.1); } #textnav3:hover { -moz-transform: scale(1.1); -webkit-transform: scale(1.1); -o-transform: scale(1.1); -ms-transform: scale(1.1); -webkit-transform: scale(1.1); transform: scale(1.1); }
  8. luke214
    Here's my HTML file as well in case it helps! <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta content="My website about Minerals and Rocks" name="description"> <meta content="minerals,rocks,earth,gems" name="keywords"> <meta content="index,follow/" name="robots"> <link href="styles.css" rel="stylesheet" type="text/css"> <link href="geode.ico" rel="icon"> <title>Information about Minerals and Rocks</title> </head> <body> <div id="wrappernav"> <nav id="navmenu"> <div id="textnav">Rocks</div><br><br><br><br> <div id="textnav1">Minerals</div><br><br><br><br> <div id="textnav2">Locations</div><br><br><br><br> <div id="textnav3">Identification</div> </nav> </div> <div id="wrapper"> <noscript>Please enable Javascript</noscript> <header> <h1><ins>Welcome!</ins></h1> <p>Welcome to my website about Minerals and Rocks!<br> Hopefully you'll find 0some useful information to help you!</p> </header> <main id="content"> <article id="firstfont"> <h2>What is a Mineral</h2> <p>A mineral is a naturally occurring chemical compound. Most often, they are crystalline and abiogenic in origin.<br> A mineral is different from a rock, which can be an aggregate of minerals or non-minerals and does not have one<br> specific chemical composition, as a mineral does. The exact definition of a mineral is under debate, especially<br> with respect to the requirement that a valid species be abiogenic, and to a lesser extent with regard to it<br> having an ordered atomic structure. More information can be found <a href= "https://en.wikipedia.org/wiki/Mineral" target="_blank">here</a>!</p> <h2>What is a Rock?</h2> <p>In geology, rock or stone is a naturally occurring solid<br> aggregate of one or more minerals or mineraloids. For example,<br> the common rock granite is a combination of the quartz, feldspar<br> and biotite minerals. The Earth's outer solid layer, the lithosphere,<br> is made of rock.<br> Rocks have been used by mankind throughout history. From the Stone Age,<br> rocks have been used for tools. The minerals and metals found in rocks<br> have been essential to human civilization.<br> Three major groups of rocks are defined: igneous, sedimentary,<br> and metamorphic. The scientific study of rocks is called petrology,<br> which is an essential component of geology.<br> More information about rocks can be found <a href="https://en.wikipedia.org/wiki/Rock_(geology)" target="_blank">here!</a> </article> </main> </div> <div id="wrappertwo"> <h1><ins>Examples of Geodes</ins></h1> <p>Below is a short video showing different types of Geodes.<br> Take a look to see the different types you can find, or hopefully buy!</p> </div> <video controls="controls" id="Geodevideo" poster= "picofrock.png"><source src="Geodes.mp4" type="video/mp4"> Your browser does not support the video tag.</video> </body> </html> P.S. I just found out that the video only remains white for the DURATION of the transition, after the transition has finished it turns back to normal. And this is only happening in Chrome, just tried it on Firefox and it works fine No idea why :/
  9. luke214
    I'll give you the whole css then Just a note i removed the transition as that's the only way i could get the video to stop turning white. If you'd like the HTML as well let me know! a:visited { color: green; } a:hover { color: red; } * { font-family: Arial Black; } body { background: #526F35; } #wrapper{ position: absolute; background: white; box-shadow: 0 0 50px 10px black; text-align: center; border: 5px solid black; width: 50%;; padding: 8px; margin: 10px } #firstfont{ font-size: 17px; } #wrappertwo{ background: white; position: absolute; box-shadow: 0 0 50px 10px black; border: 5px solid black; padding: 8px; top: 70px; width: 23%; left: 1100px; font-size: 22px; text-align: center; } #Geodevideo{ position: absolute; box-shadow: 0 0 50px 10px black; border: 5px solid black; left: 1100px; top: 500px; width: 23.9%; } header{ font-size: 22px; } #wrappernav{ position: absolute; font-size: 30px; right: 0; top: 110px; text-align: center; background: #00CC33; border: 3px solid black; border-right: none; padding: 20px; font-weight: bold; } #textnav:hover { -moz-transform: scale(1.1); -webkit-transform: scale(1.1); -o-transform: scale(1.1); -ms-transform: scale(1.1); -webkit-transform: scale(1.1); transform: scale(1.1); } #textnav1:hover { -moz-transform: scale(1.1); -webkit-transform: scale(1.1); -o-transform: scale(1.1); -ms-transform: scale(1.1); -webkit-transform: scale(1.1); transform: scale(1.1); } #textnav2:hover { -moz-transform: scale(1.1); -webkit-transform: scale(1.1); -o-transform: scale(1.1); -ms-transform: scale(1.1); -webkit-transform: scale(1.1); transform: scale(1.1); } #textnav3:hover { -moz-transform: scale(1.1); -webkit-transform: scale(1.1); -o-transform: scale(1.1); -ms-transform: scale(1.1); -webkit-transform: scale(1.1); transform: scale(1.1); }
  10. luke214
    I have this code. #textnav2:hover { -moz-transform: scale(1.3); -webkit-transform: scale(1.3); -o-transform: scale(1.3); -ms-transform: scale(1.3); -webkit-transform: scale(1.3); transform: scale(1.3); -webkit-transition: transform .5s ease-in; -moz-transition:transform .5s ease-in; -ms-transition:transform .5s ease-in; } When i hover over the text, it works fine. It gradually gets bigger over the .5 seconds. However, there's a video next to it that turns white during the transition for some reason, and they're not linked at all. When i remove this bit; -webkit-transition: transform .5s ease-in; -moz-transition:transform .5s ease-in; -ms-transition:transform .5s ease-in; The text just gets big straight away without a transition, which is obvious. However, when removing that bit, the video doesn't turn white anymore. Any idea why this could be happening?
  11. luke214
    Ahh thanks! Seemed like whenever i tried validating by uploading the file it showed those errors, but when i used the text area it said it's all good! Strange, but thanks anyway!
  12. luke214
    Ahh that makes more sense, thanks! Still struggling, been looking at this code for ages and can't seem to find the problem! <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta content="My website about Minerals and Rocks" name="description"> <meta content="minerals,rocks,earth,gems" name="keywords"> <meta content="index,follow/" name="robots"> <link href="styles.css" rel="stylesheet" type="text/css"> <link href="geode.ico" rel="icon"> <title>Information about Minerals and Rocks</title> </head> <body> <div id="wrapper"> <noscript>Please enable Javascript</noscript> <header> <h1><ins>Welcome!</ins></h1> <p>Welcome to my website about Minerals and Rocks!<br> Hopefully you'll find some useful information to help you!</p> </header> <main id="content"> <article> <h2>What a Mineral is</h2> <p>A mineral is a naturally occurring chemical compound. Most often, they are crystalline and abiogenic in origin.<br> A mineral is different from a rock, which can be an aggregate of minerals or non-minerals and does not have one<br> specific chemical composition, as a mineral does. The exact definition of a mineral is under debate, especially<br> with respect to the requirement that a valid species be abiogenic, and to a lesser extent with regard to it<br> having an ordered atomic structure. More information can be found <a href= "https://en.wikipedia.org/wiki/Mineral">here</a>!</p> </article> </main> </div> <div id="wrappertwo"> <p>To the right is a short video showing different types of Geodes.<br> Take a look to see the different types you can find, or hopefully<br> buy!</p> </div><video controls="controls" id="Geodevideo" poster= "picofrock.png"><source src="Geodes.mp4" type="video/mp4"> Your browser does not support the video tag.</video> <img alt="Geode" class="geode" src= "Geode.png"> </body> </html> Error: End tag div seen, but there were open elements. From line 51, column 1; to line 51, column 6 article>↩↩</div>↩↩<div Error: Unclosed element main. From line 34, column 1; to line 34, column 19 /header>↩↩<main id="content">↩↩<art Error: Stray end tag main. From line 68, column 1; to line 68, column 7 eode" />↩↩</main>↩↩</bo
  13. luke214
    Well no, I didn't think the error was wrong, that's why i posed it here so someone could help figure out what i messed up. Still getting a few errors even when removing the section tag and just leaving the article in. Also, what's the difference between article and section? I've read page upon page of explanations but none actually give a clear answer. Thanks! <!DOCTYPE HTML> <html lang="en"> <head> <meta charset="UTF-8"/> <meta name="description" content="My website about Minerals and Rocks"/> <meta name="keywords" content="minerals,rocks,earth,gems"/> <meta name="robots" content="index,follow/"> <link rel="stylesheet" type="text/css" href="styles.css"/> <link rel="icon" href="geode.ico"/> <title>Information about Minerals and Rocks</title> </head> <body> <div id="wrapper"> <noscript>Please enable Javascript</noscript> <header> <h1><ins>Welcome!</ins></h1> <p> Welcome to my website about Minerals and Rocks!<br> Hopefully you'll find some useful information to help you! </p> </header> <main id="content"> <article> <h2>What a Mineral is</h2> <p> A mineral is a naturally occurring chemical compound. Most often, they are crystalline and abiogenic in origin.<br> A mineral is different from a rock, which can be an aggregate of minerals or non-minerals and does not have one<br> specific chemical composition, as a mineral does. The exact definition of a mineral is under debate, especially <br> with respect to the requirement that a valid species be abiogenic, and to a lesser extent with regard to it<br> having an ordered atomic structure. More information can be found <a href="https://en.wikipedia.org/wiki/Mineral">here</a>! </p> </article> </div> <div id="wrappertwo"> <p> To the right is a short video showing different types of Geodes.<br> Take a look to see the different types you can find, or hopefully<br> buy! </p> </div> <video id="Geodevideo" controls="controls" poster="picofrock.png"> <source src="Geodes.mp4" type="video/mp4"> Your browser does not support the video tag. </video> <img class="geode" src="Geode.png" alt="Geode" /> </main> </body> </html> Error: End tag div seen, but there were open elements. From line 51, column 1; to line 51, column 6 article>↩↩</div>↩↩<div Error: Unclosed element main. From line 34, column 1; to line 34, column 19 /header>↩↩<main id="content">↩↩<art Error: Stray end tag main. From line 68, column 1; to line 68, column 7 eode" />↩↩</main>↩↩</bo
  14. luke214
    Here's my code! It's telling me to add a h1-h6 heading to my section, however i already have that included in the article which is nested inside. I'll start a line before where to error is <header> <h1><ins>Welcome!</ins></h1> <p> Welcome to my website about Minerals and Rocks!<br> Hopefully you'll find some useful information to help you! </p> </header> <main id="content"> <section> <article> <h2>What a Mineral is</h2> <p> A mineral is a naturally occurring chemical compound. Most often, they are crystalline and abiogenic in origin.<br> A mineral is different from a rock, which can be an aggregate of minerals or non-minerals and does not have one<br> specific chemical composition, as a mineral does. The exact definition of a mineral is under debate, especially <br> with respect to the requirement that a valid species be abiogenic, and to a lesser extent with regard to it<br> having an ordered atomic structure. More information can be found <a href="https://en.wikipedia.org/wiki/Mineral">here</a>! </p> </article> </section> </div> <div id="wrappertwo"> <p> To the right is a short video showing different types of Geodes.<br> Take a look to see the different types you can find, or hopefully<br> buy! </p> </div> <video id="Geodevideo" controls="controls" poster="picofrock.png"> <source src="Geodes.mp4" type="video/mp4"> Your browser does not support the video tag. </video> <img class="geode" src="Geode.png" alt="Geode" /> </main> </body> </html> Here's the error i'm getting. Any help? Warning: Section lacks heading. Consider using h2-h6 elements to add identifying headings to all sections. From line 36, column 1; to line 36, column 9 ontent">↩↩<section>↩↩<art Error: End tag div seen, but there were open elements. From line 55, column 1; to line 55, column 6 section>↩↩</div>↩↩<div Error: Unclosed element main. From line 34, column 1; to line 34, column 19 /header>↩↩<main id="content">↩↩<sec Error: Stray end tag main. From line 72, column 1; to line 72, column 7 eode" />↩↩</main>↩↩</
  15. luke214
    Thank you so much! Can't believe I missed that
  16. luke214
    Any reason why this is incorrect? <!DOCTYPE HTML> <html lang="en"> <head> <meta charset="UTF-8"/> <meta name="description" content="My website about Minerals and Rocks"/> <meta name="keywords" content="minerals,rocks,earth,gems"/> <meta name="robots" content="index,follow/> <link rel="stylesheet" type="text/css" href="styles.css"/> <link rel="icon" href="geode.ico"/> <title>Information about Minerals and Rocks</title> </head> </html> I'm getting this error; Error: No space between attributes. At line 15, column 12 />↩↩<link rel="stylesheet" typ Thanks!
×
×
  • Create New...