Need CSS Help

northmendo.com · Nov 30, 2004

hello this is my first post and i need some CSS help here is the link to my new page I need to know how to make more links linke the ones in the menu to the left, as you can see I tried to make another one and it didn't work. I am using Dreamweaver MX 2004 and this template is from there.

thanks all in advance.

quiksan · Nov 30, 2004

welcome.

well, either include your related links within the:

Code:

<div id="pageNav"> 
    <div class="style2" id="sectionLinks">

or duplicate the styles of the pageNav and sectionLinks in your relatedLinks css

basically, you want to make the current (provided) css work for your new relatedLinks section of links.

so use this css code:

Code:

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

#sectionLinks{
	margin: 0px;
	padding: 0px;

}

#sectionLinks h3{
	padding: 10px 0px 2px 10px;
	border-bottom: 1px solid #cccccc;
}

#sectionLinks a:link, #sectionLinks a:visited {
	display: block;
	border-top: 1px solid #ffffff;
	border-bottom: 1px solid #cccccc;
	background-image:  url("bg_nav.jpg");
	font-weight: bold;
	padding: 3px 0px 3px 10px;
	color: #21536A;
}

#sectionLinks a:hover{
	border-top: 1px solid #cccccc;
	background-color: #DDEEFF;
	background-image: none;
	font-weight: bold;
	text-decoration: none;
}

duplicate it, and replace it with your relatedLinks, so something like this (just replace the relatedLinks stuff you already put in there):

Code:

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

#relatedLinks{
	margin: 0px;
	padding: 0px;

}

#relatedLinks h3{
	padding: 10px 0px 2px 10px;
	border-bottom: 1px solid #cccccc;
}

#relatedLinks a:link, #relatedLinks a:visited {
	display: block;
	border-top: 1px solid #ffffff;
	border-bottom: 1px solid #cccccc;
	background-image:  url("bg_nav.jpg");
	font-weight: bold;
	padding: 3px 0px 3px 10px;
	color: #21536A;
}

#relatedLinks a:hover{
	border-top: 1px solid #cccccc;
	background-color: #DDEEFF;
	background-image: none;
	font-weight: bold;
	text-decoration: none;
}

and finally, I think you'll still need to wrap them in teh div with the style2 class.

hope that helps some.

quiksan · Nov 30, 2004

oh, and make sure you don't mix up your ID's and Classes
classes start with .classname
and id's start with #idname

northmendo.com · Nov 30, 2004

ok i got that now i can't get the picture to move up

northmendo.com · Nov 30, 2004

ok I have relized that i don't know enough about css to make my page using it so can i do the same thing with the links in html same thinig meaning change color when you go over them. Here is the page.

quiksan · Nov 30, 2004

ok, I redid your html - I included the css in the 1 html page to make it simple on me - parse it out to it's own file if you still want it that way.

basically, I just made sure the related links were wrapped in the featured link's div, that way it took on all the properties of the div from the links you wanted to emulate.

then, for the image, you had an empty div above the image. I commented it out, and that moves the image up.
email me if you have more questions. i'm happy to help if I can.

as for doing the equivalent w/o css, you'd have to do javascript to do the same thing. css is a lot simpler and cleaner IMO. it's worth the effort to get used to it I think.

Code:

<!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>NORTHMENDO.COM</title>
<link rel="stylesheet" href="emx_nav_left.css" type="text/css">
<script type="text/javascript">
<!--
var time = 3000;
var numofitems = 7;

//menu constructor
function menu(allitems,thisitem,startstate){ 
  callname= "gl"+thisitem;
  divname="subglobal"+thisitem;  
  this.numberofmenuitems = 7;
  this.caller = document.getElementById(callname);
  this.thediv = document.getElementById(divname);
  this.thediv.style.visibility = startstate;
}

//menu methods
function ehandler(event,theobj){
  for (var i=1; i<= theobj.numberofmenuitems; i++){
    var shutdiv =eval( "menuitem"+i+".thediv");
    shutdiv.style.visibility="hidden";
  }
  theobj.thediv.style.visibility="visible";
}
				
function closesubnav(event){
  if ((event.clientY <48)||(event.clientY > 107)){
    for (var i=1; i<= numofitems; i++){
      var shutdiv =eval('menuitem'+i+'.thediv');
      shutdiv.style.visibility='hidden';
    }
  }
}
// -->
</script>
<style type="text/css">
<!--
.style2 {font-size: 16px;}
/***********************************************/
/* emx_nav_left.css                            */
/* Use with template Halo_leftNav.html         */
/***********************************************/

