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.
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.
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>
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.
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
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.
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
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?
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.
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.
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.
Reply With Quote
Originally Posted by darkritual
Bookmarks