Questions about CSS

  • jlknauff
  • Expert
  • Expert
  • User avatar
  • Posts: 502
  • Loc: Florida

Post 3+ Months Ago

Is there a limit to the number of headings that you can have in a CSS? I have tried to add more but it isn't working. Also, can I have more than one paragraph style? I have tried both of these but can't get it to work the way I want and I didn't see any this related in any other posts.

BTW- what is IMHO?
  • Anonymous
  • Bot
  • No Avatar
  • Posts: ?
  • Loc: Ozzuland
  • Status: Online

Post 3+ Months Ago

  • rtm223
  • Mastermind
  • Mastermind
  • User avatar
  • Posts: 1855
  • Loc: Uk

Post 3+ Months Ago

jlknauff wrote:
Is there a limit to the number of headings that you can have in a CSS? I have tried to add more but it isn't working. Also, can I have more than one paragraph style? I have tried both of these but can't get it to work the way I want and I didn't see any this related in any other posts.

BTW- what is IMHO?

In order:

No.
Should do.
yes -use classes.
um, post the code.

In my honest opinion those aconyms get you when you are not used to them. I was always too embarrased to ask :lol:
  • digitalMedia
  • a.k.a. dM
  • Genius
  • User avatar
  • Posts: 5149
  • Loc: SC-USA

Post 3+ Months Ago

IMHO === In My Humble Opinion

CSS Headings? Maybe you mean selectors as in...
Code: [ Select ]
selector{}
.selector{}
#selector{}
  1. selector{}
  2. .selector{}
  3. #selector{}


If that's what you mean, you can have as many as you want.

If you mean headings as in H1 H2 H3, I believe HTML has 6.



Yes you can have multiple paragraph def's. Here's an example of one way to do it...
Code: [ Select ]
<style>
#head p{}
#content p{}
</style>

<div id="head">
  <p>Paragraph in head div</p></div>
<div id="content">
  <p>Paragraph in content div</p></div>
  1. <style>
  2. #head p{}
  3. #content p{}
  4. </style>
  5. <div id="head">
  6.   <p>Paragraph in head div</p></div>
  7. <div id="content">
  8.   <p>Paragraph in content div</p></div>
  • jlknauff
  • Expert
  • Expert
  • User avatar
  • Posts: 502
  • Loc: Florida

Post 3+ Months Ago

Here is my CSS:

Code: [ Select ]
h1 {
    font: 9pt arial;
    font-weight: bold;
    margin-top: 0px;
    margin-left: 0px;
    margin-bottom: -2px;
    color: #003366;
    }
h2 {
    font: 9pt arial;
    font-weight: bold;
    margin-top: 0px;
    margin-left: 0px;
    margin-bottom: 0px;
    color: #003366;
    }
h3 {
    font: 9pt arial;
    font-weight: bold;
    margin-top: 4px;
    margin-left: 5px;
    margin-bottom: 0px;
    color: #006600;
    }
h4 {
    font: 9pt arial;
    font-weight: bold;
    margin-top: 4px;
    margin-left: 5px;
    margin-bottom: 0px;
    color: #996600;
    }
h5 {
    font: 9pt arial;
    font-weight: bold;
    margin-top: 4px;
    margin-left: 5px;
    margin-bottom: 0px;
    color: #990066;
    }
h6 {
    font: 8pt arial;
    margin-top: 0px;
    margin-left: 0px;
    margin-bottom: 10px;
    color: #000000;
    }
h7 {
    font: 9pt arial;
    font-weight: bold;
    margin-top: 8px;
    margin-left: 1px;
    margin-bottom: 0px;
    color: #003366;
    }
p {
    font: 9pt arial;
    margin-top: 0px;
    margin-bottom: 10px;
    margin-left: 0px;
    text-align: left;
    }
a:link {
    font-weight: bold;
    text-decoration: none;
    color: #003366;
    }
a:visited {
    font-weight: bold;
    text-decoration: none;
    color: #003366;
    }
a:hover, a:active {
    text-decoration: underline;
    color: #003366;
    }

Body {
background:url(img/bg.gif) repeat-x;
}

.logo{position: absolute;
  top: 15;
  left: 15;
  height: 90px;
  width: 240px;
  z-index: 1}

