Dreamweaver - CSS Positioning Problem?

Author

CSS Positioning Problem?

Tony Vee

2006-02-12, 6:35 pm

I hate to admit it but I have been using tables for web page layouts for years.
Trying to convert over to using CSS through DreamWeaver 8.

Started working on a layout for a new site within the Layout mode of DW 8.

I?m trying to position a vertical gray line at Left 153px. And Top 23px in my
layout.

Surprisingly, it is showing up fine on IE (Win and Mac).

However, the line is placed elsewhere in Firefox (Win & Mac) and Safari.

Notice that gray vertical line is almost flush left. I want it a pixel or two
to the left of the teal nav bar.

What am I doing wrong?

Thanks,
Tony V

http://www.becon.tv/becon_site_2006/main_nav_bar.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>BECON Main Nav Bar</title>
<style type="text/css">

.hovermenu ul{
font: bold 13px Helvetica, sans-serif;
padding-left: 0;
margin-left: 0;
height: 20px;
}

.hovermenu ul li{
list-style: none;
display: inline;
}

.hovermenu ul li a{
padding: 4px 0.5em;
text-decoration: none;
float: left;
color: white;
background-color: #009999;
border: 0px solid #009999;
}

.hovermenu ul li a:hover{
background-color: #000000;
border-style: outset;
}

html>body .hovermenu ul li a:active{ /* Apply mousedown effect only to NON IE
browsers */
border-style: inset;
}
#sbbc_logo {
position:absolute;
left:34px;
top:16px;
width:101px;
height:92px;
z-index:1;
visibility: visible;
}
#gray_bar_horiz {
position:absolute;
left:23px;
top:109px;
width:680px;
height:2px;
z-index:2;
visibility: visible;
}
#main_navbar {
position:absolute;
left:159px;
top:111px;
width:545px;
height:21px;
z-index:3;
visibility: visible;
}
#gray_bar_vert {
position:absolute;
left:153px;
top:23px;
width:4px;
height:437px;
z-index:4;
visibility: visible;
</style>

</head>

<body>

<div id="sbbc_logo"><img src="images/sbbc_logo.gif" width="100" height="89"
/></div>
<div id="gray_bar_horiz"><img src="images/gray_bar_horiz.gif" width="680"
height="1" /></div>

<div id="main_navbar">
<div class="hovermenu">
<ul>
<li><a href="about_becon.html">About BECON</a></li>
<li><a href="community.html">Community</a></li>
<li><a href="distance_learning.html">Distance Learning</a></li>
<li><a href="press_room.html">Press Room</a></li>
<li><a href="programs.html">Programs</a></li>
<li><a href="services.html">Services</a></li>
</ul>
</div>
</div>
<div id="gray_bar_vert"><img src="images/gray_bar_vert.gif" width="1"
height="430" /></div>
</body>
</html>

Murray *TMM*

2006-02-12, 6:37 pm

For starters, try changing this -

visibility: visible;
</style>

to this -

visibility: visible;
}
</style>

Then I would suggest you get a triple mocha latte with a dram of Irish, and
think about your layout. This one is WAY over-engineered. While you are
doing it, please forget everything you knew about having the ability to
position with position:absolute. This is the single largest impediment (in
my opinion) to people learning good CSS layout methods.

What is it you want to accomplish here?

