Table-less CSS design looks jumbled up in design view frontpage

F

fproad

I have always separated content from design in frontpage for our university,
and then asked content editors to edit content so they wouldn't have to deal
with the design. We now have a directive from the central campus to use
templates that are all CSS, which is great, but I may still end up haveing to
create separate content pages, as the design view of both frontpage and
expression designer shows the primary content div overlaping the left nav div
and then the secondary content is on top of that, a jumble of words on a busy
background. There has got to be a way to make it easier to edit, such as
instructing the program not to show the design in design view, or temporarily
turning of divs. Does anyone have any suggestions to help avoid creating a
design page and then another content include page? let me know if you need
the code..

Would greatly appreciate any pointers
 
E

eclipsme

fproad said:
I have always separated content from design in frontpage for our university,
and then asked content editors to edit content so they wouldn't have to deal
with the design. We now have a directive from the central campus to use
templates that are all CSS, which is great, but I may still end up haveing to
create separate content pages, as the design view of both frontpage and
expression designer shows the primary content div overlaping the left nav div
and then the secondary content is on top of that, a jumble of words on a busy
background. There has got to be a way to make it easier to edit, such as
instructing the program not to show the design in design view, or temporarily
turning of divs. Does anyone have any suggestions to help avoid creating a
design page and then another content include page? let me know if you need
the code..

Would greatly appreciate any pointers

Would a different (simpler) design time style sheet work for this?

Harvey
 
F

fproad

Here is the HTML file, and the style sheet code is below..Thansk for looking
at this..


<!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" />
<meta name="keywords" content="WSU, Washington State, Washington State
University " />

<title>WSU core</title>

<!-- favorites ico -->
<link rel="shortcut icon" href="http://wsu.edu/favicon.ICO" />

<!-- replace the key below - replace the key below - replace the key below-->
<link href="http://designer.wsu.edu/template/css.aspx?key=11f14af0axx080"
type="text/css" rel="stylesheet" />
<!-- replace the key above -->

<!-- print style sheet -->
<link href="http://www.wsu.edu/navigatewsu/gen2/print.css" rel="stylesheet"
type="text/css" media="print"/>

</head>
<body>

<!--Beginning of the WSU Identifier Zone. Refer to www.wsu.edu/identity/ for
more information. -->
<noscript><div id='logo'><a href='http://www.wsu.edu'><img
src='http://www.wsu.edu/navigatewsu/gen2/logo2.gif' alt="WSU
Logo"/></a></div><div id='globalnav'><ul><li><a
href="http://www.wsu.edu">Washington State
University</a></li></ul></div></noscript>
<script language="Javascript"
src="http://www.wsu.edu/navigatewsu/gen2/wsuidentifier.js"
type="text/javascript"></script>
<!--<script language="Javascript"
src="http://www.wsu.edu/navigatewsu/gen2/smoothscroll.js"
type="text/javascript"></script>-->
<script language="javascript" type="text/javascript">
var strHeader; strHeader = getHeader(); document.write(strHeader);
</script>
<!--End of the WSU Identifier Zone. -->

<div id = "idwrapper">
<div id="siteID">
<h2>Core HTML</h2>
<h1><strong>Starter File </strong> v1.4</h1>
</div>

<div id="toolbar">
<ul>
<li><a href="#">Tool One </a> </li>
<li><a href="#">Tool Two </a></li>
<li><a href="#">Tool Three</a></li>
</ul>
</div>
</div>

<div id="content">
<div id="nav">
<div id="featured">
<ul>
<li><a href="#">Featured Link 1 </a></li>
<li><a href="#">Links here are optional </a></li>
<li><a href="#">Have 0-3 Featured Links </a></li>
</ul>
</div>
<ul>
<li><a href="#" class="parentpath">Home</a><a href="#"
class="parentpath">Level One</a><a href="#" class="navparentpath">Level one
</a>
<ul>
<li><a href="#" class="navparentpath">Level Two </a>
<ul>
<li><a href="#">Level Three</a></li>
<li><a href="#" class="navcurrentpage">Current Page </a></li>
</ul>
</li>
<li><a href="#">Level Two </a></li>
<li><a href="#">Level Two </a></li>
</ul>
</li>
<li><a href="#">Level One </a></li>
<li><a href="#">Level One </a></li>
<li><a href="#">Level One </a></li>
</ul>

