CSS - Defining Css Rules For Anchors - How

Hello all, Newbie here.

I shall demonstrate how much of a Newbie I am by posing a question which is so basic to all of you, but escapes me altogether.

What styles apply to what element? That is, what element gets a background and determines size of a menu? Or put a different way, do I have to style a UL element, or just style the LI? Why is it that I don't have to set a color attribute for a LI element if I set it for an anchor element?

As you can tell I am a very confused person. I managed to fake my way through a website, but would like to add (Suckerfish) dropdowns to the horizontal nav bar. But, I cannot for the life of me get the dropdown list items to space as I would like. That is because I don't understand the basics of a list!

If it helps the site in question is www.lif-tech.com/dropdown.html. The CSS which drops the nested items is he

Code:

@charset "utf-8";

/*Over-ride browser*/
* {
	margin: 0px;
	padding: 0px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 100%;
}

/* This div contains website*/
#wrapper {
	margin-right: auto;
	margin-left: auto;
	background-color: #4D4D4D;
	width: 760px;
	border: 1px solid #000;
	text-align: left;
}
/*Header*/
#mastHead      {
	width: 720px;
	background-color: #4D4D4D;
	text-align: center;
	padding-right: 40px;
}

/*Div to hold logo. "Same Day Service" in HRML beneath*/
#mastHeadL	{
	height:110px;
	width:190px;
	float: left;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-weight: bold;
	color: #FFFFFF;
}

/*Used for positioning - could probably go*/
#mastHeadR	{
	height:95px;
	width:355px;
	float: right;
	padding-top: 10px;
}

/*Hor Nav div*/
#hNav     {
	font-size: large;
	font-weight: bold;
	text-align:center;
	line-height:40px;
	color: #FFFFFF;
	height: 40px;
	background-color: #000;
	background-repeat: repeat-x;
	background-image: url(../images/header.jpg);
	border-right-width: 1px;
	border-left-width: 1px;
	border-right-style: solid;
	border-left-style: solid;
	border-right-color: #999999;
	border-left-color: #666666;
	position: relative;
	clear:both;
}

/*Position 1/2 way left...*/
#hNav       ul     {
	clear: left;
	float: left;
	border:0 0 0;
	list-style: none;
	position: relative;
	left: 50%;
	text-align: center;
}
/*so li can be positioned 1/2 that distance right to center menu*/
#hNav li	{
	display:block;
	width: 105px;
	height: 40px;
	float: left;
	list-style: none;
	position: relative;
	right: 50%;
}

/*style Hor Nav anchors*/
#hNav a {
	display: block;
	width:105px;
	height: 40px;
	border-right-width: 1px;
	border-right-style: dotted;
	border-right-color: #DA251C;
	color: #FFFFFF;
	text-decoration: none;
	font-size: 20px;
}

/*Insert first red separator line*/
#hNav a.first {
	border-left-width: 1px; 
	border-left-style: dotted;
	border-left-color: #DA251C; 
}






/*Suckerfish...*/
#hNav ul ul	li	{
	height: 2em;
	text-align: center;
	line-height:1em;
	background-color: #4D4D4D;
	border-right-width: 1px;
	border-left-width: 1px;
	border-right-style: solid;
	border-left-style: solid;
	border-right-color: #999999;
	border-left-color: #666666;
	left:-1999px;

}

#hNav ul ul a	{
	height:auto;
	line-height:1em;
	border-right-width: 1px;
	border-left-width: 1px;
	border-right-style: solid;
	border-left-style: solid;
	border-right-color: #999999;
	border-left-color: #666666;
	font-size:12px;

}


#hNav a:visited {
	color:#DA251C;
	display: block;
	outline: none;
	width:105px;
	text-decoration: none;
	font-size: large;
}

#hNav ul ul a:visited	{
	color:#DA251C;
	display: block;
	outline: none;
	width:105px;
	text-decoration: none;
	font-size: small;
}

/*Make button black for sunken affect*/
#hNav a:hover	{
	background-color: #000;
	border-left-style: solid;
	border-left-width: 1px;
	border-left-color: #666;
	border-right-style: solid;
	border-right-color: #333;
}

#hNav a:visited ul li	{
	border:0
}

