Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Page 1 of 2 12 LastLast
Results 1 to 15 of 19
  1. #1
    New Coder
    Join Date
    Feb 2005
    Location
    Florida
    Posts
    19
    Thanks
    0
    Thanked 0 Times in 0 Posts

    A few CSS problems..Positioning and a:active

    The a:active problem is it won't highlight the active page link in the subnavigation in the subnavs div nor will it highlight the one in the footer. Here is the HTML and CSS code. I have tried numerous things but don't know what is wrong.

    Code:
    <!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>Van Catering</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <link href="catering.css" rel="stylesheet" type="text/css" />
    </head>
    
    <body>
    
    <div id="wrap">
     <div id="head"></div>
     <ul id="navCircle">
      <li><a href="index.html">Home</a></li>
      <li><a href="corporate.html" class="active">Corporate</a></li>
      <li><a href="parties.html">Parties</a></li>
      <li><a href="conventions.html">Conventions</a></li>
      <li><a href="organizations.html">Organizations</a></li>
      <li><a href="prices.html">Prices</a></li>
     </ul>
      
     <div id="subnav">
      <ul id="subnavs">
       <li class="act"><a href="corpnews.html" class="activel">News</a></li>
       <li><a href="corpabout.html">About Us</a></li>
       <li><a href="corphistory.html">History</a></li>
      </ul>
     </div>
      
     <div id="content">
      <div id="main1">
       <div id="main-content1">
         <div id="lipsum">
          <p>
          Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas interdum.
    	  Vestibulum lacinia, purus vitae viverra vulputate, enim lorem faucibus diam,
    	  id accumsan ante ante eu odio. In tincidunt lorem at nulla. Nunc convallis elit vitae enim aliquet lobortis.
    	  Etiam sapien ante, convallis ut, vestibulum eu, iaculis in, massa. In nec arcu hendrerit erat sollicitudin commodo.
    	  Ut tristique, ante ac facilisis interdum, dolor sapien pretium wisi, nec fermentum mauris quam quis purus.
    	  Vestibulum quis leo vitae ipsum varius tempus. Duis nulla ipsum, convallis quis, fringilla ac, posuere sed, mi.
    	  Pellentesque condimentum quam et erat. Morbi ultricies, leo non mollis feugiat, nulla enim gravida dui,
    	  ut interdum turpis quam quis neque. Aenean sem eros, posuere sed, nonummy vulputate, varius eu, felis.
    	  Nullam odio arcu, consequat a, aliquet a, dapibus luctus, dui. Sed tristique, neque a imperdiet dignissim,
    	  justo lacus varius purus, posuere nonummy nibh odio at urna. Pellentesque venenatis turpis vitae ligula commodo viverra.
    	  Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; 
    	  hasellus sed magna sed odio aliquam cursus. Vestibulum fermentum sapien quis lacus. Vestibulum suscipit dolor in leo.
    	  </p>
          <p>Nullam arcu orci, cursus ac, rhoncus ut, dignissim sit amet, ligula. Curabitur a sem. Aliquam gravida.
    	  Sed molestie nisl a urna. Donec nec enim vel ligula laoreet interdum. Cras urna. Nam vitae libero. Quisque et augue.
    	  Aliquam erat volutpat. Quisque commodo. 
    	  </p>
          <p>Mauris ut sem. Curabitur nisl. Donec rutrum risus non velit. Sed ultricies mattis enim. Suspendisse eu nibh.
    	  Sed vestibulum. Proin a nulla eget neque mollis ultrices. Aliquam elementum. Proin rhoncus suscipit nulla.
    	  Mauris nec sem a tortor tristique luctus. Aliquam mollis. 
    	  </p>
         </div>
        </div>
       </div>
       <hr class="cleaner" />
      </div>
      <div id="footer">
       <a href="index.html">Home</a> | 
       <a href="corporate.html" class="active">Corporate</a> | 
       <a href="parties.html">Parties</a> | 
       <a href="conventions.html">Conventions</a> | 
       <a href="organizations.html">Organizations</a> | 
       <a href="prices.html" class="subactive">Prices</a>
       <br />
       <a href="contact.html">Contact</a> | 
       <a href="privacy.html">Privacy</a> | 
       <a href="legal.html">Legal</a> </div>
      </div>
    </body>
    </html>
    CSS

    Code:
    body {
    	background-color: #B4B595;
    }
    h1 {
    	font-family: Verdana, Arial, Helvetica, sans-serif;
    	font-size: 12px;
    	margin: 0px;
    	padding: 0px;
    }
    h2 {
    	font-family: Verdana, Arial, Helvetica, sans-serif;
    	font-size: 14px;
    	color: #000000;
    	margin: 0px;
    	padding: 0px;
    	border-bottom-width: 1px;
    	border-bottom-style: dotted;
    	border-bottom-color: #000000;
    }
    h3 {
    	font-family: Angelina;
    	font-size: 36px;
    	text-decoration: underline;
    	font-weight: bold;
    	text-align: center;
    }
    #wrap {
    	background-color: #6FBAD2;
    	width: 755px;
    	margin: auto;
    	border: thin solid #666666;
    }
    #head {
    	background-image: url(images/head.png);
    	background-repeat: no-repeat;
    	height: 100px;
    	width: 755px;
    }
    #navCircle {
    	margin: 0;
    	padding: 0 0 20px 10px;
    	}
    
    #navCircle li {
    	margin: 0;
    	padding: 0;
    	display: inline;
    	list-style-type: none;
    	}
    	
    #navCircle a:link, #navCircle a:visited {
    	float: left;
    	font-size: 12px;
    	line-height: 14px;
    	font-weight: bold;
    	padding: 0 12px 6px;
    	text-decoration: none;
    	color: #FFFFFF;
    	font-family: Verdana, Arial, Helvetica, sans-serif;
    	border-bottom: 1px solid #000000;
    	}
    
    #navCircle a:link.active, #navCircle a:visited.active, #navCircle a:hover {
    	padding-bottom: 6px;
    	color: #000;
    	background: url(images/round.gif) no-repeat bottom center;
    	}
    
    #content {
    	width: 755px;
    	margin:1em auto;
    	text-align:left;
          }
       #sidebar {
    	width: 200px;
    	margin:0;
    	padding: 0;
    	float: left;
          }
    #sidebar-content {
    	margin:0;
    	font-size: 12px;
    	font-family: Verdana, Arial, Helvetica, sans-serif;
    	color: #FFFFFF;
    	background-color: #B4B595;
    	border-top-width: 1px;
    	border-right-width: 1px;
    	border-bottom-width: 1px;
    	border-left-width: 1px;
    	border-top-style: solid;
    	border-right-style: solid;
    	border-bottom-style: solid;
    	border-left-style: solid;
    	border-top-color: #999999;
    	border-right-color: #333333;
    	border-bottom-color: #333333;
    	border-left-color: #999999;
    	padding: 5px 0px 5px 25px;
          }
    #main {
    	padding:0;
    	margin-top: 0;
    	margin-bottom: 0;
    	margin-left: 230px;
    	margin-right: 0;
          }
    #main-content {
    	margin:0;
    	padding: 5px 5px 5px 10px;
    	font-size: 12px;
    	font-family: Verdana, Arial, Helvetica, sans-serif;
    	color: #FFFFFF;
    	border-left-width: 1px;
    	border-left-style: solid;
    	border-left-color: #333333;
          }
    
    #footer {
    	font-family: Arial, Helvetica, sans-serif;
    	background-color: #000000;
    	height: 40px;
    	color: #FFFFFF;
    	text-align: center;
    }
    #sidebar-content2 {
    	margin:20px 0px 0px;
    	font-size: 12px;
    	font-family: Verdana, Arial, Helvetica, sans-serif;
    	color: #FFFFFF;
    	background-color: #B4B595;
    	border-top-width: 1px;
    	border-right-width: 1px;
    	border-bottom-width: 1px;
    	border-left-width: 1px;
    	border-top-style: solid;
    	border-right-style: solid;
    	border-bottom-style: solid;
    	border-left-style: solid;
    	border-top-color: #999999;
    	border-right-color: #333333;
    	border-bottom-color: #333333;
    	border-left-color: #999999;
    	padding: 5px 5px 5px 25px;
    	clear: both;
          }
    #footer a {
    	font-family: Verdana, Arial, Helvetica, sans-serif;
    	font-size: 10px;
    	color: #FFFFFF;
    	text-decoration: none;
    	text-align: center;
    }
    #footer a:hover, #footer a:active {
    	font-family: Verdana, Arial, Helvetica, sans-serif;
    	font-size: 10px;
    	color: #6FBAD2;
    }
    #main1 {
    	padding:0;
    	margin: 0;
    }
    #main-content1 {
    
    	margin:0;
    	padding: 5px 5px 5px 10px;
    	font-size: 12px;
    	font-family: Verdana, Arial, Helvetica, sans-serif;
    	color: #FFFFFF;
    }
    
    #main-content1 h1 {
    	font-family: Verdana, Arial, Helvetica, sans-serif;
    	font-weight: normal;
    	padding-left: 50px;
    }
    #main-content1 li {
    	font-family: Verdana, Arial, Helvetica, sans-serif;
    	font-size: 10px;
    	font-weight: bold;
    	margin-left: 50px;
    	list-style-type: decimal;
    }
    #subnav {
    	font-family: Verdana, Arial, Helvetica, sans-serif;
    	clear: both;
    	font-size: 10px;
    	color: #000000;
    }
    #subnavs {
    
    	margin: 0;
    	padding: 0 0 20px 10px;
    }
    #subnavs li {
    
    	margin: 0;
    	padding: 0;
    	display: inline;
    	list-style-type: none;
    }
    #subnavs a:link, #subnavs a:visited {
    	float: left;
    	font-size: 10px;
    	line-height: 14px;
    	font-weight: normal;
    	text-decoration: none;
    	color: #FFFFFF;
    	font-family: Verdana, Arial, Helvetica, sans-serif;
    	padding-top: 3px;
    	padding-right: 10px;
    	padding-left: 12px;
    	}
    #subnavs a:hover {float: left;
    	font-size: 10px;
    	line-height: 14px;
    	font-weight: normal;
    	text-decoration: none;
    	color: #000000;
    	font-family: Verdana, Arial, Helvetica, sans-serif;
    	padding-top: 3px;
    	padding-right: 10px;
    	padding-left: 12px;
    	}
    #subnav li.act a{
    	font-family: Verdana, Arial, Helvetica, sans-serif;
    	color: #CCFF33;
    }
    .placeimg2 {
    
    	float: right;
    	padding: 5px;
    	margin: 50px 5px 5px;
    }
    hr.cleaner {
          clear:both;
          height:1px;
          margin: -1px 0 0 0; padding:0;
          border:none;
          visibility: hidden;
          }
    .placeimg1 {
    	float: left;
    	padding: 5px;
    	margin: 20px 5px 5px;
    
    }
    
    .signbtn {
    	background-color: #6FBAD2;
    	border: 1px solid #FFFFFF;
    	margin: 5px 5px 5px 70px;
    }


    The second problem is the signin box on the front page will not come off the edge of the page no matter what I do. It does in Dreamweaver but not in IE or FF. Here is the link to the page. CSS is the same for this file too.

    http://school.liquidpenguin.com/ai/index.html

    Thanks
    Last edited by Liquid Penguin; 02-18-2005 at 10:20 PM.

  • #2
    Senior Coder
    Join Date
    Nov 2003
    Location
    Minneapolis, MN
    Posts
    2,879
    Thanks
    2
    Thanked 65 Times in 56 Posts
    Try this, or something like it, in your CSS to fix the sidebar issue:
    Code:
       #sidebar {
    	width: 200px;
    	margin-left:10px;
    	padding: 0;
    	float: left;
          }
    The :active problem is most likely happening because you're using the wrong syntax for pseudo-classes... You approach link styles like so:
    Code:
    a:link     { properties }  /* links */
    a:visited { properties }  /* visited links */
    a:hover  { properties }  /* hovered links */
    a:active  { properties }  /* active links */
    It has to be in that order, too, or else it won't work properly.

    On a side note, I can't help but notice things like this in your code:
    Code:
           <form name="signin" id="signin" action="">
             <em></em>
             <h2>Clients Sign In:</h2>
             <em></em><br />
             <h1>User Name:</h1>
    
             <input name="textfield" type="text" size="20" maxlength="20" />
             <br />
             <h1>PassWord:</h1>
             <input name="textfield" type="text" size="20" maxlength="20" />
             <br />
             <input name="Submit" type="submit" class="signbtn" value="Login" />
           </form>
    I know you're using Dreamweaver, but those header tags in the form, and empty <em> elements are killing me . You might want to comb through your code and see if you can clean up the semantics a bit. It makes it easier to apply CSS later, too.

    Hope this helps,

  • #3
    Senior Coder
    Join Date
    Aug 2002
    Location
    Kansas City, Kansas
    Posts
    1,518
    Thanks
    0
    Thanked 2 Times in 2 Posts
    I think that the problem lies in the fact that you have the pseudo selectors in the wrong order. They have to go
    • a:link
    • a:visited
    • a:hover
    • a:active


    Edit: Rats, you beat me to it rmedek.

  • #4
    Senior Coder
    Join Date
    Nov 2003
    Location
    Minneapolis, MN
    Posts
    2,879
    Thanks
    2
    Thanked 65 Times in 56 Posts
    Quote Originally Posted by Antoniohawk
    Rats, you beat me to it rmedek.
    lol... I've been practicing. I'm faaaast, man. Usually wrong, but fast.

  • #5
    New Coder
    Join Date
    Feb 2005
    Location
    Florida
    Posts
    19
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks. The positioning is fixed. Odd cause I could of swore I had tried all the margins.

    Is there a difference between
    Code:
    margin-left:10px;
    and
    Code:
    margin:20px 0px 0px;
    ?

    I will tackle the other suggestion later. As for the empty tags. Complete oversight but I had wanted to get the code to work before cleaning it up. Thanks for pointing that out.

  • #6
    Senior Coder
    Join Date
    Nov 2003
    Location
    Minneapolis, MN
    Posts
    2,879
    Thanks
    2
    Thanked 65 Times in 56 Posts
    "margin-left:10px;" affects only the left margin. "margin:20px 0px 0px;" gives a 20px margin to the top, and none to the rest.

    Here's a link that explains it more:

    http://www.w3schools.com/css/pr_margin.asp

  • #7
    New Coder
    Join Date
    Feb 2005
    Location
    Florida
    Posts
    19
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Sorry I worded it wrong. I meant Is there a difference in writing it those two ways?

    I fixed the CSS to read this and nothing.

    Code:
    #footer a:link, #footer a:visited {
    	font-family: Verdana, Arial, Helvetica, sans-serif;
    	font-size: 10px;
    	color: #FFFFFF;
    	text-decoration: none;
    	text-align: center;
    }
    #footer a:hover, #footer a:active {
    	font-family: Verdana, Arial, Helvetica, sans-serif;
    	font-size: 10px;
    	color: #6FBAD2;
    }
    I tried them seperately also and nothing also.

  • #8
    Senior Coder
    Join Date
    Nov 2003
    Location
    Minneapolis, MN
    Posts
    2,879
    Thanks
    2
    Thanked 65 Times in 56 Posts
    I'm not sure I understand the problem. I just checked the site and everything is acting the way it should be. The hovered and active links are displaying in #6FBAD2. Is it supposed to do something else?

    What exactly is the problem?

  • #9
    New Coder
    Join Date
    Feb 2005
    Location
    Florida
    Posts
    19
    Thanks
    0
    Thanked 0 Times in 0 Posts
    In the subnav under corporate, News when active should be black the same color as hover. News is the only page there right now but any of them when in the specific page should turn active.

    In the footer those links should change to active color #6FBAD2 same as hover depending on which page you are on.

    I'm not seeing it locally nor on the server.

  • #10
    Senior Coder
    Join Date
    Nov 2003
    Location
    Minneapolis, MN
    Posts
    2,879
    Thanks
    2
    Thanked 65 Times in 56 Posts
    it's probably just a cache issue. Chances are your using IE on Win. Try clearing the cache, restart IE, and check it out.

    It's working just fine on my end.

  • #11
    New Coder
    Join Date
    Feb 2005
    Location
    Florida
    Posts
    19
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Cleared Cache, Cookies, History prior and then your way and nothing still. I am not seeing the Corporate/News link staying active/black nor the corporate link in the footer turning to the color of hover.

    Are you talking about the hover effect?

  • #12
    Senior Coder
    Join Date
    Nov 2003
    Location
    Minneapolis, MN
    Posts
    2,879
    Thanks
    2
    Thanked 65 Times in 56 Posts
    Yes.

  • #13
    New Coder
    Join Date
    Feb 2005
    Location
    Florida
    Posts
    19
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Sorry. I must be wording it wrong as I am newish to CSS. I understand it as this.

    When i open the corporte page I see 3 sub links: News, About Us, History.

    They are white. When I hover over them they are black. When I click News, the page opens and the News link should stay black cause it is the active page. When i click it now it is staying white. I have tried applying classes to it and nothing and then I did what you said earlier and still no active state on the link.

  • #14
    Senior Coder
    Join Date
    Nov 2003
    Location
    Minneapolis, MN
    Posts
    2,879
    Thanks
    2
    Thanked 65 Times in 56 Posts
    Now you tell me.

    ":active" is the pseudo-class that means "when something is clicked on." It's sort of like the CSS version of onClick.

    You're basically using the right approach for what you want to do:
    Code:
    #navCircle a:link.active, #navCircle a:visited.active, #navCircle a:hover {
    	padding-bottom: 6px;
    	color: #000;
    	background: url(images/round.gif) no-repeat bottom center;
    	}
    Should work okay, but personally I would do this:
    Code:
    #navCircle li.active {
    	padding-bottom: 6px;
    	color: #000;
    	background: url(images/round.gif) no-repeat bottom center;
    	}
    
    <ul id="navCircle">
     <li class="active">Home</li>
     <li><a href="corporate.html">Corporate</a></li>
     <li><a href="parties.html">Parties</a></li>
     <li><a href="conventions.html">Conventions</a></li>
     <li><a href="organizations.html">Organizations</a></li>
     <li><a href="prices.html">Prices</a></li>
    </ul>

  • #15
    New Coder
    Join Date
    Feb 2005
    Location
    Florida
    Posts
    19
    Thanks
    0
    Thanked 0 Times in 0 Posts
    That one works.

    It is this one I can't get to work.

    Code:
    <div id="footer">
       <a href="index.html">Home</a> | 
       <a href="corporate.html" class="active">Corporate</a> |    << This link should be active
       <a href="parties.html">Parties</a> | 
       <a href="conventions.html">Conventions</a> | 
       <a href="organizations.html">Organizations</a> | 
       <a href="prices.html">Prices</a>
       <br />
       <a href="contact.html">Contact</a> | 
       <a href="privacy.html">Privacy</a> | 
       <a href="legal.html">Legal</a> 
      </div>
    CSS

    Code:
    #footer a:link, #footer a:visited {
    	font-family: Verdana, Arial, Helvetica, sans-serif;
    	font-size: 10px;
    	color: #FFFFFF;
    	text-decoration: none;
    	text-align: center;
    }
    #footer a:hover, #footer a.active {
    	font-family: Verdana, Arial, Helvetica, sans-serif;
    	font-size: 10px;
    	color: #6FBAD2;
    }
    I have tried adding a class called active to the link and nothing also.

    This one too won't work.

    Code:
    <div id="subnav">
       <ul id="subnavs">
    	<li><a href="corpnews.html class="active"">News</a></li>  << This link should highlight active.	
    <li><a href="corpabout.html">About Us</a></li>
    	<li><a href="corphistory.html">History</a></li>
       </ul>
      </div>
    CSS

    Code:
    #subnav {
    	font-family: Verdana, Arial, Helvetica, sans-serif;
    	clear: both;
    	font-size: 10px;
    	color: #000000;
    }
    #subnavs {
    
    	margin: 0;
    	padding: 0 0 20px 10px;
    }
    #subnavs li {
    
    	margin: 0;
    	padding: 0;
    	display: inline;
    	list-style-type: none;
    }
    #subnavs a:link, #subnavs a:visited {
    	float: left;
    	font-size: 10px;
    	line-height: 14px;
    	font-weight: normal;
    	text-decoration: none;
    	color: #FFFFFF;
    	font-family: Verdana, Arial, Helvetica, sans-serif;
    	padding-top: 3px;
    	padding-right: 10px;
    	padding-left: 12px;
    	}
    #subnavs a:hover {float: left;
    	font-size: 10px;
    	line-height: 14px;
    	font-weight: normal;
    	text-decoration: none;
    	color: #000000;
    	font-family: Verdana, Arial, Helvetica, sans-serif;
    	padding-top: 3px;
    	padding-right: 10px;
    	padding-left: 12px;
    	}
    #subnavs a:link.active {float: left;
    	font-size: 10px;
    	line-height: 14px;
    	font-weight: normal;
    	text-decoration: none;
    	color: #000000;
    	font-family: Verdana, Arial, Helvetica, sans-serif;
    	padding-top: 3px;
    	padding-right: 10px;
    	padding-left: 12px;
    	}


  •  
    Page 1 of 2 12 LastLast

    Posting Permissions

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