Dreamweaver - DW MX, CSS Nav bar runs over template content

Author

DW MX, CSS Nav bar runs over template content

pbmax

2005-03-10, 6:34 pm

Hi,

Background:
I have created a simple style sheet with a banner and nav bar at the top, with
a content box and a sidebar text box below.

I need to create a DW template so the other teachers at my school can create
their own pages. However, the formatting of the nav bar runs over the content
area (vertical instead of Hor.) and the sidbar appears in the banner.

Typing content into the editable regions creates a page that looks fine in my
browser (moz1.7.3) but the user interface is screwy. None of the style
formatting appears in the template design view either (text/ bkg colors etc)

Question:
Is there a way to change the display settings so it is more user-friendly, or
do i need to make some code changes?
thanks
pb

------------------------------------
CSS
-------------------------------------
body {
margin: 0px;
padding: 0px;

}

div#hdr {
width: 100%;
left: 0px;
top: 0px;
position: absolute;
margin: 0px;

}
div#bnr {
background-color: #FFFFFF;
height: 150px;
background-image: url(../pics/bannerbkg.jpg);
background-repeat: repeat-x;
}

div#bnr p {
font-family: Arial, Helvetica, sans-serif;
font-size: 105%;
font-weight: bold;
padding-left: 205px;
padding-top: 20px;
color: #006699;
}

img#title {
width: 168px;
left: 25px;
top: 15px;
position: absolute;
height: 128px;
}

div#content {
line-height: 110%;
position: absolute;
left: 7%;
top: 220px;
padding-right: 20%;
font-weight: normal;
font-family: Arial, Helvetica, sans-serif;

}

div#content h1 {
font-size: 140%;
font-weight: bold;
left: 5%;
color: #006699;
}

div#content h2 {
font-size: 110%;
font-weight: bold;
color: #006699;
}

div#content a:link {
color: #00cc00;
text-decoration: none;
}

div#content a:visited {
color: #006600;
text-decoration: none;
}

div#content a:hover {
color: #006699;
text-decoration: underline;

}

div#content a:active {
color: #006699;
text-decoration: none;
}

div#nav {
font-size: 80%;
color: #FFFFFF;
background-color: #006699;
border: 1px solid #000000;
clear: both;
font-family: Arial, Helvetica, sans-serif;
margin: 0px;
height: 20px;

}

div#nav ul {
list-style-type: none;
margin-top: 0px;
margin-left: 3%;
padding-top: 2px;
margin-right: 0px;
margin-bottom: 0px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
}

div#nav li {
!important;
display: inline;
border-right-width: 1px;
border-right-style: solid;
border-right-color: #000000;
padding-right: 3px;
padding-left: 2px;
}

div#nav a:link {
color: #FFFFFF;
text-decoration: none;
background-color: #006699;
}
div#nav a:visited {
color: #CCCCCC;
text-decoration: none;
}

div#nav a:hover {
color: #00ccff;
}

div#nav a:active {
color: #000000;
text-decoration: none;
}

.lastmenu {
border: none;
!important;
}

div#sidebar {
position: absolute;
color: white;
width: 15%;
top: 230px;
height: auto;
right: 3%;
padding-left: 2px;
background-color: #006699;

border-top-width: 1px;
border-right-width: 2px;
border-bottom-width: 2px;
border-left-width: 1px;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-top-color: #999999;
border-right-color: #333333;
border-bottom-color: #333333;
border-left-color: #999999;

}

div#sidebar h1 {
font-family: Arial, Helvetica, sans-serif;
font-size: 100%;
color: #ffffff;
padding-left: 3px;

}
div#sidebar ul {
list-style-type: none;
font-family: Arial, Helvetica, sans-serif;
font-size: 90%;
}
div#sidebar li {
color: #FFFFFF;
}

div#sidebar a:link {
text-decoration:none;
color: #FFFFFF;
}
div#sidebar a:visited {
text-decoration:none;
color: #FFFFFF;
}

div#sidebar a:hover {
text-decoration: none;
background-color: #FFFFFF;
color: #006699;

}

div#sidebar a:active {
text-decoration: none;
}

-------------------------------------------
Template
------------------------------------------

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>


