DW/CS4 oneColFixCtrHdr.css Main Content to right of header?

**Android8675** · 08-11-2010, 10:58 PM

Coder lite here, found this site googling contentslider.

Using CS4 with the oneColFixCtrHdr.css layout, the header has an img and a horizontal SpryMenu that stretches across the page (almost), just below that in the main content I want to use contentslider to display several images below the menu (touching).

When I do it the contentslider stuff appears to the right of the menu instead of below it.

I can replace contentslider with just an image that's the width of the page and it looks great, but the contentslider code shoves everything out to the right of the menu.

Suggestions?

Here's some code, lemme know if I'm missing anything.

.html

Code:

<!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"><!-- InstanceBegin template="/Templates/template3.dwt" codeOutsideHTMLIsLocked="false" -->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- InstanceBeginEditable name="doctitle" -->
<title></title>
<!-- InstanceEndEditable -->
<!-- InstanceBeginEditable name="head" -->

<script type="text/javascript" src="css/contentslider.js">

/***********************************************
* Featured Content Slider- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for this script and 100s more
***********************************************/

</script>
<link href="css/contentslider.css" rel="stylesheet" type="text/css" />

<!-- InstanceEndEditable -->
<link href="css/stylesheet3.css" rel="stylesheet" type="text/css" />
<script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<link href="SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />
</head>

<body class="oneColFixCtrHdr">

<div id="container">

  <div id="header">

		<img src="images/cooltext466555870.png" width="573" height="117" alt="Logo Chrome" />
        <iframe width='300' height='75' scrolling='no' frameborder='0' src='http://spreadsheets.google.com/pub?key=0Amvejp4fknKFdDQxSUpYVktpNHp1TC1hS3F1WGd1Mmc&output=html&gid=0&single=true&range=A1'></iframe>

<br />
    <ul id="MenuBar1" class="MenuBarHorizontal">
	<li><a href="index.html">Home</a> </li>
        <li><a href="services.html" class="MenuBarItemSubmenu">Services</a>
          <ul>
            <li><a href="quotes.html">Quotes</a></li>
            <li><a href="productdetail.html">Product Detail</a></li>
            <li><a href="facilities.html">Facilities</a></li>
            <li><a href="quality.html">Quality</a></li>
            <li><a href="tooling.html">Tooling</a></li>
          </ul>
        </li>
        <li><a href="manufacturers.html">Manufacturers</a> </li>
        <li><a class="MenuBarItemSubmenu" href="contactus.html">Contact Us</a>
          <ul>
            <li><a href="contactus.html">Contact Information</a></li>
            <li><a href="getquote.html">Request a Quote</a></li>
          </ul>
        </li>
    </ul>

  <!-- end #header --></div>

  <div id="mainContent">
    
	<!-- InstanceBeginEditable name="MainContent" -->

	<!--Inner content DIVs should always carry "contentdiv" CSS class-->
	<!--Pagination DIV should always carry "paginate-SLIDERID" CSS class-->
	
	<div id="frontimg" class="sliderwrapper">
	
	<div class="contentdiv">
		<img src="images/20100720 View of the Summit.JPG" width="950" height="713" alt="Yosemite 01" />
	</div>
	
	<div class="contentdiv">
		Content 2 Here. <br />
	<p><a href="javascript:featuredcontentslider.jumpTo('frontimg', 3)">Go to 3rd slide</a></p>
	</div>
	
	<div class="contentdiv">
		<img src="images/20100720 View of the Summit.JPG" width="950" height="713" alt="Yosemite 01" />
	</div>
	
</div>

<div id="paginate-frontimg" class="pagination">

</div>

<script type="text/javascript">

featuredcontentslider.init({
	id: "frontimg",  //id of main slider DIV
	contentsource: ["inline", ""],  //Valid values: ["inline", ""] or ["ajax", "path_to_file"]
	toc: "#increment",  //Valid values: "#increment", "markup", ["label1", "label2", etc]
	nextprev: ["Previous", "Next"],  //labels for "prev" and "next" links. Set to "" to hide.
	revealtype: "click", //Behavior of pagination links to reveal the slides: "click" or "mouseover"
	enablefade: [true, 0.2],  //[true/false, fadedegree]
	autorotate: [true, 3000],  //[true/false, pausetime]
	onChange: function(previndex, curindex){  //event handler fired whenever script changes slide
		//previndex holds index of last slide viewed b4 current (1=1st slide, 2nd=2nd etc)
		//curindex holds index of currently shown slide (1=1st slide, 2nd=2nd etc)
	}
})