</div>

<div id="main">
<h1>Heading using the h1tag</h1>
<p>At vero eos et accusamus et iusto odio dignissimos ducimus qui
blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et
quas molestias excepturi sint occaecati cupiditate non provident, similique
sunt in culpa qui officia deserunt mollitia animi, id est laborum et
dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam
libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit
quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda
est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis
debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae
sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente
delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut
perferendis doloribus asperiores repellat."</p>
<h4>Sub Head Using the h4 Tags </h4>
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem
accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab
illo inventore veritatis et quasi architecto beatae vitae dicta sunt
explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit
aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem
sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit
amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora
incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad
minima veniam, quis nostrum exercitationem ullam corporis suscipit
laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum
iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae
consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla
pariatur</p>
<h3>Heading Using the h3 Tags </h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex
ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id
est laborum.</p>
<h3> </h3>
</div>

<div id="secondary">
<h2>Secondary content using h2 tag. </h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex
ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id
est laborum.</p>
<p> </p>
</div>

<h1>Life is good at WSU. </h1>
<p>Secondary content can be almost anything. If you are not using this
region delete all the content that is in between the div tags with the id
="additional".</p>
<p>A unique richness of students, faculty, location, activities, and
organizations creates a full, lively student life at the University. This
section gives you the insider's view on student life and a sampling of the
opportunities here.</p>
<h4>"Glimpses." Students talk about life at WSU </h4>
<p>These <a href="student-blog/index.html">brief posts</a> are written by
WSU students to give you a personal look through their window on campus
life.</p>
<p> </p>


<div id="localfooter">
<a href="#">Department or office </a>, PO Box 640000, Washington State
University, Pullman WA 99164-0000, 509-335-0000, <a href="mailto:#">Contact
Us</a>
</div>
</div>



<!--Beginning of the WSU Global Footer Zone. Refer to www.wsu.edu/identity/
for more information. -->
<noscript> <div id="wsufooter">Copyright © Board of Regents, <a
href="http://www.wsu.edu">Washington State University</a> </div>
</noscript>
<script language="javascript" type="text/javascript">var strFooter;strFooter
= getFooter();document.write(strFooter);</script>
<!--End of the WSU Global Footer Zone. -->


</body>
</html>



and the CSS:




body {
font-family: Arial, Helvetica, sans-serif;
background: url(http://www.wsu.edu/designer/backgrounds/bg-9.jpg) repeat-x
760px 0px fixed #fff;
}
body, #globalnav ul,#nav #featured, #toolbar p, form
{
margin: 0px;
padding: 0px;
}
a {
color: #000;
text-decoration: none;
}
/* -- LOGO ------------------------*/
#logo {


position: absolute;
z-index: 5;
border-top: 3px solid #9e1b34;
border-right: 1px solid #606a74;
padding:0px;
margin: 0px;
margin-left: -5px;
height:117px;
width:149px;
padding-left:5px;

background:no-repeat #ffffff;
background-color:#ffffff;
background-image: none;
}
#logo img{
border: none;
margin: 0px;
padding: 0px;
padding-top:10px;
}
#nav #featured {
margin: 0px 0px 10px;
padding: 0px;
font-weight: bold;
}
/* -- GLOBAL NAV BAR --------------*/
#globalnav {
font-size: x-small;
font-weight: bold;
margin-left:25px;
height: 19px;
line-height: 19px;
background-color: #888f97;
border-top: 3px solid #9e1b34;
border-bottom: 1px solid #606a74;
}
#globalnav ul {
list-style-image: none;
display: block;
width: 730px;
text-align: right;
}
#globalnav li {
display: inline;
list-style-image: none;
padding-left: 20px;
}

#globalnav a:hover {
color: #b7bcc0;
}
#globalnav a {
color: #fff;
}
#globalnav #alert a {
color: #fcb100;
}
#globalnav #alert a:hover {
color: #b7bcc0;
}
#globalnav #alert {
display: inline;
}
/* -- SITE ID REGION ---------------*/
#siteID {
height: 74px;
background: #db001d;

