CUTCODEDOWN
Minimalist Semantic Markup

Welcome Guest
Please Login or Register

If you have registered but not recieved your activation e-mail in a reasonable amount of time, please use our Contact Form for assistance. Include both your username and the e-mail you tried to register with.

Author Topic: Color Scheme  (Read 141 times)

coothead

  • Jr. Member
  • **
  • Posts: 81
  • Karma: +9/-0
  • I smile benignly
    • coothead's stuff ~ an eclectic collection
Re: Color Scheme
« Reply #15 on: 9 Oct 2020, 06:35:43 am »
Hi there GrumpyYoungMan,

does this help...

HTML

Code: [Select]
<body>

<header>
 Welcome
  [
   <ul>
  <li>Log In</li>
  <li>:</li>
  <li>Register</li>
   </ul>
  ]
   <h1>My Company Name</h1>
</header>

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

</body>

CSS

Code: [Select]
* {
padding: 0;
margin: 0;
list-style-type: none;
box-sizing: border-box;
}

body {
background: #faf0e6;
font: normal 1em / 1.6em Georgia, 'Times New Roman', Times, serif;
}

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

h2 {
background: #caf0f8;
}

header, footer {
padding: 1em 0.5em;
background: #0077b6;
color: #fff;
}

header ul {
display: inline-block;
}

header li {
display: inline-block;
}
header h1 {
background-color: #fff;
color: #000;
}

nav {
padding: 0.8em 0.5em;
background: #03045e;
font-size: 1.25em;
text-align: right;
color: #fff;
}

nav ul,
nav ul li {
display: inline-block;
}

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

nav li a:hover {
color: #f00;
}

coothead
~ the original bald headed old fart ~

Jason Knight

  • Administrator
  • Sr. Member
  • *****
  • Posts: 417
  • Karma: +67/-1
    • CutCodeDown -- Minimalist Semantic Markup
Re: Color Scheme
« Reply #16 on: 9 Oct 2020, 11:34:25 am »
Thanks - I was expecting something far worse - so the default font size should be set as?
Nothing on HTML, 1EM on body. No PX... the only times PX is really "Acceptable" is on raster images you aren't over-delivering (aka feeding a higher res for retina users) and for hairline borders.

There is NO reason to be setting it to anything on HTML, or really to change it from 1em on body unless as a safety precaution.

Hence most of my CSS usually starts out like this:

Code: [Select]
body, button, input, table, textarea, select {
font:normal 1em/1.5 arial,helvetica,sans-serif;
}

pre, code, kbd, samp {
font:normal 1em/1.2 consolas,monospace;
}

Nabbing the "misbehaving" (aka non-inherit by default) elements, using the condensed properties as it's a few less bytes, etc, etc.
Sorrow hides well in your shell. A fellow man with hurt to spare.
Dear one, here I am to share the fear. An act of kindness, without an amen.
Come in, the fire's warm. Burn the rope and dance some more.

GrumpyYoungMan

  • Full Member
  • ***
  • Posts: 240
  • Karma: +1/-0
    • GrumpyYoungMan
Re: Color Scheme
« Reply #17 on: 10 Oct 2020, 04:30:49 am »
Hi there GrumpyYoungMan,

does this help...

HTML

Code: [Select]
<body>

<header>
 Welcome
  [
   <ul>
  <li>Log In</li>
  <li>:</li>
  <li>Register</li>
   </ul>
  ]
   <h1>My Company Name</h1>
</header>

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

</body>

CSS

Code: [Select]
* {
padding: 0;
margin: 0;
list-style-type: none;
box-sizing: border-box;
}

body {
background: #faf0e6;
font: normal 1em / 1.6em Georgia, 'Times New Roman', Times, serif;
}

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

h2 {
background: #caf0f8;
}

header, footer {
padding: 1em 0.5em;
background: #0077b6;
color: #fff;
}

header ul {
display: inline-block;
}

header li {
display: inline-block;
}
header h1 {
background-color: #fff;
color: #000;
}

nav {
padding: 0.8em 0.5em;
background: #03045e;
font-size: 1.25em;
text-align: right;
color: #fff;
}

nav ul,
nav ul li {
display: inline-block;
}

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

nav li a:hover {
color: #f00;
}

coothead
The behaviour is still the same - although I now have a white background to the header...

Thanks for trying to help, I appreicate it! :)
Trying to learn a new trick to prove old dogs can learn new ones...

Total Novice have-a go Amateur Coder - not sure that is the right thing to say... but trying to learn...

coothead

  • Jr. Member
  • **
  • Posts: 81
  • Karma: +9/-0
  • I smile benignly
    • coothead's stuff ~ an eclectic collection
Re: Color Scheme
« Reply #18 on: 10 Oct 2020, 09:28:04 am »
Hi there GrumpyYoungMan,
Quote
The behaviour is still the same...

Well, can you give us your complete HTML and CSS example
and let us know exactly what is wrong with it and what you
are expecting it to look like?

coothead
~ the original bald headed old fart ~

 

Advertisement