RE: class vs. id (Full Version)

All Forums >> [Web Development] >> Cascading Style Sheets



Message

lilblackgirl -> RE: class vs. id (3/12/2004 17:53:52)

Ok, ladies and gentlemen, i've got some things to show you and some questions to ask. Normally, I'd publish everything and then just direct you to those links, but my host seems to have fallen off the face of the earth, so i'll need to post it all here.

Here is the original layout done with tables (and it's rough, so bear with me):
<html>

<head>
<meta http-equiv="Content-Language" content="en-us">
<meta name="GENERATOR" content="Microsoft FrontPage 5.0">
<meta name="ProgId" content="FrontPage.Editor.Document">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>xaostwentyone - changing your concept of webdesign</title>
<link href="xaos.css" rel="stylesheet" type="text/css">
</head>

<body topmargin="0" leftmargin="0">

<div align="center">
<center>
<table border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse" bordercolor="#111111" width="760" id="AutoNumber1">
<tr>
<td width="100%" colspan="3" height="2">
</td>
</tr>
<tr>
<td width="100%" colspan="3">
<img border="0" src="images/title.gif" width="760" height="80"></td>
</tr>
<tr>
<td width="150" valign="top">
<table border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse" bordercolor="#111111" width="100%" id="AutoNumber3">
<tr>
<td width="100%" class="main-back"><a href="index.html">Home</a></td>
</tr>
</table>
<table border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse" bordercolor="#111111" width="100%" id="AutoNumber4">
<tr>
<td width="100%" class="menu-back">Webwork</td>
</tr>
</table>
<table border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse" bordercolor="#111111" width="100%" id="AutoNumber5">
<tr>
<td width="100%" class="menu-back">Graveyard</td>
</tr>
</table>
<table border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse" bordercolor="#111111" width="100%" id="AutoNumber6">
<tr>
<td width="100%" class="menu-back">Favorites</td>
</tr>
</table>
<table border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse" bordercolor="#111111" width="100%" id="AutoNumber7">
<tr>
<td width="100%" class="menu-back">Demos & Extras</td>
</tr>
</table>
<table border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse" bordercolor="#111111" width="100%" id="AutoNumber9">
<tr>
<td width="100%" class="menu-back">Focus</td>
</tr>
</table>
<table border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse" bordercolor="#111111" width="100%" id="AutoNumber9">
<tr>
<td width="100%" class="menu-back">Contact</td>
</tr>
<table border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse" bordercolor="#111111" width="100%" id="AutoNumber3">
<tr>
<td width="100%" class="main-backnav">More Information</td>
</tr>
<table border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse" bordercolor="#111111" width="100%" id="AutoNumber9">
<tr>
<td width="100%" class="menu-back">See the FAQ</td>
</tr>
</table>
<table border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse" bordercolor="#111111" width="100%" id="AutoNumber9">
<tr>
<td width="100%" class="menu-back">Active since 01/2002</td>
</tr>
<tr>
<td width="100%" class="menu-back"> </td>
</tr>
<tr>
<td width="100%" class="menu-back"> </td>
</tr>
<tr>
<td width="100%" class="menu-back"> </td>
</tr>
<tr>
<td width="100%" class="menu-back"> </td>
</tr>
<tr>
<td width="100%" class="menu-back"> </td>
</tr>
<tr>
<td width="100%" class="menu-back"> </td>
</tr>
</table>
</td>
<td width="410" valign="top">
<table border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse" bordercolor="#111111" width="100%" id="AutoNumber16">
<tr>
<td width="100%" class="main">xaostwentyone ></td>
</tr>
</table>
<table border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse" bordercolor="#111111" width="100%" id="AutoNumber17">
<tr>
<td width="100%" class="center-back">
<table border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse" bordercolor="#111111" width="100%" id="AutoNumber18">
<tr>
<td width="100%" class="menu-back2"><p align="center">
Websites that
are easy to navigate
and pleasant to the senses.<br>
This is what
xaostwentyone
is about.  <p align="center">
No blaring oddities, no harsh content, no reason <br>
not to come back to see more.  <br>
This is the goal of xaostwentyone web
design.<p align="center">
Take a few minutes to
navigate xaos via the links below to see past and <br>
current work and decide what's most important to you in a website.<p align="center">
<b>oddity or quality?</b><p align="center">
Contact me when you're ready
for the next step in quality web design.<br>
<a href="mailto:xaos21@sbcglobal.net">xaos21@sbcglobal.net</a></font><p> </td>
</tr>
</table>
 </td>
</tr>
</table>
</td>
<td width="200" valign="top">
<table border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse" bordercolor="#111111" width="100%" id="AutoNumber10">
<tr>
<td width="100%" class="main-back">Recent Updates and News</td>
</tr>
</table>
<table border="0" cellpadding="4" cellspacing="0" style="border-collapse: collapse" bordercolor="#111111" width="100%" id="AutoNumber11">
<tr>
<td width="100%" class="menu-back1">
<table border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse" bordercolor="#111111" width="100%" id="AutoNumber12">
<tr>
<td width="100%" class="menu-back2">
<p align="left">Newest updates to xaostwentyone available right
here!<br>
-------------------------------<br>
Check out the Tools section for tips and tricks as well as scripts
and favorite links to helpful design sites so you too can build an
impressive and appealing website!|</td>
</tr>
</table>
</td>
</tr>
</table>
<table border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse" bordercolor="#111111" width="100%" id="AutoNumber13">
<tr>
<td width="100%" class="main-backnav">Like to make a Difference?</td>
</tr>
</table>
<table border="0" cellpadding="4" cellspacing="0" style="border-collapse: collapse" bordercolor="#111111" width="100%" id="AutoNumber14">
<tr>
<td width="100%" class="menu-back1">
<table border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse" bordercolor="#111111" width="100%" id="AutoNumber15">
<tr>
<td width="100%" class="menu-back2">It's the silly season and
there are a lot of unhappy people in the world.  A lot of hungry
people.  A lot of kids that won't be receiving presents this
holiday season.  If you want to make a child's Christmas
morning memorable, check out
<a class="panel-link" target="_blank" href="http://www.penny-arcade.com/childsplay/">
Child's Play</a>.</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td width="100%" colspan="3" class="menu-back"> </td>
</tr>
</table>
</center>
</div>

<p> </p>

</body>

</html>

___________________________________________________________________
And here is the new, completely handwritten code that i just did:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.ort/TR/html4/loose.dtd">
<html>
<head>
<title>xaostwentyone</title>
<link href="xaos.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="frame">
<div id="header">
<img alt="" src="images/title.gif" width="760" height="80"/><br>
</div>
<div id="navheader">
<a href="index.html">Home</a><br>
</div>
<div id="navigation">
<a href="webwork.html">Webwork</a><br>
</div>
<div id="navigation">
<a href="graveyard.html">Graveyard</a><br>
</div>
<div id="navigation">
<a href="demos.html">Demos & Extras</a><br>
</div>
<div id="navigation">
<a href="favorites.html">Favorites</a><br>
</div>
<div id="navigation">
<a href="contact.html" class="current">Contact Me</a>
</div>
<div id="main">
<p>xaos >></p>
<div id="menu-back2">
<p><center>Websites that are easy to navigate and pleasant to the senses.<br>
This is what xaostwentyone is about.<br><br>
No blaring oddities, no harsh content, no reason<br>
not to come back to see more.<br>
This is the goal of xaostwentyone web design.<br><br>
Take a few minutes to navigate xaos via the links below to see past and <br>
current work and decide what's most important to you in a website.<br><br>
<b>oddity or quality?</b><br><br>
Contact me when you're ready for the next step in quality web design.<br><br>
<a class="panel-link" href="mailto:xaos21@sbcglobal.net">xaos21@sbcglobal.net</a></center></p>
</div>
</div>
</body>
</html>
__________________________________________________________________
And here is the CSS (which works for both):
#frame
{
width:760px;
margin-right:auto;
margin-left:auto;
margin-top:0px;
padding:0px;
text-align:left;
}
#navigation
{
WIDTH: 150PX;
VALIGN: TOP;
DISPLAY: BLOCK;
BORDER-RIGHT: #333366 1px solid;
BORDER-TOP: #91A3BD 1px solid;
PADDING-LEFT: 10px;
FONT-WEIGHT: normal;
FONT-SIZE: 11px;
BORDER-LEFT: #6699cc 1px solid;
COLOR: #ffffff;
BORDER-BOTTOM: #333366 1px solid;
FONT-FAMILY: Arial;
BACKGROUND-COLOR: #61799C;
TEXT-DECORATION: none;
font-stretch : condensed;
}
#navheader
{
WIDTH: 150PX;
VALIGN: TOP;
DISPLAY: BLOCK;
BORDER-RIGHT: #333366 1px solid;
BORDER-TOP: #61799C 1px solid;
PADDING-LEFT: 10px;
FONT-WEIGHT: normal;
FONT-SIZE: 11px;
BORDER-LEFT: #6699cc 1px solid;
COLOR: #ffffff;
BORDER-BOTTOM: #333366 1px solid;
FONT-FAMILY: Arial;
BACKGROUND-COLOR: #3A5070;
TEXT-DECORATION: none;
font-stretch : condensed;
}
#main
{
WIDTH: 410PX;
FLOAT: LEFT;
FONT-WEIGHT: normal;
FONT-SIZE: 11px;
COLOR: #000000;
FONT-FAMILY: Arial;
PADDING-LEFT: 10px;
BACKGROUND-COLOR: #ffffff;
TEXT-DECORATION: none;
font-stretch : condensed;
}
#menu-back2
{
BORDER-RIGHT: #3A5070 1px solid;
BORDER-TOP: #3A5070 1px solid;
PADDING-LEFT: 5px;
PADDING-RIGHT: 5px;
PADDING-TOP: 5px;
PADDING-BOTTOM: 5px;
FONT-WEIGHT: normal;
FONT-SIZE: 11px;
BORDER-LEFT: #3A5070 1px solid;
COLOR: #000000;
BORDER-BOTTOM: #3A5070 1px solid;
FONT-FAMILY: Arial;
BACKGROUND-COLOR: #ffffff;
TEXT-DECORATION: none;
font-stretch : condensed;
}
a:link
{
FONT-WEIGHT: normal;
FONT-SIZE: 11px;
COLOR: #ffffff;
FONT-FAMILY: Arial;
TEXT-DECORATION: none;
font-stretch : condensed;
}
a:visited
{
FONT-WEIGHT: normal;
FONT-SIZE: 11px;
COLOR: #ffffff;
FONT-FAMILY: Arial;
TEXT-DECORATION: none;
font-stretch : condensed;
}
a:active
{
FONT-WEIGHT: normal;
FONT-SIZE: 11px;
COLOR: #ffffff;
FONT-FAMILY: Arial;
TEXT-DECORATION: none;
font-stretch : condensed;
}
a:hover
{
FONT-WEIGHT: normal;
FONT-SIZE: 11px;
COLOR: #ffffff;
FONT-FAMILY: Arial;
TEXT-DECORATION: none;
font-stretch : condensed;
}
a.panel-link:link
{
FONT-WEIGHT: bold;
FONT-SIZE: 11px;
COLOR: #000;
FONT-FAMILY: Arial;
TEXT-DECORATION: underline;
font-stretch : condensed;
}
a.panel-link:visited
{
FONT-WEIGHT: bold;
FONT-SIZE: 11px;
COLOR: #3A5070;
FONT-FAMILY: Arial;
TEXT-DECORATION: underline;
font-stretch : condensed;
}
a.panel-link:active
{
FONT-WEIGHT: bold;
FONT-SIZE: 11px;
COLOR: #3A5070;
FONT-FAMILY: Arial;
TEXT-DECORATION: underline;
font-stretch : condensed;
}
a.panel-link:hover
{
FONT-WEIGHT: bold;
FONT-SIZE: 11px;
COLOR: #61799C;
FONT-FAMILY: Arial;
TEXT-DECORATION: underline;
font-stretch : condensed;
}
________________________________________________________________
And now my questions:
1. In the 2nd page, how do i get the details to the middle? The chit-chat that is sitting below the nav should be off to the right, but for the life of me, i can't seem to get it over there.
1.5. How do i get rid of the space between the 'xaos >>' and the line that starts the chat?
2. In the 2nd page, is there a way to create the navigation without having to set up separate <div>'s for each line to creat the boxed effect i want?
3. In the content (referenced in 1st question), to center the content, is there a way around having to place <br> at every line and twice for a full line break?
4. Can a graphic (like the title gif) be set up in the CSS instead of the <html>?

I can see why all of you do it this way. This is completely addictive. And I haven't hand coded anything (from scratch) in years. I forgot how much i miss it and realize how lazy and dependant i've become on FP.
And please, any comments. LEMME HAVE IT!

thanks,
Lil



Peppergal -> RE: class vs. id (3/12/2004 18:21:20)

quote:

2. In the 2nd page, is there a way to create the navigation without having to set up separate <div>'s for each line to creat the boxed effect i want?


I think in your link styles, you can set it to "display: block;" and set background colors for link, visited, active, and hover. You can set the navigation up as a bulleted list, but set the list-style-type to none when you set up the style for the UL.



gorilla -> RE: class vs. id (3/12/2004 18:49:59)

Well for a start check your typing of the dtd .ort seems just a tad off base to me :-) If that doesn't fix it post again saying that didn't fix it and I'll try to take a look tomorrow.

Yah it is fun isn't it? And the great thing is that learning to do it this way makes you way more productive on tools like frontpage because you know what its doing right or doing wrong.



lilblackgirl -> RE: class vs. id (3/13/2004 11:49:01)

sorry, i'm not familiar with what a dtd.ort is. Can you elaborate?



Peppergal -> RE: class vs. id (3/13/2004 13:41:12)

it's a typo in your doc type declaration. you have dtd.ort instead of dtd.org



lilblackgirl -> RE: class vs. id (3/13/2004 14:21:14)

thanks peppergal, got that fixed.



ellipisces -> RE: class vs. id (3/14/2004 5:06:09)

quote:

host seems to have fallen off the face of the earth
get a new host.

I'd rather see a URL than pore over all of that code



lilblackgirl -> RE: class vs. id (3/15/2004 9:26:12)

Well gee, thanks Ellipisces, those are productive comments. The purpose of my question is to find out what i did wrong in the code. If you could see what i did wrong by just viewing the final product, you probably wouldn't be a techie in training, would you? I don't have control over my host and quite frankly, this was the first time in 3 years that i had problems, so i think i'll stick with them.

Oh, and BTW, it's 'pour' over the code, not 'pore'.



d a v e -> RE: class vs. id (3/15/2004 9:38:49)

it was a bit mean wasn't he? - it's your host he should be angry at not you.

btw it IS pore (not sure how you would 'pour' over the code ;)

? verb 1 (pore over/through) be absorbed in the reading or study of. 2 (pore on/over) archaic ponder.

http://www.askoxford.com/concise_oed/pore_2?view=uk



lilblackgirl -> RE: class vs. id (3/15/2004 9:44:43)

Well, then, my apologies for the discrepancy in the definition, but the comments were unnecessary.



d a v e -> RE: class vs. id (3/15/2004 10:06:45)

no problem. i agree the comments were unnecessary (or are you talking about what *I* said ?!)



lilblackgirl -> RE: class vs. id (3/15/2004 11:44:38)

Nope, not you dave, Ellipisces' comments.



gorilla -> RE: class vs. id (3/15/2004 23:39:05)

When I'm protoyping I bung the style into page (i.e. embedded) makes life eaiser.

1: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
2: <!-- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.ort/TR/html4/loose.dtd"> -->
3: <html>
4: <head>
5: <title>xaostwentyone</title>
6: <style type="text/css">
7: #frame
8: {
9: width:760px;
10: margin-right:auto;
11: margin-left:auto;
12: margin-top:0px;
13: padding:0px;
14: text-align:left;
15: }
16: #navigation
17: {
18: WIDTH: 150PX;
19: VALIGN: TOP;
20: DISPLAY: BLOCK;
21: BORDER-RIGHT: #333366 1px solid;
22: BORDER-TOP: #91A3BD 1px solid;
23: PADDING-LEFT: 10px;
24: FONT-WEIGHT: normal;
25: FONT-SIZE: 11px;
26: BORDER-LEFT: #6699cc 1px solid;
27: COLOR: #ffffff;
28: BORDER-BOTTOM: #333366 1px solid;
29: FONT-FAMILY: Arial;
30: BACKGROUND-COLOR: #61799C;
31: TEXT-DECORATION: none;
32: font-stretch : condensed;
33: }
34: #navheader
35: {
36: WIDTH: 150PX;
37: VALIGN: TOP;
38: DISPLAY: BLOCK;
39: BORDER-RIGHT: #333366 1px solid;
40: BORDER-TOP: #61799C 1px solid;
41: PADDING-LEFT: 10px;
42: FONT-WEIGHT: normal;
43: FONT-SIZE: 11px;
44: BORDER-LEFT: #6699cc 1px solid;
45: COLOR: #ffffff;
46: BORDER-BOTTOM: #333366 1px solid;
47: FONT-FAMILY: Arial;
48: BACKGROUND-COLOR: #3A5070;
49: TEXT-DECORATION: none;
50: font-stretch : condensed;
51: }
52: #main
53: {
54: WIDTH: 410PX;
55: FLOAT: LEFT;
56: FONT-WEIGHT: normal;
57: FONT-SIZE: 11px;
58: COLOR: #000000;
59: FONT-FAMILY: Arial;
60: PADDING-LEFT: 10px;
61: BACKGROUND-COLOR: #ffffff;
62: TEXT-DECORATION: none;
63: font-stretch : condensed;
64: }
65: #menu-back2
66: {
67: BORDER-RIGHT: #3A5070 1px solid;
68: BORDER-TOP: #3A5070 1px solid;
69: PADDING-LEFT: 5px;
70: PADDING-RIGHT: 5px;
71: PADDING-TOP: 5px;
72: PADDING-BOTTOM: 5px;
73: FONT-WEIGHT: normal;
74: FONT-SIZE: 11px;
75: BORDER-LEFT: #3A5070 1px solid;
76: COLOR: #000000;
77: BORDER-BOTTOM: #3A5070 1px solid;
78: FONT-FAMILY: Arial;
79: BACKGROUND-COLOR: #ffffff;
80: TEXT-DECORATION: none;
81: font-stretch : condensed;
82: }
83: a:link
84: {
85: FONT-WEIGHT: normal;
86: FONT-SIZE: 11px;
87: COLOR: #ffffff;
88: FONT-FAMILY: Arial;
89: TEXT-DECORATION: none;
90: font-stretch : condensed;
91: }
92: a:visited
93: {
94: FONT-WEIGHT: normal;
95: FONT-SIZE: 11px;
96: COLOR: #ffffff;
97: FONT-FAMILY: Arial;
98: TEXT-DECORATION: none;
99: font-stretch : condensed;
100: }
101: a:active
102: {
103: FONT-WEIGHT: normal;
104: FONT-SIZE: 11px;
105: COLOR: #ffffff;
106: FONT-FAMILY: Arial;
107: TEXT-DECORATION: none;
108: font-stretch : condensed;
109: }
110: a:hover
111: {
112: FONT-WEIGHT: normal;
113: FONT-SIZE: 11px;
114: COLOR: #ffffff;
115: FONT-FAMILY: Arial;
116: TEXT-DECORATION: none;
117: font-stretch : condensed;
118: }
119: a.panel-link:link
120: {
121: FONT-WEIGHT: bold;
122: FONT-SIZE: 11px;
123: COLOR: #000;
124: FONT-FAMILY: Arial;
125: TEXT-DECORATION: underline;
126: font-stretch : condensed;
127: }
128: a.panel-link:visited
129: {
130: FONT-WEIGHT: bold;
131: FONT-SIZE: 11px;
132: COLOR: #3A5070;
133: FONT-FAMILY: Arial;
134: TEXT-DECORATION: underline;
135: font-stretch : condensed;
136: }
137: a.panel-link:active
138: {
139: FONT-WEIGHT: bold;
140: FONT-SIZE: 11px;
141: COLOR: #3A5070;
142: FONT-FAMILY: Arial;
143: TEXT-DECORATION: underline;
144: font-stretch : condensed;
145: }
146: a.panel-link:hover
147: {
148: FONT-WEIGHT: bold;
149: FONT-SIZE: 11px;
150: COLOR: #61799C;
151: FONT-FAMILY: Arial;
152: TEXT-DECORATION: underline;
153: font-stretch : condensed;
154: }
155:
156: </style>
157: </head>
158: <body>
159: <div id="frame">
160: <div id="header">
161: <img alt="" src="images/title.gif" width="760" height="80"/><br>
162: </div>
163: <div id="navheader">
164: <a href="index.html">Home</a><br>
165: </div>
166: <div id="navigation">
167: <a href="webwork.html">Webwork</a><br>
168: </div>
169: <div id="navigation">
170: <a href="graveyard.html">Graveyard</a><br>
171: </div>
172: <div id="navigation">
173: <a href="demos.html">Demos & Extras</a><br>
174: </div>
175: <div id="navigation">
176: <a href="favorites.html">Favorites</a><br>
177: </div>
178: <div id="navigation">
179: <a href="contact.html" class="current">Contact Me</a>
180: </div>
181: <div id="main">
182: <p>xaos >></p>
183: <div id="menu-back2">
184: <p><center>Websites that are easy to navigate and pleasant to the senses.<br>
185: This is what xaostwentyone is about.<br><br>
186: No blaring oddities, no harsh content, no reason<br>
187: not to come back to see more.<br>
188: This is the goal of xaostwentyone web design.<br><br>
189: Take a few minutes to navigate xaos via the links below to see past and <br>
190: current work and decide what's most important to you in a website.<br><br>
191: <b>oddity or quality?</b><br><br>
192: Contact me when you're ready for the next step in quality web design.<br><br>
193: <a class="panel-link" href="mailto:xaos21@sbcglobal.net">xaos21@sbcglobal.net</a></center></p>
194: </div>
195: </div>
196: </body>
197: </html>



gorilla -> RE: class vs. id (3/15/2004 23:53:41)

HTML:

Take a look around line 166 et seq. You're declaring IDs repeatedly. They must be unique. Consider using a class instead.

Where does the "frame" div end? can't seem to see a closing </div>

What are you trying to with line 181? SHould it be part of the menu?


CSS: Lines 18 and 36 ain't no such thing as VALIGN. Did you mean vertical-align?

http://www.w3.org/TR/REC-CSS2/visudet.html#line-height


Also in general Try using percentages instead of px btw try 90% or 95%

Other than that nothing springs to eye in your css.

Hmmm - that'd be good for a list you know. Toddle along here and see what you can see :-)

http://www.accessify.com/tools-and-wizards/list-o-matic/list-o-matic.asp

You'll have to mess with the code it produces a bit. But what the hell.



ellipisces -> RE: class vs. id (3/16/2004 0:05:07)

Sorry if I offended you. With the pleutheura of excellent hosting out there, there is absolutely no reason for any problems, EVER! If we accept mediocrity then that will become the norm and we will all have host problems.

quote:

If you could see what i did wrong by just viewing the final product, you probably wouldn't be a techie in training, would you?
Actually, that is exactly what I would like to see is the page, and I can often tell what is wrong by seeing that. If I can't tell from the page then I will start going through the code. While I'm on the subject of code, I might take a look at it, except that there is not one single comment in any of it. What, do you want me to do read your mind? As far as "techie in training" that moniker is assigned by Outfront, not me. I feel that it is much more valuable for the people looking for help, if I watch the posts, instead of goofing around with settings.



gorilla -> RE: class vs. id (3/16/2004 0:19:19)

Actually yeah where you have double <br> why not for the hell of it create a class for those paragraphs - oh lets call it "fatbottom" with a double size margin. Do another called "wellpadded" and test both. :-)



lilblackgirl -> RE: class vs. id (3/16/2004 8:53:47)

suddenly, i have queen songs rolling thru my mind . . . [;)]



lilblackgirl -> RE: class vs. id (3/16/2004 8:58:49)

any idea as to what's happening with that center <div>? it still sits below the left one and i can't figure out how to get it out to the middle.



gorilla -> RE: class vs. id (3/16/2004 9:35:47)

You're talking about #main? if you are then you're making the classic error of using a float. What's important are the margins so you can do one of two things:

For a three col layout I often do this:

.leftContainer {
position: absolute;
top: 100px;
left: 10%;
width: 15%;
text-align: left;
}

.rightContainer {
position: absolute;
top: 100px;
right: 10%;
width: 15%;
text-align: left;
}
.centerContainer {
margin-left: 19%;
margin-right: 19%;
border-top: thin dotted #999999;
border-right: thin dotted #999999;
border-bottom: thin dotted #999999;
border-left: thin dotted #999999;
margin-top:10px;

padding-left: 10%;
padding-right: 10%;
text-align: justify;
font-family: verdana, tahoma, sans-serif;
font-size: 1em;
padding-bottom: 10px;

}


Nobody says that there has to anything in the left and right columns btw and my main is often used just as a wrapper div for everything.


If howver you want something dead centred in the screen then you have to do a tiny bit of simple arithmetic.

you have to know the element's exact height and width. So you're usings pixels as a measurement. Let us assume that you have an element of 300px by 500px

{
height: 300px;
width: 500px;

position: absolute;
top: 50%;
left: 50%;

margin-left: -250px;
margin-top: -150px;
}

by giving it a negative margin equal to half the element's height and width you have it dead cented on the screen.



lilblackgirl -> RE: class vs. id (3/16/2004 9:57:00)

Well, i suck at math, but i suppose i could figure this out. OK, i'll have to really dig in when i get home and give this a try.

much oblige o great hairy one,
Lil



gorilla -> RE: class vs. id (3/16/2004 10:39:55)

Ummm ... its arithmetic not mathematics .. but if all else fails and you run out fingers and toes ... just round up all the schoolkids in a radius of 500 kilometres get them to


  1. Hold their hands out.
  2. Take their shoes and socks off


and start adding and subtracting. Subtraction may not be done using a chainsaw as this tends to upset your friendly local law enforcement officers. [:D]



lilblackgirl -> RE: class vs. id (3/16/2004 14:55:02)

quote:

Actually yeah where you have double <br> why not for the hell of it create a class for those paragraphs - oh lets call it "fatbottom" with a double size margin. Do another called "wellpadded" and test both. :-)


