caz
Posts: 3520
Joined: 10/10/2001
From: Somewhere south of Chester, UK
Status: offline
 |
RE: three simple questions...... - 10/9/2004 11:46:28
quote:
and speaking of side bar list container-- i would like it to be centered instead of up against right side-- i played with margins and padding - i am still wading thru that concept-- but coudlnt get anything to work---
Ok, you had an inline style in your html which was overiding everything in your external stylesheet - as it is meant to do. You also had divs that were declared ,unused and not closed in your html. When you are experimenting get in the habit of commenting out unused elements as you go along. It also helps when you are checking your code later on.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<meta name="author" content="Althera" />
<meta name="keywords" content=" artistamps, digital collage,paintshop pro, design, css, cascading, style, sheets, xhtml, " />
<meta name="description" content="Art site" />
<meta name="robots" content="all" />
<title>Artistamps</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" type="text/css" href="artistamp.css">
</head>
<body>
<div id="wrap">
<div id="header"><h1>ARTISTAMPS</h1>
</div>
<div id="nav">
<ul id="navlist">
<li id="active"><a href="#" id="current"style="cursor:e-resize">
Artistamps</a></li>
<li><a href="#" style="cursor:e-resize">Digital Collage</a></li>
<li><a href="#" style="cursor:e-resize ">Mail Art</a></li>
<li><a href="#" style="cursor:e-resize">Artist Trading Cards</a></li>
</ul>
</div>
<div id="main">
<h2>ARTISTAMPS</h2>
<p> These are basically artisic postage stamps which can actually be
glued on envelopes and sent through the mail, however they DONT
replace regular postage. there are several different references to
these little works of art-- postoids, faux stamps, and cinderellas to
name a few. Artistamps also kind of function like regular stamps in
that the designers create their own postoffce and postal country.
There are some really creative names and actual stories that go with
these references. I chose LAVENDER POST for the name of my post office
RAINBOW REALM as my postal country !!
</p>
<p>I have learned to make mine in the graphics program PAINT SHOP PRO,
thanks to Konnie, who has a wonderful tutorial on her site--be sure to
check out her page and her stamps in the Resource link section. There
are basically few supplies one needs to create the stamps.</p>
<h3>STAMPS!</h3>
<p>Click on the thumbnails below for a full sized view of the stamp.</p>
<div class="float">
<img src="../images/fish1.jpg"><br>
<p>stamp 1</p>
</div>
<div class="float">
<img src="image2.gif"><br>
<p>caption 2</p>
</div>
<div class="float">
<img src="image3.gif"><br>
<p>caption 3</p>
</div>
<p>
<a href="http://jigsaw.w3.org/css-validator/" style="cursor:e-resize">
<img style="border:0;width:80px;height:15px"
src="http://creativedistortion/images/css.gif"
alt="Valid CSS!"></a>
<a href="http://www.mozilla.org/products/firefox/" style="cursor:e-resize">
<img style="border:0;width:80px;height:15px"
><img src="http://creativedistortion/images/fox.gif"
alt="get firefox!" height="15" width="80" /></a>
<a href="http://validator.w3.org/check?uri=referer" style="cursor:e-resize">
<img style="border:0;width:80px;height:15px"
img src="http://creativedistortion/images/xhtml.jpg"
alt="Valid XHTML 1.0!" height="15" width="80" /></a>
</p>
</div>
<div id="sidebar">
<h3>RESOURCES</h3>
<p>Check out the links below for lots of information and free graphics programs along with links to PSP brushes, tubes, and tutorials I hope these save you time and energy.</p>
<p>Nulla dictum. Praesent turpis libero, pretium in, pret Nulla dictum. Praesent
turpis libero, pretium in, pret Nulla dictum. Praesent turpis libero, pretium
in, pret Nulla dictum. Praesent turpis libero, pretium in, pret
</p>
<ul id="sidebarlist">
<li><a href="#" style=" cursor:e-resize">Artistamps</a></li>
<li><a href="http://www.mentalized.net/cssdepot/"style="cursor:e-resize">
CSS Stylesheets</a></li>
<li><a href="#" style="cursor: e-resize">Artist Trading Cards</a></li>
<li><a href="#" style="cursor: e-resize ">Digital Art</a></li>
<li><a href="#" style="cursor: e-resize">Fonts</a></li>
<li><a href="#" style="cursor: e-resize ">Paint Shop Pro 8</a></li>
<li><a href="#" style="cursor: e-resize">Rubber Stamps</a></li>
<li><a href="#" style="cursor: e-resize">Trading Groups</a></li>
<li><a href="#" style="cursor: e-resize">Terragen</a></li>
<li><a href="#" style="cursor: e-resize">Xeon</a></li>
</ul>
<p>Nulla dictum. Praesent turpis libero, pretium in, pret Nulla dictum. Praesent
turpis libero, pretium in, pret Nulla dictum. Praesent turpis libero, pretium
in, pretNulla dictum. Praesent turpis libero, pretium in, pret Nulla dictum.
Praesent turpis libero, pretium in, pret Nulla dictum. Praesent turpis libero,
pretium in, pret Nulla dictum. Praesent turpis libero, pretium in, pret Nulla
dictum. Praesent turpis libero, pretium in, pret Nulla dictum. Praesent turpis
libero, pretium in, pret
</p>
<p>Nulla dictum. Praesent turpis libero, pretium in, pret Nulla dictum. Praesent
turpis libero, pretium in, pret Nulla dictum. Praesent turpis libero, pretium
in, pretNulla dictum. Praesent turpis libero, pretium in, pret Nulla dictum.
Praesent turpis libero, pretium in, pret Nulla dictum. Praesent turpis libero,
pretium in, pret Nulla dictum. Praesent turpis libero, pretium in, pret Nulla
dictum. Praesent turpis libero, pretium in, pret Nulla dictum. Praesent turpis
libero, pretium in, pret
</p>
</div><!-- Close sidebarlist -->
</div><!-- Close sidebar -->
<div id="footer">
<p>Copyright Althera October 2004</p>
</div>
</div><!-- close wrapper -->
</body>
</html>
CSS
body {
background-color: #000000;
background-image: url(../images/boop3a.jpg);
background-position: top left;
background-repeat: no-repeat;
margin: 0;
min-width: 750px;
padding: 0;
}
div#wrap {
background-color: #C39AD4;
margin: 0 auto;
width: 750px;
}
#header {
background-color: #000000;
}
#header h1 {
color: #000000;
font-family: Verdana, Arial, Sans-Serif;
font-size: 48pt;
margin: 0;
padding: 5px;
text-align: center;
}
#nav {
background-color: #8736aa;
padding: 5px;
text-align: center;
}
#navlist {
font-family: Verdana, sans-serif;
font-size: 12px;
font-weight: bold;
margin-left: 0;
padding: 0 1px 1px;
}
#navlist li {
border-top: 1px solid gray;
display: inline;
list-style-type: none;
margin: 0;
}
#navlist li a {
background-color: #CCD;
background-position: ;
border-left: 1em solid #AAB;
padding-bottom: 0.25em;
padding-left: 0.75em;
padding-right: 0.5em;
padding-top: 0.25em;
text-decoration: none;
}
#navlist li a:hover {
background-color: #332;
background-position: ;
border-color: #FE3;
color: #FFF;
}
#navlist li a:link {
color: #448;
}
#navlist li a:visited {
color: #667;
}
#main {
background-color: #ffff00;
float: left;
width: 500px;
}
div.float {
float: left;
width: 120px;
padding: 10px;
}
div.float p {
text-align: center;
}
#main h2, #main h3, #main p {
border-color: #92749F;
border-style: inset;
border-width: 1px;
color: #8736AA;
font-family: Verdana, Arial, Sans-Serif;
font-size: 12pt;
line-height: 150%;
padding: 0 10px;
text-align: center;
}
#sidebar {
background-color: #FFC000;
margin-left: 500px;
text-align: center;
width: 247px;
}
/*#sidebarcontainer {
margin-right: 2em;
}*/
#sidebar h3 {
border-color: #92749F;
border-style: inset;
border-width: 1px;
color: #8736AA;
font-family: Verdana, Arial, Sans-Serif;
font-size: 12pt;
padding: 0 10px;
}
#sidebar p {
border-color: #92749F;
border-style: inset;
border-width: 1px;
color: #8736AA;
font-family: Verdana, Arial, Sans-Serif;
font-size: 12pt;
line-height: 150%;
padding: 0 10px;
text-align: center;
}
#sidebar ul {
margin-bottom: 0;
margin-right: 2em;}
#sidebarlist li {
border-top: 1px solid gray;
list-style-type: none;
margin: 0;
text-align: left;
}
#sidebarlist li a {
background-color: #CCD;
background-position: ;
border-left: 1em solid #AAB;
display: block;
padding-bottom: 0.25em;
padding-left: 0.75em;
padding-right: 0.5em;
padding-top: 0.25em;
text-decoration: none;
}
#sidebarlist li a:hover {
background-color: #332;
background-position: ;
border-color: #FE3;
color: #FFF;
}
#sidebarlist li a:link {
color: #448;
}
#sidebarlist li a:visited {
color: #667;
}
/*#wrap > #sidebar {
width: 250px;
}*/
sidebarlist {
background-color: gray;
background-position: ;
font-family: Verdana, sans-serif;
font-size: 8px;
font-weight: bold;
margin-left: 0px;
padding: 0 1px 1px;
width: 10em;
}
#footer {
background-color: #8736AA;
clear: both;
}
#footer p {
color: #C0E0FF;
font-family: Verdana, Arial, Sans-Serif;
font-size: 10pt;
margin: 0;
padding: 5px;
text-align: center;
}
The margins were added here-
#sidebar ul {
margin-bottom: 0;
margin-right: 2em;}
I don't guarantee that this will be cross browser supported so you will have to do as c1sissy says - validate both your html and your css. Also think about your font size declarations, points are really meant for printing, not screen use; don't mix them keep points for "printer friendly" pages.
I thought that you had said somewhere that you had been doing html since the 1970's?
And stop messing with cursors
_____________________________
Do not meddle in the affairs of cats, for they are subtle and will dance, or more on your keyboard.
Cheshire cat. www.doracat.co.uk
I remember when it took less than 4hrs to fly across the Atlantic.
|
Printable Version 
New Messages
No New Messages
Hot Topic w/ New Messages
Hot Topic w/o New Messages
Locked w/ New Messages
Locked w/o New Messages
Post New Thread