PDA

View Full Version : new to css, need some help!



Rivian
08-24-2005, 08:54 PM
Hi everyone,

As I said, I'm new to css. I bought a book and I've been learning as I go, but there's one thing so far that I just can't seem to make work. I want to have my navigation image links down the left side of the page but still be able to have content to the right of the links. Here's my coding so far.. don't laugh too hard..'k? And constructive criticisms are completely welcome!

The CSS document

body {
background-image: url("images/turbulentblue.jpg");
background-color: #000000;
background-repeat: repeat-x, repeat-y;
font-family: arial, "times new roman", helvetica, serif;
color: white;}

a:link {color: #FFFFFF;}
a:visited {color: #C3DAFD;}
a:active {color: #FFFFFF;}

.mainmenu /* the main navigational menu */
a {
display: block;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-style: normal;
line-height: normal;
color: #FFFFFF;
}

.indexlist
p {
display: block;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-style: normal;
line-height: normal;
color: #FFFFFF;
background-image: none;
background-repeat: repeat;


The HTML document

<HEAD>
<TITLE>Lira Art Gallery - Showcasing original artists of all mediums</TITLE>
<META NAME="description" CONTENT="Our online art gallery showcases original artists of all mediums including photography, poetry and painting.">
<META NAME="keyword" CONTENT="art, painting, photography, online art, gallery, artists, web design, poetry, original artwork, professional, purchase art">
<meta http-equiv="imagetoolbar" content="no">
<meta http-equiv="Content-Type" content="text/html,; charset=utf-8">
<link type="text/css" rel="stylesheet" href="lira.css">
<style type="text/css">
.indexlist { float: right;}
.mainmenu { display: block;}

</style>
</HEAD>

<body><center>
<img border="0" src="images/Liragallerygif.gif" alt="Welcome to Lira" width="402" height="49">
<h3> Welcome to Lira </h3>
<h4 class="mainmenu"> An online gallery showcasing artists of all genres and mediums </h4>
</center>

<div class="mainmenu" style="width: 92; height: 198">
<a href="artists.htm"><img src="images/Artistsgif.gif" alt="Artists" border="0" width="52" height="15"></a><br>
<br>
<a href="galleries.htm">
<img src="images/Galleriesgif.gif" alt="Galleries" border="0" width="64" height="15"></a><br>
<br>
<a href="submissionsandinquiries.htm">
<img src="images/Submissionsinquiriesgif.gif" alt="Submissions & Inquiries" border="0" width="88" height="37"></a><br>
<br>
<a href="salesshipping.htm">
<img src="images/Salesshippingpoliciesgif.gif" alt=" Sales & Shipping" border="0" width="66" height="37"></a><br>
<br>
<a href="webdesign.htm">
<img src="images/Webdesigngif.gif" alt="Web Design" border="0" width="88" height="19"></a>
</div>

<div class="indexlist" style="width: 400; height: 253">
<p align="center" class="mainmenu"> Artistry comes in many forms and spans eras, genres and cultural boundaries. It is a Muse to which person can relate, no matter what their taste, and the constant evolution and revolution of our world provides canvas and palettes for all varieties of artists. </p>
<p class="indexlist"><br>
The photographer who sees the world in shades of light filtered through their eyes and into ours.
<br>
<br>
The artist who draws, paints and sculpts our imaginations with their own.
<br>
<br>
The writer whose words provide not only inspiration, but also offer a deeper sense of meaning whether we are living day to day or are seeking the divine.
<br>
<br>
The digital muse who creates our electronic world with not only a smoothly designed, easy-to-use medium but also textures beauty with functionality. </li>
<br>
<br>
</p>
</div>
</body>
</html>

Right now the site is designed in tables.. (yes, yes, I know.. REALLY BAD!!) but here's the link to it. I just want to recreate the design with css.
www.lira.ca (http://www.lira.ca)

Thanks so much for your help!
~Rivian

Twey
08-24-2005, 09:30 PM
Add float:left; to .mainmenu.
Your CSS coding is actually rather good. You've avoided most of the more common mistakes. Then again, CSS is rather simple; it's hard to make mistakes! You might want to close that p {, though.
Your HTML, however, leaves much to be desired. Run it through a validator (validator.w3.org).

Rivian
08-26-2005, 12:50 AM
Hi Twey,

Ok, so I went in and made the change you suggested, but it's still coming up the same way. The url for the page is www.lira.ca/newindex.html (http://www.lira.ca/newindex.html)

I put my html through a validator as well as my css. Once I made a few changes to the html if validated and I'm really happy about that but the css validator said that I had parse errors on two lines relating to the .mainmenu stuff as well as the .indexlist stuff.

I have no idea what a parse error is.. I know, totally shameful, but I'm hoping that either you or someone else can fill me in.

Here's another look at my css:

body {
background: black url("images/turbulentblue.jpg");
background-repeat: repeat;
font-family: arial, helvetica, serif;
color: white;}

a:link {color: #FFFFFF;}
a:visited {color: #C3DAFD;}
a:active {color: #FFFFFF;}

.mainmenu /* the main navigational menu */
a {
display: block;
float: left;}

.indexlist /* content of the main index page */
p {
display: block;}


I made a few adjustments, as you can see.

Here's my html:

<!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>
<title>Lira Art Gallery - Showcasing original artists of all mediums</title>
<meta name="description" content="Our online art gallery showcases original artists of all mediums including photography, poetry and painting." />
<meta name="keyword" content="art, painting, photography, online art, gallery, artists, web design, poetry, original artwork, professional, purchase art" />
<meta http-equiv="imagetoolbar" content="no" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link type="text/css" rel="stylesheet" href="lira.css" />
<style type="text/css">
/*<![CDATA[*/
.indexlist { float: right;}
.mainmenu { display: block;}

/*]]>*/
</style>
</head>
<body><></>
<center><img border="0" src="images/Liragallerygif.gif" alt="Welcome to Lira" width="402" height="49" />
<h3>Welcome to Lira</h3>
<h4 class="mainmenu">An online gallery showcasing artists of all genres and mediums</h4>
</center>
<div class="mainmenu" style="width: 92px; height: 198px"><a href="artists.htm"><img src="images/Artistsgif.gif" alt="Artists" border="0" width="52" height="15" /></a><br />
<br />
<a href="galleries.htm"><img src="images/Galleriesgif.gif" alt="Galleries" border="0" width="64" height="15" /></a><br />
<br />
<a href="submissionsandinquiries.htm"><img src="images/Submissionsinquiriesgif.gif" alt="Submissions &amp; Inquiries" border="0" width="88" height="37" /></a><br />
<br />
<a href="salesshipping.htm"><img src="images/Salesshippingpoliciesgif.gif" alt=" Sales &amp; Shipping" border="0" width="66" height="37" /></a><br />
<br />
<a href="webdesign.htm"><img src="images/Webdesigngif.gif" alt="Web Design" border="0" width="88" height="19" /></a></div>
<div class="indexlist" style="width: 400px; height: 253px">
<p align="center" class="mainmenu">Artistry comes in many forms and spans eras, genres and cultural boundaries. It is a Muse to which person can relate, no matter what their taste, and the constant
evolution and revolution of our world provides canvas and palettes for all varieties of artists.</p>
<p class="indexlist"><br />
The photographer who sees the world in shades of light filtered through their eyes and into ours.<br />
<br />
The artist who draws, paints and sculpts our imaginations with their own.<br />
<br />
The writer whose words provide not only inspiration, but also offer a deeper sense of meaning whether we are living day to day or are seeking the divine.<br />
<br />
The digital muse who creates our electronic world with not only a smoothly designed, easy-to-use medium but also textures beauty with functionality.<br />
<br /></p>
</div>
</body>
</html>

I know that my html is hideous and I'm searching out resources to help me learn to correct it. I haven't found much of use just yet, but if you have any ideas I'd be open to suggestions. When I first started building I knew so little about html that I didn't realize I knew so little. Now that I know more I realize that I'm seriously deficient in some areas.

So any help that you could suggest or provide would be greeted with a bundle of enthusiasm.

Thanks so much,
~Rivian

Twey
08-26-2005, 09:45 AM
A parse error is when you make so blatant a mistake (usually a very simple one) that the validator doesn't know how to interpret the code that comes after it. In this case, it's the linebreak
.indexlist
p {
between those two lines. You presumably mean to say ".indexlist p {" (referring to all <p> elements in .indexlist). HTML (and XHTML - good work! :)) doesn't mind linebreaks; CSS does.

<p class="indexlist">This doesn't do anything. The paragraph is already styled by the class of the div; classing it doesn't make any difference - or wouldn't do, if not for:

.indexlist { float: right;}
.mainmenu { display: block;}
Why don't you put this in the stylesheet?
As for learning to write nice code... I suggest the validator :) Try to get it to validate as the strictest doctype you can find (XHTML1.1 Strict). Couple of days wrestling with that and I... well... I gave up and reverted to XHTML1.0 Strict. But at least I tend to write that from scratch nowadays :)

(shudder) Imagemaps with XHTML1.1. It kept telling me I couldn't have a "#" in the usemap attribute. Of course, without it, nothing worked. All nice and valid, though.

I did this:
<!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"><head><title>Lira Art Gallery - Showcasing original artists of all mediums</title>

<meta name="description" content="Our online art gallery showcases original artists of all mediums including photography, poetry and painting."/>
<meta name="keyword" content="art, painting, photography, online art, gallery, artists, web design, poetry, original artwork, professional, purchase art"/>
<meta http-equiv="imagetoolbar" content="no"/>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<link type="text/css" rel="stylesheet" href="lira_files/lira.css"/>
<style type="text/css">
/*<![CDATA[*/
.indexlist { float: left;
text-align: center;
margin: 0;
padding-left: 1%;
padding-right: 1%;
}
.mainmenu { display: block;
margin: 0pt;
padding-left: 1%;
padding-right: 5%;
height:100%;
float: left;
}
/*]]>*/
</style></head>

<body>
<div style="text-align:center;">
<img src="lira_files/Liragallerygif.gif" alt="Welcome to Lira" style="border-style:none;" height="49" width="402"/>
<h3>Welcome to Lira</h3>
<h4>An online gallery showcasing artists of all genres and mediums</h4>
<div class="mainmenu" style=""><a href="http://www.lira.ca/artists.htm"><img src="lira_files/Artistsgif.gif" alt="Artists" style="border-style:none;" height="15" width="52"/></a><br/>
<br/>
<a href="http://www.lira.ca/galleries.htm"><img src="lira_files/Galleriesgif.gif" alt="Galleries" style="border-style:none;" height="15" width="64"/></a><br/>
<br/>
<a href="http://www.lira.ca/submissionsandinquiries.htm"><img src="lira_files/Submissionsinquiriesgif.gif" alt="Submissions &amp; Inquiries" style="border-style:none;" height="37" width="88"/></a><br/>
<br/>
<a href="http://www.lira.ca/salesshipping.htm"><img src="lira_files/Salesshippingpoliciesgif.gif" alt=" Sales &amp; Shipping" style="border-style:none;" height="37" width="66"/></a><br/>
<br/>
</div>
<a href="http://www.lira.ca/webdesign.htm"><img src="lira_files/Webdesigngif.gif" alt="Web Design" style="border-style:none;" height="19" width="88"/></a></div>
<div class="indexlist" style="width: 70%;">
<p class="mainmenu" style="text-align:center;">Artistry comes in many forms and
spans eras, genres and cultural boundaries. It is a Muse to which
person can relate, no matter what their taste, and the constant
evolution and revolution of our world provides canvas and palettes for
all varieties of artists.<br/>
The photographer who sees the world in shades of light filtered through their eyes and into ours.<br/>
<br/>
The artist who draws, paints and sculpts our imaginations with their own.<br/>
<br/>
The writer whose words provide not only inspiration, but also offer a
deeper sense of meaning whether we are living day to day or are seeking
the divine.<br/>
<br/>
The digital muse who creates our electronic world with not only a
smoothly designed, easy-to-use medium but also textures beauty with
functionality.<br/>
<br/></p>
</div>
</body></html>
It wasn't valid, I had to validate it! Stepped it up to Strict, too.
It needs to be tweaked.

mwinter
08-26-2005, 11:52 PM
Your CSS coding is actually rather good. You've avoided most of the more common mistakes.There are still a couple.

The first is that color and background properties should always be paired; whenever one is set, the other should be too (even if only to keyword defaults like transparent and inherit). This prevents clashes with colour schemes beyond the author's control (operating system themes, accessibility aids, etc.).

The second is using pixel units for font sizes. IE will not resize these, and is a potential usability stumbling block. If you must fiddle with sizes, use percentages. You shouldn't go below 80% of the browser default, and sizes that low should be reserved for legalese and other small print. Body text should be left at 100%. Your sense of aesthetics might not like that, but readability is more important.


HTML (and XHTML - good work! :)) doesn't mind linebreaks;There is nothing good about using XHTML on the Web today, unless you have specific reasons that usually involve client-driven content negotiation. The most prevelant browser in use doesn't understand XHTML in the slightest, and serving XHTML as HTML is pointless; you simply invoke the browser's error correction mechanism for every XML-like token.

Use valid, semantic HTML (preferably strict). It is better supported, handled better by all browsers (even Opera and Mozilla), and will around for a long time to come.

I'll be coming back to this in a moment.


CSS does.Not at all. The problem lies with the validator; it chokes on the mid-selector comment. This shouldn't be an issue as all comments should be stripped during tokenisation, but it would appear the validator doesn't do this. I don't know if this problem is known: I don't see it in the bug list, but it seems to obvious to have gone unnoticed.


Try to get it to validate as the strictest doctype you can find (XHTML1.1 Strict).As I said, HTML 4.01 Strict is fine. Transitional is OK, too, if you really need a transitional feature (like targeted links). In any case, XHTML 1.1 really shouldn't appear on the Web without content negotiation. There are no provisions for serving it as HTML; Appendix C applies to XHTML 1.0 only.


It [XHTML validator] kept telling me I couldn't have a "#" in the usemap attribute.The usemap attribute was changed from URI to IDREF (an id attribute reference). As the name attribute for the map element was a unique identifier, there wouldn't be much point in keeping it, so you'd use an id attribute instead. I would expect that serving the document as XHTML proper, a conforming user agent would handle it properly. However, if you serve it as HTML, then the browser is only going to treat it as HTML (and thus fail).

Here's my contribution:


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

<html lang="en" dir="ltr">
<head>
<title>Lira Art Gallery — Home</title>

<style type="text/css">
body {
color: #c3dafd;
background: url(/images/turbulentblue.jpg) black;
}
h1 {
font: 130% normal sans-serif;
}
h1,
#legal,
#footer-navigation {
text-align: center;
}
p.verse {
margin-left: 3em;
width: 20em;
}
a:link,
a:active {
background-color: transparent;
color: white;
}
a:visited {
background-color: transparent;
color: #c3dafd;
}
a img {
border-style: none;
}
#content {
margin-left: 8em;
}
#footer {
background-color: transparent;
color: white;
font-size: 90%;
margin-top: 5em;
}
ul.navigation {
list-style-type: none;
margin: 0;
padding: 0;
}
#site-navigation {
float: left;
margin-left: 1em;
width: 6em;
}
#site-navigation li {
display: block;
margin: 0.5em 0;
}
#footer-navigation li {
display: inline;
margin: 0 0.5em;
}
#skip-navigation {
position: absolute;
left: -100em;
}
</style>
</head>