You lost me here. Are you talking about creating an id that just substitutes for the multiple <br> or just resizing the margin itself? And forgive me, but how is that done? Also, any suggestions for the navigation and having to create separate <div>s to create the effect i wanted?



gorilla -> RE: class vs. id (3/16/2004 15:34:12)

No I'm talking about a class which you'll apply to those paragraphs you currently have spaced using <br> You don't need the breaks just create a class with extras space at the bottom and apply that class to those paragraphs.

http://www.w3.org/TR/REC-CSS2/box.html

or here

http://msdn.microsoft.com/library/default.asp?url=/library/en-us/vsintro7/html/vxtsksettingmarginattributesusingcss.asp

Here also is very good:

http://www.w3schools.com/css/css_margin.asp
Both have good information on how this works and how to do it.

As to your problem with the navigation placement this si because you're using an id for each element in your navlist.

The id should be a div that holds the nav elements. Each of which will have a class applied to them.

http://www.w3.org/TR/REC-CSS2/selector.html

http://www.w3.org/TR/REC-CSS2/selector.html#class-html

http://www.w3.org/TR/REC-CSS2/selector.html#id-selectors

This is very important to grasp - the differnence between id and class. ID must be umique. Class is reusable.



lilblackgirl -> RE: class vs. id (3/16/2004 15:41:20)

Is there anything you don't know? [8|]



gorilla -> RE: class vs. id (3/16/2004 16:16:14)

Be reasonable, I've been working with CSS since before the earliest drafts actually came out in May 1995. And yes there's lots I don't know. In fact the older I get and the more I learn the more I realise how little I know.

So much to learn and so little time in which to learn it. [&:]



lilblackgirl -> RE: class vs. id (3/16/2004 16:29:25)

and you teach firewall info as well?



Giomanach -> RE: class vs. id (3/17/2004 3:45:41)

quote:

and you teach firewall info as well?

I'm sure he does that as well[:D], quite a few of us can, M specialises in the CSS area, can you tell?



lilblackgirl -> RE: class vs. id (3/17/2004 9:21:43)

Yeah, he sure does. I'd still be floundering with the differences between class vs. id (isn't that what this post started as? [;)]) if it weren't for M.



Page: <<   < prev  1 [2]

Valid CSS!




Forum Software © ASPPlayground.NET Advanced Edition 2.4.5 ANSI
0.125