PDA

Click to See Complete Forum and Search --> : CSS Page in Dreamweaver

webnewbieugh
10-24-2006, 10:52 AM
hello all....I am using the three column left nav css design in dreamweaver mx04. It works perfectly for me except...the left nav area of the style sheet is grey and try as I might I can't figure out how to change that to black. If I could just get that area black I would be on my way.

Would anyone be familiar enough with the CSS designs in dreamweaver to help me with this?

Thank you very much for any direction.
mshalabi
10-24-2006, 12:03 PM
hey.. post yourr code...
webnewbieugh
10-24-2006, 02:31 PM
i dont understand what that means...do you want the code for the css sheet?

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<!-- DW6 -->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
<link rel="stylesheet" href="2col_leftNav.css" type="text/css">
</head>
<!-- The structure of this file is exactly the same as 2col_rightNav.html;
the only difference between the two is the stylesheet they use -->
<body>
<div id="masthead">
<h1 id="siteName">Site Name</h1>
<div id="globalNav">
<a href="#">global link</a> | <a href="#">global link</a> | <a href="#">global
link</a> | <a href="#">global link</a> | <a href="#">global link</a> | <a href="#">global
link</a> | <a href="#">global link</a>
</div>
</div>
<!-- end masthead -->
<div id="content">
<div id="breadCrumb">
<a href="#">breadcrumb</a> / <a href="#">breadcrumb</a> / <a href="#">breadcrumb</a> /
</div>
<h2 id="pageName">Page Name</h2>
<div class="feature">
<img src="" alt="" width="280" height="200">
<h3>Feature Title </h3>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec molestie.
Sed aliquam sem ut arcu. Phasellus sollicitudin. Vestibulum condimentum facilisis
nulla. In hac habitasse platea dictumst. Nulla nonummy. Cras quis libero.
Cras venenatis. Aliquam posuere lobortis pede. Nullam fringilla urna id leo.
Praesent aliquet pretium erat. Praesent non odio. Pellentesque a magna a
mauris vulputate lacinia. Aenean viverra. Class aptent taciti sociosqu ad
litora torquent per conubia nostra, per inceptos hymenaeos. Aliquam lacus.
Mauris magna eros, semper a, tempor et, rutrum et, tortor.
</p>
</div>
<div class="story">
<h3>Story Title</h3>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec molestie.
Sed aliquam sem ut arcu. Phasellus sollicitudin. Vestibulum condimentum facilisis
nulla. In hac habitasse platea dictumst. Nulla nonummy. Cras quis libero.
Cras venenatis. Aliquam posuere lobortis pede. Nullam fringilla urna id leo.
Praesent aliquet pretium erat. Praesent non odio. Pellentesque a magna a
mauris vulputate lacinia. Aenean viverra. Class aptent taciti sociosqu ad
litora torquent per conubia nostra, per inceptos hymenaeos. Aliquam lacus.
Mauris magna eros, semper a, tempor et, rutrum et, tortor.
</p>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec molestie.
Sed aliquam sem ut arcu. Phasellus sollicitudin. Vestibulum condimentum facilisis
nulla. In hac habitasse platea dictumst. Nulla nonummy. Cras quis libero.
Cras venenatis. Aliquam posuere lobortis pede. Nullam fringilla urna id leo.
Praesent aliquet pretium erat. Praesent non odio. Pellentesque a magna a
mauris vulputate lacinia. Aenean viverra. Class aptent taciti sociosqu ad
litora torquent per conubia nostra, per inceptos hymenaeos. Aliquam lacus.
Mauris magna eros, semper a, tempor et, rutrum et, tortor.
</p>
</div>
<div class="story">
<h3>Story Title</h3>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec molestie.
Sed aliquam sem ut arcu. Phasellus sollicitudin. Vestibulum condimentum facilisis
nulla. In hac habitasse platea dictumst. Nulla nonummy. Cras quis libero.
Cras venenatis. Aliquam posuere lobortis pede. Nullam fringilla urna id leo.
Praesent aliquet pretium erat. Praesent non odio. Pellentesque a magna a
mauris vulputate lacinia. Aenean viverra. Class aptent taciti sociosqu ad
litora torquent per conubia nostra, per inceptos hymenaeos. Aliquam lacus.
Mauris magna eros, semper a, tempor et, rutrum et, tortor.
</p>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec molestie.
Sed aliquam sem ut arcu. Phasellus sollicitudin. Vestibulum condimentum facilisis
nulla. In hac habitasse platea dictumst. Nulla nonummy. Cras quis libero.
Cras venenatis. Aliquam posuere lobortis pede. Nullam fringilla urna id leo.
Praesent aliquet pretium erat. Praesent non odio. Pellentesque a magna a
mauris vulputate lacinia. Aenean viverra. Class aptent taciti sociosqu ad
litora torquent per conubia nostra, per inceptos hymenaeos. Aliquam lacus.
Mauris magna eros, semper a, tempor et, rutrum et, tortor.
</p>
</div>
</div>
<!--end content -->
<div id="navBar">
<div id="search">
<form action="#">
<label>search</label>
<input name="searchFor" type="text" size="10">
<input name="goButton" type="submit" value="go">
</form>
</div>
<div id="sectionLinks">
<ul>
<li><a href="#">sectionLink</a></li>
<li><a href="#">sectionLink</a></li>
<li><a href="#">sectionLink</a></li>
<li><a href="#">sectionLink</a></li>
<li><a href="#">sectionLink</a></li>
<li><a href="#">sectionLink</a></li>
</ul>
</div>
<div class="relatedLinks">
<h3>Related Link Category</h3>
<ul>
<li><a href="#">Related Link</a></li>
<li><a href="#">Related Link</a></li>
<li><a href="#">Related Link</a></li>
<li><a href="#">Related Link</a></li>
<li><a href="#">Related Link</a></li>
<li><a href="#">Related Link</a></li>
</ul>
</div>
<div class="relatedLinks">
<h3>Related Link Category</h3>
<ul>
<li><a href="#">Related Link</a></li>
<li><a href="#">Related Link</a></li>
<li><a href="#">Related Link</a></li>
<li><a href="#">Related Link</a></li>
<li><a href="#">Related Link</a></li>
<li><a href="#">Related Link</a></li>
</ul>
</div>
<div id="advert">
<img src="" alt="" width="107" height="66"> Ad copy ad copy ad copy. Ad
copy ad copy.
</div>
<div id="headlines">
<h3>Headlines</h3>
<p>
Headline <a href="#">full story...</a>
</p>
<p>
Headline <a href="#">full story...</a>
</p>
<p>
Headline <a href="#">full story...</a>
</p>
<p>
Headline <a href="#">full story...</a>
</p>
</div>
</div>
<!--end navbar -->
<div id="siteInfo">
<img src="" width="44" height="22"> <a href="#">About Us</a> | <a href="#">Site
Map</a> | <a href="#">Privacy Policy</a> | <a href="#">Contact Us</a> | &copy;2003
Company Name
</div>
<br>
</body>
</html>


