shaneshane1 said:
<snipped for brevity>
Ok this is what i have made in the last 30 minutes
I know there is better ways to do this, but i dont want to know at the moment, as i will work them out at a later time.
with all my links, i want to have them from left to right, rather top to bottom?
i want them all on the same line?
i want them to be explained in the easiest way possible(if possible)
Here is a quick fix using XHTML (sorta) and CSS:
Code:
<html>
<head>
<title>home page</title>
<style type="text/css">
.menu {
width: 100%;
height: 40px;
text-align: center;
border: 1px solid red;
}
.menuitem {
width: 20%;
height: 40px;
text-align: center;
float: left;
}
.menuitem a {
position: relative;
z-index: 100;
}
</style>
</head>
<body bgcolor="#00CC66">
<div align="center"> <h1 style="color:blue"> Shane's Home Page </h1> </div>
<div class="menu">
<div class="menuitem"> <a href="http://www.google.com.au"> <img src="a/google.jpg" width="90" height="40" border="0" /> </a> </div>
<div class="menuitem"> <a href="https://www.electro-tech-online.com"> <img src="a/elec.jpg" width="90" height="40" border="0" /> </a> </div>
<div class="menuitem"> <a href="http://webmail.optuszoo.com.au"> <img src="a/optus.jpg" width="90" height="40" border="0" /> </a> </div>
<div class="menuitem"> <a href="http://www.commbank.com.au"> <img src="a/commbank.jpg" width="90" height="40" border="0" /> </a> </div>
<div class="menuitem"> <a href="http://www.ebay.com.au"> <img src="a/ebay.jpg" width="90" height="40" border="0" /> </a> </div>
</div>
</body>
</html>
Each element in the page (div, a, img, etc) can be given a class or an id by which you can refer to them in the "style sheet". In this example, the style sheet is defined inside the HTML page, in the <style> section in <head>.
Note that I gave the divs the class "menu" (for the whole menu) and then "menuitem" for each div in the menu. If you look in the style sheet, you'll see blocks of code which start with '.menu' and '.menuitem'. When you refer to classes in the style sheet, you prefix the names with '.'.
We'll ignore ids for now (but you would prefix them with a '#', in case you're wondering).
So in the HTML, you have <div class="menuitem">blah</div>, and in the style sheet you see this:
Code:
.menuitem {
width: 20%;
height: 40px;
text-align: center;
float: left;
}
. . .which just means "apply these rules to the contents of any div with the class 'menuitem'".
For your purposes, the really important one here is 'float: left;'. Normally, a div is output with an implicit line break before and after. The 'float: left;' tells the renderer that this div is meant to not have those line breaks--it should just 'float' to the left of whatever came before it.
Elements which are referenced directly in the style sheet (i.e. 'a', 'img', 'body', etc) don't get a prefix. So for instance, when you see the following in the style sheet:
Code:
.menuitem a {
position: relative;
z-index: 100;
}
. . .it means "apply these rules to any element 'a' (i.e. <a href=blah></a>) which are inside a div with the class 'menuitem'".
I hope that helps. I'm kind of tired so I might just be making this look really hard. It's not: it's really powerful, and initially maybe confusing, but again, it's worth it in the end.
Torben
