SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Enthusiast
    Join Date
    Apr 2005
    Posts
    37
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    hover image problem & general opinion

    Greetings -

    I'm making major headway with my site and basically launched with some barebones content:

    http://www.coolpillows.com -- your general opinions are welcome.

    I realized the IA needed some work, so I decided to create a home page that's more of a gateway to the other 4 sections. I'm also trying to get that image on the top left, above the navigation to swap when hovered withOUT Javascript. I must be doing something wrong, just not sure what.

    http://www.coolpillows.com/test_home.htm.

    Lastly, I'm sure I'm junking up my CSS file with the pseudo classes. I have these instances of code like this:

    #link1 {
    FONT-WEIGHT: bold;
    FONT-SIZE: 13px;
    COLOR: #069;
    FONT-FAMILY: arial,verdana;
    background-color:#C6E3B5;
    padding-top: 1em;
    padding-right: 0em;
    padding-bottom: 1em;
    padding-left: 1em;
    }
    #link1 A:link {
    COLOR: #0066FF; TEXT-DECORATION: none
    }
    #link1 A:visited {
    COLOR: #0066FF; TEXT-DECORATION: none
    }
    #link1 A:active {
    COLOR: #FFFFFF; TEXT-DECORATION: underline
    }
    #link1 A:hover {
    COLOR: #FFFFFF; TEXT-DECORATION: underline
    }


    There must be a better way, right?


    Special thanks to Paul O'B for helping out with the borders. :-)

  2. #2
    Non-Member
    Join Date
    Jan 2005
    Location
    Netherlands
    Posts
    4,300
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hello

    hover is not working because you did not give the hover element (a) a size width: 75px; height: 30px;

    you overdunn it a bit with the link styling i tryed to clean it up

    Code:
    <!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" xml:lang="en" >
    <head>
    <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
    <title>COOL PILLOWS  Home is where the logo is...</title>
    	<style type="text/css">
    /* CSS Document */
    
    /* commented backslash hack v2 \*/ 
    html, body{height:100%;} 
    /* end hack */ 
    html,body {
    	margin:0;
    	padding:0;
    }
    body {
    	background:#C6E3B5 url(images/leftborder.gif) repeat-y left top; 
    	}
    #outer{
    	height:100%;
    	background:transparent url(images/rightborder.gif) repeat-y right top;
    	display:table;/* for mozilla/opera*/
    	width:100%
    }
    h1#header{
    	margin:0;padding:0;
    	color:#C6E3B5;
    	text-align:center;
    	background: url(images/topborder.gif) repeat-x left top;
    	margin-left:-130px;
    	margin-right:-30px;
    }
    #inner1{
    	margin-right:30px;
    	margin-left:75px;
    	padding-left:40px;
    	padding-right:30px;
    	padding-bottom:55px;
    }
    /* may not need these
    #inner2{
    	margin-right:25px; 
    	margin-left:75px;
    	padding-bottom:55px;
    	background-color:#7EC1AF;
    }
    #inner3{
    	margin-right:25px; 
    	margin-left:75px;
    	padding-bottom:55px;
    	background-color:#7490BC;
    }
    #inner4{
    	margin-right:25px; 
    	margin-left:75px;
    	padding-bottom:55px;
    	background-color:#385b8d;
    }
    #inner5{
    	margin-right:25px; 
    	margin-left:75px;
    	padding-bottom:55px;
    	background-color:#000000;
    }
     end comment for inners 2, 3, .... */
    /*needed to make room for footer*/
    #centrecontent {
    	display:table-cell;
    }/*for opera 7"*/
    #footer{
    	margin-top:-40px;
    	margin-left:75px;
    	clear: both;
    	position: relative;
    	height: 40px;
    	background: url(images/bottomborder.gif) repeat-x left top;
    	padding-top: -10px;
    }
    div,p  {margin-top:0}/*clear top margin for mozilla*/
    .innerbody{
    	background:#C6E3B5;
    	color: #336699;
    	font-family: Verdana, Arial, Helvetica, sans-serif;
    	font-size: 75%;
    	margin-left: -15px;
    	padding-left: 30px;
    	padding-top: 20px;
    	line-height: 1.5em;
    }
    #navigation {
    	position:absolute; 
    	width:74px; 
    	height:200px; 
    	z-index:1; 
    	left: 1px; 
    	top: 22px;
    	margin-bottom: 1em;
    }
    #navigation ul {
    	list-style: none;
    	margin: 0;
    	padding: 0;
    	border: none;
    }
    #navigation li {
    	margin: 0;
    }
    /*#homelink {
    	display: block;
    	width: 75px;
    	height: 30px;
    	 background: url(images/home_corner_on.gif);
    	
    }*/
    
    #homelink a{
    	width: 75px;
    	height: 30px;
    	background: url(images/home_corner.gif);
    	display: block;
    }
    #homelink a:hover{
    	background: url(images/home_corner_on.gif);
    	display: block;
    	
    }
    #link1,#link2,#link3,#link4,#link5{
    	FONT-WEIGHT: bold;
    	FONT-SIZE: 13px;
    	COLOR: #069;
    	FONT-FAMILY: arial,verdana;
    	background-color:#C6E3B5;
    	padding-top: 1em;
    	padding-right: 0em;
    	padding-bottom: 1em;
    	padding-left: 1em;
    }
    
    a,a:visited{TEXT-DECORATION:none;}
    a:active, a:visited{TEXT-DECORATION:underline;}
    
    A:link{COLOR:#0066FF;}
    A:visited {COLOR:#0066FF;}
    A:active {COLOR:#FFFFFF; }
    A:hover {COLOR:#FFFFFF;}
    
    #link2{background-color:#7EC1AF;}
    #link3{background-color: #7490BC;}
    #link4{background-color: #385b8d;}
    #link5{background-color: #000000;}
    
    
    #subbox	{
    	background-color: #CCCCCC;
    	padding: 0.5em 1em .5em;
    	margin-top: -15px;
    	margin-left: 20px;
    	margin-bottom: 3px;
    	margin-right: 15px;
    	float: right;
    }
     ul#navlist {
    	margin-left: 0;
    	padding-left: 0;
    	white-space: nowrap;
    	font-family: Verdana, Arial, Helvetica, sans-serif;
    	font-size: 90%;
    	text-decoration:bold;
    }
    
    #navlist li	{
    	display: inline;
    	list-style-type: none;
    }
    #navlist a { 
    	padding: 3px 10px; 
    }
    #navlist a:link, #navlist a:visited {
    	color: #fff;
    	background-color: #385B8D;
    	font-weight: bold;
    	text-decoration: none;
    }
    #navlist a:hover {
    	color: #fff;
    	background-color: #7490BC;
    	font-weight: bold;
    	text-decoration: none;
    }
    #busylink a:link, #busylink a:visited,
    	#busylink a:active 	{
    	background-color: #CCCCCC;
    	background-repeat: no-repeat;
    	color: #000000;
    	border: 1px solid #336699;
    	padding: 2px 10px; 
    }
    #busylink a:hover {
    	background-color: #666666;
    	color: #FFFFFF;
    }
    .pillow {
    	background-image: url(images/home_pillow.gif);
    	float: right;
    	margin: 0 30px 20px 30px;
    }
    .pillowsmall {
    	background-image: url(images/home_pillow_sm.gif);
    	float: right;
    	margin: 0 0 10px 10px;
    }
    .heading,.heading2,.heading3,.heading2hum,.heading3hum,.heading2creat,.heading3creat {
    	font-family: Verdana, Arial, Helvetica, sans-serif;
    	font-size: 250%;
    	color: #336699;
    	font-weight: bold;
    	line-height: 1.3em;
    }
    .heading2,.heading3,.heading2hum,.heading3hum,.heading2creat,.heading3creat {font-size: 150%;line-height: 1.5em;}
    .heading3,.heading3hum,.heading3creat{font-size: 100%;}
    
    .heading2 A:link {COLOR: #336699;}
    .heading2 A:visited{COLOR: #336699;}
    .heading2 A:active {COLOR: #FFFFFF;}
    .heading2 A:hover {COLOR: #FFFFFF;}
    
    .heading2hum{color: #CCCCCC;}
    
    .heading2hum A:link{COLOR:#CCCCCC;}
    .heading2hum A:visited{COLOR:#CCCCCC;}
    .heading2hum A:active{COLOR:#FFFFFF;}
    .heading2hum A:hover{COLOR:#FFFFFF;}
    
    .heading3hum{color: #CCCCCC;}
    
    
    .heading2creat{color: #336699;}
    
    .heading2creat A:link{COLOR: #336699;}
    .heading2creat A:visited{COLOR: #336699;}
    .heading2creat A:active{COLOR: #333333;}
    .heading2creat A:hover{COLOR: #FFFFFF;
    }
    .heading3creat{color:#FFFFFF;}
    
    .innerbullets {
    	list-style: none;
    	margin: 10px 0 10px 0;
    	line-height: 1.5em;
    }
    .innerbullets li {
    	font-family: Verdana, Arial, Helvetica, sans-serif;
    	font-size: 90%;
    	font-weight: bold;
    	color: #666666;
    	padding: 3px 0 3px 5px;
    	text-decoration: none;
    	/*taking out bg images for now...
    	background-image: url(images/bullet_plus.gif);
    	background-repeat: no-repeat;
    	background-position: 0 50%;
    	*/
    }
    .innerbullets li a:link, a:visited{
    	color: #666666;
    	font-weight: bold;
    	text-decoration: none;
    }
    .innerbullets li a:hover {
    	color: #000000;
    	font-weight: bold;
    	text-decoration: underline;
    }
    .innerbullets li a:active {
    	color: #000000;
    	font-weight: bold;
    	text-decoration: underline;
    }
    .h4 {
    	color: #000000;
    	font-weight: bold;
    	font-size: 90%;
    	padding-left: 3em;
    	padding-right: 3em;
    }
    .logo_img {
    }
    
    .backtop li a:link, a:visited{
    	color: #666666;
    	font-weight: bold;
    	text-decoration: none;
    	font-family: Verdana, Arial, Helvetica, sans-serif;
    	float: right;
    }
    .backtop li a:hover {
    	color: #000000;
    	font-weight: bold;
    	text-decoration: underline;
    }
    .backtop li a:active {
    	color: #000000;
    	font-weight: bold;
    	text-decoration: underline;
    }
    div.thumb {
    	margin: 3px;
    	/*
    	border: 1px solid #A0ACC0;
    	*/
    	height: auto;
    	float: left;
    	text-align: center;
    }	
    .thumb img{
    	display: inline;
    	margin: 20px;
    	clear: right;
    	/*
    	border: 1px solid #A0ACC0;
    	*/
    }
    .copycontainer {
    	margin: 0 25% 1em 1em; 
    	padding: 0;
    	width: 100%;
    	height: auto;
    	float: left;
    	clear: right;
    }
    .copycontainer_sm {
    	margin: 5px 2px 5px 2px; 
    	padding: 0;
    	width: 90%;
    	height: auto;
    	float: left;
    	clear: right;
    }
    .boxfirst {
    	margin-left: 30px;
    	margin-right: 40px;
    	padding-right: 10px
    }
    .boxall {
    	margin-top: 60px;
    	margin-left: 30px;
    	margin-right: 40px;
    }
    .bodybox1 {
    	width: 50%;
    	float: left;
    	height: 65px;
    	background: #7EC1AF;
    	text-indent: 3px;
    }
    .bodybox2 {
    	width: 50%;
    	float: left;
    	height: 65px;
    	background: #7490BC;
    	text-indent: 3px;
    }
    .bodybox3 {
    	width: 50%;
    	float: left;
    	height: 65px;
    	background: #385b8d;
    	text-indent: 3px;
    }
    .bodybox4 {
    	width: 50%;
    	float: left;
    	height: 65px;
    	background: #000000;
    	text-indent: 3px;
    }
    </style>
    
    </head>
    <body>
    <div id="outer"> 
       <div id="centrecontent">
        <div id="inner1"> 
         <h1 id="header">&nbsp;</h1>
          <div id="navigation"> 
            <ul>
    		  <li id="homelink"><a href="index.htm"></a></li>
              <li id="link2"><a href="test_business.htm">business</a></li>
              <li id="link3"><a href="test_personal.htm">personal</a></li>
              <li id="link4"><a href="test_humor.htm">humor</a></li>
              <li id="link5"><a href="test_creative.htm">creative</a></li>
            </ul>
          </div>
    	  <!-- taking out nav for this home page
    	  <div class="innerbody">
    	    <div id="subbox"> 
              <ul id="navlist">
                <li id="busylink"><a href="index.htm">home</a></li>
                <li><a href="test_more.htm">more</a></li>
                <li><a href="test_refs.htm">references</a></li>
                <li><a href="test_logos.htm">logos</a></li>
    			<li><a href="test_notes.htm">notes</a></li>			
              </ul>
            </div>
    	    </div>
    		-->
    	  <div class="innerbody">
    	  <div class="boxfirst">
    	  <div class="pillow"><img src="images/home_pillow.gif" /></div>
              <div class="heading">Cool Pillows</div>
    	  <div class="heading2">home is where the logo is</div>
    	      
            <p>Welcome to Cool Pillows. <br />Dot com. <br />
                The site that tells you what Cool Pillows means, who I am, why I do 
                what I do and where that logo on the right came from. This site has 
                been totally redesigned. I've added a handy color-coded guide to the 
                major sections below. If you are a dog & you're color-blind, no matter. 
                You deserve major props for getting online with those awkward paws.</p>
    		  </div>
    <div class="boxall">
    		<div class="bodybox1">
    			<div class="heading2"><a href="test_business.htm">Business</a></div>
    			<div class="heading3">resumes, work samples, clients</div>
    		</div>
    		<div class="bodybox2">
    			<div class="heading2"><a href="test_personal.htm">Personal</a></div>
    			<div class="heading3">pics, links to friends & family, personality</div></div>
    		<br clear="all" />
    		<div class="bodybox3">
    			<div class="heading2hum"><a href="test_humor.htm">Humor</a></div>
    			<div class="heading3hum">parody blog, amusements, balderdash</div>
    			</div>
    		<div class="bodybox4">
    			<div class="heading2creat"><a href="test_creative.htm">Creative</a></div>
    			<div class="heading3creat">design notes, logo lore, references, links, etc.</div>
    		</div>
    		</div>
    		</div>
            </div>
    		</div>
    		</div>
    
    
    <div id="footer"></div>
    </body>
    </html>

  3. #3
    SitePoint Member pubsinbgk's Avatar
    Join Date
    Apr 2005
    Location
    Den,Heaven.
    Posts
    17
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Angry

    [QUOTE=all4nerds]

    A:link{COLOR:#0066FF;}
    A:visited {COLOR:#0066FF;}
    A:active {COLOR:#FFFFFF; }
    A:hover {COLOR:#FFFFFF;}

    QUOTE]

    Hi,

    The states must be defined in the correct order. Here is the order, starting with the one you must define first:
    1. link
    2. visited
    3. hover
    4. active
    Pubsinbgk

  4. #4
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Angry

    Since you have an XHTML doctype, you should not use uppercase element names in your CSS. It works as long as you're only pretending to use XHTML, but it will fail if you serve it as real XHTML.

    BTW, don't forget :focus if you're styling link states. There are people who use the keyboard to navigate, rather than the mouse.
    1. a:link
    2. a:visited
    3. a:hover, a:focus
    4. a:active
    Birnam wood is come to Dunsinane

  5. #5
    SitePoint Enthusiast
    Join Date
    Apr 2005
    Posts
    37
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks all. All good advice and I was able to implement (and learn) from all4nerds reminder to add height & width to the hover image. Gotta' remember that LVHA sequence too. Now I'm still trying to decide who has the better handle: all4nerds or AutisticCuckoo. Hmm.....

    Revisions at www.coolpillows.com/test_home.htm

    Any comments on the overall design/color scheme or content are welcome. I can take the abuse....don't worry. cheers!

    -lee

  6. #6
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by coolpillows
    I can take the abuse....don't worry.
    OK, Lee, you asked for it ...

    You should look at the colours and the contrast. The blue-on-blue in the links on the left is hard to read, and my colour perception is excellent.

    I don't know of any scientific limits, but the W3C uses two formulae that I've based my Colours and Contrast tool on.
    Birnam wood is come to Dunsinane

  7. #7
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,555
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Any comments on the overall design/color scheme or content are welcome. I can take the abuse....don't worry. cheers!
    I should point out that Reviews are handled in the review section once you have read and met the guidelines for reviews. One of the requirements (apart form a sufficient post count) is that you mst review 3 other sites in the section first.

    This ensures that members put in as much as they take out and also leaves the other forums clear for specific problems relating to the topic.

  8. #8
    SitePoint Enthusiast
    Join Date
    Apr 2005
    Posts
    37
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B

    This ensures that members put in as much as they take out and also leaves the other forums clear for specific problems relating to the topic.
    Got it! I'm off to the review section to post away. I'll look into the color scheme....as per the other comment. Maybe I'm crazy, but I'm actually forcing people to take a closer look by messing w/the colors. Of course, I might drive some crazy too.....

    thanks again....


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •