13 replies [Last post]
ldexterldesign
Offline
Regular
leeds, uk
Last seen: 12 years 8 weeks ago
leeds, uk
Timezone: GMT+1
Joined: 2007-02-21
Posts: 27
Points: 3

hi there,

i've set this up as clearly as possible so i can hopefully get a quick response.

- site i'm working on here: http://www.personal.leeds.ac.uk/~scs4ll/live/index.htm
- screen shot helping you understand what i want to target: http://www.personal.leeds.ac.uk/~scs4ll/preview.jpg

basically i'd like to be able to target and style all the inks in this position heirarchy. i would have though the following CSS would have worked a treat, but it doesn't:

h2 + p{ color:#FFFFFF;}

at present i'm having to resort to this:

.primaryStatChart-left a{ color:#FFFFFF;}

however, you'll notice i have some more links like this i'd like to style further on down the page in the same relative hierarchy as the aforementioned links (By Hour / By Day / By Month) which come under a different class. i could kill this problem dead with one generic targeting system.

what am i doing wrong? or is my default link styling interfering (i shouldn't need to touch them)?:

/* Links
-------------------------------------------------- */
a:link{ color:#FF6633;}
a:visited{color:#D3BAAE;}
a:hover{color:#DD461D; }
a:active{color:#DD461D; }

thanks anyone that can help,
lewis

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

Two things first;

Two things first;

1/ lose the unnecessary and incorrect positioning rules on the #wrap element, if you want it centered then apply auto margins, if you want space between header and top nav then add margin-top to the ul#nav.

2/ An ID may only be set once per page, check and validate your work as it will highlight these errors.

You will have to set the anchor state based on the parent id (descendant) and then reset it further down based on a nested id or same parent id + class and element requiring styling (to ensure sufficient weight of the rules)

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

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 39 weeks 4 days ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

You just failed to go far

You just failed to go far enough.

h2 + p a:link {
  color:#fff;
  }

Of course, that only works in modern browsers. IE is not a modern browser.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

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

Forgot to mention that the

Forgot to mention that the combinator was next to useless, It helps to have a clear notion of just how tied our hands are when it comes to using CSS in a sensible mature fashion. IE forces us to overstate/write rulesets that should be much simpler and neater and lighter in bytes, especially noticeable when writing nested ul navigation where combinators are rather useful :rolleyes:

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

ldexterldesign
Offline
Regular
leeds, uk
Last seen: 12 years 8 weeks ago
leeds, uk
Timezone: GMT+1
Joined: 2007-02-21
Posts: 27
Points: 3

hi hugo, thanks for your

hi hugo,

thanks for your insight.

1) fair point, yes. i'll amend that. an item andy budd writes about on centering a design from 'css mastery' had stuck in my head. his/my way is good for ie5/ie6 in quirks mode also, but seen as i haven't found a decent fix for using tiled png yet: ie6 is gonna look a mess anyway until i can get around to styling for it separately/adding gifs (not a priority atm).

2) i'm aware of this. to my knowledge i haven't used an ID more than one anywhere in the document? please set me straight if i'm wrong.

thanks again,
lewis

ldexterldesign
Offline
Regular
leeds, uk
Last seen: 12 years 8 weeks ago
leeds, uk
Timezone: GMT+1
Joined: 2007-02-21
Posts: 27
Points: 3

i forgot to add i'm using as

i forgot to add i'm using as much transcendence as possible. for my own learning good primarily. if something isn't working after than then we all know how useful conditionals are Smile

ldexterldesign
Offline
Regular
leeds, uk
Last seen: 12 years 8 weeks ago
leeds, uk
Timezone: GMT+1
Joined: 2007-02-21
Posts: 27
Points: 3

gary - nice one. just what i

gary - nice one. just what i was after. cheers mate.

additionally i should add (for anyone else reading this thread) that anything cs3-ish when using dreamweaver - be sure to load up a browser and take a look at the finished article, because i have a feeling dreamweaver previews don't tell you the whole story.

best,
lewis

ldexterldesign
Offline
Regular
leeds, uk
Last seen: 12 years 8 weeks ago
leeds, uk
Timezone: GMT+1
Joined: 2007-02-21
Posts: 27
Points: 3

Hugo wrote:Two things

Hugo wrote:
Two things first;

1/ lose the unnecessary and incorrect positioning rules on the #wrap element, if you want it centered then apply auto margins, if you want space between header and top nav then add margin-top to the ul#nav.

2/ An ID may only be set once per page, check and validate your work as it will highlight these errors.

You will have to set the anchor state based on the parent id (descendant) and then reset it further down based on a nested id or same parent id + class and element requiring styling (to ensure sufficient weight of the rules)

may i also add i need this:

#wrap{ padding:120px 20px 0 20px; width:840px; margin:-120px 0 0 -450px; position:relative; z-index:2; left:50%; border:#000000 1px solid;}

as opposed to this:

#wrap{ padding:120px 20px 0 20px; width:840px; margin:auto; position:relative; z-index:2; border:#000000 1px solid;}

mainly because i need to retain the negative margin on the wrap (margin:-120px) so it doesn't look like this: http://www.personal.leeds.ac.uk/~scs4ll/preview2.jpg

is there any way i can reduce mark-up with the same successful result?

lewis

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 39 weeks 4 days ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

Make this,<div

Make this,

the first child of

It should become clear how to adjust the margins.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

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

No you wouldn't simply

No you wouldn't simply remove the '-' negative marker you would and should not have any padding, it's not ever a great idea padding major structural divisions, everything you need to achieve should be possible working on the child elements using margins and floats and perhaps a smidgen of padding used cautiously.

IE < 6 or when in quirks (or standards for that matter) mode has a simple centering workaround as IE will always center block level elements when their parent has text-align:center set, then reset to 'left' on the actual element being centered.

Forget ever trusting to DW previews only trust to real browser rendering!

There are repeated uses of a ID on the table TH tags iirc, one thing that appears to be missing from your Firefox browser is the html-tidy plugin which would show you this (places a green or red marker bottom right of browser for visual confirmation) and on opening will highlight all problems along with source view.

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

ldexterldesign
Offline
Regular
leeds, uk
Last seen: 12 years 8 weeks ago
leeds, uk
Timezone: GMT+1
Joined: 2007-02-21
Posts: 27
Points: 3

Hugo wrote:No you wouldn't

Hugo wrote:
No you wouldn't simply remove the '-' negative marker you would and should not have any padding, it's not ever a great idea padding major structural divisions, everything you need to achieve should be possible working on the child elements using margins and floats and perhaps a smidgen of padding used cautiously.

so you would endorse using padding on all the structural divisions independently ('header','content', 'footer'), rather than just using:

#wrap{ padding:120px 20px 0 20px; - referring to the left (20px) and right (20px) padding values?

with regards to the 120px top padding value you state i should avoid: you're suggesting i apply a margin value to the first structural component of the design i.e. 'header' or 'navigation' instead?

if i've summarised what you've said correctly i think this is a question of personal preference. i don't usually get any 'issues' doing it my way here.

Hugo wrote:
IE < 6 or when in quirks (or standards for that matter) mode has a simple centering workaround as IE will always center block level elements when their parent has text-align:center set, then reset to 'left' on the actual element being centered.

Forget ever trusting to DW previews only trust to real browser rendering!

i won't from now on 100%! Smile

Hugo wrote:
There are repeated uses of a ID on the table TH tags iirc, one thing that appears to be missing from your Firefox browser is the html-tidy plugin which would show you this (places a green or red marker bottom right of browser for visual confirmation) and on opening will highlight all problems along with source view.

thanks for that plug-in tip and again for your help. i've been wanting one of these for a while now. i was gonna say: great eye.

lewis

ldexterldesign
Offline
Regular
leeds, uk
Last seen: 12 years 8 weeks ago
leeds, uk
Timezone: GMT+1
Joined: 2007-02-21
Posts: 27
Points: 3

hi gary,

hi gary,

thanks again for the input. apologies if i'm appearing 'dumb', but i have tried that and simply end up with a horizontal scrollbar problem. you can probably infer what i'm doing... (massive width on the headerBar, and then a negative left margin). i do get the feeling this is wrong, don't get me wrong. so i didn't do it.

i've finally got it working like this this morning, so without someone showing me the code i'm unlikely to revert it - there are no problems with it as it stands in any browser.

set me straight though, of course, haha.

lewis

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 39 weeks 4 days ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

The method you're using to

The method you're using to center the page has the problem of losing one-half of any overflow content off the left side. When I view at my usual 800px width window, a large chunk of the page is not viewable.

I see now (with a larger window) what you're doing with that bar.

Try this as a starting point for existing markup.

#headerBar { 
  background: silver url(../images/bg-logoBar.png) repeat-x; 
  height: 101px; 
  margin: 0;
  position: absolute; 
  top: 16px;
  left: 0;
  width: 100%;
  z-index:3;
  }

#wrap { 
  width: 90%; 
  margin: 0 auto;
  border: #000000 1px solid;
  }
#header {
  margin-top: 120px;
  }

#headerBar img { 
  margin-left: 10%;
  }

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

ldexterldesign
Offline
Regular
leeds, uk
Last seen: 12 years 8 weeks ago
leeds, uk
Timezone: GMT+1
Joined: 2007-02-21
Posts: 27
Points: 3

kk5st wrote:The method

kk5st wrote:
The method you're using to center the page has the problem of losing one-half of any overflow content off the left side. When I view at my usual 800px width window, a large chunk of the page is not viewable.

I see now (with a larger window) what you're doing with that bar.

Try this as a starting point for existing markup.

#headerBar { 
  background: silver url(../images/bg-logoBar.png) repeat-x; 
  height: 101px; 
  margin: 0;
  position: absolute; 
  top: 16px;
  left: 0;
  width: 100%;
  z-index:3;
  }

#wrap { 
  width: 90%; 
  margin: 0 auto;
  border: #000000 1px solid;
  }
#header {
  margin-top: 120px;
  }

#headerBar img { 
  margin-left: 10%;
  }

cheers,

gary

cheers gary, that works a treat. i see the problem previously now. apologies for the delay - busy with other stuff and have been waiting to get back to this. your help was/is much appreciated mate.

take care,
lewis