/***********************************************/
/* HTML tag styles                             */
/***********************************************/
body{
	font-family: Arial,sans-serif;
	color: #333333;
	line-height: 1.166;	
	margin: 0px;
	padding: 0px;
	background: #cccccc url("bg_grad.jpg") fixed;
}

/******* hyperlink and anchor tag styles *******/

a:link, a:visited{
	color: #005FA9;
	text-decoration: none;
}

a:hover{
	text-decoration: underline;
}

/************** header tag styles **************/

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

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

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

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

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


/*************** list tag styles ***************/

ul{
 list-style-type: square;
}

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

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

/********* form and related tag styles *********/

form {
	margin: 0;
	padding: 0;
}

label{
 font: bold 1em Arial,sans-serif;
 color: #334d55;
}
				
input{
font-family: Arial,sans-serif;
}

/***********************************************/
/* Layout Divs                                 */
/***********************************************/
#pagecell1{
	position:absolute;
	top: 112px;
	left: 2%;
	right: 2%;
	width:95.6%;
	background-color: #ffffff;
}

#tl {
	position:absolute;
	top: -1px;
	left: -1px;
	margin: 0px;
	padding: 0px;
	z-index: 100;
}

#tr {
	position:absolute;
	top: -1px;
	right: -1px;
	margin: 0px;
	padding: 0px;
	z-index: 100;
}

#masthead{
	position: absolute;
	top: 0px;
	left: 2%;
	right: 2%;
	width:95.6%;
	
}

#pageNav{
	float: left;
	width:178px;
	padding: 0px;
	background-color: #F5f7f7;
	border-right: 1px solid #cccccc;
	border-bottom: 1px solid #cccccc;
	font: small Verdana,sans-serif;
}

#content{
	padding: 0px 10px 0px 0px;
	margin:0px 0px 0px 178px;
	border-left: 1px solid #ccd2d2;
}


/***********************************************/
/* Component Divs                              */
/***********************************************/
#siteName{
	margin: 0px;
	padding: 16px 0px 8px 0px;
	color: #ffffff;
	font-weight: normal;
}

/************** utility styles *****************/

#utility{
	font: 75% Verdana,sans-serif;
	position: absolute;
	top: 16px;
	right: 0px;
	color: #919999;
}

#utility a{
	color: #ffffff;
}

#utility a:hover{
	text-decoration: underline;
}

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

#pageName{
	padding: 0px 0px 14px 10px;
	margin: 0px;
	border-bottom:1px solid #ccd2d2;
}

#pageName h2{
	font: bold 175% Arial,sans-serif;
	color: #000000;
	margin:0px;
	padding: 0px;
}

#pageName img{
	position: absolute;
	top: 0px;
	right: 6px;
	padding: 0px;
	margin: 0px;
}

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

#globalNav{
position: relative;
width: 100%;
min-width: 640px;
height: 32px;
color: #cccccc;
padding: 0px;
margin: 0px;
background-image:  url("glbnav_background.gif");
}

#globalNav img{
	margin-bottom: -4px;
 
}

#gnl {
	position: absolute;
	top: 0px;
	left:0px;
}

#gnr {
	position: absolute;
	top: 0px;
	right:0px;
}

#globalLink{
	position: absolute;
	top: 6px;
	height: 22px;
	min-width: 640px;
	padding: 0px;
	margin: 0px;
	left: 10px;
	z-index: 100;
}


a.glink, a.glink:visited{
  	font-size: small;
  	color: #000000;
	font-weight: bold;
	margin: 0px;
	padding: 2px 5px 4px 5px;
	border-right: 1px solid #8FB8BC;
}

a.glink:hover{
  	background-image:  url("glblnav_selected.gif");
	text-decoration: none;
}

.skipLinks {display: none;}

/************ subglobalNav styles **************/

.subglobalNav{
	position: absolute;
	top: 84px;
	left: 0px;
	/*width: 100%;*/
	min-width: 640px;
	height: 20px;
	padding: 0px 0px 0px 10px;
	visibility: hidden;
	color: #ffffff;
}

.subglobalNav a:link, .subglobalNav a:visited {
	font-size: 80%;
	color: #ffffff;
}

.subglobalNav a:hover{
	color: #cccccc;
}

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

#search{
	position: absolute;
	top: 5px;
	right: 10px;
	z-index: 101;
}