<body>
<div id="header">
<h1><img alt="Lira Gallery" src="/images/Liragallerygif.gif"></h1>
<a id="skip-navigation" href="#content">Skip to content</a>
</div>


<ul id="site-navigation" class="navigation">
<li><a href="/artists.htm"><img alt="Artists" src="/images/Artistsgif.gif"></a></li>
<li><a href="/galleries.htm"><img alt="Galleries" src="/images/Galleriesgif.gif"></a></li>
<li><a href="/submissionsandinquiries.htm"><img alt="Submissions and Inquiries" src="/images/Submissionsinquiriesgif.gif"></a></li>
<li><a href="/salesshipping.htm"><img alt="Sales and Shipping" src="/images/Salesshippingpoliciesgif.gif"></a></li>
<li><a href="/webdesign.htm"><img alt="Web Design" src="/images/Webdesigngif.gif"></a></li>
</ul>


<div id="content">
<p>Welcome to Lira, an on-line gallery showcasing artists of all genres and
mediums.</p>
<p>Artistry comes in many forms and spans eras, genres and cultural
boundaries. It is a Muse to which people can relate, no matter what their
taste, and the constant evolution and revolution of our world provides canvas
and palettes for all varieties of artists.</p>

<p class="verse">The photographer who sees the world in shades of light
filtered through their eyes and into ours.</p>
<p class="verse">The artist who draws, paints and sculpts our imaginations
with their own.</p>
<p class="verse">The writer whose words provide not only inspiration, but
also offer a deeper sense of meaning whether we are living day to day or are
seeking the divine.</p>
<p class="verse">The digital muse who creates our electronic world with not
only a smoothly designed, easy-to-use medium but also textures beauty with
functionality.</p>

<p>Browse though the galleries — there’s something for
everyone!</p>
</div>


<div id="footer">
<ul id="footer-navigation" class="navigation">
<li><a href="/">Home</a></li>
<li><a href="/sitemap.htm">Sitemap</a></li>
</ul>

<p id="legal">All content, graphics, images, logos and any other form of
intellectual material are &copy; Lira.ca unless otherwise noted. All rights
are reserved. Removal of any item from this site without written permission
constitutes copyright infringement.</p>
</div>
</body>
</html>The style sheet should be exported, of course.

Mike