.headline{position: absolute;
  top: 8;
  left: 275;
  height: 50px;
  width: 421px;
  z-index: 1}
    
.menu{position: absolute;
  top: 132px;
  left: 40px;
  height: 267px;
  width: 108px;
  z-index: 1;
  font-family: "arial";
  font-size: 9pt;
  line-height: 130%;
  background-color: rgb(255,255,255);
  overflow: hidden}

.txt{position: absolute;
  top: 133px;
  left: 154px;
  height: 218px;
  width: 423px;
  z-index: 1;
  font-family: "arial";
  font-size: 10pt;
  line-height: 100%;
  background-color: rgb(255,255,255)}

.vssswf{position: absolute;
  top: 133px;
  left: 585px;
  height: 209px;
  width: 165px;
  z-index: 1}
  1. h1 {
  2.     font: 9pt arial;
  3.     font-weight: bold;
  4.     margin-top: 0px;
  5.     margin-left: 0px;
  6.     margin-bottom: -2px;
  7.     color: #003366;
  8.     }
  9. h2 {
  10.     font: 9pt arial;
  11.     font-weight: bold;
  12.     margin-top: 0px;
  13.     margin-left: 0px;
  14.     margin-bottom: 0px;
  15.     color: #003366;
  16.     }
  17. h3 {
  18.     font: 9pt arial;
  19.     font-weight: bold;
  20.     margin-top: 4px;
  21.     margin-left: 5px;
  22.     margin-bottom: 0px;
  23.     color: #006600;
  24.     }
  25. h4 {
  26.     font: 9pt arial;
  27.     font-weight: bold;
  28.     margin-top: 4px;
  29.     margin-left: 5px;
  30.     margin-bottom: 0px;
  31.     color: #996600;
  32.     }
  33. h5 {
  34.     font: 9pt arial;
  35.     font-weight: bold;
  36.     margin-top: 4px;
  37.     margin-left: 5px;
  38.     margin-bottom: 0px;
  39.     color: #990066;
  40.     }
  41. h6 {
  42.     font: 8pt arial;
  43.     margin-top: 0px;
  44.     margin-left: 0px;
  45.     margin-bottom: 10px;
  46.     color: #000000;
  47.     }
  48. h7 {
  49.     font: 9pt arial;
  50.     font-weight: bold;
  51.     margin-top: 8px;
  52.     margin-left: 1px;
  53.     margin-bottom: 0px;
  54.     color: #003366;
  55.     }
  56. p {
  57.     font: 9pt arial;
  58.     margin-top: 0px;
  59.     margin-bottom: 10px;
  60.     margin-left: 0px;
  61.     text-align: left;
  62.     }
  63. a:link {
  64.     font-weight: bold;
  65.     text-decoration: none;
  66.     color: #003366;
  67.     }
  68. a:visited {
  69.     font-weight: bold;
  70.     text-decoration: none;
  71.     color: #003366;
  72.     }
  73. a:hover, a:active {
  74.     text-decoration: underline;
  75.     color: #003366;
  76.     }
  77. Body {
  78. background:url(img/bg.gif) repeat-x;
  79. }
  80. .logo{position: absolute;
  81.   top: 15;
  82.   left: 15;
  83.   height: 90px;
  84.   width: 240px;
  85.   z-index: 1}
  86. .headline{position: absolute;
  87.   top: 8;
  88.   left: 275;
  89.   height: 50px;
  90.   width: 421px;
  91.   z-index: 1}
  92.     
  93. .menu{position: absolute;
  94.   top: 132px;
  95.   left: 40px;
  96.   height: 267px;
  97.   width: 108px;
  98.   z-index: 1;
  99.   font-family: "arial";
  100.   font-size: 9pt;
  101.   line-height: 130%;
  102.   background-color: rgb(255,255,255);
  103.   overflow: hidden}
  104. .txt{position: absolute;
  105.   top: 133px;
  106.   left: 154px;
  107.   height: 218px;
  108.   width: 423px;
  109.   z-index: 1;
  110.   font-family: "arial";
  111.   font-size: 10pt;
  112.   line-height: 100%;
  113.   background-color: rgb(255,255,255)}
  114. .vssswf{position: absolute;
  115.   top: 133px;
  116.   left: 585px;
  117.   height: 209px;
  118.   width: 165px;
  119.   z-index: 1}


h7 comes up looking like times new roman or somethying like that.

The page I am testing with is at http://www.vsssleep.com/vss2.htm

I've been trying to get everything in place to change my site over to CSS I'm in even more of a hurry once I saw how bloated my DW code was :oops:
  • rtm223
  • Mastermind
  • Mastermind
  • User avatar
  • Posts: 1855
  • Loc: Uk

Post 3+ Months Ago

digitalMedia wrote:
IMHO === In My Humble Opinion

Yes you can have multiple paragraph def's. Here's an example of one way to do it...
Code: [ Select ]
<style>
#head p{}
#content p{}
</style>

<div id="head">
  <p>Paragraph in head div</p></div>
<div id="content">
  <p>Paragraph in content div</p></div>
  1. <style>
  2. #head p{}
  3. #content p{}
  4. </style>
  5. <div id="head">
  6.   <p>Paragraph in head div</p></div>
  7. <div id="content">
  8.   <p>Paragraph in content div</p></div>


They told me it was honest. Oh well kinda works either way. It's the IMO that matters :lol:

The way dM says to do multiple p styles is better than mine, and the way I would normally do it :roll:


As dM said there is no h7, which could explain why it isn't working. At a glance I can't see any other errors. What bits in particular aren't working?
  • basdog22
  • Novice
  • Novice
  • User avatar
  • Posts: 21
  • Loc: Hellas

Post 3+ Months Ago

You can have millions of diferrent headings by using classes like:
Code: [ Select ]
h1.big
{
...
}

h1.medium
{
....
}

h1.small
{

}
  1. h1.big
  2. {
  3. ...
  4. }
  5. h1.medium
  6. {
  7. ....
  8. }
  9. h1.small
  10. {
  11. }


The same goes for all your html tags like:
img
p
a
ul
etc...
  • rtm223
  • Mastermind
  • Mastermind
  • User avatar
  • Posts: 1855
  • Loc: Uk

Post 3+ Months Ago

Argh damn cookies, can't edit my posts!

Put units on everything. px is taken as default on IE, but i think the others ignore it as invalid.
  • jlknauff
  • Expert
  • Expert
  • User avatar
  • Posts: 502
  • Loc: Florida

Post 3+ Months Ago

:shock: I can't get it to work...do you have a link to your method in use? Thanks
  • jlknauff
  • Expert
  • Expert
  • User avatar
  • Posts: 502
  • Loc: Florida

Post 3+ Months Ago

does anyone know a workaround for this?

Line: 63
Property layer-background-image doesn't exist : url(img/cata-bg-g.jpg)

That is what came back from W3C's validation. Thanks for all your help so far everyone.
  • digitalMedia
  • a.k.a. dM
  • Genius
  • User avatar
  • Posts: 5149
  • Loc: SC-USA

Post 3+ Months Ago

Is it loading in the browser? I mean can you see it when you look at the page? The link above seems to have gone away.

Is the CSS page in the root directory, or a sub-folder?

If it's in a sub-folder, you'll need to change the relative path of the image to back up a directory, the image path is relative to the CSS doc, and not the HTML doc.
Code: [ Select ]
url(../img/cata-bg-g.jpg)


Maybe?
  • jlknauff
  • Expert
  • Expert
  • User avatar
  • Posts: 502
  • Loc: Florida

Post 3+ Months Ago

the CSS & HTML are in the same folder and everything appears fine on screen.
  • jlknauff
  • Expert
  • Expert
  • User avatar
  • Posts: 502
  • Loc: Florida

Post 3+ Months Ago

Hi everyone. I just wanted to drop a quick thanks for your help. I have most of the CSS questions worked out now with your help.

I'm going to post my newest CSS for anyone else that might run into the same problems.

Code: [ Select ]
h1 {font: 9pt Arial, Helvetica, sans-serif;
    font-weight: bold;
    margin-top: 0px;
    margin-left: 0px;
    margin-bottom: -2px;
    color: #003366;
    }