--
Murray --- ICQ 71997575
Team Macromedia Volunteer for Dreamweaver
(If you *MUST* email me, don't LAUGH when you do so!)
==================
http://www.dreamweavermx-templates.com - Template Triage!
http://www.projectseven.com/go - DW FAQs, Tutorials & Resources
http://www.dwfaq.com - DW FAQs, Tutorials & Resources
http://www.macromedia.com/support/search/ - Macromedia (MM) Technotes
==================

"Tony Vee" <webforumsuser@macromedia.com> wrote in message
news:dseic9$ci3$1@forums.macromedia.com...
>I hate to admit it but I have been using tables for web page layouts for
>years.
> Trying to convert over to using CSS through DreamWeaver 8.
>
> Started working on a layout for a new site within the Layout mode of DW 8.
>
> I?m trying to position a vertical gray line at Left 153px. And Top 23px in
> my
> layout.
>
> Surprisingly, it is showing up fine on IE (Win and Mac).
>
> However, the line is placed elsewhere in Firefox (Win & Mac) and Safari.
>
> Notice that gray vertical line is almost flush left. I want it a pixel or
> two
> to the left of the teal nav bar.
>
> What am I doing wrong?
>
> Thanks,
> Tony V
>
> http://www.becon.tv/becon_site_2006/main_nav_bar.html
>
>
> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
> "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
> <html xmlns="http://www.w3.org/1999/xhtml">
> <head>
> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
> <title>BECON Main Nav Bar</title>
> <style type="text/css">
>
> .hovermenu ul{
> font: bold 13px Helvetica, sans-serif;
> padding-left: 0;
> margin-left: 0;
> height: 20px;
> }
>
> .hovermenu ul li{
> list-style: none;
> display: inline;
> }
>
> .hovermenu ul li a{
> padding: 4px 0.5em;
> text-decoration: none;
> float: left;
> color: white;
> background-color: #009999;
> border: 0px solid #009999;
> }
>
> .hovermenu ul li a:hover{
> background-color: #000000;
> border-style: outset;
> }
>
> html>body .hovermenu ul li a:active{ /* Apply mousedown effect only to NON
> IE
> browsers */
> border-style: inset;
> }
> #sbbc_logo {
> position:absolute;
> left:34px;
> top:16px;
> width:101px;
> height:92px;
> z-index:1;
> visibility: visible;
> }
> #gray_bar_horiz {
> position:absolute;
> left:23px;
> top:109px;
> width:680px;
> height:2px;
> z-index:2;
> visibility: visible;
> }
> #main_navbar {
> position:absolute;
> left:159px;
> top:111px;
> width:545px;
> height:21px;
> z-index:3;
> visibility: visible;
> }
> #gray_bar_vert {
> position:absolute;
> left:153px;
> top:23px;
> width:4px;
> height:437px;
> z-index:4;
> visibility: visible;
> </style>
>
> </head>
>
> <body>
>
> <div id="sbbc_logo"><img src="images/sbbc_logo.gif" width="100"
> height="89"
> /></div>
> <div id="gray_bar_horiz"><img src="images/gray_bar_horiz.gif" width="680"
> height="1" /></div>
>
>
> <div id="main_navbar">
> <div class="hovermenu">
> <ul>
> <li><a href="about_becon.html">About BECON</a></li>
> <li><a href="community.html">Community</a></li>
> <li><a href="distance_learning.html">Distance Learning</a></li>
> <li><a href="press_room.html">Press Room</a></li>
> <li><a href="programs.html">Programs</a></li>
> <li><a href="services.html">Services</a></li>
> </ul>
> </div>
> </div>
> <div id="gray_bar_vert"><img src="images/gray_bar_vert.gif" width="1"
> height="430" /></div>
> </body>
> </html>
>

joeq

2006-02-12, 6:37 pm

Hi Murray,

Could you please elaborate on this:

"While you are doing it, please forget everything you knew about having the
ability to
position with position:absolute. This is the single largest impediment (in
my opinion) to people learning good CSS layout methods."

Thanks,

Murray *TMM*

2006-02-12, 6:37 pm

It is a common misconception that one can transition from tables to CSS by
merely throwing absolutely positioned divs everywhere. This is entirely
incorrect.

I would go so far as to say that those who have studied and mastered the
technique of CSS layouts rarely use position:absolute at all. CSS layouts
are about ever so much more than absolute positioning.

So - my recommendation was to forget that layers even exist. You don't need
them.

--
Murray --- ICQ 71997575
Team Macromedia Volunteer for Dreamweaver
(If you *MUST* email me, don't LAUGH when you do so!)
==================
http://www.dreamweavermx-templates.com - Template Triage!
http://www.projectseven.com/go - DW FAQs, Tutorials & Resources
http://www.dwfaq.com - DW FAQs, Tutorials & Resources
http://www.macromedia.com/support/search/ - Macromedia (MM) Technotes
==================

"joeq" <webforumsuser@macromedia.com> wrote in message
news:dsfgag$mlb$1@forums.macromedia.com...
> Hi Murray,
>
> Could you please elaborate on this:
>
> "While you are doing it, please forget everything you knew about having
> the
> ability to
> position with position:absolute. This is the single largest impediment (in
> my opinion) to people learning good CSS layout methods."
>
> Thanks,
>

Tim G

2006-02-12, 6:39 pm

Here's an intro to the various ways you can position without tables:

http://www.pactumgroup.com/tutorials/css-p.php

A link to an example page of Murray's is at the bottom.

tim

Tony Vee

2006-02-12, 6:39 pm

Tony Vee

2006-02-12, 6:39 pm

It is a common misconception that one can transition from tables to CSS by
merely throwing absolutely positioned divs everywhere. This is entirely
incorrect.

Well, so much for the videos I've been doing on lynda.com.

I would go so far as to say that those who have studied and mastered the
technique of CSS layouts rarely use position:absolute at all. CSS layouts
are about ever so much more than absolute positioning.

Okay, point taken.

So - my recommendation was to forget that layers even exist. You don't need
them.

Okay, thanks again...

Question...do you code by hand or do you do it in Dreamweaver?

Tony

Tony Vee

2006-02-12, 6:39 pm

For starters, try changing this -

visibility: visible;
</style>

to this -

visibility: visible;
}
</style>

Murray, wonderful it worked!! One more thing (for the time being), that teal
nav bar is not playing nice. I have the horizontal gray line at top 109px and
I'm trying to place the teal nav bar right under it at 110px or 111px. Any
ideas why there is a space in my way?

Tony

Tony Vee

2006-02-12, 6:39 pm

Originally posted by: Newsgroup User
Here's an intro to the various ways you can position without tables:

http://www.pactumgroup.com/tutorials/css-p.php

A link to an example page of Murray's is at the bottom.

tim

Tim,

Thanks I've bookmarked the site and I will return to it very soon. I am eager
to learn and start setting-up sites in CSS.

Tony

Win Day

2006-02-12, 6:39 pm

On Fri, 10 Feb 2006 04:20:20 +0000 (UTC), "Tony Vee"
<webforumsuser@macromedia.com> wrote:

>
> Question...do you code by hand or do you do it in Dreamweaver?
>

Yes.

They're not mutually exclusive, you know.

I code in Dreamweaver; I use Code View probably 99.5% of the time and
split view the other 0.5% of the time.

(And I have no idea how to draw a layer or a layout table; I've never
used either.)

Win
--
Win Day, Wild Rose Websites
http://www.wildrosewebsites.com
winday@NOSPAMwildrosewebsites.com
Skype winifredday

Gary White

2006-02-12, 6:39 pm

On Fri, 10 Feb 2006 04:36:11 +0000 (UTC), "Tony Vee"
<webforumsuser@macromedia.com> wrote:

> Murray, wonderful it worked!! One more thing (for the time being), that teal
>nav bar is not playing nice. I have the horizontal gray line at top 109px and
>I'm trying to place the teal nav bar right under it at 110px or 111px. Any
>ideas why there is a space in my way?

It's because of the top margin/padding on the unordered list in your nav
bar. Change this:

..hovermenu ul{
font: bold 13px Helvetica, sans-serif;
padding-left: 0;
margin-left: 0;
height: 20px;
}

To this:

..hovermenu ul{
font: bold 13px Helvetica, sans-serif;
padding: 0;
margin: 0;
height: 20px;
}

I will add to the opinion of others. Using "layers" as a primary layout
methodology will cause you problems. The sooner you abandon them, the
saner you will stay.

Gary