2 replies [Last post]
scarflash
Offline
newbie
Cleveland, Oh
Last seen: 13 years 4 weeks ago
Cleveland, Oh
Joined: 2008-12-29
Posts: 2
Points: 0

Hey guys,
I'm new to this forum and had a couple questions I hope you can answer. First of all here is my CSS file appropriately named style:

/***********************************************/
/* 2col_rightNav.css                             */
/* Use with template 2col_rightNav.html          */
/***********************************************/
 
/***********************************************/
/* HTML tag styles                             */
/***********************************************/ 
/* full */
.full .leadin {
	background: url(images/leadin.jpg) no-repeat;
	padding: 100px 0 0 50px;
	height: 140px;
	overflow: visible;
}
.full h1 {
	font: normal 360%/100% "Lucida Grande", Arial, sans-serif;
	position: relative;
	color: #fff;
	width: 390px;
	bottom: 45px;
}
.full h1 span {
	background: url(images/gradient-dark.png) repeat-x;
	position: absolute;
	bottom: 0px;
	display: block;
	width: 100%;
	height: 29px;
	margin-bottom: 0px;
	padding-bottom: 0px;
	left: 0px;
}
.full h2 {
	font: normal 150%/100% "Lucida Grande", Arial, sans-serif;
	margin: 10px 0 0;
	color: #b7b7b7;
}
 
body{
	color: #333333;
	line-height: 1.166;	
	margin: 0px;
	padding: 10px;
}
 
a:link, a:visited, a:hover {
	color: #006699;
	text-decoration: none;
}
 
a:hover {
	text-decoration: underline;
}
/* overrides decoration from previous rule for hovered links */
 
h1, h2, h3, h4, h5, h6 {
	font-family: Arial,sans-serif;
	margin: 0px;
	padding: 0px;
}
 
h1{
 font-family: Verdana,Arial,sans-serif;
 font-size: 120%;
 color: #334d55;
}
 
h2{
 font-size: 114%;
 color: #000000;
}
 
h3{
 font-size: 100%;
 color: #334d55;
}
 
h4{
 font-size: 100%;
 font-weight: normal;
 color: #333333;
}
 
h5{
 font-size: 100%;
 color: #334d55;
}
 
ul{
 list-style-type: bullet.gif;
}
 
ul ul{
 list-style-type: disc;
}
 
ul ul ul{
 list-style-type: none;
}
 
label{
	font: bold 100% Arial,sans-serif;
 color: #334d55;
}
 
 
/***********************************************/
/* Layout Divs                                 */
/***********************************************/
 
#page{
	width: 850px;
	height: auto;
	float: center;
	text-align:left;
	margin:0 auto;
	width:850px;
	height:auto;
}	
#masthead{
	width: 850px;
	height: 160px;
	float: left;
	margin-bottom: 80px;
}
 
#content{
	float: center;
	width: 850px;
	height: auto;
	margin: 0 auto;
	text-align:left;
 
}
/* BUBBLE PLASTIC HORIZONTAL MENU */
 
.bubplastic.horizontal {
	width: 100%;
	height: 27px;
	margin: 0;
	padding: 0;
	background: #000000 url(images/bg-bubplastic.gif) top left repeat-x;
}
.bubplastic.horizontal ul {
	list-style: none;
	margin: 0;
	padding: 0;
}
.bubplastic.horizontal ul li {
	float: left;
	margin: 0;
	padding: 0;
	background: transparent url(images/bg-bubplastic-button.gif) top left no-repeat;
}
 
.bubplastic.horizontal ul li a {
	display: block;
	height: 27px;
	padding-left: 13px;
	float: left;
	font-family: "Helvetica Neue",helvetica,"microsoft sans serif",arial,sans-serif;
	font-size: 9.3pt;
	color: #FFFFFF;
	text-decoration: none;
}
 
.bubplastic.horizontal ul li a span.menu_ar {
	display: block;
	float: left;
	height: 22px;
	padding-top: 5px;
	padding-right: 13px;
	background: transparent url(images/bg-bubplastic-button.gif) top right no-repeat;
	cursor: pointer;
}
/* END BUBBLE PLASTIC HORIZONTAL MENU */
 