#hNav li:hover ul li	{
	left: auto;
}

/*Create Vert Nav column*/
#vNav    {
	float: left;
	width: 130px;
	margin-top: 40px;
	overflow: hidden;
	clear: left;
}

#vNav ul {
	margin-right: -42px;
	text-align: center;
	padding: 0px;
	width: 127px;
	list-style-type: none;
	background-color: #4D4D4D;
	border: 1px;
	border-style:solid;
	border-color:#4D4D4D;
}

#vNav a:hover	{
	background-color: #000000;
	outline: none;
	border-top-style: solid;
	border-top-width: 1px;
	border-top-color: #333333;
	border-bottom-style: solid;
	border-bottom-width: 1px;
	border-bottom-color: #666666;
}


#hNav a:visited .vNav ul a{
	color:#DA251C;
	display: block;
	text-decoration: none;
	font-size: large;
}

#vNav a {
	display:block;
	color:#99FF00;
	text-decoration:none;
	font-size: .75em;
	font-weight: bold;
	color: #FFFFFF;
	padding-top: 0.75em;
	padding-right: 1em;
	padding-bottom: 0.75em;
	padding-left: 1em;
	line-height: 1.5em;
	border-top-style: solid;
	border-top-width: 1px;
	border-top-color: #4D4D4D;
	border-bottom-style: solid;
	border-bottom-width: 1px;
	border-bottom-color: #4D4D4D;

}

#vNav a:visited {
	color:#DA251C;
}

/*Content is white only from Vert Nav right*/
#content   {
	background-color: #FFFFFF;
	float: left;
	width: 590px;
	padding: 20px;
}
/*Style the font to be bolder than regular text*/
#content p	{
	font-size: medium;
	font-weight: bold;
}

#contentImg	{
	float:right;
	padding-left:1em;

}

/*Footer clears all floats*/
#footer  {
	clear: both;
	height: 80px;
	width: 758px;
	background-color: #000000;
	background-image: url(../images/footer.jpg);
	background-repeat: repeat-x;
	border-right-width: 1px;
	border-left-width: 1px;
	border-right-style: solid;
	border-left-style: solid;
	border-right-color: #666666;
	border-left-color: #333333;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 10pt;
	font-weight: bold;
	color: #FFFFFF;
	text-align:center;
	line-height: 5em;
}

#footer a	{
	text-decoration:none;
	color: #FFFFFF;
}

#footer a:visited {
	color:#DA251C;
}
	
/*Inside pages at bottom - big and bold, and centered*/
#phone	{
	text-align:center;
	color: #FF0000;
	font-size: 2em;
	font-weight:bold;
	width:70%;
	margin-left:auto;
	margin-right:auto;
}

/*This div contains "View Printer Friendly versions*/
#print	{
	width:50%;
	float: right;
	font-size:10pt;
}

#print img	{
	float:right;
	border: none;
}

/*Center address below phone*/
#address	{
	color:#000; 
	font-size:.4em; 
	font-weight:normal; 
	line-height:1.5em;
}

/*Remove border from images*/
#wrapper img	{	
	border:none;
}

/*Remove border from visited boxes*/
#wrapper img a	{
	text-decoration:none;
}