<title>Nittany Valley Charter School</title>
<meta http-equiv="Content-Type"
content="text/html; charset=iso-8859-1">
<link href="../blank.css" rel="stylesheet" media="screen" type="text/css">
<link href="../print.css" rel="stylesheet" type="text/css" media="print" >


</head>

<body>
<div id="hdr">
<div id="bnr"><img id="title" src="../pics/logoSmall.gif" width="169"
height="128" alt="NVCS shooting starLogoSmall (4K)" />
<p>Nittany Valley Charter School<br>
1612 Norma Street State College, PA 16801<br>
Phone 814-867-3842 Fax 814-231-0795<br>
office@nvcs.org </p>
</div>

<div id="nav">
<ul>
<li><a href="../index.html">Home</a></li>
<li><a href="../classes.html">Class Pages</a></li>
<li><a href="../about.html">About</a></li>
<li><a href="../contact.html">Contact</a></li>
<li><a href="../admission.html">Admission</a></li>
<li><a href="../staff.html">Our Staff</a></li>
<li><a href="../family.html">Policies</a></li>
<li><a href="../calendar.html">Calendar</a></li>
<li><a href="../newsletter.html">Newsletter</a></li>
<li class="lastmenu"><a href="../admin.html">Administration</a></li>
</ul>
</div>
</div>


<div id="content">
Content
</div>



<div id="sidebar">Sidebar

</div>


</body>
</html>

Murray *TMM*

2005-03-10, 11:18 pm

Template markup is not a layout device. If your basic page is failing to
contain the contents it couldn't possibly have anything to do with
templates - you would have the same problem on the page if the template
markup were removed. Your best bet would be to post a link to the page and
have someone take a look at the code.

--
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
==================

