-3

When i have the browser in Full Screen or expanded my website looks fine. i am new to css and html. So i hear about wrapping it but that doesnt seem to work. i need someone to look over the code, because i can't get it to work. My website is http://Littleguyssg.com

and the base code

    <!DOCTYPE html>
<html>
      <head>
      <title>Little_Guys Gaming</title>
      <style>
      body {
           text-align : center ;
           }
           div.wrapper {
           text-align : left ;
           margin-left : auto ;
           margin-right : auto ;
           }
      </style>
      <body>
      <div class="wrapper">       <style>
      body{
           background-image:url("base screen.png");
           background-size:relative;
           background-attachment:relative;
           background-repeat:no-repeat;}


      h1{
        text-align:center;
         }





      </style>
      </head>









      <head>
        <style type="text/css">

            body {font-family:Arial, Sans-Serif;}

            #container {width:300px; margin:100px 300px 300px auto;}

            /* Nicely lines up the labels. */
            form label {display:inline-block; width:140px;}

            /* You could add a class to all the input boxes instead, if you like. That would be safer, and more backwards-compatible */
            form input[type="text"],
            form input[type="password"],


            form .line {clear:both;}
            form .line.submit {text-align:right;}

            label.before{
        content:"*" ;
        color:red}

        </style>
    </head>

        <div id="container">
            <form action="poro.png">
            <fieldset style= "width: 500px; margin:  0px auto">
                <h1 style="text-align:center">Login</h1>
                <div class="line"><label for="username">Username : </label><input type="text" id="username" required="" /></div>
                <div class="line"><label for="pwd">Password : </label><input type="password" id="pwd" required="" /></div>
                <div class="line submit"><input type="submit" value="Submit" /></div>
                </fieldset>
                <p><a href = "untitled1.html">Sign Up Here</p></a>


            </form>
        </div>

           <head>
           <style> 
                   #img1 {
                   position:absolute;
                   bottom:10px;
                   left:50px
                   }
                     #img4 {
                   position:absolute; 
                   bottom:10px;
                   left:800px
                   }
                      #img3 {
                   position:absolute; 
                   bottom:10px;
                   left:550px
                   }
                       #img2 {
                   position:absolute;
                   bottom:10px;
                   left:275px
                   }

           </style>


               <a href="http://twitter.com/Littleguysporo"><img id="img1" src=twitter.png height="75px" width="75px"></a>
               <a href="http://youtube.com/channel/UCvC0ytbzE1WHg5SY7arzXSQ"><img id="img2" src=Youtube.png height="100px" width="100px"></a>
               <a href="http://twitch.tv/Little_Guys"><img id="img3" src=Twitch.png height="75px" width="75px"></a>
               <a href="http://www.twitchalerts.com/donate/little_guys"><img id="img4" src=Paypal.png height="75px" width="75px"></a>


               <style>
                             #teamspeak{
                                 position:absolute;
                                 right:100px;
                                 top:500px;
                                 font-size:x-large;}

                              #p2{
                                  position:absolute;
                                  right:200px;
                                  top:550px;
                                  font-size:x-large;
                                 }

                              #p3 {
                                  position:absolute; 
                                  right:250px;
                                  top:600px;
                                  font-size:x-large;}
                              #p4 {
                                  position:absolute; 
                                  right:225px;
                                  top:650px;
                                  font-size:x-large;}
                              #p5 {
                                  position:absolute; 
                                  right:215px;
                                  top:700px;
                                  font-size:x-large;}
                              #p6 {
                                  position:absolute; 
                                  right:200px;
                                  top:750px;
                                  font-size:x-large;}
                              #p7 {
                                  position:absolute; 
                                  right:215px;
                                  top:800px;
                                  font-size:x-large;}
                              #p8 {
                                  position:absolute; 
                                  right:215px;
                                  top:850px;
                                  font-size:x-large;}
                              #p9 {
                                  position:absolute; 
                                  right:215px;
                                  top:900px;
                                  font-size:x-large;}


                              #p10 {
                                  position:absolute; 
                                  right:200px;
                                  top:950px;
                                  font-size:x-large;}

                </style>
                <a id="teamspeak" href=ts3server://Littleguyssg.com?port=9987><p>---------{Teamspeak == LittleGuyssg.com}------</p></a>
                <p id="p2"> -------{Garrys Mod}-------</p>
                <p id="p3">------{TTT}------</p>
                <p id="p4">Poro's TTT Server</p>
                <p id="p5">------{PropHunt}------</p>
                <p id="p6">Poro's Prophunt Server</p>
                <p id="p7">------{Sandbox}------</p>
                <p id="p8">Poro's World War 7</p>
                <p id="p9">------{DarkRp}-------</p>
                <p id="p10">Poro's DarkRp Server</p>





    </htmL> </div>
      </body>
Christian
  • 1
  • You should only have **one** `` tag. It should be placed inside the `` tag and before the `` tag. Also, place all of your CSS into a file or a single ` – hungerstar Mar 10 '15 at 15:44
  • What you mean by "freaking out"? – Alex Salauyou Mar 10 '15 at 15:48
  • I suppose this is your first time with HTML and CSS? Why not read more about it and try again. One great Resource to learn this is [Codecademy](http://www.codecademy.com/). – Ashesh Mar 10 '15 at 16:18

1 Answers1

1

Hmm. Try use something like Bootstrap, for example I've just written this - it's super simple and completely responsive. Try it yourself if you're new. Click here to learn more

<!DOCTYPE html>
<head>
   <title>Little Guys Gaming</title>
   <style href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
   <div class="container">
       <div class="row">
            <div class="col-md-4"></div>
            <div class="col-md-4">
                <form action="" method="POST">
                     <input type="text" name="username" class="form-control">
                     <input type="password" name="password" class="form-control">
                     <input type="submit" class="btn btn-primary" value="Login">
                </form>
            </div>
            <div class="col-md-4"></div>
       </div>
   </div>
</body>
meowfishcat
  • 137
  • 14