DatDudeFuddPucker Posted May 25, 2016 Share Posted May 25, 2016 (edited) <!DOCTYPE html> <html> <head> <link rel="stylesheet" type="text/css" href="Hybrid.css" /> <style> </style> </head> <body> <style type="text/css"> body { background-image:url("Images/Games.jpg"); color: white; } #menu li { display: inline; } ul { list-style-image: url('Images/controller.png'); font-size: 30px; } div { width: 100px; height: auto; text-align: justify; } </style> <section> <div id="header"> <h1 align="center">Lets talk about video Games.</h1> <p align="center"> Hello, welcome to my video game discussion site. I made this site to promote the discussion about video games, amongnst video game lovers such as myself. I want this site to essentially<br> turn in to a place where fellow gamers can come to discuss their views on video games, strategies, preferences, issues etc... Anything that involves video games. Slowly as the site is constantly<br> grows and expands, I would like to add a section where individuals can pitch, discuss, and contribute to the ideas for their own video games. While I am a lover of all video games of all genres. <br> I have this issue with first person shooters. In my opinoin the market is over saturated with them. I want to bring back the RPG and Action genres. This is my first attempt at moving towards this <br> goal. So I call on all video game enthuasists to help me in this cause. We need more ideas entering the market. I want this site to act as a hub for the ideas of these individuals. This is just the start. <br>\ </p> <ul id=menu> <li><a href="registration.html"a>Register</a></li> <li>michael</li> </ul> </div> </section> <section> <h1>Video Game Consoles</h1> <ul> <li>Atari</li> <li>Nintendo</li> <li>Sony</li> <li>Microsoft</li> <li>Computers</li> </ul> <p> This is a paragraph, is it 300px? </p> </section> <section> </section> <script> </script> </body> </html body { background-color: black; margin: 0; padding: 0; } #header { float:left; width:100%; height: auto; background-color: black; } #footer { position: relative; float:left; width:100%; background-color: black; } #wrapper { float: left; padding-left: 200px; padding-right: 200px; overflow: hidden; } #leftbar { position: relative; float: left; width: 200px; background-color: yellow; right: 200px; margin-right: -100px; margin-bottom: -2000px; padding-bottom: 2000px; } #rightbar { position: relative; float: left; width: 200px; background-color: red; margin-right: -200px; margin-bottom: -2000px; padding-bottom: 2000px; } #content { position: relative; float: left; background-color: tan; width: 100%; margin-bottom: -2000px; padding-bottom: 2000px; } Ok yesterday when I left this in the cloud9 environment it was working fine. Everything was how I wanted it at that current time. Now when I came back to it after work the header of the main page is just stupid big. I don't know what is happening. It no longer fits in my screen. The site is far to big, and I have no clue how I can return it to what it was. Any help would be appreciated. Edit - I am sorry, I am sure you all can distinguish between the two, but just in case The top part of code is the actual html code, while the bottom portion is the CSS for that page. I simply do not know what is causing this page to be as huge as it is. Edited May 25, 2016 by DatDudeFuddPucker Link to comment Share on other sites More sharing options...
Ingolme Posted May 25, 2016 Share Posted May 25, 2016 Have you checked that your browser isn't zoomed in? In Firefox you can press Control+0 to reset the browser size. I'm not sure what cloud9 is, but you should test your pages in real browsers, since other environments may not be rendering things correctly. Link to comment Share on other sites More sharing options...
James_Purcell Posted May 26, 2016 Share Posted May 26, 2016 Isn't the style section supposed to be in the <head> section and not body? Link to comment Share on other sites More sharing options...
davej Posted May 27, 2016 Share Posted May 27, 2016 The style block should be in the head, and you have a lot of styling that seems irrelevant to your html content. In fact you use a lot of line breaks in your paragraph that should not be needed if you styled it appropriately. Maybe you should apply some margins to the paragraph? A good way to test your code is to open it directly with several browsers. You could take a look at the css tutorial. http://www.w3schools.com/css/default.asp And remember to use the validator. https://validator.w3.org/#validate_by_input Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now