Help! Using CSS to make my first page and I'm stuck...

Littleodie914 · Dec 16, 2004

Hey guys, I need a bit of help on a bit of CSS. I've scanned the web, but can't find a thing. I know my CSS skills are very poor, as I just learned it a week ago, but it seems pretty sweet and I want to use it to design my site. The CSS stuff is embedded in the HTML, so I'll just post it here:

<html>

<head>
<title>Welcome To My Site!</title>
<style>
.bodytext
{
font: 16px "Lucida Grande";
color: white;
}
.copyright
{
font: 10px "Lucida Grande";
color: white;
}
.date
{
font: 12px "Lucida Grande";
color: white;
}
</style>
</head>
<body>
<table width="80%" align=center style="background-color: orange;">
<tr>
<td>

<div style="padding-right: 5; float: left;">
<a href=><img src="home.png"></a>
</div>

<div style="padding-right: 5; float: left;">
<a href=><img src="forum.png"></a>
</div>

<div style="padding-right: 5; float: left;">
<a href=><img src="me.png"></a>
</div>

<div style="padding-right: 5; float: left;">
<a href=><img src="links.png"></a>
</div>

</td>
</tr>

<tr>
<td align=center>
<BR>
<hr>
<p class=date align=left>12/15/04
<p class=bodytext>
Hey, hope you like the new design. Switching from a mainly-forum thing to a mainly-whatever page. I don't really want this to be thought of as the "forum" page as much as my page with just a link to the forum on it, ya know?
</p>
<hr>
</td>
</tr>

<tr>
<td class="copyright" align=center>
<BR><BR><BR><BR><BR>
<p>
Copyright 2004, Craig Otis
<BR>
Hand-Coded on a Mac
<BR>
And I'm damn proud of it.
</p>
</td>
</tr>

</table>
</body>
</html>

What I have are the four images at the top, acting as links to other pages. I have them spaced next to each other perfectly, but they're all aligned to the left... I've tried adding align=center tags all over the place, but they aren't doing me any good. I apologize for not being able upload the page with images, but I currently don't have any webspace to do so...

I added a screenshot so you at least see what the problem is.

HexMonkey · Dec 16, 2004

The key is to use text-align instead of align. The way I did it with your page was to remove the divs around each image and just use one div around the whole lot, which has text-align and padding-right attributes.

I also edited the rest of the file to make it standards compliant html, although obviously you don't have to use my copy if you don't want to.

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Welcome To My Site!</title>
<style type="text/css">
.bodytext
{
font: 16px "Lucida Grande";
color: white;
}
.copyright
{
font: 10px "Lucida Grande";
color: white;
}
.date
{
font: 12px "Lucida Grande";
color: white;
text-align: left;
}
.nav
{
text-align: center;
padding-right: 5;
}
</style>
</head>
<body>
<table width="80%" align="center" style="background-color: orange;">
<tr>
<td>

<div class="nav">
<a href=""><img src="home.png" alt="Home"></a>
<a href=""><img src="forum.png" alt="Forum"></a>
<a href=""><img src="me.png" alt="Me"></a>
<a href=""><img src="links.png" alt="Links"></a>
</div>

</td>
</tr>

<tr>
<td align="center">
<br>
<hr>
<p class="date">12/15/04
<p class="bodytext">
Hey, hope you like the new design. Switching from a mainly-forum thing to a mainly-whatever page. I don't really want this to be thought of as the "forum" page as much as my page with just a link to the forum on it, ya know?
</p>
<hr>
</td>
</tr>

<tr>
<td class="copyright" align="center">
<br><br><br><br><br>
<p>
Copyright 2004, Craig Otis
<br>
Hand-Coded on a Mac
<br> 
And I'm damn proud of it.
</p>
</td>
</tr>

</table>
</body>
</html>

zim · Dec 16, 2004

I took it one more step and removed the tables, using all css for presentation... please note that I did not cross check in all browsers but it looks pretty good.

I was not sure how big your navigation graphics were so I put in 50px for the width and height.

I would also recommend using gif's for your button graphics vs png. Some browsers, including Windows IE, has issues with some of the properties of png files i.e. transparency. Although png is the recommended standard, it is still difficult to use them and get the full support.

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Welcome To My Site!</title>
<style type="text/css">
body {
	margin: 12px 0;
	text-align: center;
	font: "Lucida Grande";
	color: white;
	}
div#wrapper {
	width: 80%;
	margin: 0 auto;
	padding: 5px;
	background-color: orange;
	}
