17 replies [Last post]
lonnie
Offline
Regular
Last seen: 15 years 14 weeks ago
Joined: 2005-07-15
Posts: 21
Points: 0

Hey everybody, hope all is well.

To make a long story short, I had a great HTML/coder build my site. There were a few bugs at the end that could easily be fixed but he just will not return my calls, and I needed them fixed. All the bugs, I cleaned up but one, which is a css issue. I know css and I know html, I’m just not great at them.

(You’ll need to see the site to know what I’m talking about: http://www.lonniebruhn.com/index.shtml)

Here is my problem, on the side menu where it says “Yesterdays news” and “Newest Downloads” I wanted those to be labels for their sections, like they are, but I wanted them to be different looking then the smaller links below, which are recent archive links and dl links. I wanted them to be centered with Verdana Font, 10 or smaller font size, uppercase, bold, #606060 color and letter spacing to 3px. The concept seemed easy, so I put the info into the stylesheet in the right area that he used for that section. What it did was change everything in that area to have the same font, so the smaller archive links had the same style too. It’s all linked together. So I added a new style and added a line of code in my html to ref the style.

.archiveslable {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
letter-spacing: 3px;
text-transform: uppercase;
font-weight: bold;
color: #606060;
text-decoration: none;
}

I still did not have the desired look. I’ve tried it several different ways and can not seem to separate the styles.

This is the code in the html where it goes:

<div class="archives">Yesterday's News<!-- Archives Start -->
<!--#include virtual="/archivetest.html"-->
<!-- End Archives --></div><div class="archives">Newest Downloads<p><!-- Latest Downloads Start -->
<!--#include virtual="/download/latest.php"-->
<!-- End Latest Download --></div></td>

And this is the stylesheet area that he used in reference to the above.

.archives {
border: 1px solid #606060;
padding: 5px 5px 5px 5px;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
color: #606060;
text-decoration: none;
}

So my question is, how do I keep everything the way it looks but make those to labels a different style, and still keep it inside the box. It may be simple, In fact I’m sure it is, I just can’t seem to figure out how to do it?

Thank you for any help you can give.
LB

DanA
DanA's picture
Offline
Elder
Last seen: 10 years 24 weeks ago
Timezone: GMT+2
Joined: 2004-08-14
Posts: 1087
Points: 2

How do I get a different stlye in the same are.

You should validate your html, then your css
http://validator.w3.org/check?uri=http://www.lonniebruhn.com/index.shtml&charset=%28detect+automatically%29&doctype=Inline
Online, there's a missing right curly bracket for .archiveslable and a lot of declarations are dropped

lonnie
Offline
Regular
Last seen: 15 years 14 weeks ago
Joined: 2005-07-15
Posts: 21
Points: 0

How do I get a different stlye in the same are.

sorry, that is a typo, in the css sheet, I have it correct. I'll validate it though, but I'm just not sure if that will be the answer to my question.

DanA
DanA's picture
Offline
Elder
Last seen: 10 years 24 weeks ago
Timezone: GMT+2
Joined: 2004-08-14
Posts: 1087
Points: 2

How do I get a different stlye in the same are.

you should try
<div class="archives"><span class="archivelable">Yesterday's News</span>

lonnie
Offline
Regular
Last seen: 15 years 14 weeks ago
Joined: 2005-07-15
Posts: 21
Points: 0

How do I get a different stlye in the same are.

well I did that and I see that his code has a lot of bugs, but to be honest, I haven't seen a lot of bugs at the site itself, and the only thing that I really want fixed is the lable to look different. I really don't wish to mess with the code too much so debugging it all would take forever and I'm not that good at this stuff. I just want the lable to be different. If its something you can't help with I understand, just let me know and I can find another forum, I just know you guys are really good.

LB

lonnie
Offline
Regular
Last seen: 15 years 14 weeks ago
Joined: 2005-07-15
Posts: 21
Points: 0

How do I get a different stlye in the same are.

I tried useing the strip of code that you posted to seperate hte two styles and it didn't change anything. Which isn't a bad thing, it just left it alone.

Just so you know, even if this isn't figured out I really do thank you for your help.

What I think needs to happen is that the frame work and the archive links and their style, (which is .archive) need to be it's own style, while the label which is what I'm trying to change needs to be it's own style, and that style needs to be nested inside the archive style so that stays within the frame work of the navigation. (ie, the thin grey box)

That's what I'm trying to achieve with the new .arciveslabel but I'm just not doing it correctly.

It seems to me that it just needs to be coded right in the html so that the archive links are left alone but that's where I'm getting hung up.

LB

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 5 years 41 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

How do I get a different stlye in the same are.

using the code posted before add this to your stylesheet after .archives

span.archivelable {
 color:#ff0000;
}

that should give you a "Yesterdays News" in red

If that's not what you're after sorry ,it's too late to read the posts in detail.

Hugo.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

lonnie
Offline
Regular
Last seen: 15 years 14 weeks ago
Joined: 2005-07-15
Posts: 21
Points: 0

How do I get a different stlye in the same are.

although that wasn't the desired color, it did change that label without effecting the erst of the links. So I just added the way I wanted it to look and the right color and it worked. The only thing that it isn't doing is centering it, it seems to be ignoring my alignment. Can someone tell me why this is happening
LB

lonnie
Offline
Regular
Last seen: 15 years 14 weeks ago
Joined: 2005-07-15
Posts: 21
Points: 0

How do I get a different stlye in the same are.

also I noticed I will have another problem, it isn't changeing it site wide. Only on my index page. I have no idea where to begin to fix that but I can see light at the end of the tunnel.

DanA
DanA's picture
Offline
Elder
Last seen: 10 years 24 weeks ago
Timezone: GMT+2
Joined: 2004-08-14
Posts: 1087
Points: 2

How do I get a different stlye in the same are.

<span> is an inline element.
To center the text you need a block such as <p> or <div> or <h.
Use
<div class="archives"><h2 class="archivelable">Yesterday's News</h2>
...
<div class="archives"><h2 class="archivelable">Newest Downloads</h2>
and to center the text

h2.archivelable{
/*your settings and add*/
margin:0;/*or any other value*/
padding:0;/*or any other value*/
}

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 5 years 41 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

How do I get a different stlye in the same are.

Laughing out loud didn't really expect you to use that colour

On your point that changes aren't reflected across pages you are making changes to the markup so those changes need to be added to all pages, although if this is generated content via a template it should carry through.

Expanding a bit on Dans advice; all the archive sections should really be headed using one of the lighter heading tags h2,h3,h4, the untagged text as it was is not the best way of describing content.

You could style those heading tags in general using descendent selectors to apply rules that are common to all h# tags that are in .archive

.archives h2 {margin:.3em auto; color:red; Smile }

then add unique hooks to each one to style any individual rules

.archives h2.news {color:purple;}
.archives h2.download {color:yellow;}

Hugo.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

lonnie
Offline
Regular
Last seen: 15 years 14 weeks ago
Joined: 2005-07-15
Posts: 21
Points: 0

How do I get a different stlye in the same are.

thank you for the sound information. I am going to try all this now and see if I can get it center the way I need it to.

My worries are that h2 is being used but the way you have h2.archives it should work.

As for the page. Almost everything is MT, there are a few other php things going on too, but I'm changing things in the index page not the templates, however it's good for testing. Once I get the look I like, I'll transfer across the entire site.

I'll report back
thanks again
LB

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 5 years 41 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

How do I get a different stlye in the same are.

Why are you worried about the h2 ? either of the methods outlined by myself or Dan will work perfectly well, bear in mind that h2.archive means that all the h2 have the archive classes you want to work with, and that class is already being used for the generic sections.

.archive h2 meaning an h2 that is within an element of class archive or

h2.archivelabel

h2.news

h2.download
etc or whatever classes you want

You can of course use a lighter H#tag.

Hugo.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

lonnie
Offline
Regular
Last seen: 15 years 14 weeks ago
Joined: 2005-07-15
Posts: 21
Points: 0

How do I get a different stlye in the same are.

Okay the good news is that I got the desired look for the "Yesterdays News". The bad news is that I repeated the same strip of code for the "Newest Downloads" and it came up with a thin box around it inside the other box.

Here are the two codes I used, The CSS and the html.

h2.archivesnews { 
                font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 9px;
                margin: 4;
                letter-spacing: 3px;
	text-transform: uppercase;
                font-weight: bold;
                color: #FFCC66;
	text-decoration: none;
}

and the html:

<div class="archives"><h2 class="archivesnews">Yesterday's News</h2>
<!-- Archives Start -->
	<!--#include virtual="/archivetest.html"-->
	<!-- End Archives --><div class="archives"><h2 class="archivesnews">Newsest Downloads</h2><!--Latest Downloads Start -->
	<!--#include virtual="/download/latest.php"-->
	<!-- End Latest Download --></div></td>
	<td valign="top" class="blog" id="content"><!-- Blog Start -->
  <h1>Read All About it:<br /></h1>

I figured that that it would work, and as soon as it does, I will make it it's own hook "h2.arcivesdownloads

So what is it that I'm not seeing?
LB

DanA
DanA's picture
Offline
Elder
Last seen: 10 years 24 weeks ago
Timezone: GMT+2
Joined: 2004-08-14
Posts: 1087
Points: 2

How do I get a different stlye in the same are.

Maybe
<!-- End Archives --></div><div class="archives">
You should fix the html errors and add a doctype

lonnie
Offline
Regular
Last seen: 15 years 14 weeks ago
Joined: 2005-07-15
Posts: 21
Points: 0

How do I get a different stlye in the same are.

I tried that but what it did was take away the box and just left links with no style at all. I'm trying to achiev the same look above with Yesterdays News.

As for the docktype, I am going to place that in but the arrors, I'm just not good enough to clean up 195 lines of code but as soon as I get my site looking the way it needs to, I will then go and try to clean up his code. I just don't want to mess anything major up.

LB

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 5 years 41 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

How do I get a different stlye in the same are.

I'm sorry lonnie you have to stop here and place the DocType and start to fix up those errors you can't ask for help when you are rendering the page in quirks mode and the page is full of markup errors, styling is absolutely irelevent, A DTD is not an optional extra it is vital for the correct implementation of CSS properties.

The div error Dan pointed out has to be corrected , you can't leave it like that.

Between Dan and I we have provided all possible options for styling those headings, but first you must deal with the important matters, sorting the errors.

Hugo.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

lonnie
Offline
Regular
Last seen: 15 years 14 weeks ago
Joined: 2005-07-15
Posts: 21
Points: 0

How do I get a different stlye in the same are.

I fixed the problem. After looking my code over and over, I finally saw the code that was missing. DanA you were right. I needed the </div> tag I just wasn't putting it in the right area.

Here is the correct strip of code for the second area for those that should find this thread helpfull.

</div><div class="archives"><h2 class="archivesnews">Newsest Downloads</h2>

Hugo, now I'll go and place the doctype in the code and finnish my other stuff to update the site and then I'll start looking at cleaning up the lines of bad code.

This has been very helpfull to me, so thank you all very much., I hope this helps someone else.
LB