20 replies [Last post]
King Creole
King Creole's picture
Offline
Regular
Barcelona
Last seen: 12 years 5 weeks ago
Barcelona
Timezone: GMT+2
Joined: 2007-08-06
Posts: 11
Points: 0

I've looked all over for solutions and tutorials for this and am really surprised that this isn't a common question. Basically, I want no color change for links on my page, though I do want different hover colors, depending on the text/background color.

Specifically, I've got links on the right that I want to remain yellow, even after having been visited. Then I got my logo (which links back to the home page) that I want to remain black. One workaround that I've found is "a:link {color: #FFCC20;}", which is fine for the links but that changes the black logo to yellow as well.

You can find the page here. http://mattelmore.org/test_newsite.htm

Any other thoughts/suggestions/critiques would be greatly appreciated and warmly received. Grats.

.

King Creole
King Creole's picture
Offline
Regular
Barcelona
Last seen: 12 years 5 weeks ago
Barcelona
Timezone: GMT+2
Joined: 2007-08-06
Posts: 11
Points: 0

By the way, I'm a css idiot.

By the way, I'm a css idiot. Very dense. It's not so much a question of taking the time to learn it, moreso that I'm far too right-brained to make sense of the whole thing.

So, any explanations should be as to a 5 year old, if you don't mind.

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

It's not a common question

It's not a common question as such possibly due to this being a general sort of requirement and which would be covered by applying rules using descendant selectors.

Your black logo has some form of identifier? an ID or class? or it's a child of a parent that is identified?

a {color:red;}
#logo a { color:blue;}

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

King Creole
King Creole's picture
Offline
Regular
Barcelona
Last seen: 12 years 5 weeks ago
Barcelona
Timezone: GMT+2
Joined: 2007-08-06
Posts: 11
Points: 0

See, there you go. I'm lost

See, there you go. I'm lost already. "Descendant selectors, child/parent, ID/Class," ... over my head. Sorry, I know that must be aggravating for those in the know.

I think if you could look at my code and tell me what I've done wrong, my learning curve would skyrocket. I hope that's an okay request.

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

We can have a look and will

We can have a look and will do quickly( I have to go out) but these aspects that you mention are basic and necessary/required knowledge, you must endeavour to google on each of those and gain some understanding.

p {color:black;}/* all 'p' are black */

#parent p {color:red;}/* all 'p' that have a top level element called #parent
are red ( incl 'p' nested in 'child' */

#parent #child p {color:blue;} /* all 'p' that are nested in an element called 'child which in turn has a parent element called 'parent' will be blue; this overrides the previous ruleset

'parents' direct 'p' elements will still be red

The div named 'parent' has a another div nested inside it thus it's a 'parent'

This div is nested in a another div, the div that holds it is it's 'parent' it itself is a child of it's parent

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

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

You have a class .logo_text

You have a class .logo_text declared on a span that is holding the anchor so style along these lines:

.logo_text a {color:;}

:? you're very far along with this design to not understand these concepts, that doesn't stack up!

Oh and do loose the table elements, they don't go down well on forums that are Standards focussed.

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

King Creole
King Creole's picture
Offline
Regular
Barcelona
Last seen: 12 years 5 weeks ago
Barcelona
Timezone: GMT+2
Joined: 2007-08-06
Posts: 11
Points: 0

Hugo wrote: you're very far

Hugo wrote:

:? you're very far along with this design to not understand these concepts, that doesn't stack up!

It's kind of like how a monkey in a lab figures out that pressing certain buttons makes a banana drop out of the chute. He gets the fruit, but doesn't necessarily understand how the buttons work. I follow Total Training dvds, do web searches for problems and cut and paste the code. Trial and error until it looks right; but that doesn't mean I understand it.

I can see that I will have to google those terms. I still don't really get what you're saying, I'm sorry to say. My main problem with learning css is that when the tutorials/explanations don't apply directly to what I'm doing, I get lost. But at least I have a hook to hang my search on now. Thanks Hugo. If you find more time later (and inclination) to educate me, I'd appreciate it very much.

King Creole
King Creole's picture
Offline
Regular
Barcelona
Last seen: 12 years 5 weeks ago
Barcelona
Timezone: GMT+2
Joined: 2007-08-06
Posts: 11
Points: 0

This is killing me.

Well, Hugo, I followed your advice and just spent about 15 hours going through tutorials. I thought I understood enough to get a fresh start on the page. But it all went pear-shaped for me again.

If you, or some other kind soul in this forum, could take another look and tell me exactly how this is screwing up, you would ease my aggravation immensely.

Here's the latest trial: http://www.mattelmore.org/test_newsite.htm

Hope someone can stop me from smashing my head with a ball-peen hammer. Cheers.

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

I'm not sure what you're

I'm not sure what you're doing now and can't get too involved with trying to work it out but you don't need or want separate stylesheets.
I think you possibly have missed completely the point of my code example posted before that showed how to apply descendent selectors as a way of stating that a certain class/id or element will have these rules but only if nested within specified elements e.g:

#parentElement a {color:black;} // all anchors in #parentElement are black

#parentElement p a {color:red} // all anchors that are in a 'p' are red

#parentElement ul li a {color:blue;} // all li anchors are blue

You have to see where your target elements are nested and use those parent elements to target your rules specifically, if you had no specific and different nesting happening then you would need to add a class to the anchor.

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

Phreestyle
Phreestyle's picture
Offline
Enthusiast
Australia
Last seen: 3 years 35 weeks ago
Australia
Timezone: GMT+8
Joined: 2007-05-12
Posts: 235
Points: 6

Hi King Creole, I'd be

Hi King Creole,
I'd be prepared to give you a hand with your site.

However, as alluded to by Hugo, you need to be aware that you may have to abandon quite a lot of what you have already done. Also, I live in the southern hemisphere and you in the northern, so time differences may make this a long drawn out process as I'll be sleeping while you are awake and vis a versa.

Let me know.

Life's a journey. Enjoy the trip.

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

King creol, very briefly,

King creol, very briefly, You are not in fact applying different styles via your separate stylesheets as the rules inside those sheets are simply overwriting the previous ones; separate stylesheets do not mean separated styles as both sheets are read and the one read last 'logo' is the one that will win out in terms of rules and properties that are the same. Inside the stylesheets you are simply stating anchor rules that apply to 'just' anchors wherever in the page.

This is less about someone helping you out with the site as essentially just needing to grasp some fundamental concepts regarding CSS and that means working through beginners tuts , it may seem hard to start with but all starts to fall into place after a while.

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

King Creole
King Creole's picture
Offline
Regular
Barcelona
Last seen: 12 years 5 weeks ago
Barcelona
Timezone: GMT+2
Joined: 2007-08-06
Posts: 11
Points: 0

Appreciate the Help

Hugo, thanks for taking the time. I'm sure you must be busy. The thing is, I did all these tutorials like you said and felt like I had the nuts and bolts concept down when I started this morning. Then, crash. The main problem I'm having with the tutorials is that they don't look like the code view on my Dreamweaver document, so I get lost. Obviously a short-coming on my part, as so many others seem to figure this out. (There's a reason why I studied Art instead of something more procedural.)

And, Phreestyle! Yes, I would very much appreciate your help! I wouldn't want to take up much of your time, but if you could give me personalized directions specific to my problem, I think I could get this down. That's really, really nice of you.

Phreestyle
Phreestyle's picture
Offline
Enthusiast
Australia
Last seen: 3 years 35 weeks ago
Australia
Timezone: GMT+8
Joined: 2007-05-12
Posts: 235
Points: 6

Well the biggest problem is

Well the biggest problem is your code is a mess. It really needs to be sorted out, so we're talking about something a bit more than just changing the colours of your links.