div#navigation ul {
	height: 50px;
	margin: 0;
	padding: 0;
	padding-right: 5px;
	}
div#navigation  li {
	display: inline;
	width: 50px;
	height: 50px;
	list-style: none;
	background: blue;
	}
div#footer {
	font-size: 10px;
	}	
div#footer ul {
	margin: 0;
	padding: 0;
	}
div#footer li {
	list-style: none;
	}
dl.entry {
	border-top: 1px solid black;
	border-bottom: 1px solid black;
	}
dl.entry dt {
	font-size: 12px;
	text-align: left;
	}
dl.entry dd {
	font-size: 16px;
	}
</style>
</head>
<body>
<div id="wrapper">
  <div id="navigation">
    <ul>
      <li><a href=""><img src="home.png" alt="Home" /></a></li>
      <li><a href=""><img src="forum.png" alt="Forum" /></a></li>
      <li><a href=""><img src="me.png" alt="Me" /></a></li>
      <li><a href=""><img src="links.png" alt="Links" /></a></li>
    </ul>
  </div>
  <div id="layout">
    <dl class="entry">
      <dt>12/15/04</dt>
      <dd>
        <p> Hey, hope you like the new design. Switching from a mainly-forum thing
          to a mainly-whatever page. I don't really want this to be thought of as
          the "forum" page as much as my page with just a link to the forum on it,
          ya know? </p>
      </dd>
    </dl>
    <div id="footer">
      <ul>
        <li>Copyright 2004, Craig Otis</li>
        <li>Hand-Coded on a Mac</li>
        <li>And I'm damn proud of it.</li>
      </ul>
    </div>
  </div>
</div>
</body>
</html>

panphage · Dec 16, 2004

You gotta close them image tags, son.

<img src="home.png" alt="Home"> = invalid
<img src="home.png" alt="Home" /> = valid

Littleodie914 · Dec 18, 2004

panphage said:
You gotta close them image tags, son.

<img src="home.png" alt="Home"> = invalid
<img src="home.png" alt="Home" /> = valid

Seriously? I didn't know that.

To everyone else though, thanks a bunch for the help! I really like how you did all of that without any tables... That's what I was going for, but I'm a newb to CSS, and needed table help to get everything aligned right.

AppleMatt · Dec 18, 2004

You're new to CSS? That's ideal, because you won't have gotten into any bad habits.

Two things:
- The "ALIGN CENTER" etc tags have been depreciated, so it's best not to use them. I really really can't remember where I saw a page about the W3C way to achieve this, but if I do I'll edit this post.
- As HexMonkey said (an actually did for this page), try to make it standards compliant

AppleMatt

Littleodie914 · Dec 18, 2004

AppleMatt said:
You're new to CSS? That's ideal, because you won't have gotten into any bad habits.

Two things:
- The "ALIGN CENTER" etc tags have been depreciated, so it's best not to use them. I really really can't remember where I saw a page about the W3C way to achieve this, but if I do I'll edit this post.
- As HexMonkey said (an actually did for this page), try to make it standards compliant

AppleMatt

Alrighty, thanks a bunch for the tips!

Could you possibly provide a few examples of what are/aren't standard compliant tags? Thanks!

EminenceGrise · Dec 18, 2004

panphage said:
You gotta close them image tags, son.

<img src="home.png" alt="Home"> = invalid
<img src="home.png" alt="Home" /> = valid

Only if the declared DOCTYPE is XHTML (XML). If you are using HTML 4.01 (SGML) you do not have to close some tags (e.g. img, li, ...), in fact it may not even validate that way (but as I prefer XHTML and don't use HTML 4, I'm not sure about the validation part - Transitional may pass, but Strict may not, etc.).

All of the official HTML specs can be found at the W3C website, and can be very helpful in determining what tags are valid for what spec, etc. CSS has some odd rules about precendence for various formatting tags, and it can be helpful to look at the official specs for that too. There isn't a browser yet made that gets everything right, so it helps to search around the web for workarounds if you run into problems. Eric Meyer's css / edge site has some good examples and links to other good sites as well.

Search

Search

Help! Using CSS to make my first page and I'm stuck...

Littleodie914

macrumors 68000

Attachments

HexMonkey

Administrator emeritus

zim

macrumors 65816

panphage

macrumors 6502

Littleodie914

macrumors 68000

AppleMatt

macrumors 68000

Littleodie914

macrumors 68000

EminenceGrise

macrumors member

Our Staff