#search input{
  font-size: 70%;
  margin: 0px  0px 0px 10px;
 }
 
#search a:link, #search a:visited {
	font-size: 80%;
	font-weight: bold;
	
}

#search a:hover{
	margin: 0px;
}


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

#breadCrumb{
	padding: 5px 0px 5px 10px;
	font: small Verdana,sans-serif;
	color: #AAAAAA;
}

#breadCrumb a{
	color: #AAAAAA;
}

#breadCrumb a:hover{
	color: #005FA9;
	text-decoration: underline;
}


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

.feature{
	padding: 0px 0px 10px 10px;
	font-size: 80%;
	min-height: 200px;
	height: 200px;
}
html>body .feature {height: auto;}

.feature h3{
	font: bold 175% Arial,sans-serif;
	color: #000000;
	padding: 30px 0px 5px 0px;
}

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


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

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

.story h3{
	font: bold 125% Arial,sans-serif;
	color: #000000;
}

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

.story a.capsule{
	font: bold 1em Arial,sans-serif;
	color: #005FA9;
	display:block;
	padding-bottom: 5px;
}

.story a.capsule:hover{
	text-decoration: underline;
}

td.storyLeft{
	padding-right: 12px;
}


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

#siteInfo{
	clear: both;
	border-top: 1px solid #cccccc;
	font-size: small;
	color: #cccccc;
	padding: 10px 10px 10px 10px;
	margin-top: -1px;
}

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


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

#sectionLinks{
	margin: 0px;
	padding: 0px;

}

#sectionLinks h3{
	padding: 10px 0px 2px 10px;
	border-bottom: 1px solid #cccccc;
}

#sectionLinks a:link, #sectionLinks a:visited {
	display: block;
	border-top: 1px solid #ffffff;
	border-bottom: 1px solid #cccccc;
	background-image:  url("bg_nav.jpg");
	font-weight: bold;
	padding: 3px 0px 3px 10px;
	color: #21536A;
}

#sectionLinks a:hover{
	border-top: 1px solid #cccccc;
	background-color: #DDEEFF;
	background-image: none;
	font-weight: bold;
	text-decoration: none;
}


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

.relatedLinks{
	margin: 0px;
	padding: 0px 0px 10px 10px;
	border-bottom: 1px solid #cccccc;
}

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

.relatedLinks a{
	display: block; 
}


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

#advert{
	padding: 10px;
}

#advert img{
	display: block;
}

/********************* end **********************/



-->
</style>
</head>
<body onmousemove="closesubnav(event);"> 
<div class="skipLinks">skip to: <a href="#content">page content</a> | <a href="pageNav">links on this page</a> | <a href="#globalNav">site navigation</a> | <a href="#siteInfo">footer (site information)</a> </div>

<div id="masthead"> 
  <h1 id="siteName">NORTHMENDO.COM</h1> 
  <div id="globalNav"> 
    <img alt="" src="gblnav_left.gif" height="32" width="4" id="gnl">    <img alt="" src="glbnav_right.gif" height="32" width="4" id="gnr"> 
    <!--end globalLinks-->