background-position: 150px 0px;
font-family: "Lucida Sans", Arial, sans-serif;
border-bottom: 3px solid #fcb100;
color: #fff;
}
#siteID h2 {
font-weight: normal;
font-size: small;
padding: 16px 0px 0px 170px;
margin: 0px;
width: 550px;

}
#siteID h1 {
padding: 0px 0px 0px 170px;
font-size: 1.65em;
font-weight: bold;
letter-spacing: -0.05em;
width: 550px;
margin: 0px;
}
/* -- TOOLBAR ----------------------*/

#toolbar {
background-color: #e7e9ea;
width: 585px;
padding-left:160px;
text-align: right;
height: 20px;
font-size: x-small;
color: #606a74;
line-height: 20px;
font-weight: bold;
padding-right: 15px;
}
#toolbar ul {
display: inline;
list-style-image: none;
}
#toolbar li {
display: inline;
padding: 0px 5px 0px 15px;
}
#toolbar a {
color: #606a74;
}
#toolbar a:hover, #localfooter a:hover{
color: #9e1b34;
}
#toolbar .toolbargreeting {
float: left;
padding-left: 15px;
}

/* -- NAVIGATION ------------------*/
#nav {
width: 149px;
float: left;

font-family: Arial, Helvetica, sans-serif;
font-size: 0.7em;
font-weight: bold;
margin-bottom: -32767px;
padding-bottom: 32767px;
border-right: 1px solid #606a74;
background-color: #606a74;
border-top-width: 1px;
border-top-style: solid;
border-top-color: #606a74;

}
#nav li {
margin: 0px;
padding-top: 0px;
font-weight: bold;
}

#nav ul ul {
border-left: 4px solid #888f97;
font-weight: normal;
padding-top: 0px;
padding-bottom: 0px;
}
#nav ul ul ul {
border-left-style: none;
padding-left: 0px;
}

#nav ul {
margin: 0px;
list-style-type: none;
display: block;
padding: 0px 0px 15px;
}
#nav a {
display: block;
height: 100%;
color:#fff;
padding: 4px 0px 4px 16px;
}
#nav ul ul a{
font-weight: normal;
padding: 0px 0px 3px 22px;
}
#nav ul ul ul a{
padding-left: 36px;
}
#nav a:hover{
color: #fcb100;
}
#nav ul .navparentpath{
padding-left: 12px;
border-left: 4px solid #888f97;
color: #fcb100;

}
#nav ul ul .navparentpath{
border-left-style: none;
padding-left: 26px;
color: #fcb100;
}
#nav ul ul ul .navparentpath{
padding-left: 46px;
color: #fcb100;
}
#nav .navcurrentpage{
padding-top:3px;
padding-bottom:3px;
background-color: #888f97;
color: #fff
}
#nav a.navcurrentpage:hover {
color: #fff
}
#nav .navdivider{
border-top: 1px #fff dotted;
padding-top:12px;
line-height: 10px;
}


/* -- NAVIGATION FEATURED LINKS -------*/
#nav #featured{
background-color: #e7e9ea;
}
#nav #featured a{
border-bottom: 1px solid #888f97;
color: #606a74;
padding: 4px 0px 4px 16px;
}
#nav #featured a:hover{
background-color: #fff;
color:#606a74;
}
#nav #featured ul{
margin: 0px;
padding:0px;
list-style-type: none;
}
#nav #featured li{
margin: 0px;
padding: 0px;
}
/* -- CONTENT ----------------------*/
#content{
overflow: hidden; /* This hides the excess padding in non-IE browsers */
}
#content{
width: 760px;
float: none;
float/**/: none;
background-color: #FFFFFF;
font-family: Arial, Helvetica, sans-serif;
padding-bottom:0px;


}
#main ul, #secondary ul, #additional ul, #main ol, #secondary ol,
#additional ol{
margin-top: 0px;
padding-top: 0px;
padding-bottom: 0px;
margin-bottom: 0px;


}
#main li, #secondary li, #additional li {
margin-bottom: 5px;
padding-bottom: 0px;
}

#content p{
margin: 0px;
padding-bottom: 10px;
line-height: 1.3em;
}
/* -- CONTENT SECONDARY -------------*/
#main, #secondary, #additional{
margin-bottom: -32767px;
padding-bottom: 32767px;
padding-top: 15px;
float: left;
font-size: 0.75em;
}