/*Display page User is on as black*/
#homepage #home, #billofrights #bor, #warranty #war,
#guarantee #mbg, #rental #rental, #service #service,
#products #products, #contact #contact, #techtalk #tf,
#faq #faq, #parts #parts, 
#ot #ot, #pm #pm
{color:#000} 

I want the dropdowns list items to vertically space as the Vertical Nav Bar does. I think the problem is I styled the lists differently - LI (and A) for the Horizontal and UL and A for the Vertical Nav...

Sorry for the lenghty code, the unneeded styling, and the blatant stupidity. This is why I am a mechanic and not a website designer!

Thanks,
-John

Hi,

I've came across multiple menu css examples which uses <span> or <b> intermediate tags to select the text within an anchor. These tags, however, seem like a crutch which shouldn't be need. How would I select this text without using the intermediate tags?

Code:

<ul class="mymenu">
<li class="current"><a href="http://www.xyz.com/"><b>xyz</b></a></li>
<li><a href="http://www.abc.com/"><b>abc</b></a></li>
<li><a href="http://www.aaa.com/"><b>aaa</b></a></li>
</ul>

Thanks

Hello all,

I am having difficulty with creating a menu:

Code:

<!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=UTF-8" />
    <style type="text/css">
      #menu { 
        width: 200px; 
        display: block;
        float: left;
      } /* end #menu */

      #menu ul { list-style-type: none; }
      #menu ul li { background-color: #0000ff; margin-bottom: 1em; }
      #menu ul li a {
        display: inline;
        width: 100px;
        text-decoration: none; 
        color: #000000;
        font-size: 0.8em;
        border-top: 2px solid #000000;
        border-bottom: 2px solid #000000;
        background-color: #ffffff;
      } /* end #menu ul li a */
      #menu ul li:before { content: url("images/menu_left2.png"); }
      #menu ul li:after { content: url("images/menu_right2.png"); }
    </style>
  </head>
  <body>
    <div id="container">
      <div id="menu">
        <ul>
          <li><a href="index.php">Home</a></li>
          <li><a href="about_us.php">About Us</a></li>
          <li><a href="get_an_estimate.php">Get An Estimate</a></li>
          <li><a href="services.php">Services</a></li>
          <li><a href="portfolio.php">Portfolio</a></li>
          <li><a href="job_opportunities.php">Job Opportunities</a></li>
          <li><a href="contact_us.php">Contact Us</a></li>
        </ul>
      </div>
    </div>
  </body>
</html>

For starters, I would like the link to be 100px wide no matter what. I can achieve this with display: block in the anchor tag definition, but then that pushes each image onto a new line.

The way I have it now is closest, but the images do not line up with the anchor tag. The anchor tag seems to be pushed down by about 4 or 5 pixels. I've tried various combinations of margin adjustions but nothing seems to fix it. Also, I tried just adding extra pixels to the top of the image but that pushes the whole block down, not just the images.

Any thoughts?

Well they seem to work in both IE and FIREFOX but I just can't seem to get anchors to work in Safari. Apparently this is an issue to do with CSS and the overflow property. I found some information on it he

http://blog.deconcept.com/code/over...flowsafari.html

However the fix doesn't seem to work for me. The page I am working on is he

http://www.tumbara.com/demo/index2.php?action=about#c1

I've tried all sorts of things to try to get this to work but no such luck. I'm just at my wits end. Any ideas what could be happening here?

So the basic rules a

1) Author style sheets
2) User style sheets
3) Default browser sheets

Now when you get into Author style sheets...

You have: inline styles, header style information (<style type="text/css"> </style>), external style sheets and imported style sheets.

I created a little example for myself to figure out the precedence. So that if all of these methods controled the same element, which method's style would come out the winner.

To my suprise, the order in which you include them in the HTML document has an impact on the precedence. How so? Up until now I thought that the order of precedence was: inline styles, imported styles, external style sheets (<link />), and header style information.

Code:

<html>
<head>
<link href="link.css" rel="stylesheet" type="text/css" />
<style type="text/css">
@import url(import.css);
p {
color: blue;
}
</style>
</head>

<body>
<p style="color: green;">What am I?</p>
</body>

</html>

As expected, the inline style wins.

Code:

<html>
<head>
<link href="link.css" rel="stylesheet" type="text/css" />
<style type="text/css">
@import url(import.css);
p {
color: blue;
}
</style>
</head>

<body>
<p>What am I?</p>
</body>

</html>

The header style information wins. (regardless of position of @import)

Code:

<html>
<head>

<style type="text/css">
@import url(import.css);
p {
color: blue;
}
</style>
<link href="link.css" rel="stylesheet" type="text/css" />
</head>

<body>
<p>What am I?</p>
</body>

</html>

External style sheet wins (<link />).

How does position influence precedence of: external style sheets (Both @import and <link />) and header style information?

I was reading that if you wanted to apply the same style to more than one rule, you can use a comma, but I'm having a weird quirk happen when I do that.

for example: h1, h2 {color:olive;}

For some reason, it's only applying to h2. Even when I place it so that there are no parent elements.

I've validated the xhtml and the css. What's the deal?

I'm a total newbie to CSS and web design in general. Sorry if I'm using the wrong terms for things.

