CSS help - Webmaster Forum - Web Design, Programming and SEO forums

08-15-2005, 08:05 PM

Stan

Status: Member
Join date: Aug 2005
Location:
Expertise:
Software:

Posts: 269

iTrader: 0 / 0%

Stan is on a distinguished road

CSS help

this is all beginner stuff, but I just started trying to learn xhtml and css today and ive come up with the following problem

http://www.redorigin.net/rom.html - my images are all screwy and i dont know whats wrong, can someone help me please...

html source:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Red Origin Media Coming September 2005.</title>
<meta name="author" content="Warren" />
<meta name="copyright" content="2005 Red Origin Media Group" />
<meta name="description" content="Red Origin" />
<meta name="keywords" content="digital art, counterstrike website design, website design, design firm, gaming movies, esports media" />
<link rel="stylesheet" type="text/css" href="/images/style.css" />

</head>
</style>
</head>
<body>
<center><span class="logo"><img src="images/logo2.jpg" alt="logo2" /></span><br /><span class="irc"><a href="irc.gamesurge.net/redorigin">
<img src="images/irc.jpg" alt="irc" /></a></span>
<br>
<div class="container">
<div class="header"><h2 class="header">Latest Movies</h2></div>
<div class="left">
<ul class="none">
<li>Shotteh22onLan (CS)</li>
<li>DyeL!fe3 (DoD)</li>
<li>Mexicant: The Summer of 1961 (DoD)</li>
</ul></div>

<div class="content">
<h2>Coming Soon Movies</h2>
<ul id="none">
<li>reVamped (DoD)</li>
<li>RiverOyster (DoD)</li>
<li>Dorito (DoD)</li>
</ul>
<p>Movies to be released Weekly, check back for updates.</p></div>
</center>
</body>
</html>

css source:

SPAN.logo
{
position: absolute; top: 0px;
}

SPAN.irc
{
position: absolute; top: 0px;
}

ul.none
{
list-style-type: none

also my lists wont get rid of the bullets, can someone tell me what i did wrong there too?

thanks in advance, i know this is beginner stuff, but im very puzzled

- Stan

08-16-2005, 08:59 AM

Julian

Status: Simply to simplify
Join date: Apr 2005
Location: Foxton, Manawatu, New Zealand
Expertise:
Software:

Posts: 5,572

iTrader: 0 / 0%

Julian is on a distinguished road

You haven't closed the container div, add a <div> above </center>

You have used .none as id and class, you cant have multiple id selectors, use only <ul class="none">. Even better get rid of the .none selector in your css and simply have:

ul {
list-style-type: none;
}

Then you can also get rid of the class=none in your html.

Get rid of the capitalized SPAN in your css, eliminate them altogether, you don't need them.

Try not to use absolute positioning, position: relative; is much safer.

Don't mix html with xhtml, you have <br /> (xhtml) and <br> (html) in the same document.

You have a LOT of work learning css/xhtml, keep it up though, the rewards are worth it .

Also your layout lends itself well to using floats for positioning your two columns, floats won't hide your content.

Check out www.w3schools.com for tips.

08-16-2005, 01:21 PM

Koobi

Status: Member
Join date: Apr 2005
Location:
Expertise:
Software:

Posts: 312

iTrader: 0 / 0%

Koobi is on a distinguished road

sorry i can't help you with the CSS (i'm not good at fixing CSS issues but i find building from scratch easier) but one thing you should make a habit is to always make sure your XHTML is valid. this has helped me in the past.
if you validate your XHTML, you can be sure that that component is functioning correctly so then you can worry about just the CSS alone.

08-16-2005, 03:24 PM

Stan

Status: Member
Join date: Aug 2005
Location:
Expertise:
Software:

Posts: 269

iTrader: 0 / 0%

Stan is on a distinguished road

thanks a bunch it really helped me out, hopefully in a week I can code a more advanced layout in xhtml and css, maybe 2..