<form id="search" action=""> 
      <input name="searchFor" type="text" size="10"> 
      <a href="">search</a> 
    </form> 
  </div> 
  <!-- end globalNav --> 
  <div id="subglobal1" class="subglobalNav"> 
    <a href="#">subglobal1 link</a> | <a href="#">subglobal1 link</a> | <a href="#">subglobal1
    link</a> | <a href="#">subglobal1 link</a> | <a href="#">subglobal1 link</a> | <a href="#">subglobal1
    link</a> | <a href="#">subglobal1 link</a> 
  </div> 
  <div id="subglobal2" class="subglobalNav"> 
    <a href="#">subglobal2 link</a> | <a href="#">subglobal2 link</a> | <a href="#">subglobal2
    link</a> | <a href="#">subglobal2 link</a> | <a href="#">subglobal2 link</a> | <a href="#">subglobal2
    link</a> | <a href="#">subglobal2 link</a> 
  </div> 
  <div id="subglobal3" class="subglobalNav"> 
    <a href="#">subglobal3 link</a> | <a href="#">subglobal3 link</a> | <a href="#">subglobal3
    link</a> | <a href="#">subglobal3 link</a> | <a href="#">subglobal3 link</a> | <a href="#">subglobal3
    link</a> | <a href="#">subglobal3 link</a> 
  </div> 
  <div id="subglobal4" class="subglobalNav"> 
    <a href="#">subglobal4 link</a> | <a href="#">subglobal4 link</a> | <a href="#">subglobal4
    link</a> | <a href="#">subglobal4 link</a> | <a href="#">subglobal4 link</a> | <a href="#">subglobal4
    link</a> | <a href="#">subglobal4 link</a> 
  </div> 
  <div id="subglobal5" class="subglobalNav"> 
    <a href="#">subglobal5 link</a> | <a href="#">subglobal5 link</a> | <a href="#">subglobal5
    link</a> | <a href="#">subglobal5 link</a> | <a href="#">subglobal5 link</a> | <a href="#">subglobal5
    link</a> | <a href="#">subglobal5 link</a> 
  </div> 
  <div id="subglobal6" class="subglobalNav"> 
    <a href="#">subglobal6 link</a> | <a href="#">subglobal6 link</a> | <a href="#">subglobal6
    link</a> | <a href="#">subglobal6 link</a> | <a href="#">subglobal6 link</a> | <a href="#">subglobal6
    link</a> | <a href="#">subglobal6 link</a> 
  </div> 
  <div id="subglobal7" class="subglobalNav"> 
    <a href="#">subglobal7 link</a> | <a href="#">subglobal7 link</a> | <a href="#">subglobal7
    link</a> | <a href="#">subglobal7 link</a> | <a href="#">subglobal7 link</a> | <a href="#">subglobal7
    link</a> | <a href="#">subglobal7 link</a> 
  </div> 
  <div id="subglobal8" class="subglobalNav"> 
    <a href="#">subglobal8 link</a> | <a href="#">subglobal8 link</a> | <a href="#">subglobal8
    link</a> | <a href="#">subglobal8 link</a> | <a href="#">subglobal8 link</a> | <a href="#">subglobal8
    link</a> | <a href="#">subglobal8 link</a> 
  </div> 

