Styles Within a DIV for Links (Full Version)

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



Message

Bruce2000 -> Styles Within a DIV for Links (1/15/2007 12:10:21)

Can you apply multiple styles to the same text within a DIV class?

Here's what I came up with for my header bar text. I gave it a name: <div class="header">. Now on the style sheet I did this: div.header {font-size: 12; font-weight: bold; color: #FFFAFA;}

But it doesn't work.

Also, the words within the DIV are links, so I want to apply a font style for link and visited. How can I put that in the DIV declaration on the stylesheet?

I'm thinking of doing the font styles and top margin to all the links inside the DIV at once because they will all be the same and then give each link a class name itself, and apply padding because the only difference between the 5 links will be positioning on the page (padding) along the same horizontal line. Is this going to work?

Or should I forget the DIV and just give each link its own class name and apply font style, margin, and padding seperately for each link, and the visited version of each?



rdouglass -> RE: Styles Within a DIV for Links (1/15/2007 12:31:37)

quote:

div.header {font-size: 12; font-weight: bold; color: #FFFAFA;}


You should only need this for the class definitions:

.header {font-size: 12; font-weight: bold; color: #FFFAFA;}

and for links withing that class something like this:

.header a:link {color: red;}
.header a:visited {color: blue;}

or something to that effect.

That help any?



Tailslide -> RE: Styles Within a DIV for Links (1/15/2007 12:38:54)

Why would you be applying different amounts of padding to the links on the same line? It sounds a bit strange.

Are you trying to do a horizontal navigation menu?

If so I'd do this instead:

Markup: 

<ul id="nav">
<li><a href="whatever.html">Link One</a></li>
<li><a href="whatever.html">Link Two</a></li>
<li><a href="whatever.html">Link Three</a></li>
<li><a href="whatever.html">Link Four</a></li>
</ul>


CSS: 

#nav ul {font-size: 76%; font-weight:bold; margin:0 0 0 0; padding:0 0 0 0;width:100%; }
#nav  li {font-style-type:none;display:inline; padding-right:20px;}
#nav li a:link {color:red;}
#nav li a:visited {color:blue;}
#nav li a:focus, #nav li a:hover, #nav li a:active {color:green;}


Basically it's a list of links so it's best to make it an actual list rather than just text inline.

Once you've seen the above working you'll be able to fiddle with the colours and padding etc to get it how you want.



Bruce2000 -> RE: Styles Within a DIV for Links (1/15/2007 13:08:52)

quote:

ORIGINAL: Tailslide

Why would you be applying different amounts of padding to the links on the same line? It sounds a bit strange.


Well, the navigation links on my header bar are positioned so they fit right in between the vertical seperators. The picture part of the bar is a table cell background, and the standard formatting has the text starting at the top left corner of the cell. I indented it 603px and top margin of 63px to line up the first word, and the next words lined up with spaces, as in this page

So if I did it this way, "work" would have a padding of 603px, "cars" would have a padding of say 650px, and so on. At least that's how I think it would work.



jaybee -> RE: Styles Within a DIV for Links (1/15/2007 13:26:20)

You like making life difficult don't you. [:D]

Use Tail's list on a test page and play around with it. If you want the bars then after each link add a space or two then use the horizontal bar on your keyboard then a space or two

Home | Next page

So the list would be 

<ul id="nav">
<li><a href="whatever.html">Link One</a>  |  </li>
<li><a href="whatever.html">Link Two</a>  |  </li>
<li><a href="whatever.html">Link Three</a>  |  </li>
<li><a href="whatever.html">Link Four</a>  |  </li>
</ul>


The whole thing will then be automatic.
The problem you have with your way is all browsers render fonts differently so while it looks fine in Explorer it'll be out in Safari.



Bruce2000 -> RE: Styles Within a DIV for Links (1/16/2007 4:06:44)

Ok, I think I made some progress on the header. I created a new blank page on my site so I wont' mess up any of my content: CSS Test Page

I got the links in the header to work without any attributes in the html; its all in the CSS. I created a division around it.

Now I was playing around with the body and made a simple little table as you can see. I tried to create a division around it so that I could apply different font formatting, I named it with the class "inside". Its not working. In my style sheet I have this:

.inside {font-color: #7FFF00; }

but the color or anything else I put in the {} doesn't change! Is it because this division is inside a cell? All of that blank white area (the body of my page) is a cell. i dont know what else it could be? The division for the header works and I tried to do this one exactly the same.

Bruce



Tailslide -> RE: Styles Within a DIV for Links (1/16/2007 6:07:55)

apply the classes to the table and table cells via it's id. You don't need the extra div around it.

Also it's color not font-color. 

#table2 {color:whatever;}



Bruce2000 -> RE: Styles Within a DIV for Links (1/16/2007 21:33:13)

Ah. I see. Another question about tables: can you apply classes to a ROW of a table, or just cells? I updated my CSS test page linked above and it would only work if I gave an ID to the <td>, not the <tr>. But that just lets me format one single cell. so in the example I linked above, a table with 4 cells, I'd have to use more code to make each cell unique, even if I wanted the same padding for all the cells? Most of the tables on my site don't get too fancy but I do make extensive use of padding to make the layout neater.

From what I can see, it doesn't look like I can apply things like padding or border to the table ID itself either, right?



Tailslide -> RE: Styles Within a DIV for Links (1/17/2007 2:33:18)

To style a row I'd use a class rather than an ID (so that you can re-use the class on the same page if you want).

Assign the row a class like this: 
<table id="table2">
			<tr class="red">
				<td>text more text</td>
				<td>text more text</td>
			</tr>
</table>


Now you can style the row like this: 

#table2 tr.red {color:red;}


Basically you can pin it down or have it as general as you like: 

table tr {color:red;}
= all rows in all tables 

#table2 tr {color:red;}
= all rows in the table with the id table2 

tr.red {color:red;}
= all rows with the class .red in all tables 

#table2 tr.red
=all rows with the class .red in the table with the id table2



Page: [1]

Valid CSS!




Forum Software © ASPPlayground.NET Advanced Edition 2.4.5 ANSI
0.140625