"pbmax" <webforumsuser@macromedia.com> wrote in message
news:d0q8ag$q19$1@forums.macromedia.com...
> Hi,
>
> Background:
> I have created a simple style sheet with a banner and nav bar at the top,
> with
> a content box and a sidebar text box below.
>
> I need to create a DW template so the other teachers at my school can
> create
> their own pages. However, the formatting of the nav bar runs over the
> content
> area (vertical instead of Hor.) and the sidbar appears in the banner.
>
> Typing content into the editable regions creates a page that looks fine in
> my
> browser (moz1.7.3) but the user interface is screwy. None of the style
> formatting appears in the template design view either (text/ bkg colors
> etc)
>
> Question:
> Is there a way to change the display settings so it is more user-friendly,
> or
> do i need to make some code changes?
> thanks
> pb
>
> ------------------------------------
> CSS
> -------------------------------------
> body {
> margin: 0px;
> padding: 0px;
>
> }
>
> div#hdr {
> width: 100%;
> left: 0px;
> top: 0px;
> position: absolute;
> margin: 0px;
>
> }
> div#bnr {
> background-color: #FFFFFF;
> height: 150px;
> background-image: url(../pics/bannerbkg.jpg);
> background-repeat: repeat-x;
> }
>
> div#bnr p {
> font-family: Arial, Helvetica, sans-serif;
> font-size: 105%;
> font-weight: bold;
> padding-left: 205px;
> padding-top: 20px;
> color: #006699;
> }
>
>
>
> img#title {
> width: 168px;
> left: 25px;
> top: 15px;
> position: absolute;
> height: 128px;
> }
>
> div#content {
> line-height: 110%;
> position: absolute;
> left: 7%;
> top: 220px;
> padding-right: 20%;
> font-weight: normal;
> font-family: Arial, Helvetica, sans-serif;
>
> }
>
>
> div#content h1 {
> font-size: 140%;
> font-weight: bold;
> left: 5%;
> color: #006699;
> }
>
> div#content h2 {
> font-size: 110%;
> font-weight: bold;
> color: #006699;
> }
>
> div#content a:link {
> color: #00cc00;
> text-decoration: none;
> }
>
> div#content a:visited {
> color: #006600;
> text-decoration: none;
> }
>
> div#content a:hover {
> color: #006699;
> text-decoration: underline;
>
> }
>
> div#content a:active {
> color: #006699;
> text-decoration: none;
> }
>
> div#nav {
> font-size: 80%;
> color: #FFFFFF;
> background-color: #006699;
> border: 1px solid #000000;
> clear: both;
> font-family: Arial, Helvetica, sans-serif;
> margin: 0px;
> height: 20px;
>
> }
>
> div#nav ul {
> list-style-type: none;
> margin-top: 0px;
> margin-left: 3%;
> padding-top: 2px;
> margin-right: 0px;
> margin-bottom: 0px;
> padding-right: 0px;
> padding-bottom: 0px;
> padding-left: 0px;
> }
>
>
> div#nav li {
> !important;
> display: inline;
> border-right-width: 1px;
> border-right-style: solid;
> border-right-color: #000000;
> padding-right: 3px;
> padding-left: 2px;
> }
>
> div#nav a:link {
> color: #FFFFFF;
> text-decoration: none;
> background-color: #006699;
> }
> div#nav a:visited {
> color: #CCCCCC;
> text-decoration: none;
> }
>
> div#nav a:hover {
> color: #00ccff;
> }
>
> div#nav a:active {
> color: #000000;
> text-decoration: none;
> }
>
> .lastmenu {
> border: none;
> !important;
> }
>
>
> div#sidebar {
> position: absolute;
> color: white;
> width: 15%;
> top: 230px;
> height: auto;
> right: 3%;
> padding-left: 2px;
> background-color: #006699;
>
> border-top-width: 1px;
> border-right-width: 2px;
> border-bottom-width: 2px;
> border-left-width: 1px;
> border-top-style: solid;
> border-right-style: solid;
> border-bottom-style: solid;
> border-left-style: solid;
> border-top-color: #999999;
> border-right-color: #333333;
> border-bottom-color: #333333;
> border-left-color: #999999;
>
>
> }
>
> div#sidebar h1 {
> font-family: Arial, Helvetica, sans-serif;
> font-size: 100%;
> color: #ffffff;
> padding-left: 3px;
>
>
> }
> div#sidebar ul {
> list-style-type: none;
> font-family: Arial, Helvetica, sans-serif;
> font-size: 90%;
> }
> div#sidebar li {
> color: #FFFFFF;
> }
>
> div#sidebar a:link {
> text-decoration:none;
> color: #FFFFFF;
> }
> div#sidebar a:visited {
> text-decoration:none;
> color: #FFFFFF;
> }
>
> div#sidebar a:hover {
> text-decoration: none;
> background-color: #FFFFFF;
> color: #006699;
>
> }
>
> div#sidebar a:active {
> text-decoration: none;
> }
>
> -------------------------------------------
> Template
> ------------------------------------------
>
> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
> <html>
> <head>
>
> 
> <title>Nittany Valley Charter School</title>
> <meta http-equiv="Content-Type"
> content="text/html; charset=iso-8859-1">
> <link href="../blank.css" rel="stylesheet" media="screen" type="text/css">
> <link href="../print.css" rel="stylesheet" type="text/css" media="print" >
>
> 
> </head>
>
> <body>
> <div id="hdr">
> <div id="bnr"><img id="title" src="../pics/logoSmall.gif" width="169"
> height="128" alt="NVCS shooting starLogoSmall (4K)" />
> <p>Nittany Valley Charter School<br>
> 1612 Norma Street State College, PA 16801<br>
> Phone 814-867-3842 Fax 814-231-0795<br>
> office@nvcs.org </p>
> </div>
>
>
> <div id="nav">
> <ul>
> <li><a href="../index.html">Home</a></li>
> <li><a href="../classes.html">Class Pages</a></li>
> <li><a href="../about.html">About</a></li>
> <li><a href="../contact.html">Contact</a></li>
> <li><a href="../admission.html">Admission</a></li>
> <li><a href="../staff.html">Our Staff</a></li>
> <li><a href="../family.html">Policies</a></li>
> <li><a href="../calendar.html">Calendar</a></li>
> <li><a href="../newsletter.html">Newsletter</a></li>
> <li class="lastmenu"><a href="../admin.html">Administration</a></li>
> </ul>
> </div>
> </div>
>
> 
> <div id="content">
> Content
> </div>
> 
>
> 
> <div id="sidebar">Sidebar
>
> </div>
> 
>
>
>
>
> </body>
> </html>
>