Post Reply 
 
Thread Rating:
  • 0 Votes - 0 Average
  • 1
  • 2
  • 3
  • 4
  • 5
CSS...discovery
02-09-2018, 05:51 PM
Post: #1
CSS...discovery
I've been looking through the pages I did in simple CSS a long time ago....

I did all the CSS in the head but I over=rode it in the body......
so I never actually used it....LOL!

It just seems too restrictive for me....

For a tabular data page where everything is the same characters and size etc, it would be ok...but for me......tables are still king!! LOLOL!
Visit this user's website Find all posts by this user
Quote this message in a reply
02-09-2018, 07:01 PM
Post: #2
RE: CSS...discovery
Tables may be King but CSS will expand the kingdom. There is a misconception about CSS. People tend to think, as did I in the beginning, that CSS is just about positioning elements. The real strength of CSS is the ability to style elements such as tables. All the old WEBTV attributes such as gradcolor and gradangle are possible as well as raised text simulations. Assigning an ID to an element makes easy to access and manipulate the element with JavaScript.
Visit this user's website Find all posts by this user
Quote this message in a reply
02-09-2018, 10:09 PM
Post: #3
RE: CSS...discovery
Show me some code that makes something using grad colors and grad angles.....THAT might get me to try harder...LOLOL!

Also, I do not do well with calling codes into my page from other pages......I tend to want it all on the same page!!

Thanks!
Visit this user's website Find all posts by this user
Quote this message in a reply
02-10-2018, 12:03 AM (This post was last modified: 02-10-2018 12:13 AM by The Professor.)
Post: #4
RE: CSS...discovery
Take code to testbed http://d21c.com/leprofesseur/pc-testbed.html You do not have to use an external css file so all code can be in one place


Code:
<style>
  body {
   background: #000000;
   color: #ffffff;
   text-align: center;
}
.grad3 {
   width:720px;height:20px;
   background-image:linear-gradient(180deg, #000000 0%, #6699ff 100%);
}
.grad4 {
   width:720px;height:20px;
   background-image:linear-gradient(0deg, #000000 0%, #6699ff 100%);
}
.grad5 {
   width:20px;height:720px;
   background-image:linear-gradient(90deg, #000000 0%, #6699ff 100%);/* varying the degrees varies the angle */
}

.grad6 {
   width:20px;height:720px;
   background-image:linear-gradient(270deg, #000000 0%, #6699ff 100%);
}

table, td{
   margin: auto;/* this centers the table */
   border-spacing: 0;/* this is  css cellspacing */
   padding: 0;/* this is css cellpadding */
}
</style>

<body>

<table>
<tr><td><div class="grad3"></div></td></tr>
<tr><td><div class="grad4"></div></td></tr></table>

<table>
<tr><td><div class="grad5"></div></td><td><div class="grad6"></div></td></tr></table&gt;
Code carets not working properly. change the angle codes to angles
Visit this user's website Find all posts by this user
Quote this message in a reply
02-10-2018, 12:17 AM
Post: #5
RE: CSS...discovery
(02-10-2018 12:03 AM)The Professor Wrote:  Take code to testbed http://d21c.com/leprofesseur/pc-testbed.html You do not have to use an external css file so all code can be in one place


Code:
&lt;style&gt;
  body {
   background: #000000;
   color: #ffffff;
   text-align: center;
}
.grad3 {
   width:720px;height:20px;
   background-image:linear-gradient(180deg, #000000 0%, #6699ff 100%);
}
.grad4 {
   width:720px;height:20px;
   background-image:linear-gradient(0deg, #000000 0%, #6699ff 100%);
}
.grad5 {
   width:20px;height:720px;
   background-image:linear-gradient(90deg, #000000 0%, #6699ff 100%);/* varying the degrees varies the angle */
}

.grad6 {
   width:20px;height:720px;
   background-image:linear-gradient(270deg, #000000 0%, #6699ff 100%);
}

table, td{
   margin: auto;/* this centers the table */
   border-spacing: 0;/* this is  css cellspacing */
   padding: 0;/* this is css cellpadding */
}
&lt;/style>

<body>

<table>
<tr><td><div class="grad3"></div></td></tr>
<tr><td><div class="grad4"></div></td></tr></table>

<table>
<tr><td><div class="grad5"></div></td><td><div class="grad6"></div></td></tr></table&gt;
Code carets not working properly. change the angle codes to angles
Here is the code on a web page http://d21c.com/leprofesseur/css/T.html
Visit this user's website Find all posts by this user
Quote this message in a reply
02-13-2018, 11:33 AM
Post: #6
RE: CSS...discovery
Thanks, Prof. I didn't know we could have gradangles/colors using CSS! This is really marvelous. I thought we'd lost so much when Microsoft killed Webby. So I'll find time soon, I hope, to study how to do stuff like this. I also didn't know we could center a table using CSS, so thanks for this little tidbit, tool.

Now, does anyone know how we can play with scopes now that Webby is gone?
Find all posts by this user
Quote this message in a reply
02-16-2018, 02:47 PM
Post: #7
RE: CSS...discovery
Well....I'm having a terrible time because I have to scroll up to see what I want, then down to put it in, then up etc etc....
Visit this user's website Find all posts by this user
Quote this message in a reply
02-16-2018, 05:11 PM
Post: #8
RE: CSS...discovery
I still prefer our "on the fly" (OTF) codes using html.
http://www.lingolinda.com/OTF/OTFGradFunction.html

And still see PHP as the king. Scroll down to bottom for example page.
http://www.lingolinda.com/OTF/GradMontageTute.php

LingoLinda

[Image: countup.php]
Visit this user's website Find all posts by this user
Quote this message in a reply
02-16-2018, 05:42 PM
Post: #9
RE: CSS...discovery
There are so many ways to do the same thing and finding what works for you can take a while....but all produce the effect and are valuable!!!

Got those tutes saved!!
Visit this user's website Find all posts by this user
Quote this message in a reply
Post Reply 


Forum Jump:


User(s) browsing this thread: 1 Guest(s)