www.webdeveloper.com
Results 1 to 15 of 15

Thread: Help out a noob making mistakes

  1. #1
    Join Date
    Jul 2012
    Posts
    10

    Help out a noob making mistakes

    Hi,

    I recently finished learning the basics of xhtml/css and decided to challenge myself by making a website.

    Things were going great until i ended up with bugs i couldn't fix by myself.

    The first problem i encountered is, when i resize my browser, my design doesn't follow and stay stuck in a corner.

    My second problem is, when i try clicking on the links i placed on my buttons, it does nothing.

    Finally, one of my link is behind my button instead of being on it.

    Here's my unfinished site ( I'm also learning how to use GIMP :P ) : http://onlineflashgames.host22.com/Index.html

    HTML Code

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
            "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    
    <html lang="en-US">
      <head>
        
       <meta http-equiv="Content-Style-Type" content="text/css" />
       <link rel="stylesheet" type="text/css" media="screen" href="default.css" />
        
        <title>Best 2012 Free Online Flash Games</title>
        
      </head>
      <body>
        
        <div id="BodyPosition">
          <img src="IndexBody.png"/>
        </div>
       
    	<!-- Header -->
    	<div id="ActionButtonPosition">
    	    <img src="Buttons.png"/>
    	</div>
    	<div id="ActionLinkPosition">
    	    <a href="www.google.ca" title="Action Games">Action</a>
    	 </div>
    	 <div id="AdventureButtonPosition">
    	    <img src="Buttons.png"/>
    	 </div>
    	 <div id="AdventureLinkPosition">
    	    <a href="www.google.ca" title="Adventure Games">Adventure</a>
    	 </div>
    	 <div id="SimulationButtonPosition">
    	    <img src="Buttons.png"/>
    	 </div>
    	 <div id="SimulationLinkPosition">
    	    <a href="www.google.ca" title="Simulation Games">Simulation</a>
    	 </div>
    	 <div id="PuzzleButtonPosition">
    	    <img src="Buttons.png"/>
    	 </div>
    	 <div id="PuzzleLinkPosition">
    	    <a href="www.google.ca" title="Puzzle Games">Puzzle</a>
    	 </div>
    	 <div id="StrategyButtonPosition">
    	    <img src="Buttons.png"/>
    	 </div>
    	 <div id="StrategyLinkPosition">
    	    <a href="www.google.ca" title="Strategy Games">Strategy</a>
    	 </div>
    	 <div id="ShootingButtonPosition">
    	    <img src="Buttons.png"/>
    	 </div>
    	 <div id="ShootingLinkPosition">
    	    <a href="www.google.ca" title="Shooting Games">Shooting</a>
    	 </div>
    	 <!-- End -->
        
      </body>
    </html>
    CSS Code

    Code:
    body {
      
      background-image: url("Background.png");
      background-repeat: no-repeat;
      background-color: transparent;
      
    }
    
    #ActionButtonPosition {
      
      position: absolute;
      top: 7px;
      
    }
    
    #ActionLinkPosition {
      
       position: absolute;
       top: 95px;
       left: 205px;
      
    }
    
    #AdventureButtonPosition {
      
      position: absolute;
      top: 7px;
      left: 104px;
      
    }
    
    #AdventureLinkPosition {
      
      position: absolute;
      top: 95px;
      left: 290px;
    }
    
    #SimulationButtonPosition {
      
      position: absolute;
      top: 7px;
      left: 204px;
      
    }
    
    #SimulationLinkPosition {
      
      position: absolute;
      top: 95px;
      left: 389px;
      
    }
    
    #PuzzleButtonPosition {
      
      position: absolute;
      top: 7px;
      left: 304px;
    
    }
    
    #PuzzleLinkPosition {
      
        position: fixed;
        top: 95px;
        left: 605px;
    
    }
    
    #StrategyButtonPosition {
      
      position: absolute;
      top: 7px;
      left: 404px;
      
    }
    
    #StrategyLinkPosition {
      
        position: absolute;
        top: 95px;
        left: 497px;
     }
    
    #ShootingButtonPosition {
      
      position: absolute;
      top: 7px;
      left: 504px;
      
    }
    
    #ShootingLinkPosition {
      
      position: absolute;
      top: 95px;
      left: 695px;
      
    }

  2. #2
    Join Date
    Jul 2012
    Posts
    10
    It's a dumb mistake, i figured it out.

    My buttons appear small but are in fact huge and take the entire page.

    I also learned how to combine relative and absolute positioning while trying to solve my problem.

  3. #3
    Join Date
    Jul 2012
    Posts
    10
    Quote Originally Posted by darkritual View Post
    It's a dumb mistake, i figured it out.

    My buttons appear small but are in fact huge and take the entire page.

    I also learned how to combine relative and absolute positioning while trying to solve my problem.

    Edit doesn't work.

    It doesn't solve my resizing/resolution issue tho.

    How can i fix this?

  4. #4
    Join Date
    Aug 2006
    Posts
    1,910
    Ouch. If you're reading a book to learn this, throw it away. Positioning every object via absolute or relative positions, inside a div, is completely wrong. The proper way would be to use the box model, and let objects get laid out where the box model puts them. You might also read up on the coined term "divitis".

    Fundamentally you should have your blue background of the body{} tag, and inside it you should center a #wrapper div that will hold the content of the site. In that wrapper you should have a ul (unordered list) that contains your navigation, followed by a content div for the bulk of the content.

    Dave

  5. #5
    Join Date
    Jul 2012
    Posts
    10
    Quote Originally Posted by tracknut View Post
    Ouch. If you're reading a book to learn this, throw it away. Positioning every object via absolute or relative positions, inside a div, is completely wrong. The proper way would be to use the box model, and let objects get laid out where the box model puts them. You might also read up on the coined term "divitis".

    Fundamentally you should have your blue background of the body{} tag, and inside it you should center a #wrapper div that will hold the content of the site. In that wrapper you should have a ul (unordered list) that contains your navigation, followed by a content div for the bulk of the content.

    Dave
    Wrapper,Divitis? *Scratch head*

    I have a lot reading to do and no, I'm not reading a book but i do have one.

    I'm a visual, i thought i could get away by watching tutorials on Youtube but i guess i'm still gonna have to read this 450 pages book.

    http://www.amazon.com/Learning-Web-D.../dp/0596527527

  6. #6
    Join Date
    Aug 2006
    Posts
    1,910
    Try this code, and see if it does anything for you. I'm not sure a 450 page book is the right answer either, I'm just suggesting a different path than starting out with all those positioned elements, which really should be reserved for unusual cases.

    Code:
    <!DOCTYPE html>
    <html>
    
    <head>
    <meta content="text/html; charset=utf-8" http-equiv="Content-Type">
    <title>ActionAdventureSimulationStrateg</title>
    <style type="text/css">
    * {margin:0;padding:0}
    body {background-color:#44f}
    #wrapper {width:90&#37;;margin:20px auto 0;border:4px #000 solid}
    nav {background-color:#0F0;border-bottom:4px #000 solid}
    nav ul {width:100%}
    nav ul li {display:inline-block;width:15%;list-style:none;border-right:4px #000 solid;padding:5px 0}
    nav ul li.last {border-right:0}
    nav ul li a {margin:10px;text-align:center}
    #main {padding:5px}
    </style>
    </head>
    
    <body>
    <div id="wrapper">
    	<nav>
    		<ul>
    		<li><a href="action.html">Action</a></li>
    		<li><a href="adventure.html">Adventure</a></li>
    		<li><a href="simulation.html">Simulation</a></li>
    		<li><a href="strategy.html">Strategy</a></li>
    		<li><a href="puzzles.html">Puzzles</a></li>
    		<li class="last"><a href="shooting.html">Shooting</a></li>
    		</ul>
    	</nav>
    	<section id="main">
    		<p>A bunch of stuff here...</p>
    	</section>
    </div>
    </body>
    </html>
    Dave

  7. #7
    Join Date
    Jul 2012
    Posts
    10
    Quote Originally Posted by tracknut View Post
    Try this code, and see if it does anything for you. I'm not sure a 450 page book is the right answer either, I'm just suggesting a different path than starting out with all those positioned elements, which really should be reserved for unusual cases.

    Code:
    <!DOCTYPE html>
    <html>
    
    <head>
    <meta content="text/html; charset=utf-8" http-equiv="Content-Type">
    <title>ActionAdventureSimulationStrateg</title>
    <style type="text/css">
    * {margin:0;padding:0}
    body {background-color:#44f}
    #wrapper {width:90%;margin:20px auto 0;border:4px #000 solid}
    nav {background-color:#0F0;border-bottom:4px #000 solid}
    nav ul {width:100%}
    nav ul li {display:inline-block;width:15%;list-style:none;border-right:4px #000 solid;padding:5px 0}
    nav ul li.last {border-right:0}
    nav ul li a {margin:10px;text-align:center}
    #main {padding:5px}
    </style>
    </head>
    
    <body>
    <div id="wrapper">
    	<nav>
    		<ul>
    		<li><a href="action.html">Action</a></li>
    		<li><a href="adventure.html">Adventure</a></li>
    		<li><a href="simulation.html">Simulation</a></li>
    		<li><a href="strategy.html">Strategy</a></li>
    		<li><a href="puzzles.html">Puzzles</a></li>
    		<li class="last"><a href="shooting.html">Shooting</a></li>
    		</ul>
    	</nav>
    	<section id="main">
    		<p>A bunch of stuff here...</p>
    	</section>
    </div>
    </body>
    </html>
    Dave
    Thank you for your efforts, i appreciate it.

    I'll write this code down and learn from it later but first, I must find out how exactly boxes work.

    I won't ever make it in the real world if i don't even understand how my code works.

    I messed with boxes a little bit and can definitely figure this one out alone tomorrow.

  8. #8
    Join Date
    Jun 2012
    Posts
    3
    Hey man, I'm in the same boat as you with the whole noob thing. I'm just starting out trying to get a grip on this whole web development thing. I still have only a really basic understanding. But what I've found to help me most is the video tutorials. Especially the learn html and css in 30 days series on the webtuts site. It helped me alot to grasp the beginner stuff (still a work in progress though lol). Can't send you a link since I'm at work (and obviously working hard) but I'm sure a quick Google search is all it would take

  9. #9
    Join Date
    May 2005
    Location
    Gold Coast (MS)
    Posts
    2,216
    Could check out:

    Code Academy: http://www.codecademy.com/#!/exercises/0
    Online Editor to Teach HTML/CSS (Mozilla): https://thimble.webmaker.org/en-US/

    Choosing Dimensions for Your Web Page Layout:

    In Search of the Holy Grail: http://www.alistapart.com/articles/holygrail/
    Choosing Dimensions for Your Web Page Layout: http://www.elated.com/articles/choos...b-page-layout/
    How to create flexible sites quickly using standards like CSS and XHTML: http://www.ibm.com/developerworks/web/library/wa-rapid/
    Care With Font Size: http://www.w3.org/QA/Tips/font-size
    Designing for the Web: Resolution and Size: http://sitepointcom.createsend4.com/...yd/birtthtw/h/

    Websites Shouldn’t Look The Same Across Different Browsers: http://www.noupe.com/design/websites...re-is-why.html
    Cross-Browser CSS in Seconds with Prefixr: http://net.tutsplus.com/articles/new...-with-prefixr/
    Responsive Web Design Demystified: http://www.elated.com/articles/respo...n-demystified/
    Responsive Web Design: 5 Handy Tips: http://www.elated.com/articles/respo...-5-handy-tips/
    It’s Not Responsive Web Building, It’s Responsive Web Design: http://www.getfinch.com/finch/entry/...ve-web-design/

    Validating:

    Why Validate?: http://validator.w3.org/docs/why.html
    CSS Validator: http://jigsaw.w3.org/css-validator/
    HTML Validator: http://validator.w3.org/#validate_by_uri+with_options

  10. #10
    Join Date
    Mar 2012
    Posts
    1,562
    A word of warning. I'm not sure what would be displayed on IE8 (and below) which are not HTML5/CSS3 compliant. IE7 and IE8 account for 16&#37; of global usage, that is an aweful lot of users who may be seriously p****d off by your site.

    There are work-arounds for some CSS3 features, like media specific code, and some degrade gracefully, like border radius, but I have no idea what would happen if you use nav codes? So I'd suggest that you need to test on IE8 as well as compliant browsers.

  11. #11
    Join Date
    Jul 2012
    Posts
    10
    Quote Originally Posted by tracknut View Post
    Try this code, and see if it does anything for you. I'm not sure a 450 page book is the right answer either, I'm just suggesting a different path than starting out with all those positioned elements, which really should be reserved for unusual cases.

    Code:
    <!DOCTYPE html>
    <html>
    
    <head>
    <meta content="text/html; charset=utf-8" http-equiv="Content-Type">
    <title>ActionAdventureSimulationStrateg</title>
    <style type="text/css">
    * {margin:0;padding:0}
    body {background-color:#44f}
    #wrapper {width:90&#37;;margin:20px auto 0;border:4px #000 solid}
    nav {background-color:#0F0;border-bottom:4px #000 solid}
    nav ul {width:100%}
    nav ul li {display:inline-block;width:15%;list-style:none;border-right:4px #000 solid;padding:5px 0}
    nav ul li.last {border-right:0}
    nav ul li a {margin:10px;text-align:center}
    #main {padding:5px}
    </style>
    </head>
    
    <body>
    <div id="wrapper">
    	<nav>
    		<ul>
    		<li><a href="action.html">Action</a></li>
    		<li><a href="adventure.html">Adventure</a></li>
    		<li><a href="simulation.html">Simulation</a></li>
    		<li><a href="strategy.html">Strategy</a></li>
    		<li><a href="puzzles.html">Puzzles</a></li>
    		<li class="last"><a href="shooting.html">Shooting</a></li>
    		</ul>
    	</nav>
    	<section id="main">
    		<p>A bunch of stuff here...</p>
    	</section>
    </div>
    </body>
    </html>
    Dave
    I now "perfectly" understand your code and created my own version.

    I can't believe how much i improved in a single day using this technique.

    I don't know when to use margin and when to use padding tho.

    What should i do? Use margin when i want to move my box y pixels from the top and padding if i want to move my box left/right?

    http://onlineflashgames.host22.com/Index.html

    CSS Code

    Code:
    * {margin:0;padding:0;}
    
    #Recipe_Image {width:347px;border:4px solid #c69145;margin:18px auto 0;height:232px;}
    #Recipe_Preparation {width:360px;margin:30px auto 0;border:2px solid #c69145;}
    #Recipe_Serving {width:360px;margin:8px auto 0;border:0px;height:60px;}
    #Recipe_Text_Serving {list-style:none;margin-left:11px;margin-top:10px;font-size:17px;}
    #Recipe_Yield_Serving {list-style:none;margin-left:11px;margin-top:9px;font-size:13px;}
    #Prep_List_Text_Fix {display:inline-block;border-right:2px solid #c69145;padding-right:12px;}
    #Cook_List_Text_Fix {display:inline-block;border-right:2px solid #c69145;padding-right:12px;height:58px;}
    
    .Recipe_Text_Position {list-style:none;padding-left:10px;padding-top:5px;font-size:17px;}
    .Recipe_Time_Position {list-style:none;padding-top:10px;padding-left:30px;padding-bottom:5px;font-size:13px;}
    .Display_Fixing {display:inline-block;}
    Last edited by darkritual; 07-26-2012 at 04:33 AM.

  12. #12
    Join Date
    Aug 2006
    Posts
    1,910
    Quote Originally Posted by jedaisoul View Post
    A word of warning. I'm not sure what would be displayed on IE8 (and below) which are not HTML5/CSS3 compliant. IE7 and IE8 account for 16% of global usage, that is an aweful lot of users who may be seriously p****d off by your site.

    There are work-arounds for some CSS3 features, like media specific code, and some degrade gracefully, like border radius, but I have no idea what would happen if you use nav codes? So I'd suggest that you need to test on IE8 as well as compliant browsers.
    You can make this compliant with IE6-8 by using a one-line patch, the html5shiv. See http://code.google.com/p/html5shiv/ for details.

    Dave

  13. #13
    Join Date
    Aug 2006
    Posts
    1,910
    Quote Originally Posted by darkritual View Post
    I don't know when to use margin and when to use padding tho.

    What should i do? Use margin when i want to move my box y pixels from the top and padding if i want to move my box left/right?
    Sometimes margin and padding can essentially be the same as far as how you use them. But think of margin as something around the outside of an element, and padding as something around the inside.

    Say you have a div, adding margins to it will move the div away from whatever its next to. Adding padding to it will cause space inside it, such that things you put inside it will not ride up against the sides of the div. For example using a 5px padding inside a div is a common way to have some space between a border line around the div and a bunch of text and images inside the div.

    Dave

  14. #14
    Join Date
    Mar 2012
    Posts
    1,562
    Quote Originally Posted by tracknut View Post
    You can make this compliant with IE6-8 by using a one-line patch, the html5shiv. See http://code.google.com/p/html5shiv/ for details.

    Dave
    Thanks for this.

  15. #15
    Join Date
    Jul 2012
    Posts
    10
    Quote Originally Posted by tracknut View Post
    Sometimes margin and padding can essentially be the same as far as how you use them. But think of margin as something around the outside of an element, and padding as something around the inside.

    Say you have a div, adding margins to it will move the div away from whatever its next to. Adding padding to it will cause space inside it, such that things you put inside it will not ride up against the sides of the div. For example using a 5px padding inside a div is a common way to have some space between a border line around the div and a bunch of text and images inside the div.

    Dave
    Alright, margin = outside, padding = inside.

    Easy enough.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles