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, or have issues with using the registration form, please use our Contact Form for assistance. Include both your username and the e-mail you tried to register with.

Pages: 1 [2]

Author Topic: Color Scheme  (Read 1977 times)

coothead

  • Sr. Member
  • ****
  • Posts: 391
  • Karma: +89/-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
Logged
~ the original bald headed old fart ~

Jason Knight

  • Administrator
  • Hero Member
  • *****
  • Posts: 1054
  • Karma: +188/-1
    • CutCodeDown -- Minimalist Semantic Markup
Re: Color Scheme
« Reply #16 on: 9 Oct 2020, 11:34:25 am »
Quote from: GrumpyYoungMan on  9 Oct 2020, 03:15:54 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.
Logged
We are all, we are all, we are all FRIENDS! For today we're all brothers, tonight we're all friends. Our moment of peace in a war that never ends.

GrumpyYoungMan

  • Hero Member
  • *****
  • Posts: 791
  • Karma: +8/-0
    • Grumpy Young Man
Re: Color Scheme
« Reply #17 on: 10 Oct 2020, 04:30:49 am »
Quote from: coothead 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 behaviour is still the same - although I now have a white background to the header...

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

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

coothead

  • Sr. Member
  • ****
  • Posts: 391
  • Karma: +89/-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
Logged
~ the original bald headed old fart ~
Pages: 1 [2]
 

SMF spam blocked by CleanTalk

Advertisement