...

View Full Version : A few CSS problems..Positioning and a:active



Liquid Penguin
02-18-2005, 11:13 PM
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.


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


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

rmedek
02-18-2005, 11:27 PM
Try this, or something like it, in your CSS to fix the sidebar issue:


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


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:


<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 :D. 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,

Antoniohawk
02-18-2005, 11:27 PM
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


Rats, you beat me to it rmedek. :)

rmedek
02-18-2005, 11:40 PM
Rats, you beat me to it rmedek. :)
lol... I've been practicing. I'm faaaast, man. Usually wrong, but fast. :D

Liquid Penguin
02-18-2005, 11:53 PM
Thanks. The positioning is fixed. Odd cause I could of swore I had tried all the margins.

Is there a difference between
margin-left:10px; and
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. :thumbsup:

rmedek
02-18-2005, 11:57 PM
"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

Liquid Penguin
02-19-2005, 12:07 AM
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.


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

rmedek
02-19-2005, 12:17 AM
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?

Liquid Penguin
02-19-2005, 12:21 AM
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.

rmedek
02-19-2005, 12:26 AM
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.

Liquid Penguin
02-19-2005, 12:37 AM
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?

rmedek
02-19-2005, 12:54 AM
Yes (http://codingforums.com/showpost.php?p=276666&postcount=8).

Liquid Penguin
02-19-2005, 01:01 AM
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.

rmedek
02-19-2005, 01:11 AM
Now you tell me. :rolleyes:

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


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


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

Liquid Penguin
02-19-2005, 01:26 AM
That one works.

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


<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


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


<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


#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;
}

Liquid Penguin
02-21-2005, 01:57 AM
Can someone verify this works in FF and IE? I see it only in FF.

If you click corporate the bottom link in the footer should be blue. If you click the subnav like News it should turn and stay black for the active page and corporate the active section. I can only see it in FF and not IE.

Thanks.

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

Antoniohawk
02-21-2005, 04:55 AM
In IE 6 the links don't change to blue. I don't have time to look as to why at the moment, but I thought that I should let ya know.

Liquid Penguin
02-21-2005, 06:09 PM
I didn't think so. Thanks. Anyone else that might know why they aren't showing up right?

Liquid Penguin
03-02-2005, 05:21 AM
I still can't get this to check out right in IE. Anyone that might know what is wrong with the code?



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum