OutFront Forums
     Home    Register     Search      Help      Login    

Sponsors
Frontpage website templates
Creative Website Templates for FrontPage, Dreamweaver, Flash, SwishMax
Shopping Cart Software
Ecommerce software integrated into Frontpage, Dreamweaver and Golive templates. No monthly fees and available in ASP and PHP versions.
Website Templates
We also have a wide selection of Dreamweaver, Expression Web and Frontpage templates as well as webmaster tools and CSS layouts.

Follow Us
On Facebook
On Twitter
RSS
Via Email

Recent Posts
Todays Posts
Most Active posts
Posts since last visit
My Recent Posts
Mark posts read
 

RE: class vs. id

 
View related threads: (in this forum | in all forums)

Logged in as: Guest
Users viewing this topic: none
Printable Version 

All Forums >> Web Development >> Cascading Style Sheets and Accessibility >> RE: class vs. id 		Page: <<   < prev  1 [2]
 
 
lilblackgirl

 

Posts: 288
Joined: 5/16/2002
From:
Status: offline

  		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

(in reply to d a v e)
Peppergal

 

Posts: 2207
Joined: 9/20/2002
Status: offline

  		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.

< Message edited by Peppergal -- 3/12/2004 18:26:31 >

_____________________________

Northeast PA / Poconos/ Lake Wallenpaupack Real Estate
wallenpaupacklakeproperty.com
Karen's Real Estate Blog

(in reply to lilblackgirl)
gorilla

 

Posts: 2974
From: Denmark
Status: offline

  		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.

< Message edited by gorilla -- 3/12/2004 18:53:54 >

_____________________________

Mháircaish

Signature self-censored to protect the sensibilities of the thin-skinned :).

May we never confuse honest dissent with disloyal subversion. – Dwight D. Eisenhower



(in reply to Peppergal)
lilblackgirl

 

Posts: 288
Joined: 5/16/2002
From:
Status: offline

  		RE: class vs. id - 3/13/2004 11:49:01   
sorry, i'm not familiar with what a dtd.ort is. Can you elaborate?

(in reply to gorilla)
Peppergal

 

Posts: 2207
Joined: 9/20/2002
Status: offline

  		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

_____________________________

Northeast PA / Poconos/ Lake Wallenpaupack Real Estate
wallenpaupacklakeproperty.com
Karen's Real Estate Blog

(in reply to lilblackgirl)
lilblackgirl

 

Posts: 288
Joined: 5/16/2002
From:
Status: offline

  		RE: class vs. id - 3/13/2004 14:21:14   
thanks peppergal, got that fixed.

(in reply to Peppergal)
ellipisces

 

Posts: 849
Joined: 12/14/2003
Status: offline

  		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

_____________________________


(in reply to lilblackgirl)
lilblackgirl

 

Posts: 288
Joined: 5/16/2002
From:
Status: offline

  		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'.

< Message edited by lilblackgirl -- 3/15/2004 8:27:14 >

(in reply to ellipisces)
d a v e

 

Posts: 4415
Joined: 7/24/2002
From: England (but live in Finland now)
Status: offline

  		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

_____________________________

David Prescott
Gekko web design

(in reply to lilblackgirl)
lilblackgirl

 

Posts: 288
Joined: 5/16/2002
From:
Status: offline

  		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.

(in reply to d a v e)
d a v e

 

Posts: 4415
Joined: 7/24/2002
From: England (but live in Finland now)
Status: offline

  		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 ?!)

_____________________________

David Prescott
Gekko web design

(in reply to lilblackgirl)
lilblackgirl

 

Posts: 288
Joined: 5/16/2002
From:
Status: offline

  		RE: class vs. id - 3/15/2004 11:44:38   
Nope, not you dave, Ellipisces' comments.

(in reply to d a v e)
gorilla

 

Posts: 2974
From: Denmark
Status: offline

  		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>

< Message edited by gorilla -- 3/15/2004 23:48:42 >

_____________________________

Mháircaish

Signature self-censored to protect the sensibilities of the thin-skinned :).

May we never confuse honest dissent with disloyal subversion. – Dwight D. Eisenhower



(in reply to lilblackgirl)
gorilla

 

Posts: 2974
From: Denmark
Status: offline

  		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.

< Message edited by gorilla -- 3/16/2004 0:02:07 >

_____________________________

Mháircaish

Signature self-censored to protect the sensibilities of the thin-skinned :).

May we never confuse honest dissent with disloyal subversion. – Dwight D. Eisenhower



(in reply to gorilla)
ellipisces

 

Posts: 849
Joined: 12/14/2003
Status: offline

  		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.

_____________________________


(in reply to lilblackgirl)
gorilla

 

Posts: 2974
From: Denmark
Status: offline

  		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. :-)

< Message edited by gorilla -- 3/16/2004 0:24:02 >

_____________________________

Mháircaish

Signature self-censored to protect the sensibilities of the thin-skinned :).

May we never confuse honest dissent with disloyal subversion. – Dwight D. Eisenhower



(in reply to ellipisces)
lilblackgirl

 

Posts: 288
Joined: 5/16/2002
From:
Status: offline

  		RE: class vs. id - 3/16/2004 8:53:47   
suddenly, i have queen songs rolling thru my mind . . . :)

(in reply to gorilla)
lilblackgirl

 

Posts: 288
Joined: 5/16/2002
From:
Status: offline

  		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.

(in reply to lilblackgirl)
gorilla

 

Posts: 2974
From: Denmark
Status: offline

  		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.

< Message edited by gorilla -- 3/16/2004 9:54:00 >

_____________________________

Mháircaish

Signature self-censored to protect the sensibilities of the thin-skinned :).

May we never confuse honest dissent with disloyal subversion. – Dwight D. Eisenhower



(in reply to lilblackgirl)
lilblackgirl

 

Posts: 288
Joined: 5/16/2002
From:
Status: offline

  		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

(in reply to gorilla)
gorilla

 

Posts: 2974
From: Denmark
Status: offline

  		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. :)

< Message edited by gorilla -- 3/16/2004 10:43:16 >

_____________________________

Mháircaish

Signature self-censored to protect the sensibilities of the thin-skinned :).

May we never confuse honest dissent with disloyal subversion. – Dwight D. Eisenhower



(in reply to lilblackgirl)
lilblackgirl

 

Posts: 288
Joined: 5/16/2002
From:
Status: offline

  		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?

(in reply to gorilla)
gorilla

 

Posts: 2974
From: Denmark
Status: offline

  		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.

< Message edited by gorilla -- 3/16/2004 15:36:35 >

_____________________________

Mháircaish

Signature self-censored to protect the sensibilities of the thin-skinned :).

May we never confuse honest dissent with disloyal subversion. – Dwight D. Eisenhower



(in reply to lilblackgirl)
lilblackgirl

 

Posts: 288
Joined: 5/16/2002
From:
Status: offline

  		RE: class vs. id - 3/16/2004 15:41:20   
Is there anything you don't know? :)

(in reply to gorilla)
gorilla

 

Posts: 2974
From: Denmark
Status: offline

  		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. :)

_____________________________

Mháircaish

Signature self-censored to protect the sensibilities of the thin-skinned :).

May we never confuse honest dissent with disloyal subversion. – Dwight D. Eisenhower



(in reply to lilblackgirl)
lilblackgirl

 

Posts: 288
Joined: 5/16/2002
From:
Status: offline

  		RE: class vs. id - 3/16/2004 16:29:25   
and you teach firewall info as well?

(in reply to gorilla)
Giomanach

 

Posts: 6191
Joined: 11/19/2003
From: England
Status: offline

  		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:), quite a few of us can, M specialises in the CSS area, can you tell?

_____________________________

(in reply to lilblackgirl)
lilblackgirl

 

Posts: 288
Joined: 5/16/2002
From:
Status: offline

  		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.

(in reply to Giomanach)
Page:   <<   < prev  1 [2]

All Forums >> Web Development >> Cascading Style Sheets and Accessibility >> RE: class vs. id 		Page: <<   < prev  1 [2]
Jump to: 1





New Messages No New Messages
Hot Topic w/ New Messages Hot Topic w/o New Messages
Locked w/ New Messages Locked w/o New Messages
 Post New Thread
 Reply to Message
 Post New Poll
 Submit Vote
 Delete My Own Post
 Delete My Own Thread
 Rate Posts


Copyright © 2009 Thomas Brunt's OutFront Inc. All Rights Reserved.