h2 {font: 9pt Arial, Helvetica, sans-serif;
    font-weight: bold;
    margin-top: 0px;
    margin-left: 0px;
    margin-bottom: 0px;
    color: #003366;
    }
p.one {font: 9pt Arial, Helvetica, sans-serif;
    margin-top: 0px;
    margin-bottom: 10px;
    margin-left: 0px;
    text-align: left;
    }
p.two {font: 8pt Arial, Helvetica, sans-serif;
    font-weight: normal;
    margin-top: 0px;
    margin-bottom: 10px;
    margin-left: 0px;
    text-align: left;
    }
p.menu {font: 9pt Arial, Helvetica, sans-serif;
    font-weight: bold;
    margin-top: 0px;
    margin-left: 0px;
    text-align: left;
    margin-bottom: 0px;
    }
p.menu2 {font: 8pt Arial, Helvetica, sans-serif;
    font-weight: bold;
    margin-top: 0px;
    margin-left: 0px;
    text-align: left;
    margin-bottom: 0px;
    }
p.head1 {font: 9pt Arial, Helvetica, sans-serif;
    font-weight: bold;
    margin-top: 4px;
    margin-left: 5px;
    text-align: left;
    margin-bottom: 0px;
    color: #006600;
    }
p.head2 {font: 9pt Arial, Helvetica, sans-serif;
    font-weight: bold;
    margin-top: 4px;
    margin-left: 5px;
    text-align: left;
    margin-bottom: 0px;
    color: #996600;
    }
p.head3 {font: 9pt Arial, Helvetica, sans-serif;
    font-weight: bold;
    margin-top: 4px;
    margin-left: 5px;
    text-align: left;
    margin-bottom: 0px;
    color: #003366;
    }
p.head4 {font: 9pt Arial, Helvetica, sans-serif;
    font-weight: bold;
    margin-top: 4px;
    margin-left: 5px;
    text-align: left;
    margin-bottom: 0px;
    color: #006666;
    }
p.footer {font: 9pt Arial, Helvetica, sans-serif;
    margin-top: 0px;
    margin-bottom: 0px;
    margin-left: 0px;
    text-align: center;
    }
a:link {font-weight: normal;
    text-decoration: none;
    color: #003366;
    }
a:visited {font-weight: normal;
    text-decoration: none;
    color: #6699CC;
    }
a:hover, a:active {text-decoration: underline;
    color: #003366;
    }
Body {
background:url(img/bg.gif) repeat-x;
}
.logo{position: absolute;
  top: 15px;
  left: 15px;
  height: 90px;
  width: 240px;
  z-index: 1}
.headline{position: absolute;
  top: 8px;
  left: 275px;
  height: 50px;
  width: 421px;
  z-index: 1}
.menu{position: absolute;
  top: 133px;
  left: 40;
  height: 170px;
  width: 105px;
  z-index: 1;
  font-family: "arial";
  font-size: 9pt;
  line-height: 130%;
  background-color: rgb(255,255,255);
  overflow: visible}
.txt{position: absolute;
  top: 133px;
  left: 154px;
  height: 218px;
  width: 423px;
  z-index: 1;
  font-family: "arial";
  font-size: 10pt;
  line-height: 100%;
  background-color: rgb(255,255,255)}
