three simple questions...... (Full Version)

All Forums >> [Web Development] >> Cascading Style Sheets



Message

althera -> three simple questions...... (10/8/2004 21:05:09)

i have three relatively simple questions --

i want to put thumbnails on my page inside the main container-- (2 column layout)

i have used some code from REAL WORLD
its close but not quite there--
also the thumb sizes will be different - they are stamps- like postage stamps so some
horizontal and some square -- just need a tweak here


also i have a gray line running thru the site--- not sure where it is coming from but i think it might be from the link container on the sidebar--

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---

so i SURE WOULD appreciate help on these three items-- many thanks in advance--

here is link to page
THE PAGE

here is link to css
CSS CODE



Donkey -> RE: three simple questions...... (10/9/2004 8:05:08)

For the tumbnails there is a good tutorial here first posted by C1sissy in this forum.

The gray line is part of the CSS border if you remove the borders it goes away. IMHO the borders look old fashioned anyway, and your site looks much better without them.

To centre the navigation wrap the navigation section in a new div and apply
{margin:auto;} to centre the div within the sidebar div.

Also do you know that your main header (h1) is invisible because it's the same colour as the background?



d a v e -> RE: three simple questions...... (10/9/2004 8:21:48)

i spent 20 minutes this morning playing with that nav div and rearranging things and i still could not get it centred... if it was my page i would rebuild it, at least that bit. if you get it to work post back and let us know.

also you need to validate your xhtml and your css as you have errors in them...


also it's intensely annoying when people change the cursor for hove to some kacky looking alternative - can we have our hand cursor back please: it adds nothing and makes the site less usable. [:'(]



dpf -> RE: three simple questions...... (10/9/2004 9:20:29)

quote:

can we have our hand cursor back please: it adds nothing and makes the site less usable.

i wholeheartedly agree with dave. old fashioned pavlovian conditioning - I expect the hand and my little world crumbles and I freeze up when I dont get it! Then I leave.



Donkey -> RE: three simple questions...... (10/9/2004 9:41:07)

quote:

can we have our hand cursor back please: it adds nothing and makes the site less usable.

I agree, but I spent a while on that site and never noticed.



c1sissy -> RE: three simple questions...... (10/9/2004 9:58:39)

quote:

also you need to validate your xhtml and your css as you have errors in them...

Dave is soo correct on this, and I can't stress it enough, validate, validate validate!!

Sometimes the errors that are showing up on your page isn't because the styles aren't correct, but maybe because there is something off in the styles that is going to throw off the rest of the styles. If that makes sense. Its like crossing the t's and dotting the i's.

The rest of the guys in here have given you good advice to follow.



caz -> 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[;)]



c1sissy -> RE: three simple questions...... (10/9/2004 12:00:49)

quote:

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.


Caz is so totally on the button with this one. Use of ems for font sizes I believe is the best way to go. You can also use percentages as well. Also, you can use small etc.. for your fonts.

Here are a few links for you to read up on the usage of font sizes
http://www.w3.org/TR/REC-CSS2/fonts.html
http://www.alistapart.com/articles/relafont/
http://www.wilk4.com/webdevres/fontcss3.htm
http://webdesign.about.com/cs/typemeasurements/a/aa042803a.htm
http://www.bigbaer.com/css_tutorials/css_font_size.htm
http://www.alistapart.com/articles/sizematters/

These should be enough to give you an understanding of the fonts sizing and how to use them.

Good luck!





althera -> RE: three simple questions...... (10/9/2004 18:26:00)

MANY THANKS for all your help and support---

i have been having major problems with uploading new css and html to my site -- yesterday was a nitemare--
i know this sounds weird but the site ftp file manager was NOT saving the new files--
other people were having same problem and no one could figure out why--

so one reason my code is screwed up -- i didnt realize the problem for a while
and then everything was a mess-- -even though i have back up copies-- so i was trying to edit and save - anyway long story--

i will go and check everything and change cursor-

also will start to note the divs-- so i am sure i have them all closed etc--

when using templates..and copying their code-- the font sizes etc are sometimes
in em -- pt-- whatever-- so i guess i need to convert them to pix
i have read differing opinions on em for font compared to pix -- so guess its just
a matter of individual preferences-- anyway that kind of explains
why there are such differences--

do so appreciate your ideas, help, suggestions and input

yeah doing html since late 70's... but havent done it in a while--
other site



c1sissy -> RE: three simple questions...... (10/9/2004 19:55:27)

quote:

i know this sounds weird but the site ftp file manager was NOT saving the new files--

no, not to me, lol, I was having the same problem with my css files. I would edit them, save them, and then the same problems were still there.

What are you using for ftp?



althera -> RE: three simple questions...... (10/9/2004 20:53:13)

WHEW- am glad someone else has had same problem--
it literally drove me crzy --
i finally put message on the pow wow board and

found others having same problem
i have even had my files totally erased--


administrator had NO idea what was wrong -
he took domain name and user name
and checked it and said it was fine
well it wasnt--
thankfully tonite it seems to be ok but
it did drive me really crzy for a while
till i figured it out --

i am using core lite for ftp program and it works great
its the dern server on the other end- or ???????

there were alot of really PO people yesterday that is for sure





c1sissy -> RE: three simple questions...... (10/10/2004 9:48:29)

My suggestion is to edite the file on your machine and then upload it. This will over write the one on the server. Which is what I started to do. Then it should work ok. Just remember this for any upcoming files that you work on. Not sure what caused in on this end as I use a different ftp program from what you are using.



althera -> RE: three simple questions...... (10/10/2004 11:30:38)

quote:

ORIGINAL: c1sissy


My suggestion is to edite the file on your machine and then upload it. This will over write the one on the server. Which is what I started to do. Then it should work ok. Just remember this for any upcoming files that you work on. Not sure what caused in on this end as I use a different ftp program from what you are using.


that is exactly what i was doing- -ediiting in notepad -- saving file and then uploading it--
when it got to the other server is when it wasnt saved or erased--
this just added more frustration to an already frustrating situation --

i havent checked it today-- i NEED TO CLEAN MY HOUSE-- but probably will here in a few minutes
to make sure it is still working ok--

never a dull moment with puters!



dpf -> RE: three simple questions...... (10/10/2004 11:33:14)

<edit>



Page: [1]

Valid CSS!




Forum Software © ASPPlayground.NET Advanced Edition 2.4.5 ANSI
0.1074219