First, strip out all your content (what you actually want on the screen when a visitor views it) and toss everything else in the bin. The content is the most important thing of all. Everything else is just style and colour to make the content look good. Form needs to follow function.

The table based layout you are using is not good practice. It will prove to be a nightmare to maintain and change. Also, from a coding perspective, it is seriously ugly. Also, it offends my artistic soul to even look at it

Second, as this is a new site use a strict doctype. I use XHTML 1.0 strict, but HTML 4.01 is also a good choice. A strict doctype will force you to use best practice and make you a much better web designer in the long run.

Third, set up a workable folder structure. Something like the attached image.

Now, read and understand this tutorial.

http://www.htmldog.com/guides/htmlbeginner/

Are you an ESL teacher? I am too.

I'm off to bed now and then to work. Let me know how you get on and, if you like, we can do some more tomorrow.

Life's a journey. Enjoy the trip.

King Creole
King Creole's picture
Offline
Regular
Barcelona
Last seen: 12 years 5 weeks ago
Barcelona
Timezone: GMT+2
Joined: 2007-08-06
Posts: 11
Points: 0

Good Tutorial Site

Yes, I am an ESL teacher --though I'm trying to transition out of it. Ten years is a long time.

Excellent tutorial site. Thanks. I'm up to html and css intermediate so far, though to be honest I haven't practiced writing the code. So much time spent on this already, I thought I'd just read it and use it for reference when I write the code for my page.

So, I did what you said and tore out all the css code in the page. Here's what it looks like: http://mattelmore.org/test_newsite02.htm

As you can see, the elements have spread out all over the place. Now, what's next?

King Creole
King Creole's picture
Offline
Regular
Barcelona
Last seen: 12 years 5 weeks ago
Barcelona
Timezone: GMT+2
Joined: 2007-08-06
Posts: 11
Points: 0

Also ...

You suggest getting rid of the table layout. Not sure how to change that. Dreamweaver must have done it automatically. Is it a question of simply converting tables to layers?

Phreestyle
Phreestyle's picture
Offline
Enthusiast
Australia
Last seen: 3 years 35 weeks ago
Australia
Timezone: GMT+8
Joined: 2007-05-12
Posts: 235
Points: 6

I'm still at work, but I'm

I'm still at work, but I'm just about to head for home. I'll pick it up later.

I'm not familiar with dreamweaver, except what other have said on this forum. I use HTML kit, which is a code editor. It has lots of nice features and, best of all, it is free. google it if you are interested.

Your code should now look like this:

Matt Elmore Testing Template

Matt Elmore .org

More or Less the Idea

So, here it is with all the code stripped out. What's next?

The elements have obviously spread out all over the place, in the process of cleaning out the CSS styles.

If you want to have the original page as a reference, you can see it here.

Substitute in some actual content and graphics, so we can get a feel for sizing and positioning, etc.

I'll post more in a little while.

Life's a journey. Enjoy the trip.

Phreestyle
Phreestyle's picture
Offline
Enthusiast
Australia
Last seen: 3 years 35 weeks ago
Australia
Timezone: GMT+8
Joined: 2007-05-12
Posts: 235
Points: 6

Hey Matt,

Hey Matt,

I've had a play around with your site. Here's a link to what I've done. It's a simple elastic layout. Here's a link to a live version.
http://robster.freehostia.com/kingcreole/

Here's the XHTML. (name this index.html and put it in your root folder)

Matt Elmore Testing Template

Hi Matt

This is what I managed to come up with.

I've just put everything in containers. Just fiddle around with things in the CSS to see what happens. That's the best way to learn.

I also rejigged your graphics a bit just to make the whole thing work better.


Here's the CSS. (Name this styling.css and put it in your stylesheet folder.)

* {margin:0;
padding:0;
font: 100.1% Georgia, Verdana, sans-serif;
}