.vssswf{position: absolute;
  top: 133px;
  left: 585px;
  width: 165px;
  z-index: 1}
  1. h1 {font: 9pt Arial, Helvetica, sans-serif;
  2.     font-weight: bold;
  3.     margin-top: 0px;
  4.     margin-left: 0px;
  5.     margin-bottom: -2px;
  6.     color: #003366;
  7.     }
  8. h2 {font: 9pt Arial, Helvetica, sans-serif;
  9.     font-weight: bold;
  10.     margin-top: 0px;
  11.     margin-left: 0px;
  12.     margin-bottom: 0px;
  13.     color: #003366;
  14.     }
  15. p.one {font: 9pt Arial, Helvetica, sans-serif;
  16.     margin-top: 0px;
  17.     margin-bottom: 10px;
  18.     margin-left: 0px;
  19.     text-align: left;
  20.     }
  21. p.two {font: 8pt Arial, Helvetica, sans-serif;
  22.     font-weight: normal;
  23.     margin-top: 0px;
  24.     margin-bottom: 10px;
  25.     margin-left: 0px;
  26.     text-align: left;
  27.     }
  28. p.menu {font: 9pt Arial, Helvetica, sans-serif;
  29.     font-weight: bold;
  30.     margin-top: 0px;
  31.     margin-left: 0px;
  32.     text-align: left;
  33.     margin-bottom: 0px;
  34.     }
  35. p.menu2 {font: 8pt Arial, Helvetica, sans-serif;
  36.     font-weight: bold;
  37.     margin-top: 0px;
  38.     margin-left: 0px;
  39.     text-align: left;
  40.     margin-bottom: 0px;
  41.     }
  42. p.head1 {font: 9pt Arial, Helvetica, sans-serif;
  43.     font-weight: bold;
  44.     margin-top: 4px;
  45.     margin-left: 5px;
  46.     text-align: left;
  47.     margin-bottom: 0px;
  48.     color: #006600;
  49.     }
  50. p.head2 {font: 9pt Arial, Helvetica, sans-serif;
  51.     font-weight: bold;
  52.     margin-top: 4px;
  53.     margin-left: 5px;
  54.     text-align: left;
  55.     margin-bottom: 0px;
  56.     color: #996600;
  57.     }
  58. p.head3 {font: 9pt Arial, Helvetica, sans-serif;
  59.     font-weight: bold;
  60.     margin-top: 4px;
  61.     margin-left: 5px;
  62.     text-align: left;
  63.     margin-bottom: 0px;
  64.     color: #003366;
  65.     }
  66. p.head4 {font: 9pt Arial, Helvetica, sans-serif;
  67.     font-weight: bold;
  68.     margin-top: 4px;
  69.     margin-left: 5px;
  70.     text-align: left;
  71.     margin-bottom: 0px;
  72.     color: #006666;
  73.     }
  74. p.footer {font: 9pt Arial, Helvetica, sans-serif;
  75.     margin-top: 0px;
  76.     margin-bottom: 0px;
  77.     margin-left: 0px;
  78.     text-align: center;
  79.     }
  80. a:link {font-weight: normal;
  81.     text-decoration: none;
  82.     color: #003366;
  83.     }
  84. a:visited {font-weight: normal;
  85.     text-decoration: none;
  86.     color: #6699CC;
  87.     }
  88. a:hover, a:active {text-decoration: underline;
  89.     color: #003366;
  90.     }
  91. Body {
  92. background:url(img/bg.gif) repeat-x;
  93. }
  94. .logo{position: absolute;
  95.   top: 15px;
  96.   left: 15px;
  97.   height: 90px;
  98.   width: 240px;
  99.   z-index: 1}
  100. .headline{position: absolute;
  101.   top: 8px;
  102.   left: 275px;
  103.   height: 50px;
  104.   width: 421px;
  105.   z-index: 1}
  106. .menu{position: absolute;
  107.   top: 133px;
  108.   left: 40;
  109.   height: 170px;
  110.   width: 105px;
  111.   z-index: 1;
  112.   font-family: "arial";
  113.   font-size: 9pt;
  114.   line-height: 130%;
  115.   background-color: rgb(255,255,255);
  116.   overflow: visible}
  117. .txt{position: absolute;
  118.   top: 133px;
  119.   left: 154px;
  120.   height: 218px;
  121.   width: 423px;
  122.   z-index: 1;
  123.   font-family: "arial";
  124.   font-size: 10pt;
  125.   line-height: 100%;
  126.   background-color: rgb(255,255,255)}
  127. .vssswf{position: absolute;
  128.   top: 133px;
  129.   left: 585px;
  130.   width: 165px;
  131.   z-index: 1}


The page using this CSS is currently at http://www.vsssleep.com/vss.htm if you want to see how it works.

Post Information

  • Total Posts in this topic: 12 posts
  • Users browsing this forum: No registered users and 73 guests
  • You cannot post new topics in this forum
  • You cannot reply to topics in this forum
  • You cannot edit your posts in this forum
  • You cannot delete your posts in this forum
  • You cannot post attachments in this forum
 
 

© 1998-2014. Ozzu® is a registered trademark of Unmelted, LLC.