I just need the left naviagation column to remain...but be black in color so i can insert my own navigation which is black background and i am making this page also black background/????
kredd
10-25-2006, 12:35 AM
hey, you posted the html the css is linked and applied to. post the code from the file "2col_leftNav.css".

line 8 in your code:
<link rel="stylesheet" href="2col_leftNav.css" type="text/css">
webnewbieugh
10-28-2006, 04:20 PM
sorry...yes I understand now...here is the code...i tried changing the #cccccc bg colors to #000000 with not much luck... it changed the actual left navigation links but still left a gray box outlining the navigation....any suggestions? thank you!

/***********************************************/
/* 3col_leftNav.css */
/* Use with template 3col_leftNav.html */
/***********************************************/

/***********************************************/
/* HTML tag styles */
/***********************************************/

body{
font-family: Arial,sans-serif;
color: #333333;
line-height: 1.166;
margin: 0px;
padding: 0px;
}

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

a:link{
color: #006699;
text-decoration: none;
}

a:visited{
color: #006699;
text-decoration: none;
}

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

h1{
font-family: Verdana,Arial,sans-serif;
font-size: 120%;
color: #334d55;
margin: 0px;
padding: 0px;
}

h2{
font-family: Arial,sans-serif;
font-size: 114%;
color: #006699;
margin: 0px;
padding: 0px;
}

h3{
font-family: Arial,sans-serif;
font-size: 100%;
color: #334d55;
margin: 0px;
padding: 0px;
}