</div> 
<!-- end masthead --> 
<div id="pagecell1"> 
  <!--pagecell1--> 
  <img alt="" src="tl_curve_white.gif" height="6" width="6" id="tl"> <img alt="" src="tr_curve_white.gif" height="6" width="6" id="tr"> 
  <div id="breadCrumb"> 
  </div> 
  <div id="pageName"> 
    <h2 align="center"> NORTHMENDO.COM</h2> 
     
  </div> 
  <div id="pageNav">
    <div class="style2" id="sectionLinks"><strong><!-- #BeginLibraryItem "/Library/new css.lbi" -->
    <strong><a href="/chat.htm" target="_top">Chat</a> </strong> 
    <strong><a href="/games.htm" target="_top">Games</a></strong>
    <strong><a href="file:///Macintosh%20HD/webpage/webpage.html" target="_top">Web Design</a></strong> 
    <strong><a href="file:///Macintosh%20HD/webpage/blogger.html" target="_top">Blog</a></strong>
    <strong><a href="http://shitkicker.textamerica.com" target="_top">Moblog</a></strong> 
    <strong><a href="file:///Macintosh%20HD/webpage/new_picts.html" target="_top">Photography</a></strong> 
    <strong><a href="http://northmendocom.proboards25.com/" target="_blank" class="style2">Message Board</a></strong>
    <strong><a href="file:///Macintosh%20HD/webpage/compcorner.html" target="_top" class="style2">Computer Corner</a></strong> 
    <strong><a href="http://www.weather.com/weather/local/95585?lswe=95585&lwsa=WeatherLocalUndeclared" target="_top">See Our Weather</a></strong> 
    <a href="file:///Macintosh%20HD/webpage/new_picts.html" target="_top">Links</a> 
    <a href="file:///Macintosh%20HD/webpage/new_picts.html" target="_top">Me</a> 
    <a href="file:///Macintosh%20HD/webpage/new_picts.html" target="_top">
    <strong>Home</strong></a>
    <!-- #EndLibraryItem --></a>
    <a href="../new_picts.html" target="_top"><strong>placeholder</strong></a>     
    <a href="#">Related Link</a></div>
    <div id="advert"> 
      <img src="" alt="" width="107" height="66" /> Advertisement copy goes here.
      Advertisement copy goes here.
    </div> 
  </div> 
  <div id="content">

   <!--  <div class="feature"></div> -->
    <div class="story">
      <div align="center"><img src="http://www.northmendo.com/picts/front_page.jpg" width="684" height="513"></div>
      <p>&nbsp;</p> 
    </div> 
    <div class="story"> 
      <table width="100%" cellpadding="0" cellspacing="0" summary=""> 
        <tr valign="top"> 
          <td class="storyLeft"> <p> 
            <a href="#" class="capsule">Capsule Story</a> Cras enim. Vestibulum
            ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia
            Curae; Ut eu augue. Integer risus wisi, semper eu, congue quis, lobortis
            ut, massa. Vestibulum auctor vestibulum lectus. Vivamus neque. Cras
            lobortis. Aenean ut turpis eu libero volutpat euismod. <a href="#">Donec</a> eget
            lectus vitae ligula ornare tempor. Vivamus scelerisque lorem a elit.
            Sed id mauris. 
            </p></td> 
          <td> <p> 
            <a href="#" class="capsule">Capsule Story</a> Cras enim. Vestibulum
            ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia
            Curae; Ut eu augue. Integer risus wisi, semper eu, congue quis, lobortis
            ut, massa. Vestibulum auctor vestibulum lectus. Vivamus neque. Cras
            lobortis. Aenean ut turpis eu libero volutpat euismod. <a href="#">Donec</a> eget
            lectus vitae ligula ornare tempor. Vivamus scelerisque lorem a elit.
            Sed id mauris. 
            </p></td> 
        </tr> 
        <tr valign="top"> 
          <td class="storyLeft"> <p> 
            <a href="#" class="capsule">Capsule Story</a> Cras enim. Vestibulum
            ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia
            Curae; Ut eu augue. Integer risus wisi, semper eu, congue quis, lobortis
            ut, massa. Vestibulum auctor vestibulum lectus. Vivamus neque. Cras
            lobortis. Aenean ut turpis eu libero volutpat euismod. <a href="#">Donec</a> eget
            lectus vitae ligula ornare tempor. Vivamus scelerisque lorem a elit.
            Sed id mauris. 
            </p></td> 
          <td> <p> 
            <a href="#" class="capsule">Capsule Story</a> Cras enim. Vestibulum
            ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia
            Curae; Ut eu augue. Integer risus wisi, semper eu, congue quis, lobortis
            ut, massa. Vestibulum auctor vestibulum lectus. Vivamus neque. Cras
            lobortis. Aenean ut turpis eu libero volutpat euismod. <a href="#">Donec</a> eget
            lectus vitae ligula ornare tempor. Vivamus scelerisque lorem a elit.
            Sed id mauris. 
            </p></td> 
        </tr> 
        <tr valign="top"> 
          <td class="storyLeft"> <p> 
            <a href="#" class="capsule">Capsule Story</a> Cras enim. Vestibulum
            ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia
            Curae; Ut eu augue. Integer risus wisi, semper eu, congue quis, lobortis
            ut, massa. Vestibulum auctor vestibulum lectus. Vivamus neque. Cras
            lobortis. Aenean ut turpis eu libero volutpat euismod. <a href="#">Donec</a> eget
            lectus vitae ligula ornare tempor. Vivamus scelerisque lorem a elit.
            Sed id mauris. 
            </p></td> 
          <td> <p> 
            <a href="#" class="capsule">Capsule Story</a> Cras enim. Vestibulum
            ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia
            Curae; Ut eu augue. Integer risus wisi, semper eu, congue quis, lobortis
            ut, massa. Vestibulum auctor vestibulum lectus. Vivamus neque. Cras
            lobortis. Aenean ut turpis eu libero volutpat euismod. <a href="#">Donec</a> eget
            lectus vitae ligula ornare tempor. Vivamus scelerisque lorem a elit.
            Sed id mauris. 
            </p></td> 
        </tr> 
      </table> 
    </div> 
  </div> 
   <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> 

</div> 
<!--end pagecell1--> 
<br> 
<script type="text/javascript">
    <!--
      var menuitem1 = new menu(7,1,"hidden");
			var menuitem2 = new menu(7,2,"hidden");
			var menuitem3 = new menu(7,3,"hidden");
			var menuitem4 = new menu(7,4,"hidden");
			var menuitem5 = new menu(7,5,"hidden");
			var menuitem6 = new menu(7,6,"hidden");
			var menuitem7 = new menu(7,7,"hidden");
    // -->
    </script> 
</body>
</html>

Need CSS Help

northmendo.com

northmendo

quiksan

awesomer...

quiksan

awesomer...

northmendo.com

northmendo

northmendo.com

northmendo

quiksan

awesomer...