Color Scheme

[GrumpyYoungMan]

Sample

Would this colour scheme work?

[GrumpyYoungMan]

That was too brown for me in the end!

Code: [Select]

* {
padding: 0;
margin: 0;
}

html {
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 62.5%;
box-sizing: border-box;
}

body {
background: linen;
font-size: 1.6rem;
}

h1,h2,h3 {
padding: 1em 0.5em;
}

h2 {
background: #CAF0F8;
}

header ul, footer {
background: #0077B6;
color: #fff;
}


header ul {
list-style-type: none;
padding: 1rem 0.5rem;
}

header li {
display: inline;
}

navigation li a {
color: inherit;
text-decoration: none;
font-weight: bold;
}

navigation li a:hover {
color: red;
}

navigation ul {
list-style-type: none;
background: #03045E;
padding: 1rem 0.5em;
text-align: right;
font-size: 2rem;
color: white;
}

navigation ul li {
display: inline;
}

footer {
text-align: center;
padding: 1.5rem;
}

[Jason Knight]

Too brown and too light. The range presented had legibility woes.

Ever since night/day toggles convinced me that CSS variables might actually have a use, I've switched to designing in HSL. This lets me do my base design in greyscale, then quickly change the saturation and hue of the entire design from one place.

I even have a scripted slider I add to pages that lets me play with both.

Code: [Select]

:root {
  --hue:240;
  --sat:100%;
}

body {
background:hsl(
var(--hue),
var(--sat),
95%
);
color:hsl(
var(--hue),
var(--sat),
10%
);
}

body > header,
body > footer {
background:hsl(
var(--hue),
var(--sat),
90%
);
color:#000;
}

#mainMenu a {
color:#000;
}

#mainMenu a:focus,
#mainMenu a:hover {
color:hsl(
var(--hue),
var(--sat),
20%
);
}

section.alternate:nth-of-child(even) {
background:hsla(
var(--hue),
var(--sat),
50%,
0.2
}

#extras section {
background:hsla(
var(--hue),
var(--sat),
50%,
0.1
);
}

Change the value of --hue at the start, the whole layout changes! Very nice for quickly testing hue and saturation choices, and lays the groundwork for day/night toggles.

Of course this doesn't work in IE or FF31/earlier... you know what? F*** em!

[GrumpyYoungMan]

Too brown and too light. The range presented had legibility woes.

Ever since night/day toggles convinced me that CSS variables might actually have a use, I've switched to designing in HSL. This lets me do my base design in greyscale, then quickly change the saturation and hue of the entire design from one place.

I even have a scripted slider I add to pages that lets me play with both.

Code: [Select]

:root {
  --hue:240;
  --sat:100%;
}

body {
background:hsl(
var(--hue),
var(--sat),
95%
);
color:hsl(
var(--hue),
var(--sat),
10%
);
}

body > header,
body > footer {
background:hsl(
var(--hue),
var(--sat),
90%
);
color:#000;
}

#mainMenu a {
color:#000;
}

#mainMenu a:focus,
#mainMenu a:hover {
color:hsl(
var(--hue),
var(--sat),
20%
);
}

section.alternate:nth-of-child(even) {
background:hsla(
var(--hue),
var(--sat),
50%,
0.2
}

#extras section {
background:hsla(
var(--hue),
var(--sat),
50%,
0.1
);
}

Change the value of --hue at the start, the whole layout changes! Very nice for quickly testing hue and saturation choices, and lays the groundwork for day/night toggles.

Of course this doesn't work in IE or FF31/earlier... you know what? F*** em!

Thanks

[GrumpyYoungMan]

I am  using custom header and footer tags and this is the CSS

Code: [Select]

* {
padding: 0;
margin: 0;
}

html {
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 62.5%;
box-sizing: border-box;
}

body {
background: linen;
font-size: 1.6rem;
}

h1,h2,h3 {
padding: 1em 0.5em;
}

h2 {
background: #CAF0F8;
}

header ul, footer {
background: #0077B6;
color: #fff;
}


header ul {
list-style-type: none;
padding: 1rem 0.5rem;
}

header li {
display: inline;
}

navigation li a {
color: inherit;
text-decoration: none;
font-weight: bold;
}

navigation li a:hover {
color: red;
}

navigation ul {
list-style-type: none;
background: #03045E;
padding: 1rem 0.5rem;
text-align: right;
font-size: 2rem;
color: white;
}

navigation ul li {
display: inline;
}

.servicesDesc {
padding: 0.1rem 0.5rem;
}