</script>

.css

Code:

@charset "utf-8";
body {
	font: 100% Verdana, Arial, Helvetica, sans-serif;
	background: #888;
	margin: 0; /* it's good practice to zero the margin and padding of the body element to account for differing browser defaults */
	padding: 0;
	text-align: center; /* this centers the container in IE 5* browsers. The text is then set to the left aligned default in the #container selector */
	color: #000000;
}
.oneColFixCtrHdr #container {
	width: 950px;  /* using 20px less than a full 800px width allows for browser chrome and avoids a horizontal scroll bar */
	background: #fff;
	margin: 0 auto; /* the auto margins (in conjunction with a width) center the page */
	border: 1px solid #000000;
	text-align: left; /* this overrides the text-align: center on the body element. */
}
.oneColFixCtrHdr #header {
/*	background: #DDDDDD; */
/*	padding: 0 10px 0 20px;  /* this padding matches the left alignment of the elements in the divs that appear beneath it. If an image is used in the #header instead of text, you may want to remove the padding. */
}
.oneColFixCtrHdr #header h1 {
	margin: 0; /* zeroing the margin of the last element in the #header div will avoid margin collapse - an unexplainable space between divs. If the div has a border around it, this is not necessary as that also avoids the margin collapse */
	padding: 10px 0; /* using padding instead of margin will allow you to keep the element away from the edges of the div */
}
.oneColFixCtrHdr #mainContent {
/*	padding: 0 10px; /* remember that padding is the space inside the div box and margin is the space outside the div box */
	background: #FFFFFF;
}
.oneColFixCtrHdr #footer {
	clear: both;
	font-size: 10px;
	border-top-width: 1px;
	border-top-style: solid;
	border-top-color: #990000;
	padding-top: 3px;
	padding-bottom: 3px;
	text-align: center;
/*	padding: 0 10px; /* this padding matches the left alignment of the elements in the divs that appear above it. */
/*	background:#DDDDDD; */
}
.oneColFixCtrHdr #footer p {
	margin: 0; /* zeroing the margins of the first element in the footer will avoid the possibility of margin collapse - a space between divs */
	padding: 10px 0; /* padding on this element will create space, just as the the margin would have, without the margin collapse issue */
}

/*
.rtdwn {
	text-align:right;
	padding-top: 15px;
}
*/

contentslider.css (width adjusted)

Code:

.sliderwrapper{
position: relative; /*leave as is*/
overflow: hidden; /*leave as is*/
border: 0px; /* 10px solid navy; by default (andy) */
border-bottom-width: 6px;
width: 950px; /*width of featured content slider*/
height: 500px;
}



.sliderwrapper .contentdiv{
visibility: hidden; /*leave as is*/
position: absolute; /*leave as is*/
left: 0;  /*leave as is*/
top: 0;  /*leave as is*/
padding: 0px;
background: white;
width: 940px; /*width of content DIVs within slider. Total width should equal slider's inner width (390+5+5=400) */
height: 100%;
filter:progid:DXImageTransform.Microsoft.alpha(opacity=100);
-moz-opacity: 1;
opacity: 1;
}

.pagination{
width: 400px; /*Width of pagination DIV. Total width should equal slider's outer width (400+10+10=420)*/
text-align: right;
background-color: navy;
padding: 5px 10px;
}

.pagination a{
padding: 0 5px;
text-decoration: none; 
color: #00007D;
background: white;
}

.pagination a:hover, .pagination a.selected{
color: #000;
background-color: #FEE496;
}

**Android8675** · 08-11-2010, 11:10 PM

Huh, I uploaded the code and it looks fine. Well that makes it a pain when designing in CS4, but I guess I can live with it. Any suggestions still appreciated.

Thread: DW/CS4 oneColFixCtrHdr.css Main Content to right of header?

Thread Tools

Search Thread

DW/CS4 oneColFixCtrHdr.css Main Content to right of header?

Bookmarks

Bookmarks

Posting Permissions