#main{
padding-left: 22px;
padding-right: 8px;

padding-right: 8px;

}


#secondary,#additional{


display: none;

}
#additional{

display: none;

}
/* -- CONTENT MAIN -----------------*/

#main a, #secondary a, #additional a{
text-decoration:underline;
color: #1b67b3;

}
#main a:hover, #secondary a:hover, #additional a:hover{
text-decoration:underline;
color: #db001d;
}
#main{
width: 580px;

}

#main ul, #secondary ul, #additional ul {
list-style-type: square;
margin: 0px;
padding: 0px 0px 10px 20px;
}
#content h6, #content h5, #content h4, #content h3,#content h2, #content h1 {
margin: 0px;
padding: 0px 0px 5px;
letter-spacing: 0.00em;
font-family:"Lucida Sans", Arial, Helvetica, sans-serif;
font-weight: normal;
}
#content h6, #content h5, #content h4{
padding: 0px 0px 2px;
}
#content h1 {
font-size: 2.2em;
line-height: 1em;
}
#content h2 {
font-size: 1.8em;
line-height: 1em;
}
#content h3{
font-size: 1.5em;
line-height: 1.05em;
}

#content h4{
font-weight: bold;
font-size: 1.2em;
}
#content h5
{
font-weight: bold;
font-size: 1em;
}
#content h6
{
font-weight: bold;
font-size: .8em;
}
#content h2, #content h4{
color: #1b67b3;
}
#content h3, #content h1{
color: #db001d;
}

#content h5, #content h6 { font-family: Arial, Helvetica, sans-serif;}
#content h1{letter-spacing: -0.02em;}

/* -- LOCAL FOOTER -----------------*/
#localfooter {
clear: both;
position:relative;
background-color: #e7e9ea;
vertical-align: middle;
padding: 10px 0px;
color: #606a74;
}

#localfooter a{
color: #606a74;
text-decoration:underline;
}

/* -- WSU FOOTER -------------------*/
#wsufooter ,#localfooter {
text-align: center;
font-size: x-small;
width: 760px;
position:relative;
}
#wsufooter {
padding: 10px 0px 20px 0px;

}

#wsufooter a {
text-decoration:underline;
}
#wsufooter a:hover {
text-decoration:underline;
color:#606a74
}

..crimson{color: #9e1b34}.bold1{color: #db001d}.bold2{color:
#008579}.bold3{color: #fcb100}.bold4{color: #1b67b3}.bold5{color: #62bd19}
..muted1{color: #a05804}.muted1{color: #56732e}.muted1{color:
#005957}.muted1{color: #003768}
..gray5a{color: #606a74}.gray5b{color: #888f97}.gray5c{color:
#a0a6ac}.gray5d{color: #b7bcc0}.gray5d{color: #cfd2d5}.gray5d{color: #e7e9ea}
..tint1a{color: #b88243}.tint1b{color: #c69b68}.tint1c{color:
#d4b48e}.tint1d{color: #e2cdb3}.tint1d{color: #f1e6da}
..tint2a{color: #809662}.tint2b{color: #9aab82}.tint2c{color:
#b3c0a1}.tint2d{color: #ccd5c0}.tint2d{color: #e6eae0}
..tint3a{color: #408381}.tint3b{color: #669b9a}.tint3c{color:
#8cb4b3}.tint3d{color: #b2cdcc}.tint3d{color: #d9e6e6}
..tint4a{color: #40698e}.tint4b{color: #6687a4}.tint4c{color:
#8ca5bb}.tint4d{color: #b2c3d1}.tint4d{color: #d9e1e8}
 
M

Murray

This is a nice layout. Have you tried it in Expression yet?

I can see that FP 2003 is not so good at rendering such a purely CSS
page....
 
F

fproad

Yes, I did, and it still overlaps text over the left nav, and the secondary
identifier (in red) is laying over the first header and some text. Is there
any way to toggle divs on and off, as in make them temporarily invisible? Or
is there another way to allow content editors to just see the text and not
see the design overlapping everything. Short of separating the content out by
creating separate server include files with the content?

Thanks again...
 
F

fproad

Does anyone have any ideas as to how to turn off divs, or do any of the
below, without resorting to server side includes to display the content?
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Top