errors ul {
list-style-type: none;
padding: 5rem;

}
footer {
text-align: center;
padding: 1.5rem;
}
The problem I have is the CSS seems to be overrulling the default UL/LI style when they aren't located within the header or navigation sections? Is this normal behaviour?

[coothead]

Hi there GrumpyYoungMan,

I see that you have "navigation" in you CSS.

There is no element of that name.

coothead

[GrumpyYoungMan]

Hi there GrumpyYoungMan,

I see that you have "navigation" in you CSS.

There is no element of that name.

coothead

Thanks for your reply - Coothead - that was one of my custom tags - guess that is wrong? I should just use a div with a class or Id?

[coothead]

Hi there GrumpyYoungMan,

there is an HTML5 element called "nav". 

Further reading:-

MDN - <nav>: The Navigation Section element

coothead

[GrumpyYoungMan]

Hi there GrumpyYoungMan,

there is an HTML5 element called "nav". 

Further reading:-

MDN - <nav>: The Navigation Section element

coothead

Thanks coothead...

So I still need to use the Id and class on the header and footer tags?

[coothead]

Hi there GrumpyYoungMan,

So I still need to use the Id and class on the header and footer tags?

No, both those elements were created in HTML5.

As, I presume, that they are only intended to be
used once in the document,  I can see no reason
to apply  ids or classes to them.

The idea of a "navigation element" in HTML5
was just a figment of your imagination.

coothead

[Jason Knight]

No, both those elements were created in HTML5.

That's not... entirely right. Or should I say it should be used with caution.

The <header> and <footer> tags aren't just for page headers and footers. They're also for SECTION and ARTICLE headers and footers where/as appropriate.

This if you're going to use them for the body versions, you either need to "body > header" and "body > footer" or put classes/id's on them. Since I'd normally have a #top link to go to the top of the page anyways, I still put id="top" on the header and id="bottom" on the footer, to differentiate them from SECTION and ARTICLE header/footer tags.

... and that's why I say these new tags are just making things more complex/difficult.

[Jason Knight]

Oh and what's with that 62.5% BS? You know that's a LIE, right? (since on the machine I'm at right now that would result in 12.5px and on my media center it's 20px...

Don't px, it just f***s things up.

[coothead]

The <header> and <footer> tags aren't just for page headers and footers.
They're also for SECTION and ARTICLE headers and footers where/as appropriate.

If that is the case, then I'm glad that I've never considered using either of the silly buggers. 
It was also the reason that I added" I presume" to my assertion.   

coothead

[GrumpyYoungMan]

I guess it makes sense that you have multiple headers per page but still it's confused the issues.

But it still doesn't really help me solve the original problem I have - unless this is normal of course...

Thank you for your continued patience help - I do appreciate it!

Sample HTML:

Code: [Select]

<body>

<header>
 
  <ul>Welcome [ <li>Log In</li> : <li>Register</li> ]</ul>

  <h1>My Company Name</h1>
 
  </header>

  <navigation>
 
  <ul>[ <li><a href="?#Services">Services</a></li> : <li><a href="?#About">About</a></li> : <li><a href="?#Contact">Contact</a></li> ]</ul>

  </navigation>
But the UL code for the header and navigation is effecting all the UL's on the page?

CSS:

Code: [Select]

* {
padding: 0;
margin: 0;
}

html {
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 62.5%;
box-sizing: border-box;
}

body {
background: linen;
font-size: 1.6rem;
}

h1,h2,h3 {
padding: 1em 0.5em;
}

h2 {
background: #CAF0F8;
}

header ul, footer {
background: #0077B6;
color: #fff;
}


header ul {
list-style-type: none;
padding: 1rem 0.5rem;
}

header li {
display: inline;
}

navigation li a {
color: inherit;
text-decoration: none;
font-weight: bold;
}

navigation li a:hover {
color: red;
}

navigation ul {
list-style-type: none;
background: #03045E;
padding: 1rem 0.5rem;
text-align: right;
font-size: 2rem;
color: white;
}

navigation ul li {
display: inline;
}

.servicesDesc {
padding: 0.1rem 0.5rem;
}

errors ul {
list-style-type: none;
padding: 5rem;

}
footer {
text-align: center;
padding: 1.5rem;
}

[GrumpyYoungMan]

Oh and what's with that 62.5% BS? You know that's a LIE, right? (since on the machine I'm at right now that would result in 12.5px and on my media center it's 20px...

Don't px, it just f***s things up.

Thanks - I was expecting something far worse - so the default font size should be set as?