/* BLUE HOVER */
.bubplastic.blue ul li a:hover,
.bubplastic.blue ul li.highlight a {
	background: transparent url(images/bg-bubplastic-h-blue.gif) top left no-repeat;
}
.bubplastic.blue ul li a:hover span.menu_ar,
.bubplastic.blue ul li.highlight a span.menu_ar {
	background: transparent url(images/bg-bubplastic-h-blue.gif) top right no-repeat;
}
 
 
/***********************************************/
/*Component Divs                               */
/***********************************************/
 
#siteName{
	margin: 0px;
	padding: 0px 0px 10px 10px;
}
 
 
/*************** #pageName styles **************/
 
#pageName{
	padding: 0px 0px 0px 0px;
}
 
/************** .feature styles ***************/
 
.feature{
	font-size: 80%;$
}
 
.feature h3{
	padding: 30px 0px 5px 0px;
	text-align: justified;
}
 
 
/* adjust margins to change separation between the feature image and text flowing around it */
 
 
/************** .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: 0px solid #cccccc;
	font-size: 75%;
	color: #cccccc;
	padding: 10px 10px 10px 10px;
	margin-top: 0px;
}
/* negative top margin pulls siteinfo up so its top border overlaps (and thus lines up with)
   the bottom border of the navBar in cases where they "touch" */
 
#siteInfo img{
	padding: 4px 4px 4px 0px;
	vertical-align: middle;
}

Here is my HTML file:

<!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">
<!-- DW6 -->
<head>
<!-- Copyright 2005 Macromedia, Inc. All rights reserved. -->
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<!-- TemplateBeginEditable name="doctitle" -->
<title>Malcolm X and the OAAU</title>
<!-- TemplateEndEditable -->
<link rel="stylesheet" href="style.css" type="text/css" />
<style type="text/css">
<!--
.style6 {font-size: 12px;
	line-height: 200%;
	font-family: Arial, Helvetica, sans-serif;
	}
.style7 {
	font-size: 14pt;
	font-weight: bold;
	padding-top: 0px;
	font-family: Arial, Helvetica, sans-serif;
	}
}
.style17 {color: #7F9DB9}
-->
</style>
<!-- TemplateBeginEditable name="head" --><!-- TemplateEndEditable -->
</head>
<!-- The structure of this file is exactly the same as 2col_leftNav.html;
     the only difference between the two is the stylesheet they use -->
<body>
<div id="page">
<div id="masthead">
<div class="full"> 
	<div class="leadin"> 
		<h1><span></span>Malcolm X</h1> 
		<h2>The Struggle for Human Rights</h2> 
	</div> 
	</div>
	</div>
<!-- end masthead -->
  <div id="content">
<head>
	<link rel="stylesheet" href="style.css" type="text/css" />
<div class="menu bubplastic horizontal blue">
	<ul>
		<li class="highlight"><span class="menu_r"><a href="home.html" target="_self"><span class="menu_ar">Home</span></a></span></li>
		<li><span class="menu_r"><a href="civil_rights_movement.html" target="_self"><span class="menu_ar">Civil Rights Movement</span></a></span></li>
		<li><span class="menu_r"><a href="radical_islam.html" target="_self"><span class="menu_ar">Radical Islam</span></a></span></li>
		<li><span class="menu_r"><a href="split.html" target="_self"><span class="menu_ar">Split from the NOI</span></a></span></li>
		<li><span class="menu_r"><a href="human_rights.html" target="_self"><span class="menu_ar">Human Rights</span></a></span></li>
		<li><span class="menu_r"><a href="catalyst_for_change.html" target="_self"><span class="menu_ar">Catalyst for Change</span></a></span></li>
		<li><span class="menu_r"><a href="endnotes.html" target="_self"><span class="menu_ar">Endnotes</span></a></span></li>
		<li><span class="menu_r"><a href="bib.html" target="_self"><span class="menu_ar">Bibliography</span></a></span></li>
	</ul>
	<br class="clearit" />
</div>
</div>
  <p align="left" class="style7">&nbsp;</p>
  <p align="left" class="style7">Thesis</p>
  <p class="style6">Although Malcolm X initially preached separationist ideals, his views changed to promoting human rights through the founding of the OAAU and his support behind Pan-Africanism. </p>
    <p align="left"><span class="style7">Abstract</span></p>
    <p class="style6">Malcolm X, being an important civil rights advocate in America, was for some time a Muslim. However, he eventually severed his ties from the Nation of Islam. Malcolm had different views before, during, and after his sojourn with Muslims. The stages he went through drastically changed his views on human rights.</p>
</div>
<br />
</div>
<!-- end page -->
</body>
</html>

Questions
1. How do I get the menu bar to stretch the entire 850px?
2. I want to have a side gradient using repeat-y. It'll simply fade from black to white using this picture:

EDIT: By the way, will the image have to be wider?
3. On the home page I was planning on using a small photo-slideshow program that will run through images and display their respective captions. Fearing difficulty, I just went ahead and created a quick picture video through Google Picasa. Is there an easy way to just have a slideshow embedded on my website instead of me struggling with embedding a video?
That's it guys!

Thanks,
Scarflash

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 7 years 3 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

I'm afraid the questions are

I'm afraid the questions are beside the point at the moment, firstly you must learn to recognize valid well formed markup there are tools that will alert you to markup errors such as the html-tidy extension for Firefox but you should really be able to spot incorrect markup (if it's a help; you have started another head section within the body section!)

