Jump to content

absolutely confused right now.


DatDudeFuddPucker

Recommended Posts

<!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 by DatDudeFuddPucker
Link to comment
Share on other sites

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

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

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...