body {background:#013567;}

#wrapper {max-width:900px;
min-width:810px;
min-height: 100%;
margin: 0 auto;
background:#fff url(../images/side.png) repeat-y right;
border:1px solid #fff;
}

#header{margin:1em 0 0 0;
height:94px;
font-size:200%;
background: #517396 url(../images/header.png) no-repeat left;}

#header h1 {text-align:right;
padding: 0.7em 5em;
}

#header a {color:#000;
text-decoration:none;
}

#header a:hover {color:#444;
}

#main {border:1px solid #000;
}

#content {width: 67%;
float: left;
margin:2em;
padding: 1% 2%;
background:#333;
color:#ff9900;
border: 1em solid #000;
}

#content p {font-size:130%;
line-height:1.7em;}

#sidebar {margin:2em 2em 2em 78%;
font-size: 90%;
}

#sidebar ul{list-style-type:none;
text-align:center;
}

#sidebar a {font-size:120%;
line-height: 1.7em;
color:yellow;
}

#sidebar a:hover {color:red;
}

#footer {clear:both;
padding:1em;
text-align:center;
}

Have a play around with it and let us know how you go.

Life's a journey. Enjoy the trip.

King Creole
King Creole's picture
Offline
Regular
Barcelona
Last seen: 12 years 5 weeks ago
Barcelona
Timezone: GMT+2
Joined: 2007-08-06
Posts: 11
Points: 0

Wow.

That is awesome. I'm really looking forward to playing around with it. I've learned a lot from HTML Dog already, but it'll be getting my hands dirty that will help get this down.

Gotta take the kid to the park now, but I'll explore the code and its myriad possibilities this evening. I imagine there will be a question or two later, but what you've done seems to bring it all together --both on the page and in my head. You are definitely a teacher by nature. Cheers.

King Creole
King Creole's picture
Offline
Regular
Barcelona
Last seen: 12 years 5 weeks ago
Barcelona
Timezone: GMT+2
Joined: 2007-08-06
Posts: 11
Points: 0

Now I'm having fun.

It's making a lot of sense to me now. Of course there are still details. Always details. But in general, it's starting to congeal in my limited grey matter.

Here's what I've done so far: http://mattelmore.org/test_newsite02.htm

Phreestyle
Phreestyle's picture
Offline
Enthusiast
Australia
Last seen: 3 years 35 weeks ago
Australia
Timezone: GMT+8
Joined: 2007-05-12
Posts: 235
Points: 6

Hi Matt,

Hi Matt,

Glad to hear things are making more sense for you now. Tinkering around is the best way to learn I reckon.

Just to address the issues you raised vis a vis your page.

If you are going with a fixed width layout (which looks cool, by the way) you can delete the min-width, max-width and min-height properties. They are no longer needed. However, set your overall width on the #wrapper (this is the container everything else lives in.) Just set width:800px;

If you want to bold your header and sidebar links target the anchor property. Eg,

#header a {color:#000;
text-decoration:none;
font-weight:bold;
}

#sidebar a {font-size:18px;
line-height: 200%;
color:yellow;
text-decoration:none;
font-weight:bold;
}

By the way, try to avoid using px for font sizes. You have all font sizes set at 100% using the * (universal selector). If you use px's then you will have problems if someone resizes your page to make it more readable. If you want bigger or smaller text use a percentge.

If you have any other questions, bring 'em on.

Life's a journey. Enjoy the trip.

King Creole
King Creole's picture
Offline
Regular
Barcelona
Last seen: 12 years 5 weeks ago
Barcelona
Timezone: GMT+2
Joined: 2007-08-06
Posts: 11
Points: 0

Just About There, I Think

Hi Phree.

I'm not sure when this discussion will have gone beyond the interest of the rest of this forum, so I'll let you decide when and you can contact me directly through email. The address is on the test pages we've looked at.

You said bring 'em on, so I do have a couple more questions. I put them on the test page so that you can have a reference.

Here it is again: http://mattelmore.org/test_newsite02.htm