Hello,
I'm having a mental block and can't figure out how to do a
SIMPLE navigation bar horizontally across the top of the page.
Wanted to use ''block'', but I seem to only be able to get my list in
a vertical format doing this. Then tried ''display-list_item'' which
looked okay on my screen but loaded again with the navigation being
vertical. I know that this has got to be easy... don't want to make
it hard by creating buttons, etc. when I want something simple.
Page is located at
Sage
City
I haven't been doing many sites lately and I'm badly out of
practice I'm afraid... thanks for your help :)
MaureenHow to - horizontal navigation
float:left on the %26lt;li%26gt; elements, then display:block on
the %26lt;a%26gt; tags within.
--
Murray --- ICQ 71997575
Adobe Community Expert
(If you *MUST* email me, don't LAUGH when you do so!)
==================
http://www.projectseven.com/go
- DW FAQs, Tutorials %26amp; Resources
http://www.dwfaq.com - DW FAQs,
Tutorials %26amp; Resources
==================
''webmom24'' %26lt;webforumsuser@macromedia.com%26gt; wrote in
message
news:fg30uu$qr7$1@forums.macromedia.com...
%26gt; Hello,
%26gt;
%26gt; I'm having a mental block and can't figure out how to do
a SIMPLE
%26gt; navigation
%26gt; bar horizontally across the top of the page. Wanted to
use ''block'', but I
%26gt; seem
%26gt; to only be able to get my list in a vertical format
doing this. Then tried
%26gt; ''display-list_item'' which looked okay on my screen but
loaded again with
%26gt; the
%26gt; navigation being vertical. I know that this has got to
be easy... don't
%26gt; want to
%26gt; make it hard by creating buttons, etc. when I want
something simple.
%26gt;
%26gt; Page is located at
http://www.stadnikdesigns.com/sage/aboutus.html
%26gt;
%26gt; I haven't been doing many sites lately and I'm badly out
of practice I'm
%26gt; afraid... thanks for your help :)
%26gt;
%26gt; Maureen
%26gt;
How to - horizontal navigation
Thanks - there's a lot of things wrong with this page...
sigh... it's what I get for a) letting myself get out of practice
despite not having any ''paid'' work in quite some time and b) for
using one of the built in pages as a starting point. I don't
understand the ''td classes'' applied to the table - which don't seem
to work anyway. My other challenge is that I haven't worked with
tables in a while - and was very resistant to doing this site in
tables but the client wants it that way. I should probably get rid
of the td classes and just use regular classes?
Maureen
''webmom24'' %26lt;webforumsuser@macromedia.com%26gt; wrote in
message
news:fg34f7$1q3$1@forums.macromedia.com...
%26gt; Thanks - there's a lot of things wrong with this page...
sigh... it's what
%26gt; I
%26gt; get for a) letting myself get out of practice despite
not having any
%26gt; ''paid''
%26gt; work in quite some time and b) for using one of the
built in pages as a
%26gt; starting point. I don't understand the ''td classes''
applied to the table -
%26gt; which don't seem to work anyway. My other challenge is
that I haven't
%26gt; worked
%26gt; with tables in a while - and was very resistant to doing
this site in
%26gt; tables
%26gt; but the client wants it that way. I should probably get
rid of the td
%26gt; classes
%26gt; and just use regular classes?
%26gt;
%26gt; Maureen
What do you mean by ''td classes'' vs. ''regular classes''? A
class applied to a
%26lt;td%26gt; is just as regular as any other class.
--
Patty Ayers | Adobe Community Expert
www.WebDevBiz.com
Free Articles on the Business of Web Development
Web Design Contract, Estimate Request Form, Estimate
Worksheet
--
And how can a client dictate that you build the site with
tables?
--
Murray --- ICQ 71997575
Adobe Community Expert
(If you *MUST* email me, don't LAUGH when you do so!)
==================
http://www.projectseven.com/go
- DW FAQs, Tutorials %26amp; Resources
http://www.dwfaq.com - DW FAQs,
Tutorials %26amp; Resources
==================
''P@tty Ayers ~ACE''
%26lt;pattyayersTAKETHISOUT@REMOVEgmail.com%26gt; wrote in message
news:fg36md$4g9$1@forums.macromedia.com...
%26gt;
%26gt; ''webmom24'' %26lt;webforumsuser@macromedia.com%26gt; wrote in
message
%26gt; news:fg34f7$1q3$1@forums.macromedia.com...
%26gt;%26gt; Thanks - there's a lot of things wrong with this
page... sigh... it's
%26gt;%26gt; what I
%26gt;%26gt; get for a) letting myself get out of practice
despite not having any
%26gt;%26gt; ''paid''
%26gt;%26gt; work in quite some time and b) for using one of the
built in pages as a
%26gt;%26gt; starting point. I don't understand the ''td classes''
applied to the
%26gt;%26gt; table -
%26gt;%26gt; which don't seem to work anyway. My other challenge
is that I haven't
%26gt;%26gt; worked
%26gt;%26gt; with tables in a while - and was very resistant to
doing this site in
%26gt;%26gt; tables
%26gt;%26gt; but the client wants it that way. I should probably
get rid of the td
%26gt;%26gt; classes
%26gt;%26gt; and just use regular classes?
%26gt;%26gt;
%26gt;%26gt; Maureen
%26gt;
%26gt;
%26gt; What do you mean by ''td classes'' vs. ''regular classes''?
A class applied to
%26gt; a %26lt;td%26gt; is just as regular as any other class.
%26gt;
%26gt;
%26gt; --
%26gt; Patty Ayers | Adobe Community Expert
%26gt; www.WebDevBiz.com
%26gt; Free Articles on the Business of Web Development
%26gt; Web Design Contract, Estimate Request Form, Estimate
Worksheet
%26gt; --
%26gt;
%26gt;
Patty - I guess I just haven't seen this before and it didn't
seem to work correctly in the page either.
For example, here's the navigation code:
#navigation td {
border-bottom: 2px solid #C0DFFD;
}
#navigation a {
font: 11px Verdana, Arial, Helvetica, sans-serif;
color: #003366;
line-height:16px;
letter-spacing:.1em;
text-decoration: none;
display:block;
padding:8px 6px 10px 26px;
background: url(''mm_arrow.gif'') 14px 45% no-repeat;
}
#navigation a:hover {
background: #ffffff url(''mm_arrow.gif'') 14px 45% no-repeat;
color:#FF6600;
Then on the page:
%26lt;table border=''0'' cellspacing=''0'' cellpadding=''0''
width=''165'' id=''navigation''%26gt;
%26lt;tr%26gt;
%26lt;td width=''165''%26gt; %26lt;br /%26gt;
%26lt;br /%26gt;%26lt;/td%26gt;
%26lt;/tr%26gt;
%26lt;tr%26gt;
%26lt;td width=''165''%26gt;%26lt;a href=''javascript:;''
class=''navText''%26gt;destinations%26lt;/a%26gt;%26lt;/td%26gt;
%26lt;/tr%26gt;
%26lt;tr%26gt;
%26lt;td width=''165''%26gt;%26lt;a href=''javascript:;''
class=''navText''%26gt;airfare%26lt;/a%26gt;%26lt;/td%26gt;
%26lt;/tr%26gt;
%26lt;tr%26gt;
%26lt;td width=''165''%26gt;%26lt;a href=''javascript:;''
class=''navText''%26gt;cruises%26lt;/a%26gt;%26lt;/td%26gt;
%26lt;/tr%26gt;
%26lt;tr%26gt;
%26lt;td width=''165''%26gt;%26lt;a href=''javascript:;''
class=''navText''%26gt;specials%26lt;/a%26gt;%26lt;/td%26gt;
%26lt;/tr%26gt;
%26lt;tr%26gt;
%26lt;td width=''165''%26gt;%26lt;a href=''javascript:;''
class=''navText''%26gt;contact%26lt;/a%26gt;%26lt;/td%26gt;
%26lt;/tr%26gt;
%26lt;/table%26gt;
I guess I don't understand how the ''id'' works to format the
table - it seems cumbersome and I'm not understanding what this is
doing exactly. It was a bit confusing for me to figure out how to
change the navigation from vertical to horizontal and in the
process I probably deleted some of the crucial elements. What I've
done is changed all the ''#'' to ''.'' and applied the classes to the
text as needed.
Murray - Still haven't got it all straightened out and may
end up starting from scratch using divs instead. The ''client'' in
this case is a web person (back-end I think) and insisted on using
''tables'' because according to her this has less accessibility
issues. Bottom line is I should use what I feel comfortable with
and what works for me and the site. Not only did she want it in
''tables'' but then wanted it set for 600 px wide, with percentages
used for the columns... this project is going to drive me to
drink...
Maureen
Yep... I've about had it with these tables. The page is just
not working at all. I'm about ''done''. :(
Maureen
%26gt; Murray - Still haven't got it all straightened out and
may end up starting
%26gt; from scratch using divs instead. The ''client'' in this
case is a web person
%26gt; (back-end I think) and insisted on using ''tables''
because according to her
%26gt; this
%26gt; has less accessibility issues.
Your client is badly mistaken. If tables are used for
content, they create
accessability problems, since tables are ''read'' from left to
right, top to
bottom, meaning that vertically adjacent content will not be
read as a block
when they are in different cells in the same column.
%26gt; #navigation td
This is a descendent selector - it specifies that the rull
following it
would be applied to all %26lt;td%26gt; tags within a parent
container with ID =
''navigation''. It's quite common to use such selectors.
%26gt; it seems cumbersome
Quite the opposite.
%26gt; What I've done is changed all the ''#'' to ''.'' and applied
the classes to
%26gt; the
%26gt; text as needed.
That's the wrong approach, really.
--
Murray --- ICQ 71997575
Adobe Community Expert
(If you *MUST* email me, don't LAUGH when you do so!)
==================
http://www.projectseven.com/go
- DW FAQs, Tutorials %26amp; Resources
http://www.dwfaq.com - DW FAQs,
Tutorials %26amp; Resources
==================
''webmom24'' %26lt;webforumsuser@macromedia.com%26gt; wrote in
message
news:fg3gvj$gk5$1@forums.macromedia.com...
%26gt; Patty - I guess I just haven't seen this before and it
didn't seem to work
%26gt; correctly in the page either.
%26gt;
%26gt; For example, here's the navigation code:
%26gt; #navigation td {
%26gt; border-bottom: 2px solid #C0DFFD;
%26gt; }
%26gt;
%26gt; #navigation a {
%26gt; font: 11px Verdana, Arial, Helvetica, sans-serif;
%26gt; color: #003366;
%26gt; line-height:16px;
%26gt; letter-spacing:.1em;
%26gt; text-decoration: none;
%26gt; display:block;
%26gt; padding:8px 6px 10px 26px;
%26gt; background: url(''mm_arrow.gif'') 14px 45% no-repeat;
%26gt; }
%26gt;
%26gt; #navigation a:hover {
%26gt; background: #ffffff url(''mm_arrow.gif'') 14px 45%
no-repeat;
%26gt; color:#FF6600;
%26gt;
%26gt; Then on the page:
%26gt; %26lt;table border=''0'' cellspacing=''0'' cellpadding=''0''
width=''165''
%26gt; id=''navigation''%26gt;
%26gt; %26lt;tr%26gt;
%26gt; %26lt;td width=''165''%26gt; %26lt;br /%26gt;
%26gt; %26lt;br /%26gt;%26lt;/td%26gt;
%26gt; %26lt;/tr%26gt;
%26gt; %26lt;tr%26gt;
%26gt; %26lt;td width=''165''%26gt;%26lt;a href=''javascript:;''
%26gt; class=''navText''%26gt;destinations%26lt;/a%26gt;%26lt;/td%26gt;
%26gt; %26lt;/tr%26gt;
%26gt; %26lt;tr%26gt;
%26gt; %26lt;td width=''165''%26gt;%26lt;a href=''javascript:;''
%26gt; class=''navText''%26gt;airfare%26lt;/a%26gt;%26lt;/td%26gt;
%26gt; %26lt;/tr%26gt;
%26gt; %26lt;tr%26gt;
%26gt; %26lt;td width=''165''%26gt;%26lt;a href=''javascript:;''
%26gt; class=''navText''%26gt;cruises%26lt;/a%26gt;%26lt;/td%26gt;
%26gt; %26lt;/tr%26gt;
%26gt; %26lt;tr%26gt;
%26gt; %26lt;td width=''165''%26gt;%26lt;a href=''javascript:;''
%26gt; class=''navText''%26gt;specials%26lt;/a%26gt;%26lt;/td%26gt;
%26gt; %26lt;/tr%26gt;
%26gt; %26lt;tr%26gt;
%26gt; %26lt;td width=''165''%26gt;%26lt;a href=''javascript:;''
%26gt; class=''navText''%26gt;contact%26lt;/a%26gt;%26lt;/td%26gt;
%26gt; %26lt;/tr%26gt;
%26gt; %26lt;/table%26gt;
%26gt;
%26gt; I guess I don't understand how the ''id'' works to format
the table - it
%26gt; seems
%26gt; cumbersome and I'm not understanding what this is doing
exactly. It was a
%26gt; bit
%26gt; confusing for me to figure out how to change the
navigation from vertical
%26gt; to
%26gt; horizontal and in the process I probably deleted some of
the crucial
%26gt; elements.
%26gt; What I've done is changed all the ''#'' to ''.'' and applied
the classes to
%26gt; the
%26gt; text as needed.
%26gt;
%26gt; Murray - Still haven't got it all straightened out and
may end up starting
%26gt; from scratch using divs instead. The ''client'' in this
case is a web person
%26gt; (back-end I think) and insisted on using ''tables''
because according to her
%26gt; this
%26gt; has less accessibility issues. Bottom line is I should
use what I feel
%26gt; comfortable with and what works for me and the site. Not
only did she want
%26gt; it
%26gt; in ''tables'' but then wanted it set for 600 px wide, with
percentages used
%26gt; for
%26gt; the columns... this project is going to drive me to
drink...
%26gt;
%26gt; Maureen
%26gt;
%26gt; #navigation td
This is a descendent selector - it specifies that the rull
following it
would be applied to all %26lt;td%26gt; tags within a parent
container with ID =
''navigation''. It's quite common to use such selectors.
%26gt; it seems cumbersome
Quite the opposite.
%26gt; What I've done is changed all the ''#'' to ''.'' and applied
the classes to
%26gt; the
%26gt; text as needed.
That's the wrong approach, really.
Does this same approach work for divs? If so, do you know of
a tutorial that covers this topic? I'm willing to give it a try...
but there was something missing and without understanding it better
I will have a difficult time figuring it out.
As always, thanks for your help, Murray!
Maureen
''webmom24'' %26lt;webforumsuser@macromedia.com%26gt; wrote in
message
news:fg3i54$i0q$1@forums.macromedia.com...
%26gt; Yep... I've about had it with these tables. The page is
just not working
%26gt; at all. I'm about ''done''. :(
Maureen,
How about doing a little brushing-up study on CSS and
starting over with a
VERY SIMPLE page you create yourself? I find it much easier
to build my own
pages than to use anybody else's template.
CSS is really pretty straightforward, but you have to take
the time to
understand basic HTML and basic CSS, or it's just going to be
a nightmare.
But by ''take the time'', I mean maybe a couple of hours, which
to me is
preferable to suffering with confusing problems! :-)
Re. tables: My opinion is that, as somewhat of a beginner (or
somewhat
''rusty''), you're better off using tables. If you use as few
of them as
possible per page, and try not to nest them, they are quite
simple to use.
Again, you'll have to take a little time to learn how to use
them.
Although your client is mistaken about tables being ''more
accessible'', I
would also disagree with those who would say that tables for
layout are
necessarily a bad thing. The learning curve is definitely
less steep than
for pure-CSS layouts. If you're having trouble understanding
how classes and
IDs work, you're most definitely not ready for pure-CSS
layouts.
Hope that might help,
--
Patty Ayers | Adobe Community Expert
www.WebDevBiz.com
Free Articles on the Business of Web Development
Web Design Contract, Estimate Request Form, Estimate
Worksheet
--
I would disagree with Patty's usually excellent advice on
this one point -
%26gt; try not to nest them
Actually, nesting tables is GOOD. Merging and splitting cells
is BAD - it
leads to tables that are wired together and very fragile, due
to the
insertion of the dreaded colspan and rowspan attributes.
Instead of merging
cells (horizontally), consider terminating the current table
and stacking a
new one underneath. Instead of splitting cells, consider
nesting a new
table instead. As long as you stay away from the 'span'-itis,
you can nest
till the cows come home....
It does make the code difficult to parse, though (I mean for
humans).
--
Murray --- ICQ 71997575
Adobe Community Expert
(If you *MUST* email me, don't LAUGH when you do so!)
==================
http://www.projectseven.com/go
- DW FAQs, Tutorials %26amp; Resources
http://www.dwfaq.com - DW FAQs,
Tutorials %26amp; Resources
==================
''P@tty Ayers ~ACE''
%26lt;pattyayersTAKETHISOUT@REMOVEgmail.com%26gt; wrote in message
news:fg4uhb$f7b$1@forums.macromedia.com...
%26gt;
%26gt; ''webmom24'' %26lt;webforumsuser@macromedia.com%26gt; wrote in
message
%26gt; news:fg3i54$i0q$1@forums.macromedia.com...
%26gt;%26gt; Yep... I've about had it with these tables. The page
is just not working
%26gt;%26gt; at all. I'm about ''done''. :(
%26gt;
%26gt; Maureen,
%26gt;
%26gt; How about doing a little brushing-up study on CSS and
starting over with a
%26gt; VERY SIMPLE page you create yourself? I find it much
easier to build my
%26gt; own pages than to use anybody else's template.
%26gt;
%26gt; CSS is really pretty straightforward, but you have to
take the time to
%26gt; understand basic HTML and basic CSS, or it's just going
to be a nightmare.
%26gt; But by ''take the time'', I mean maybe a couple of hours,
which to me is
%26gt; preferable to suffering with confusing problems! :-)
%26gt;
%26gt; Re. tables: My opinion is that, as somewhat of a
beginner (or somewhat
%26gt; ''rusty''), you're better off using tables. If you use as
few of them as
%26gt; possible per page, and try not to nest them, they are
quite simple to use.
%26gt; Again, you'll have to take a little time to learn how to
use them.
%26gt;
%26gt; Although your client is mistaken about tables being
''more accessible'', I
%26gt; would also disagree with those who would say that tables
for layout are
%26gt; necessarily a bad thing. The learning curve is
definitely less steep than
%26gt; for pure-CSS layouts. If you're having trouble
understanding how classes
%26gt; and IDs work, you're most definitely not ready for
pure-CSS layouts.
%26gt;
%26gt; Hope that might help,
%26gt;
%26gt;
%26gt; --
%26gt; Patty Ayers | Adobe Community Expert
%26gt; www.WebDevBiz.com
%26gt; Free Articles on the Business of Web Development
%26gt; Web Design Contract, Estimate Request Form, Estimate
Worksheet
%26gt; --
%26gt;
%26gt;
I will take your advice, Patty, and read through the sections
on tables and CSS. When I was designing primarily using tables I
was using little if any CSS. Because I haven't been designing on a
regular basis lately, I have to do a bit of re-learning each time I
do have a project. (Most of what I do at this point is maintenance
of sites, both that I have and haven't created.) I'm thinking that
I need to find a way to create projects to keep me have something
to design just so I can keep my skills sharp, keep learning, etc.
I'm not great at ''making up'' projects though so I'll have to do
some thinking on how I would accomplish this LOL (that is without
giving away my services).
Interesting comment re being okay to nest tables... I had
always heard that was a big NO NO too. But I can see that if you do
not do either this or use lots of separate tables, it would be very
difficult to avoid using column/row spans.
I'm going to go back to the drawing board on this and start
constructing from scratch - not sure which structure I'll use yet
but it's bound to be better than trying to figure out how to
detangle the mess I have now.
Thanks for the help!
Maureen
''Murray *ACE*'' %26lt;forums@HAHAgreat-web-sights.com%26gt; wrote
in message
news:fg5397$l9b$1@forums.macromedia.com...
%26gt;I would disagree with Patty's usually excellent advice on
this one point -
%26gt;
%26gt;%26gt; try not to nest them
%26gt;
%26gt; Actually, nesting tables is GOOD. Merging and splitting
cells is BAD -
We actually mostly agree, Murray. I consider merging or
splitting cells as a
bad practice not to be done at all. Re. nesting of tables, I
can't see
saying that it's ''good'', because the code is a real pain in
the *** to deal
with, thus my advice to avoid it.
--
Patty Ayers | Adobe Community Expert
www.WebDevBiz.com
Free Articles on the Business of Web Development
Web Design Contract, Estimate Request Form, Estimate
Worksheet
--
''webmom24'' %26lt;webforumsuser@macromedia.com%26gt; wrote in
message
news:fg57jf$qua$1@forums.macromedia.com...
%26gt;I will take your advice, Patty, and read through the
sections on tables and
%26gt; CSS. When I was designing primarily using tables I was
using little if any
%26gt; CSS.
%26gt; Because I haven't been designing on a regular basis
lately, I have to do a
%26gt; bit
%26gt; of re-learning each time I do have a project. (Most of
what I do at this
%26gt; point
%26gt; is maintenance of sites, both that I have and haven't
created.) I'm
%26gt; thinking
%26gt; that I need to find a way to create projects to keep me
have something to
%26gt; design just so I can keep my skills sharp, keep
learning, etc. I'm not
%26gt; great at
%26gt; ''making up'' projects though so I'll have to do some
thinking on how I
%26gt; would
%26gt; accomplish this LOL (that is without giving away my
services).
%26gt;
%26gt; Interesting comment re being okay to nest tables... I
had always heard
%26gt; that
%26gt; was a big NO NO too. But I can see that if you do not do
either this or
%26gt; use
%26gt; lots of separate tables, it would be very difficult to
avoid using
%26gt; column/row
%26gt; spans.
%26gt;
%26gt; I'm going to go back to the drawing board on this and
start constructing
%26gt; from
%26gt; scratch - not sure which structure I'll use yet but it's
bound to be
%26gt; better
%26gt; than trying to figure out how to detangle the mess I
have now.
%26gt;
%26gt; Thanks for the help!
You're very welcome. I wouldn't call nesting tables ''a big
no-no'' - it just
makes the code very hard for you to deal with. It's hard to
figure out
*which* %26lt;td%26gt; belongs to what. I like ''stacked'' tables.
You're very welcome, and good luck.
--
Patty Ayers | Adobe Community Expert
www.WebDevBiz.com
Free Articles on the Business of Web Development
Web Design Contract, Estimate Request Form, Estimate
Worksheet
--
Subscribe to:
Post Comments
(Atom)
No comments:
Post a Comment