I've read up, and have always used a bit of CSS. I'm redoing my site, and noticed something different between Mozilla and IE.

Personally, I'd ditch IE, but 98% of my viewers use it, so I can't. Basically, in IE, the following works:

Code:

P
{
	color: black;
	font-size: 10pt;
	font-family:tahoma;
}

myown
{
	color: blue;
	font-size: 10pt;
	font-family: Tahoma;
}

<myown>This is my text</myown>

When I run it in IE though, it basically ignores the self-defined tag, and requires me to use a pre-defined keyword. I don't want to use "P", b/c it carries the html<P> tag characteristics... a new line in this case.

Thanks.

Is it possible to define the size of a DIV, by distance to the edges?

I've just been given the assignment to write a script that given a set of form elements by the user it will create a page with those form elements displayed and a submit button on the bottom. The form elements the user defines can be text fields, text areas, dropdown boxes, option groups, and checkboxes. The user also gives me a title for each form element. He can give me these form elements in any order and I need to display them in that order on the page.

My question is, how do I arrange these form elements so they always look good together and I don't have funny gaps or unprofessional looking design? It would be easy if it was just text fields and area, but then I have to throw in option groups and checkboxes that can be any number in a row.

Does anyone have some good form organization rules that could help me?

Thanks!!

Hi, I have a realy strange problem that I'm hoping someone can shed some light on.

I've been building a new site, nice html and css, but seemingly randomly the layout completely breaks in Firefox 3, IE7/8 is always fine. This only occurs in page sections where there is a block level element (heading, div, para etc) inside of an anchor.

<a href=""><h2>Some text</h2></a>

Using firebug I saw that the html gets duplicated like so:

<a href=""></a>

<h2><a href="">Some text</a></h2> - notice that in this one the h2 and <a> have switched places!

<a href=""></a>

and after a bit of experimenting I found that removing the h2 made it work, and that everything's fine as long as a block level element isn't inside the <a>.

In the stylesheet the anchor has display:block;

Does anyone have any idea why this is happening, and why in FF only? I've been building sites for 3+ years and have never seen this before!

Thanks.

very simple.
this may sound strange, but i figured css would be
the easiest solution.

i simply have one of 2 characters that will display in
each TD of a table. either Y or N.
is there anyway to specify the color of the
background, or TD, depending on the character within?

if its Y, make it red, and if its N, make it blue.
that all.

any ideas???

Hi to all, & this is my question:
say I have a css class such as:

.classA1 { color: RED; font-weight: bold; font-size: 11px }

Now I want to define other classes, that vary only in the font color, while everything else remains unchanged, for example:

.classA2 = { color: GREEN; rest same as A1 }
.classA3 = { color: BLUE; rest same as A1 }
.classA4 = { color: YELLOW; rest same as A1 }

How do I go about it, so I avoid having to repeat every time the same attributes? I know there is a way of defining a main class & then the variations (like for elements - a - a:hover - a:visited etc..) but I'm not sure how you do this...

Thanks a lot for your help,

Luca

Need some help defining a border around my index page. It shows up and works fine in IE but when I switch to FF/Netsxcape the page border is short of the content.

Here is my page:

[Not an actual business...just a learning project]

My Home Page

Here is My CSS file:

My CSS File

Now I ran both my HTML and CSS through the W3C Validators and all comes back perfect.

(I know there is some small "clean-up" issues in my code, but I don't think it's relevant to this border issue...Maybe it is?)

Anywhooo, when this page is displayed in FF or Netscape the bottom 1/3 of page content runs below my border...but shows up fine in IE.

If there is a better way, (than defining the whole <BODY> as a <DIV> element) please enlighten me!

Thanks for helping me learn...(in advance)

PWD

I have some CSS for forms as seen below. (depreciated version)

Code:

<div class="item">
   <div class="text">Your Name:</div>
   <div class="field"><input type="text" /></div>
</div>

...

form .text {
   float: left;
   width: 75px;
}

form .field {
   float: left;
}

Some forms I'd like to be wider than others, though. Is it possible to define the width of .text using inline styles (eg: <form style="*">) rather than create a new class for each width I want to use?

how do you define the the color of a hyperlink before it has been clicked and after it has been clicked?

Thanks.