If, as I suspect, you are letting the Weaver of lies run your web development, then you must sit up and pay attention and not let it do any work for you, do not use it's preview mode EVER!, do NOT use it's wysiwyg mode EVER!

generally we can only deal with problems when obvious markup errors are cleared up as they constitute a mal-formed DOM and that is no basis to try and correct other issues on.

As for widths a block level element will naturally take 100% of the available space, so you have no need to specify width let it naturally take the parent width (don't start over specifying properties) do ensure though that you control your margins/padding of elements.

As for the other questions you will need to be clearer as they don't make a great deal of sense at the moment.
sidenote:

Please loose the nonsense class names that DW writes style7 is simply tosh and neaningless use names that represent something

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

scarflash
Offline
newbie
Cleveland, Oh
Last seen: 13 years 4 weeks ago
Cleveland, Oh
Joined: 2008-12-29
Posts: 2
Points: 0

all right i fixed a couple

all right i fixed a couple things without using design mode. Is this worthy?

HTML:

<head>
<link rel="stylesheet" href="style.css" type="text/css" />
<style type="text/css">
<!--
.style6 {
	font-size: 12px;
	line-height: 200%;
	font-family: Arial, Helvetica, sans-serif;
}
.style7 {
	font-size: 14pt;
	font-weight: bold;
	padding-top: 0px;
	font-family: Arial, Helvetica, sans-serif;
}
.style17 {color: #7F9DB9}
-->
</style>
</head>
<body>
<div id="page">
<div id="masthead">
<div class="full"> 
<div class="leadin"> 
		<h1><span></span>Malcolm X</h1> 
		<h2>The Struggle for Human Rights</h2> 
</div> 
</div>
</div>
<div id="content">
<link rel="stylesheet" href="style.css" type="text/css" />
<div class="menu bubplastic horizontal blue">
	<ul>
		<li class="highlight"><span class="menu_r"><a href="home.html" target="_self"><span class="menu_ar">Home</span></a></span></li>
		<li><span class="menu_r"><a href="civil.html" target="_self"><span class="menu_ar">Civil Rights Movement</span></a></span></li>
		<li><span class="menu_r"><a href="radical.html" target="_self"><span class="menu_ar">Radical Islam</span></a></span></li>
		<li><span class="menu_r"><a href="split.html" target="_self"><span class="menu_ar">Split from the NOI</span></a></span></li>
		<li><span class="menu_r"><a href="human.html" target="_self"><span class="menu_ar">Human Rights</span></a></span></li>
		<li><span class="menu_r"><a href="catalyst.html" target="_self"><span class="menu_ar">Catalyst for Change</span></a></span></li>
		<li><span class="menu_r"><a href="endnotes.html" target="_self"><span class="menu_ar">Endnotes</span></a></span></li>
		<li><span class="menu_r"><a href="bib.html" target="_self"><span class="menu_ar">Bibliography</span></a></span></li>
	</ul>
</div>
</div>
  <p align="left" class="style7">&nbsp;</p>
  <p align="left" class="style7">Thesis</p>
  <p class="style6">Although Malcolm X initially preached separationist ideals, his views changed to promoting human rights through the founding of the OAAU and his support behind Pan-Africanism. </p>
    <p align="left"><span class="style7">Abstract</span></p>
    <p class="style6">Malcolm X, being an important civil rights advocate in America, was for some time a Muslim. However, he eventually severed his ties from the Nation of Islam. Malcolm had different views before, during, and after his sojourn with Muslims. The stages he went through drastically changed his views on human rights.</p>
<br />
</body>
</html>

CSS:

/* full */
.full .leadin {
	background: url(images/leadin.jpg) no-repeat;
	padding: 100px 0 0 50px;
	height: 140px;
	overflow: visible;
}
.full h1 {
	font: normal 360%/100% "Lucida Grande", Arial, sans-serif;
	position: relative;
	color: #fff;
	width: 390px;
	bottom: 45px;
}
.full h1 span {
	background: url(images/gradient-dark.png) repeat-x;
	position: absolute;
	bottom: 0px;
	display: block;
	width: 100%;
	height: 29px;
}
.full h2 {
	font: normal 150%/100% "Lucida Grande", Arial, sans-serif;
	margin: 10px 0 0;
	color: #b7b7b7;
}
body{
	color: #333333;
	line-height: 1.166;	
	margin: 0px;
	padding: 10px;
}
h1, h2, h3, h4, h5, h6 {
	font-family: Arial,sans-serif;
	margin: 0px;
	padding: 0px;
}
h1{
 font-family: Verdana,Arial,sans-serif;
 font-size: 120%;
 color: #334d55;
}
h2{
 font-size: 114%;
 color: #000000;
}
h3{
 font-size: 100%;
 color: #334d55;
}
h4{
 font-size: 100%;
 font-weight: normal;
 color: #333333;
}
h5{
 font-size: 100%;
 color: #334d55;
}
/***********************************************/
/* Layout Divs                                 */
/***********************************************/
#page{
	width: 850px;
	height: auto;
	float: none;
	text-align:left;
	margin:0 auto;
	width:850px;
	height:auto;
}	
#masthead{
	width: 850px;
	height: 160px;
	float: left;
	margin-bottom: 80px;
}
#content{
	float: none;
	width: 850px;
	height: auto;
	margin: 0 auto;
	text-align:left;
}
/* Menu */	
#bubplastic.horizontal {
	width: 100%;
	height: 30px;
	margin: 0;
	padding: 0;
	background: #000000 url(images/bg-bubplastic.gif) top left repeat-x;
}
#bubplastic.horizontal ul {
	list-style: none;
	margin: 0;
	padding: 0;
}
.bubplastic.horizontal ul li {
	float: left;
	margin: 0;
	padding: 0;
	background: transparent url(images/bg-bubplastic-button.gif) top left no-repeat;
}
.bubplastic.horizontal ul li a {
	display: block;
	height: 30px;
	padding-left: 12px;
	float: left;
	font-family: "Helvetica Neue",helvetica,"microsoft sans serif",arial,sans-serif;
	font-size: 9.3pt;
	color: #FFFFFF;
	text-decoration: none;
}
.bubplastic.horizontal ul li a span.menu_ar {
	display: block;
	float: left;
	height: 30px;
	padding-top: 5px;
	padding-right: 12px;
	background: transparent url(images/bg-bubplastic-button.gif) top right no-repeat;
	cursor: pointer;
}
/* END BUBBLE PLASTIC HORIZONTAL MENU */
/* BLUE HOVER */
.bubplastic.blue ul li a:hover,
.bubplastic.blue ul li.highlight a {
	background: transparent url(images/bg-bubplastic-h-blue.gif) top left no-repeat;
}
.bubplastic.blue ul li a:hover span.menu_ar,
.bubplastic.blue ul li.highlight a span.menu_ar {
	background: transparent url(images/bg-bubplastic-h-blue.gif) top right no-repeat;
}