h4{
font-family: Arial,sans-serif;
font-size: 100%;
font-weight: normal;
color: #333333;
margin: 0px;
padding: 0px;
}

h5{
font-family: Verdana,Arial,sans-serif;
font-size: 100%;
color: #334d55;
margin: 0px;
padding: 0px;
}

ul{
list-style-type: square;
}

ul ul{
list-style-type: disc;
}

ul ul ul{
list-style-type: none;
}

label{
font-family: Arial,sans-serif;
font-size: 100%;
font-weight: bold;
color: #334d55;
}


/***********************************************/
/* Layout Divs */
/***********************************************/

#masthead{
padding: 10px 0px 0px 0px;
border-bottom: 1px solid #cccccc;
width: 100%;
}

#navBar{
float: left;
width: 20%;
margin: 0px;
padding: 0px;
background-color: #eeeeee;
border-right: 1px solid #cccccc;
border-bottom: 1px solid #cccccc;
}

#headlines{
float:right;
width: 20%;
border-left: 1px solid #cccccc;
border-bottom: 1px solid #cccccc;
padding-right: 10px;
}

#content{
float: left;
width: 55%;
}

/***********************************************/
/* Components */
/***********************************************/

#siteName{
margin: 0;
padding: 0 0 0 10px;
}


/************* #globalNav styles **************/

#globalNav{
padding: 0px 0px 5px 10px;
border-bottom: 1px solid #CCC;
color: #cccccc;
}

#globalNav img{
display: block;
}

#globalNav a {
font-size: 90%;
padding: 0 4px 0 0;
}

/*************** #pageName styles **************/

#pageName{
margin: 0px;
padding: 0px 0px 0px 10px;
}

/************* #breadCrumb styles *************/

#breadCrumb{
font-size: 80%;
padding: 2px 0px 0 10px;
}


/************** .feature styles ***************/

.feature{
padding: 0px 0px 10px 10px;
font-size: 80%;
}

.feature h3{
padding: 30px 0px 5px 0px;
text-align: center;
}

.feature img{
float: left;
padding: 10px 10px 0px 0px;
}


/************** .story styles *****************/

.story{
clear: both;
padding: 10px 0px 0px 10px;
font-size: 80%;
}

.story p{
padding: 0px 0px 10px 0px;
}


/************* #siteInfo styles ***************/

#siteInfo{
clear: both;
border: 1px solid #cccccc;
font-size: 75%;
color: #cccccc;
padding: 10px 10px 10px 10px;
}

#siteInfo img{
padding: 4px 4px 4px 10px;
vertical-align: middle;
}


/************* #search styles ***************/

#search{
padding: 5px 0px 5px 10px;
border-bottom: 1px solid #cccccc;
font-size: 90%;
}

#search form{
margin: 0px;
padding: 0px;
}

#search label{
display: block;
margin: 0px;
padding: 0px;
}


/*********** #navBar link styles ***********/

#navBar ul a:link, #navBar ul a:visited {display: block;}
#navBar ul {list-style: none; margin: 0; padding: 0;}

/* hack to fix IE/Win's broken rendering of block-level anchors in lists */
#navBar li {border-bottom: 1px solid #EEE;}

/* fix for browsers that don't need the hack */
html>body #navBar li {border-bottom: none;}


/*********** #sectionLinks styles ***********/

#sectionLinks{
position: relative;
margin: 0px;
padding: 0px;
border-bottom: 1px solid #cccccc;
font-size: 90%;
}

#sectionLinks h3{
padding: 10px 0px 2px 10px;
}

#sectionLinks a {
display: block;
border-top: 1px solid #cccccc;
padding: 2px 0px 2px 10px;
}

#sectionLinks a:hover{
background-color: #dddddd;
}


/*********** .relatedLinks styles ***********/

.relatedLinks{
position: relative;
margin: 0px;
padding: 0px 0px 10px 10px;
font-size: 90%;
}

.relatedLinks h3{
padding: 10px 0px 2px 0px;
}

.relatedLinks a:link,
.relatedLinks a:visited {
display: block;
}

/************** #advert styles **************/

#advert{
padding: 30px 0px 10px;
}

#advert img{
display: block;
}


/************** #headlines styles **************/

#headlines{
margin: 0px;
padding: 10px 0px 20px 10px;
font-size: 80%;
}

#headlines p{
padding: 5px 0px 5px 0px;
}