CSS question on sidebar heights
Just going back to a site I started a while ago, and am going
to have pages with a centre section and two sidebars - but don't
think I'm sure on the best way to ensure the sidebars and the main
content are the same height.
I've been trying with putting a height value in to the
sidebar styles, but have a feeling this isn't the best way to do
it.
At the moment it looks OK in firefox (mac), but not safari,
and I doubt IE - but hopefully people can get the idea of what it
is I'm trying to do.
The page is here :
link
here
And the CSS is here :
CSS
link
Thanks as always.
Google "faux columns".
Murray --- ICQ 71997575
Adobe Community Expert
(If you *MUST* email me, don't LAUGH when you do so!)
==================
http://www.projectseven.com/go
- DW FAQs, Tutorials & Resources
http://www.dwfaq.com - DW FAQs,
Tutorials & Resources
==================
"Iain71" <[email protected]> wrote in
message
news:fem5rb$mn6$[email protected]..
> Just going back to a site I started a while ago, and am
going to have
> pages
> with a centre section and two sidebars - but don't think
I'm sure on the
> best
> way to ensure the sidebars and the main content are the
same height.
>
> I've been trying with putting a height value in to the
sidebar styles, but
> have a feeling this isn't the best way to do it.
>
> At the moment it looks OK in firefox (mac), but not
safari, and I doubt
> IE -
> but hopefully people can get the idea of what it is I'm
trying to do.
>
> The page is here :
>
>
http://www.handprintdvd.co.uk/webdesign/carcarenew/removers.shtml
>
> And the CSS is here :
>
>
http://www.handprintdvd.co.uk/webdesign/carcarenew/main.css
>
> Thanks as always.
>
Similar Messages
-
Hi,
I am using Dreamweaver CS5 for the first time and hope I'm on the right track with rebuilding my site. This page is a work in progress (but getting close). I used a built in template (2 column, header, footer) and changed it a bit.
I am wanting to extend the sidebar height so it will meet up with the footer. There is a space at the bottom showing the background color (white) of the center section. I'd like the sidebar background color (gray) to continue down to the footer. I've messed around with padding and margins but nothing fixed this.
Any help would be appreciated.
AND... does it look like I'm on the right track with everything else? (obviously, I haven't linked any of the accordion items yet)
Thank you
Connie
CSS codes:
@charset "UTF-8";
body {
margin: 0;
padding: 0;
color: #000;
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
line-height: 1.4;
background-color: #600;
background-image: url(../bw4images/bkgd.png);
/* ~~ Element/tag selectors ~~ */
ul, ol, dl { /* Due to variations between browsers, it's best practices to zero padding and margin on lists. For consistency, you can either specify the amounts you want here, or on the list items (LI, DT, DD) they contain. Remember that what you do here will cascade to the .nav list unless you write a more specific selector. */
padding: 0;
margin: 0;
h1, h2, h3, h4, h5, h6, p {
margin-top: 0; /* removing the top margin gets around an issue where margins can escape from their containing div. The remaining bottom margin will hold it away from any elements that follow. */
padding-right: 15px;
padding-left: 15px; /* adding the padding to the sides of the elements within the divs, instead of the divs themselves, gets rid of any box model math. A nested div with side padding can also be used as an alternate method. */
a img { /* this selector removes the default blue border displayed in some browsers around an image when it is surrounded by a link */
border: none;
/* ~~ Styling for your site's links must remain in this order - including the group of selectors that create the hover effect. ~~ */
a:link {
color: #42413C;
text-decoration: underline; /* unless you style your links to look extremely unique, it's best to provide underlines for quick visual identification */
a:visited {
color: #6E6C64;
text-decoration: underline;
a:hover, a:active, a:focus { /* this group of selectors will give a keyboard navigator the same hover experience as the person using a mouse. */
text-decoration: none;
/* ~~this fixed width container surrounds the other divs~~ */
.container {
width: 960px;
background: #FFF;
margin: 0 auto; /* the auto value on the sides, coupled with the width, centers the layout */
/* ~~ the header is not given a width. It will extend the full width of your layout. It contains an image placeholder that should be replaced with your own linked logo ~~ */
.header {
background-color: #FFF;
border-bottom-width: thick;
border-bottom-style: ridge;
border-bottom-color: #600;
padding: 10px;
/* ~~ These are the columns for the layout. ~~
1) Padding is only placed on the top and/or bottom of the divs. The elements within these divs have padding on their sides. This saves you from any "box model math". Keep in mind, if you add any side padding or border to the div itself, it will be added to the width you define to create the *total* width. You may also choose to remove the padding on the element in the div and place a second div within it with no width and the padding necessary for your design. You may also choose to remove the padding on the element in the div and place a second div within it with no width and the padding necessary for your design.
2) No margin has been given to the columns since they are all floated. If you must add margin, avoid placing it on the side you're floating toward (for example: a right margin on a div set to float right). Many times, padding can be used instead. For divs where this rule must be broken, you should add a "display:inline" declaration to the div's rule to tame a bug where some versions of Internet Explorer double the margin.
3) Since classes can be used multiple times in a document (and an element can also have multiple classes applied), the columns have been assigned class names instead of IDs. For example, two sidebar divs could be stacked if necessary. These can very easily be changed to IDs if that's your preference, as long as you'll only be using them once per document.
4) If you prefer your nav on the right instead of the left, simply float these columns the opposite direction (all right instead of all left) and they'll render in reverse order. There's no need to move the divs around in the HTML source.
.sidebar1 {
float: left;
width: 260px;
background-color: #E8E8E8;
border-right-width: 2px;
border-right-style: ridge;
border-right-color: #CCC;
padding-top: 5px;
.content {
width: 696px;
float: left;
padding-top: 10px;
padding-right: 0;
padding-bottom: 0px;
padding-left: 0px;
/* ~~ This grouped selector gives the lists in the .content area space ~~ */
.content ul, .content ol {
padding: 0 15px 15px 40px; /* this padding mirrors the right padding in the headings and paragraph rule above. Padding was placed on the bottom for space between other elements on the lists and on the left to create the indention. These may be adjusted as you wish. */
/* ~~ The navigation list styles (can be removed if you choose to use a premade flyout menu like Spry) ~~ */
ul.nav {
list-style: none; /* this removes the list marker */
border-top: 1px solid #666; /* this creates the top border for the links - all others are placed using a bottom border on the LI */
margin-bottom: 15px; /* this creates the space between the navigation on the content below */
ul.nav li {
border-bottom: 1px solid #666; /* this creates the button separation */
ul.nav a, ul.nav a:visited { /* grouping these selectors makes sure that your links retain their button look even after being visited */
padding: 5px 5px 5px 15px;
display: block; /* this gives the link block properties causing it to fill the whole LI containing it. This causes the entire area to react to a mouse click. */
width: 160px; /*this width makes the entire button clickable for IE6. If you don't need to support IE6, it can be removed. Calculate the proper width by subtracting the padding on this link from the width of your sidebar container. */
text-decoration: none;
background: #C6D580;
/* ~~ The footer ~~ */
.footer {
position: relative;/* this gives IE6 hasLayout to properly clear */
clear: both; /* this clear property forces the .container to understand where the columns end and contain them */
background-color: #CCC;
padding-right: 10px;
padding-bottom: 20px;
padding-left: 10px;
border-top-width: thick;
border-top-style: ridge;
border-top-color: #600;
padding-top: 10px;
/* ~~ miscellaneous float/clear classes ~~ */
.fltrt { /* this class can be used to float an element right in your page. The floated element must precede the element it should be next to on the page. */
float: right;
margin-left: 8px;
.fltlft { /* this class can be used to float an element left in your page. The floated element must precede the element it should be next to on the page. */
float: left;
margin-right: 8px;
.clearfloat { /* this class can be placed on a <br /> or empty div as the final element following the last floated div (within the #container) if the #footer is removed or taken out of the #container */
clear:both;
height:0;
font-size: 1px;
line-height: 0px;
@charset "UTF-8";
/* CSS Document */
@import url("global.css");
h1 {
color: #600;
padding-right: 15px;
padding-left: 15px;
h2 {
color: #600;
h3 {
color: #600;
text-align: center;
h4 {
color: #FFF;
padding-left: 2px;
.smalltext {
font-size: 10px;
color: #000;
.twelvetext {
font-size: 12px;
a:link {
color: #960;
text-decoration: none;
a:visited {
color: #600;
text-decoration: none;
a:hover {
color: #960;
text-decoration: underline;
a:active {
color: #960;
text-decoration: underline;
.center {
text-align: center;
.products {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
width: 940px;
border-collapse: collapse;
border-right-width: 1px;
border-left-width: 1px;
border-right-style: solid;
border-left-style: solid;
border-right-color: #CCC;
border-left-color: #CCC;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #CCC;
.odd {
background-color: #CCC;
.products th {
text-transform: uppercase;
color: #FFF;
background-color: #600;
background-image: url(../bw4images/bkgd.png);
text-align: left;
font-size: 12px;
font-family: Tahoma, Geneva, sans-serif;
padding-top: 4px;
padding-right: 5px;
padding-bottom: 2px;
padding-left: 5px;
border: 1px solid #600;
.products td {
padding-top: 2px;
padding-right: 2px;
padding-bottom: 2px;
padding-left: 8px;
border-top-width: 0px;
border-right-width: 0px;
border-bottom-width: 0px;
border-left-width: 0px;
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
h5 {
font-size: 14px;
font-style: italic;
color: #600;
@charset "UTF-8";
/* SpryAccordion.css - version 0.5 - Spry Pre-Release 1.6.1 */
/* Copyright (c) 2006. Adobe Systems Incorporated. All rights reserved. */
/* This is the selector for the main Accordion container. For our default style,
* we draw borders on the left, right, and bottom. The top border of the Accordion
* will be rendered by the first AccordionPanelTab which never moves.
* If you want to constrain the width of the Accordion widget, set a width on
* the Accordion container. By default, our accordion expands horizontally to fill
* up available space.
* The name of the class ("Accordion") used in this selector is not necessary
* to make the widget function. You can use any class name you want to style the
* Accordion container.
.Accordion {
overflow: hidden;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-right-color: #000;
border-bottom-color: #000;
border-left-color: #000;
/* This is the selector for the AccordionPanel container which houses the
* panel tab and a panel content area. It doesn't render visually, but we
* make sure that it has zero margin and padding.
* The name of the class ("AccordionPanel") used in this selector is not necessary
* to make the widget function. You can use any class name you want to style an
* accordion panel container.
.AccordionPanel {
margin: 0px;
padding: 0px;
/* This is the selector for the AccordionPanelTab. This container houses
* the title for the panel. This is also the container that the user clicks
* on to open a specific panel.
* The name of the class ("AccordionPanelTab") used in this selector is not necessary
* to make the widget function. You can use any class name you want to style an
* accordion panel tab container.
* NOTE:
* This rule uses -moz-user-select and -khtml-user-select properties to prevent the
* user from selecting the text in the AccordionPanelTab. These are proprietary browser
* properties that only work in Mozilla based browsers (like FireFox) and KHTML based
* browsers (like Safari), so they will not pass W3C validation. If you want your documents to
* validate, and don't care if the user can select the text within an AccordionPanelTab,
* you can safely remove those properties without affecting the functionality of the widget.
.AccordionPanelTab {
background-color: #960;
margin: 0px;
cursor: pointer;
-moz-user-select: none;
-khtml-user-select: none;
font-family: Tahoma, Geneva, sans-serif;
font-size: 14px;
font-weight: bold;
color: #FFF;
padding-top: 6px;
padding-right: 2px;
padding-bottom: 6px;
padding-left: 10px;
background-image: url(../bw4images/SpryAccordionLabel.gif);
border-top-width: 1px;
border-bottom-width: 1px;
border-top-style: solid;
border-bottom-style: groove;
border-top-color: black;
border-bottom-color: #000;
/* This is the selector for a Panel's Content area. It's important to note that
* you should never put any padding on the panel's content area if you plan to
* use the Accordions panel animations. Placing a non-zero padding on the content
* area can cause the accordion to abruptly grow in height while the panels animate.
* Anyone who styles an Accordion *MUST* specify a height on the Accordion Panel
* Content container.
* The name of the class ("AccordionPanelContent") used in this selector is not necessary
* to make the widget function. You can use any class name you want to style an
* accordion panel content container.
.AccordionPanelContent {
overflow: auto;
margin: 0px;
height: 200px;
font-family: Tahoma, Geneva, sans-serif;
font-size: 14px;
line-height: 1.4em;
.Accordion p {
font-weight: bold;
padding-top: 6px;
padding-right: 2px;
padding-bottom: 2px;
padding-left: 30px;
line-height: 1.4em;
/* This is an example of how to change the appearance of the panel tab that is
* currently open. The class "AccordionPanelOpen" is programatically added and removed
* from panels as the user clicks on the tabs within the Accordion.
.AccordionPanelOpen .AccordionPanelTab {
background-color: #EEEEEE;
background-image: none;
/* This is an example of how to change the appearance of the panel tab as the
* mouse hovers over it. The class "AccordionPanelTabHover" is programatically added
* and removed from panel tab containers as the mouse enters and exits the tab container.
.AccordionPanelTabHover {
color: #FFF;
background-color: #600;
background-image: none;
.AccordionPanelOpen .AccordionPanelTabHover {
color: #FFF;
background-color: #600;
background-image: none;
/* This is an example of how to change the appearance of all the panel tabs when the
* Accordion has focus. The "AccordionFocused" class is programatically added and removed
* whenever the Accordion gains or loses keyboard focus.
.AccordionFocused .AccordionPanelTab {
background-color: #960;
background-image: url(../bw4images/SpryAccordionLabel.gif);
/* This is an example of how to change the appearance of the panel tab that is
* currently open when the Accordion has focus.
.AccordionFocused .AccordionPanelOpen .AccordionPanelTab {
background-color: #600;
background-image: none;
/* Rules for Printing */
@media print {
.Accordion {
overflow: visible !important;
.AccordionPanelContent {
display: block !important;
overflow: visible !important;
height: auto !important;
PAGE 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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Go for the Works...Brassworks 4 Sheet Music Sales</title>
<link href="site_styles/twoColFixLtHdr.css" rel="stylesheet" type="text/css" />
<link href="site_styles/global.css" rel="stylesheet" type="text/css" />
<script src="SpryAssets/SpryAccordion.js" type="text/javascript"></script>
<link href="SpryAssets/SpryAccordion.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-802730-1']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
</script></head>
<body>
<div class="container">
<div class="header">
<p><a href="#"><img src="bw4images/gofortheworks.gif" width="260" height="26" alt="go for the works" /></a>
<!-- end .header -->
</p>
<p class="center"><img src="bw4images/bw4lg.gif" width="496" height="130" alt="logo" /><br />
- a large selection of <strong>Brass Ensemble Music</strong> sure to fill your every need -<br />
Solos, Duets, Trios, Quartets, Quintets, Sextets, Choirs, Brass Band and More!<br />
Plus Method Books, Studies & Etudes - Strings, Woodwinds with Piano</p>
<p class="center"> </p><!-- #BeginLibraryItem "/Library/FreeFind.lbi" -->
<table border=0 align="center" cellpadding=0 cellspacing=0 >
<tr>
<td style="font-family: Arial, Helvetica, sans-serif; font-size: 10pt;"><form style="margin:0px; margin-top:4px;" action="http://search.freefind.com/find.html" method="get" accept-charset="utf-8" target="_self">
<input type="hidden" name="si" value="61521846">
<input type="hidden" name="pid" value="r">
<input type="hidden" name="n" value="0">
<input type="hidden" name="_charset_" value="">
<input type="hidden" name="bcd" value="÷">
<input type="text" name="query" size="40">
<input type="submit" value="Search BW4">
</form></td>
</tr>
</table>
<!-- #EndLibraryItem --></p>
</div>
<div class="sidebar1">
<h3>CHOOSE A CATEGORY<br />
to enter the store
</h3>
<div id="HomePageAccordion" class="Accordion" tabindex="0">
<div class="AccordionPanel">
<div class="AccordionPanelTab">Brass Ensembles</div>
<div class="AccordionPanelContent">
<p>Duets<br />
Trios<br />
Quartets<br />
Quintets<br />
Sextets<br />
Septets<br />
Octets<br />
Choirs 9+<br />
Tuba-Euphonium</p>
</div>
</div>
<div class="AccordionPanel">
<div class="AccordionPanelTab">Trumpet</div>
<div class="AccordionPanelContent">
<p>Solos<br />
Duets<br />
Ensembles 3+
</p>
</div>
</div>
<div class="AccordionPanel">
<div class="AccordionPanelTab">French Horn</div>
<div class="AccordionPanelContent">
<p>Solos<br />
Duets<br />
Ensembles 3+ </p>
</div>
</div>
<div class="AccordionPanel">
<div class="AccordionPanelTab">Trombone</div>
<div class="AccordionPanelContent">
<p>Solos<br />
Duets<br />
Trios<br />
Quartets<br />
Ensembles 5+
</p>
</div>
</div>
<div class="AccordionPanel">
<div class="AccordionPanelTab">Euphonium</div>
<div class="AccordionPanelContent">
<p>Solos<br />
Duets<br />
Ensembles 3+<br />
w/ Tuba </p>
</div>
</div>
<div class="AccordionPanel">
<div class="AccordionPanelTab">Tuba</div>
<div class="AccordionPanelContent">
<p>Solos<br />
Duets<br />
Ensembles 3+<br />
w/ Euphonium
</p>
</div>
</div>
<div class="AccordionPanel">
<div class="AccordionPanelTab">Tuba - Euphonium</div>
<div class="AccordionPanelContent">
<p>Duets<br />
Trios<br />
Quartets<br />
Quintets 5+
</p>
</div>
</div>
<div class="AccordionPanel">
<div class="AccordionPanelTab">Christmas Music</div>
<div class="AccordionPanelContent">
<p>Quartets (mixed)<br />
Quintets<br />
Various Solos & Ensembles
</p>
</div>
</div>
<div class="AccordionPanel">
<div class="AccordionPanelTab">Hymn Tunes & Sacred Music</div>
<div class="AccordionPanelContent">
<p>Quartets (mixed)<br />
Quintets (mixed)<br />
Various Solos & Ensembles
</p>
</div>
</div>
<div class="AccordionPanel">
<div class="AccordionPanelTab">Wedding & Ceremonial Music</div>
<div class="AccordionPanelContent">
<p>Quartets (mixed)<br />
Quintets (mixed)<br />
Various Solos & Ensembles </p>
</div>
</div>
<div class="AccordionPanel">
<div class="AccordionPanelTab">Brass & Organ</div>
<div class="AccordionPanelContent">
<p>Solos w/ Organ<br />
Ensembles w/ Organ
</p>
</div>
</div>
<div class="AccordionPanel">
<div class="AccordionPanelTab">Method Books</div>
<div class="AccordionPanelContent">
<p>Methods & Etudes</p>
</div>
</div>
<div class="AccordionPanel">
<div class="AccordionPanelTab">Strings</div>
<div class="AccordionPanelContent">
<p>Brass & Strings<br />
WW & Strings
</p>
</div>
</div>
<div class="AccordionPanel">
<div class="AccordionPanelTab">Woodwinds</div>
<div class="AccordionPanelContent">
<p>Solos<br />
Ensembles<br />
Sax Ensembles
</p>
</div>
</div>
<div class="AccordionPanel">
<div class="AccordionPanelTab">Bands</div>
<div class="AccordionPanelContent">
<p>Concert Band<br />
Jazz Band
</p>
</div>
</div>
<div class="AccordionPanel">
<div class="AccordionPanelTab">Brass CDs & Cassettes</div>
<div class="AccordionPanelContent">
<p>CDs & Cassettes</p>
</div>
</div>
</div>
<p> </p>
</div>
<div class="content">
<h1>Welcome to Brassworks 4 Sheet Music Sales !</h1>
<p>To browse through our catalog (3500+ titles), simply use the menu to the left and select a category.
The full catalog is accessible from every page within the site by navigating to the top menu. Score and sound samples are available on select items. If a sample is missing, please email and we will try to provide a sample for you.</p>
<h3>Orders are usually shipped within 24-48 hours. </h3>
<table align="center" cellpadding="2" cellspacing="2">
<tr align="center">
<td><h3><a href="payment_shipping.html">Payment Options - Shipping Information</a><br />
<span class="twelvetext">We accept Church and School POs - please <a href="contact_brassworks4.html">phone or email</a> your order</span></h3></td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td><h2><span style="text-align: left; font-size: 14px;">New Releases • Tuba/Euph Specialty Catalog • <a href="reviews.html">Reviews</a></span></h2></td>
</tr>
<tr>
<td> </td>
</tr>
<tr align="center">
<td><span class="center"><span class="twelvetext">Download a <a href="PDFs/PrintableCatalog.pdf">PDF Printable Version</a> of our entire catalog.</span></span></td>
</tr>
</table>
<p> </p>
<!-- #BeginLibraryItem "/Library/NewsLetter.lbi" -->
<div align="center">
<table border="0" cellspacing="0" cellpadding="3" bgcolor="#FFFFFF" style="border:2px solid #660000;">
<tr>
<td align="center" style="font-weight: bold; font-family:Arial; font-size:13px; color:#660000;">Receive our Newsletter</td>
</tr>
<tr>
<td align="center" style="border-top:2px solid #660000"><form name="ccoptin" action="http://visitor.r20.constantcontact.com/d.jsp" target="_blank" method="post" style="margin-bottom:2;">
<input type="hidden" name="llr" value="e9iq8ucab">
<input type="hidden" name="m" value="1102359044932">
<input type="hidden" name="p" value="oi">
<font style="font-weight: normal; font-family:Arial; font-size:13px; color:#000000;">Email:</font>
<input type="text" name="ea" size="20" value="" style="font-size:10pt; border:1px solid #999999;">
<input type="submit" name="go" value="Go" class="submit" style="font-family:Verdana,Geneva,Arial,Helvetica,sans-serif; font-size:10pt;">
</form></td>
</tr>
</table>
</div>
<!-- END: Constant Contact Basic Opt-in Email List Form -->
<!-- BEGIN: SafeSubscribe -->
<div align="center" style="padding-top:5px;"> <img src="https://imgssl.constantcontact.com/ui/images1/safe_subscribe_logo.gif" border="0" width="200" height="14" alt=""/> </div>
<!-- #EndLibraryItem --></p>
</p>
</p>
</p>
</p>
<hr />
<h2><img src="bw4images/smcoverphoto.jpeg" alt="BW4 Group Photo" width="210" height="162" class="fltrt" />Brassworks 4 </h2>
<p>Although Brassworks 4 is no longer together as a performing quartet, I felt it necessary to include the history of the group within this website. Afterall, this store wouldn't have existed without the hard work and determination of the four of us together. To read more about who we were and what we did, visit <a href="history.html">About Us</a> </p>
</div>
<div class="footer">
<table style="width:100%; background-color:#cccccc; border:0;">
<tbody>
<tr>
<td><span class="smalltext">© 2011 Brassworks 4 Sheet Music Sales</span> • <a href="contact_brassworks4.html">Contact Us</a></td>
<td style="text-align: right;"><span style="text-align: right; font-size: 14px;"><a href="payment_shipping.html">Payment/Shipping </a> • <a href="composers.html">Composers</a> • <a href="reviews.html">Reviews </a>• <a href="brass_links.html">Brass Links</a> • <a href="history.html">About Us </a>• <a href="index.html">Home</a></span></td>
</tr>
</tbody>
</table>
<p> </p>
<!-- end .footer --></div>
<!-- end .container --></div>
<script type="text/javascript">
var Accordion1 = new Spry.Widget.Accordion("HomePageAccordion", { useFixedPanelHeights: false, defaultPanel: -1 });
</script>
</body>
</html>Thank you - I am determined to get this right.
As for navigation, what would you recommend for a catalog with numerous subitems? I had built a Spry Menu for my catalog template pages (same basic items but in a horizontal menu) But as you mentioned, that is not a good idea. My current site http://brassworks4.com was done in GoLIve and I was able to build my menus in MenuMachine, both vertical on the home page and horizontal on the catalog pages. Now I'm not sure what to do.
I am planning on putting all my data in tables within the same page as a Spry Data Set (so non-javascript people can view the tables) Is that a good idea?
I'm at a loss now for the menus/navigation items.
I appreciate your input. -
Hi everyone, I have two CSS questions regarding my layout.
First off, it is located at:
http://robles.clunet.edu/~ssmi/tsr9/tsr9template.html
The CSS is embeded in the file (it will linked from a
different file once I am done with this design, but beside the
point)
My first question is about how I can keep the right top image
from being bumped down to the next line when the window is resized.
I want it to squeeze into some, but then at a point have the scroll
bars kick in.
My other question is how I could make the title image "The
Scott Report" centered between the two left and right images up
top.
Could anyone help out?
Thanks a lot!Check the AppleCare number for your country here:
http://support.apple.com/kb/HE57
Call them up, and let them know you would like to be transferred to the Account Security Team. -
I have a picture i am trying to put inside a div that has a class already which makes pictures have a frame around them when i insert them into it, which is fine for the main image but i am trying to add an extra image in there and i dont want that frame to be there.
I will attach a picture and a link to the site i am talking about.
If anyone can help me with this CSS question or how i can go about getting rid of the frame around the step 1, step 2 and step 3.
eWeb Solutions Website Development
Thanks!Take the frame class out the div and apply it to select images like this:
<div>
<img class="frame" src="step1.jpg">
<img src="picture1.jpg">
</div>
<div>
<img class="frame" src="step2.jpg">
<img src="picture2.jpg">
</div>
Nancy O. -
CheckboxDatagrid (extended) CSS question
Hello
In our application we make use of the CheckBoxDataGrid, which rocks.
We are playing with the CSS and noticed that we arent able to change the "chromeColor" property, in CSS. Only in the MXML.
I would like to set the style in the CheckBoxDataGrid super class, but I do not see a way to specify "headerStyleName".
How and where would that occur in an extended class? Would it need to happen in the constructor?
Also, how would you re-assign the CSS, in ActionScript, in this extended DataGrid class? Any ideas?
Any help is appreciated, thanks folks!kumar wrote:
Browser: IE 7 (** Is it the browser issue**)Yes. Interactive Report CSS question.. expands the page width to accommodate the IR, with a scrollbar on the viewport that allow the user to view the full width.
Remove
#apexir_DATA_PANEL {
margin-bottom: 10px;
overflow: auto;
}The IE7 bug can be addressed by feeding it the following CSS fix targeted at pre-IE8 browsers with a conditional comment in the page HTML Header:
<!--[if lt IE 8]>
<style type="text/css">
#too-wide .rc-body {
float: none;
</style>
<![endif]-->Specify the <tt>too-wide</tt> static region ID on the IR region for use as a CSS selector.
However, presenting information in a way that requires users to scroll the viewport horizontally is clunky. This will be particularly true in combination with an IR. Think about the user experience: is there an alternative way of displaying this information? -
CSS layout - two questions on sidebar
So I'm having trouble with my sidebar:
site
1. I want to get it to stretch to the bottom of the div it's
in, with a 10 px margin on the bottom, basically, stretch exactly
the same distance down as the main content div. I get the
impression this is tough in CSS, but there has to be some work
around? I don't think I can use faux columns in this instance,
though if it's possible please explain how.
2. This isn't really a big deal, but it'd be nice to have a 1
px black line on only the left side of my sidebar (I have one drawn
onto the actual images, it'd be nice to do that in CSS). Is this
possible?
Thanks a lot and sorry for the beginner questions.I have another question about the same site. In IE I'm
getting this:
pic
In Firefox I'm getting this:
pic
Firefox is much closer to what I want, but I'm not sure why
IE is showing up like it does. Seems the margins are changing and
IE is padding my sidebar for some reason. Any ideas? -
If you would take a look at this page http://www.gcfa.org/add_data.asp you will see that between the header and the navigation bar a white line is there. I don't won't it there, how can I get rid of it?
It must be in my CSS I guess, I checked the images and neither one of them the Header nor the Navigation menu have a white border. Here's my code. Thanks in advance for your help.
My page:
<%@LANGUAGE="VBSCRIPT"%>
<!--#include file="Connections/BishopsLogin.asp" -->
<%
Dim MM_editAction
MM_editAction = CStr(Request.ServerVariables("SCRIPT_NAME"))
If (Request.QueryString <> "") Then
MM_editAction = MM_editAction & "?" & Server.HTMLEncode(Request.QueryString)
End If
' boolean to abort record edit
Dim MM_abortEdit
MM_abortEdit = false
%>
<%
If (CStr(Request("MM_insert")) = "form1") Then
If (Not MM_abortEdit) Then
' execute the insert
Dim MM_editCmd
Set MM_editCmd = Server.CreateObject ("ADODB.Command")
MM_editCmd.ActiveConnection = MM_BishopsLogin_STRING
MM_editCmd.CommandText = "INSERT INTO dbo.DeptData (Department, SubpageTitle, LinkDescription, URL, DateLastModified, ModifiedBy) VALUES (?, ?, ?, ?, ?, ?)"
MM_editCmd.Prepared = true
MM_editCmd.Parameters.Append MM_editCmd.CreateParameter("param1", 201, 1, 30, Request.Form("Department")) ' adLongVarChar
MM_editCmd.Parameters.Append MM_editCmd.CreateParameter("param2", 201, 1, 1000, Request.Form("SubpageTitle")) ' adLongVarChar
MM_editCmd.Parameters.Append MM_editCmd.CreateParameter("param3", 201, 1, 1000, Request.Form("LinkDescription")) ' adLongVarChar
MM_editCmd.Parameters.Append MM_editCmd.CreateParameter("param4", 201, 1, 500, Request.Form("URL")) ' adLongVarChar
MM_editCmd.Parameters.Append MM_editCmd.CreateParameter("param5", 201, 1, 10, Request.Form("DateLastModified")) ' adLongVarChar
MM_editCmd.Parameters.Append MM_editCmd.CreateParameter("param6", 201, 1, 50, Request.Form("ModifiedBy")) ' adLongVarChar
MM_editCmd.Execute
MM_editCmd.ActiveConnection.Close
' append the query string to the redirect URL
Dim MM_editRedirectUrl
MM_editRedirectUrl = "adding_data_results.asp"
If (Request.Form<> "") Then
If (InStr(1, MM_editRedirectUrl, "?", vbTextCompare) = 0) Then
MM_editRedirectUrl = MM_editRedirectUrl & "?" & Request.Form
Else
MM_editRedirectUrl = MM_editRedirectUrl & "&" & Request.Form
End If
End If
Response.Redirect(MM_editRedirectUrl)
End If
End If
%>
<%
Dim rs_Add_Data__MMColParam
rs_Add_Data__MMColParam = "1"
If (Request.QueryString("RecordID") <> "") Then
rs_Add_Data__MMColParam = Request.QueryString("RecordID")
End If
%>
<%
Dim rs_Add_Data
Dim rs_Add_Data_cmd
Dim rs_Add_Data_numRows
Set rs_Add_Data_cmd = Server.CreateObject ("ADODB.Command")
rs_Add_Data_cmd.ActiveConnection = MM_BishopsLogin_STRING
rs_Add_Data_cmd.CommandText = "SELECT ID, Department, SubpageTitle, LinkDescription, URL, DateLastModified, ModifiedBy FROM dbo.DeptData WHERE ID = ? ORDER BY ID DESC"
rs_Add_Data_cmd.Prepared = true
rs_Add_Data_cmd.Parameters.Append rs_Add_Data_cmd.CreateParameter("param1", 5, 1, -1, rs_Add_Data__MMColParam) ' adDouble
Set rs_Add_Data = rs_Add_Data_cmd.Execute
rs_Add_Data_numRows = 0
%>
<%
Dim MM_paramName
%>
<%
' *** Go To Record and Move To Record: create strings for maintaining URL and Form parameters
Dim MM_keepNone
Dim MM_keepURL
Dim MM_keepForm
Dim MM_keepBoth
Dim MM_removeList
Dim MM_item
Dim MM_nextItem
' create the list of parameters which should not be maintained
MM_removeList = "&index="
If (MM_paramName <> "") Then
MM_removeList = MM_removeList & "&" & MM_paramName & "="
End If
MM_keepURL=""
MM_keepForm=""
MM_keepBoth=""
MM_keepNone=""
' add the URL parameters to the MM_keepURL string
For Each MM_item In Request.QueryString
MM_nextItem = "&" & MM_item & "="
If (InStr(1,MM_removeList,MM_nextItem,1) = 0) Then
MM_keepURL = MM_keepURL & MM_nextItem & Server.URLencode(Request.QueryString(MM_item))
End If
Next
' add the Form variables to the MM_keepForm string
For Each MM_item In Request.Form
MM_nextItem = "&" & MM_item & "="
If (InStr(1,MM_removeList,MM_nextItem,1) = 0) Then
MM_keepForm = MM_keepForm & MM_nextItem & Server.URLencode(Request.Form(MM_item))
End If
Next
' create the Form + URL string and remove the intial '&' from each of the strings
MM_keepBoth = MM_keepURL & MM_keepForm
If (MM_keepBoth <> "") Then
MM_keepBoth = Right(MM_keepBoth, Len(MM_keepBoth) - 1)
End If
If (MM_keepURL <> "") Then
MM_keepURL = Right(MM_keepURL, Len(MM_keepURL) - 1)
End If
If (MM_keepForm <> "") Then
MM_keepForm = Right(MM_keepForm, Len(MM_keepForm) - 1)
End If
' a utility function used for adding additional parameters to these strings
Function MM_joinChar(firstItem)
If (firstItem <> "") Then
MM_joinChar = "&"
Else
MM_joinChar = ""
End If
End Function
%>
<!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=utf-8" />
<title>GCFA: Update Data Files</title>
<link href="samples/OneColumn.css" rel="stylesheet" type="text/css" />
<style type="text/css" media="screen">
@import url("images/nav_bar.css");
</style>
<script language="JavaScript1.2" type="text/javascript" src="images/mm_css_menu.js"></script>
<script type="text/javascript">
<!--
function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
//-->
</script>
</head>
<body class="oneColLiqCtrHdr" onload="MM_preloadImages('images/Slices/nav_bar_r2_c2_f2.gif','images/Slices/nav_bar_r2_c 3_f2.gif','images/Slices/nav_bar_r2_c5_f2.gif')">
<div id="container">
<div id="header">
<div id="#DataFiles_LOGO"></div>
</div>
<div id="mainContent">
<div id="FWTableContainer1445733177">
<table border="0" cellpadding="0" cellspacing="0" width="799">
<!-- fwtable fwsrc="nav_bar_revised.png" fwpage="Page 1" fwbase="nav_bar.gif" fwstyle="Dreamweaver" fwdocid = "1445733177" fwnested="0" -->
<tr>
<td><img src="images/Slices/spacer.gif" width="1" height="1" border="0" alt="" /></td>
<td><img src="images/Slices/spacer.gif" width="221" height="1" border="0" alt="" /></td>
<td><img src="images/Slices/spacer.gif" width="221" height="1" border="0" alt="" /></td>
<td><img src="images/Slices/spacer.gif" width="5" height="1" border="0" alt="" /></td>
<td><img src="images/Slices/spacer.gif" width="221" height="1" border="0" alt="" /></td>
<td><img src="images/Slices/spacer.gif" width="130" height="1" border="0" alt="" /></td>
<td><img src="images/Slices/spacer.gif" width="1" height="1" border="0" alt="" /></td>
</tr>
<tr>
<td colspan="6"><img name="nav_bar_r1_c1" src="images/Slices/nav_bar_r1_c1.gif" width="799" height="5" border="0" id="nav_bar_r1_c1" alt="" /></td>
<td><img src="images/Slices/spacer.gif" width="1" height="5" border="0" alt="" /></td>
</tr>
<tr>
<td rowspan="2"><img name="nav_bar_r2_c1" src="images/Slices/nav_bar_r2_c1.gif" width="1" height="25" border="0" id="nav_bar_r2_c1" alt="" /></td>
<td><a href="javascript:;" onmouseout="MM_swapImgRestore();MM_menuStartTimeout(1000)" onmouseover="MM_menuShowMenu('MMMenuContainer1015135953_0', 'MMMenu1015135953_0',6,24,'nav_bar_r2_c2');MM_swapImage('nav_bar_r2_c2','','images/Slices /nav_bar_r2_c2_f2.gif',1);"><img name="nav_bar_r2_c2" src="images/Slices/nav_bar_r2_c2.gif" width="221" height="24" border="0" id="nav_bar_r2_c2" alt="" /></a></td>
<td><a href="http://www.gcfa.org/Department_Data.aspx" target="_top" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('nav_bar_r2_c3','','images/Slices/nav_bar_r2_c3_f2.gif',1);"><i mg name="nav_bar_r2_c3" src="images/Slices/nav_bar_r2_c3.gif" width="221" height="24" border="0" id="nav_bar_r2_c3" alt="Department Data Files" /></a></td>
<td rowspan="2"><img name="nav_bar_r2_c4" src="images/Slices/nav_bar_r2_c4.gif" width="5" height="25" border="0" id="nav_bar_r2_c4" alt="" /></td>
<td><a href="http://www.gcfa.org/help_topics.html" target="_top" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('nav_bar_r2_c5','','images/Slices/nav_bar_r2_c5_f2.gif',1);"><i mg name="nav_bar_r2_c5" src="images/Slices/nav_bar_r2_c5.gif" width="221" height="24" border="0" id="nav_bar_r2_c5" alt="Help Topics" /></a></td>
<td rowspan="2"><img name="nav_bar_r2_c6" src="images/Slices/nav_bar_r2_c6.gif" width="130" height="25" border="0" id="nav_bar_r2_c6" alt="" /></td>
<td><img src="images/Slices/spacer.gif" width="1" height="24" border="0" alt="" /></td>
</tr>
<tr>
<td colspan="2"><img name="nav_bar_r3_c2" src="images/Slices/nav_bar_r3_c2.gif" width="442" height="1" border="0" id="nav_bar_r3_c2" alt="" /></td>
<td><img name="nav_bar_r3_c5" src="images/Slices/nav_bar_r3_c5.gif" width="221" height="1" border="0" id="nav_bar_r3_c5" alt="" /></td>
<td><img src="images/Slices/spacer.gif" width="1" height="1" border="0" alt="" /></td>
</tr>
</table>
<div id="MMMenuContainer1015135953_0">
<div id="MMMenu1015135953_0" onmouseout="MM_menuStartTimeout(1000);" onmouseover="MM_menuResetTimeout();"> <a href="http://www.gcfa.org/add_data.asp" target="_top" id="MMMenu1015135953_0_Item_0" class="MMMIFVStyleMMMenu1015135953_0" onmouseover="MM_menuOverMenuItem('MMMenu1015135953_0');"> Add Data </a> <a href="http://www.gcfa.org/update_data.asp" target="_top" id="MMMenu1015135953_0_Item_1" class="MMMIVStyleMMMenu1015135953_0" onmouseover="MM_menuOverMenuItem('MMMenu1015135953_0');"> Update Data </a> <a href="http://www.gcfa.org/delete_data.asp" target="_top" id="MMMenu1015135953_0_Item_2" class="MMMIVStyleMMMenu1015135953_0" onmouseover="MM_menuOverMenuItem('MMMenu1015135953_0');"> Delete Data </a> </div>
</div>
</div>
<br />
<br />
<br />
<br />
<br />
<strong>Enter the information you are wanting to add to our database:</strong><br />
</div>
<form ACTION="<%=MM_editAction%>" METHOD="POST" name="form1" target="_top" id="form1">
<table width="689" align="left">
<tr valign="baseline">
<td align="left" valign="top" nowrap="nowrap">Department:</td>
<td><label>
<input name="Department" type="text" id="Department" size="75" maxlength="500" />
</label></td>
</tr>
<tr valign="baseline">
<td align="left" valign="top" nowrap="nowrap">Subpage Title:</td>
<td><label>
<input name="SubpageTitle" type="text" id="SubpageTitle" size="75" maxlength="1000" />
</label></td>
</tr>
<tr valign="baseline">
<td align="left" valign="top" nowrap="nowrap">Link Description:</td>
<td><label>
<input name="LinkDescription" type="text" id="LinkDescription" size="75" maxlength="1000" />
</label></td>
</tr>
<tr valign="baseline">
<td align="left" valign="top" nowrap="nowrap">URL:</td>
<td><input name="URL" type="text" id="URL" size="75" maxlength="500" /></td>
</tr>
<tr valign="baseline">
<td height="24" align="left" valign="top" nowrap="nowrap">Date Modified:</td>
<td><input name="DateLastModified" type="text" id="DateLastModified" size="75" maxlength="10" /></td>
</tr>
<tr valign="baseline">
<td align="left" valign="top" nowrap="nowrap">Modified By:</td>
<td><label>
<input name="ModifiedBy" type="text" id="ModifiedBy" size="75" maxlength="50" />
</label></td>
</tr>
<tr valign="baseline">
<td height="20" align="left" valign="top" nowrap="nowrap"> </td>
<td> </td>
</tr>
<tr valign="baseline">
<td align="left" valign="top" nowrap="nowrap"><p> </p></td>
<td align="left" valign="top" nowrap="nowrap"><label>
<input type="submit" name="Add_Info" id="Add_Info" value="Add data to database now!" />
</label></td>
</tr>
</table>
<p> </p>
<p><br />
<br />
<br />
<br />
</p>
<p> </p>
<p> </p>
<p> </p>
<p><br />
</p>
<input type="hidden" name="MM_insert" value="form1" />
</form> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
</div>
<div id="footer">
<p align="center">This site is maintained by the General Council on Finance and Administration <script language="JavaScript">
var today_date= new Date()
var year=today_date.getFullYear()
document.write(year)
//--> </script>
©</p>
<!-- end #footer --></div>
<!-- end #container --></div>
</body>
</html>
<%
rs_Add_Data.Close()
Set rs_Add_Data = Nothing
%>
My CSS Pages:
@charset "utf-8";
body {
/*background:#ffffff;*/
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;*/
width: 100%;
font-family: Verdana, Arial, Helvetica, sans-serif;
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
background-repeat: no-repeat;
background-position: right top;
background-image: url(../images/body_bg.jpg);
.oneColLiqCtrHdr #container {
width: 99%; /* 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. */
margin-top: 0;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;
background-color: ;
background-repeat: no-repeat;
background-position: right top;
.oneColLiqCtrHdr #header {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-weight: 700;
color: #FFFFFF;
font-size: 18px;
background-repeat: no-repeat;
height: 124px;
width: 100%;
background-image: url(../images/dept_data_files_logo.jpg);
padding: 0px;
/*background-color: #67120D;*/
.oneColLiqCtrHdr #mainContent {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 14px;
color: #3C0D0D;
font-weight: 700;
padding-top: 0;
padding-right: 0px;
padding-bottom: 0;
padding-left: 0px;
margin: 0px;
width: 760px;
.oneColLiqCtrHdr #footer {
padding: 0 10px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-weight: 700;
color: #FFFFFF;
background-color: #000000;
/*width:780px;*/
.oneColLiqCtrHdr #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 */
h1 {
color:#FFFFFF;
font-size: 36px;
h2,h3 {
10px;
8px;
color: #000000;
#DataFiles_LOGO{
height:127px;
width: 740px;
background-repeat: no-repeat;
background-image: url(../images/dept_data_files_logo.jpg);
background-position: left top;
padding: 0px;
margin: 0px;
top: 0px;
float: left;
And my Navigation CSS:
td img {
/* Another Mozilla/Netscape bug with making sure our images display correctly */
display: block;
#FWTableContainer1445733177 {
/* The master div to make sure that our popup menus get aligned correctly. Be careful when playing with this one. */
position:relative;
margin:0px;
width:799px;
height:30px;
text-align:left;
#MMMenuContainer1015135953_0 {
/* This ID is related to the master menu div for menu MMMenuContainer1015135953_0 and contains the important positioning information for the menu as a whole */
position:absolute;
left:7px;
top:29px;
visibility:hidden;
z-index:300;
#MMMenu1015135953_0 {
/* This class defines things about menu MMMenu1015135953_0's div. */
position:absolute;
left:0px;
top:0px;
visibility:hidden;
background-color:#ffffff;
border:1px solid #000000;
width:208px;
height:76px;
.MMMIFVStyleMMMenu1015135953_0 {
/* This class determines the general characteristics of the menu items in menu MMMenu1015135953_0 */
border-top:1px solid #000000;
border-left:1px solid #000000;
border-bottom:1px solid #ffffff;
border-right:1px solid #ffffff;
width:208px;
height:26px;
voice-family: "\"}\"";
voice-family:inherit;
width:200px;
height:18px;
.MMMIVStyleMMMenu1015135953_0 {
/* This class determines the general characteristics of the menu items in menu MMMenu1015135953_0 */
border-top:0px;
border-left:1px solid #000000;
border-bottom:1px solid #ffffff;
border-right:1px solid #ffffff;
width:208px;
height:25px;
voice-family: "\"}\"";
voice-family:inherit;
width:200px;
height:18px;
#MMMenu1015135953_0_Item_0 {
/* Unique ID for item 0 of menu MMMenu1015135953_0 so we can set its position */
left:0px;
top:0px;
#MMMenu1015135953_0_Item_1 {
/* Unique ID for item 1 of menu MMMenu1015135953_0 so we can set its position */
left:0px;
top:26px;
#MMMenu1015135953_0_Item_2 {
/* Unique ID for item 2 of menu MMMenu1015135953_0 so we can set its position */
left:0px;
top:51px;
#MMMenuContainer1015135953_0 img {
/* needed for Mozilla/Camino/Netscape */
border:0px;
#MMMenuContainer1015135953_0 a {
/* Controls the general apperance for menu MMMenuContainer1015135953_0's items, including color and font */
text-decoration:none;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:14px;
color:#ffcc33;
text-align:center;
vertical-align:middle;
padding:3px;
background-color:#000000;
font-weight:bold;
font-style:normal;
display:block;
position:absolute;
#MMMenuContainer1015135953_0 a:hover {
/* Controls the mouse over effects for menu MMMenuContainer1015135953_0 */
color:#ffcc33;
background-color:#990000;Glad you sorted this out.
You might want to mark this as Answered so folks trying to help answer questions won't have to click on this link now. Thanks!
E. Michael Brandt
www.divahtml.com
www.divahtml.com/products/scripts_dreamweaver_extensions.php
Standards-compliant scripts and Dreamweaver Extensions
www.valleywebdesigns.com/vwd_Vdw.asp
JustSo PictureWindow
JustSo PhotoAlbum, et alia -
Photoshop CS3 to Dreamweaver CS3 CSS question
Hi all,
I am sorry if this is allready dicussed a couple of times.I did a search and just could not find it. When I export a site from Photoshop CS3 to DIV (generate CSS by ID) it is aligned to the left and all DIV's have a specific position on the page. How can I get my site to center in Dreamweaver CS3 without having to adjust al separate DIV's?
For Example: When I export from Photoshop all slices are exported as folowed.
#Table_01 {
position:absolute;
left:auto;
top:0px;
width:832px;
height:562px;
right: auto;
#test-13 {
position:absolute;
left:275px;
top:26px;
width:9px;
height:189px;
#test-14 {
position:absolute;
left:284px;
top:26px;
width:128px;
height:98px;
I know how to make a DIV center (with Margin auto left and right) but I do not know how to center all DIV's at once.
I hope you are willing to help me with this. In case you have more questions let me know.The answer is to not let Photoshop write either your HTML or your CSS for you. What you show is a disaster waiting to happen, really, and is characteristic of the kind of mess produced by any wizard that writes HTML based on a graphic layout. Use your graphics editors to produce your graphics. Build your page in DW. It's a much better way to go.
I know how to make a DIV center (with Margin auto left and right) but I do not know how to center all DIV's at once.
I hope you are willing to help me with this. In case you have more questions let me know.
Leaving your page with all absolutely positioned elements is really asking for trouble, but here's how to make them all center at once -
Change this -
</head>
to this -
<style type="text/css">
#wrapper { width:760px; margin:0 auto;position:relative; }
/* 760px will display on an 800px screen maximized browser window without */
/* horizontal scrollbars. Change as needed */
</style>
</head>
change this -
<body ...>
(the ellipsis represents any other attributes that might be mentioned in the body tag, and SHOULD NOT BE INCLUDED EXPLICITLY!)
to this -
<body ...>
<div id="wrapper">
and this -
</body>
to this -
<!-- /wrapper -->
</div>
</body>
and see if that helps. -
Using CSS to change the height of af:panelBox header - can do ?
Using JDev 11.1.1.3; want to change the render of the panelBox component; understand skinning is the way to do this ... so headed into the markup via Firebug, and by updating the settings in the browser, I can produce the results that I want, but having some difficulty finding the right selector settings in the application skin/CSS file. The markup contains the following ...
<div class="af_panelBox p_AFStretched" style=... height: auto; ...
...<div style=... height: 25px;
......<table class="af_panelBox_table p_AFCore p_AFDefault" ... style=height: 25px
...<div class="af_panelBox_center p_AFCore p_AFDefault" style=... top: 25px;
If I change the three references of 25px to 20px, I get the result I want, but if I add (using styles or ADF selectors) ...
.af_panelBox_center.p_AFCore.p_AFDefault {
top: 20px;
.af_panelBox_table {
height: 20px;
... to the application skin CSS, then the settings get essentially ignored, Firebug reporting my settings in the hierarchy, but overridden by ...
element.style {
top: 25px;
Thinking then that this 25px setting derives from a higher level setting, I work back up the div hierarchy, but the "af_panelBox p_AFStretched" div is where the panel box starts, and the height setting of auto there clearly isn't what I'm after.
I've heard others say that you can pretty much change anything with skinning - is this an exception or have I missed something ?
Thanks,
Edited by: robli on Sep 10, 2010 11:16 AM
Edited by: robli on Sep 10, 2010 11:17 AM
Edited by: robli on Sep 10, 2010 11:17 AMThanks Frank. I guess the question was more about whether this is something that can be changed (ie: height of the panel box header).
As noted in the original post, there appear to be three 25px settings in the markup that need to be changed (changing all 3 via Firebug confirms the render changes as required). Whether I use the ADF selectors or the styles in my skinning CSS I can't actually get to all three of these settings, because some of them aren't styled, but rather encoded in 'inline' div style settings. I did set the af|panelBox::center:core:default { top: 20px; } into the skin and retried it, but it doesn't change anything, because of what Firebug reports as element.style settings which override it & come from the <div class=.. style=top: 25px setting.
When the markup is created, it doesn't appear that the 20px skin setting is honored. Setting these three heights via the skin seems unsupported, but before concluding this, I wanted to inquire of the community.
Thanks, -
Basic CSS question. New learner
I am just learning CSS and HTML and I have a basic question. How can I make my float left div's expand down for content? I have a wrapper and within my wrapper I have 3 columns all floated left with margins added to them, I ommited height so that my columns can expand as I add stuff to it. I have content on my columns, but instead of wrapping the content down as I add...the div's are expanding and dropping below each other because there is no space for them. I tried clearing, but I am not sure I understand the clear property well so I stuck "none" in there for now. Here is my HTML and CSS:
<body>
<div id="wrapper">
<div id="head"></div>
<div id="slideshow"></div>
<div id="menu"></div>
<!--End Navigation-->
<div id="firstcolumn">stuffstuffstuff
stuffstuffstuffstuffstuff
stuffstuffstuffstuffstuff
stuffstuff</div>
<div id="secondcolumn">stuffstuffstuff
stuffstuffstuffstuffstuffstuffstuff
stuffstuffstuffstuffstuff</div>
<div id="thirdcolumn">stuffstuffstuff
stuffstuffstuffstuffstuffstuff
stuffstuffstuffstuffstuffstuff</div>
</div>
<!--End Wrapper-->
<div id="footer">This is my footer</div>
<!--End Footer-->
</body>
</html>
-------CSS---------
body {
margin: 0;
font-family: Verdana, Geneva, sans-serif;
font-size: 10px;
background: url(images/bg.png) #666 repeat;
#wrapper {
margin: 0 auto;
width: 975px;
background-color: #CCC;
height: 1000px;
#head {
width: 975px;
height: 100px;
background-color:#666;
position: relative;
#slideshow {
height: 110px;
width: 975px;
position: relative;
background-color: #066;
#menu {
width: 975px;
height: 30px;
background-color:#999;
position: relative;
#firstcolumn {
width: 315px;
float: left;
position: relative;
background-color:#666;
clear: none;
margin: 10px 10px 0px 10px;
#secondcolumn {
width: 305px;
float: left;
position: relative;
background-color: #CCC;
clear: none;
margin: 10px 10px 0px 0px;
#thirdcolumn {
width: 315px;
float: left;
position: relative;
background-color:#666;
clear: none;
margin: 10px 10px 0px 0px;
#footer {
margin: 0 auto;
width: 975px;
height: 200px;
position: relative;
background-color:#666;
This is what I am seeing on my display in Dreamweaver. As you can see, these rectangular elements are my div's. They are supposed to line up side by side, but my "content" isn't filling my div's properly, but rather expanding them causing my div's to drop down below each other.
Thanks for any input.It would be much easier to advise you if you could post a URL for a site or page.
Height and CSS is a bit of mystery to me but the most simple principle is that content is the way to give an element height. There are ways around it and you might like to Google "Faux Columns CSS" or something like it. The principle is that you construct an image that is a slim band of color that align with your intended columns. You apply that image as a background in you CSS and set it to repeat down the page. Then as your content grows or differs the graphic takes care of that.
There are other ways such as using positioning and javascript but they are more complicated.
Martin -
I created a class for my main headers to be centered, yet when I apply it the headline remains flush left. I think it is being contolled by the rule for the div. I'll psot the code so that maybe someone can tell me how to fix the problem and what is the best way to avoid the problem to begin with.
<!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=UTF-8" />
<!-- TemplateBeginEditable name="doctitle" -->
<title>Untitled Document</title>
<!-- TemplateEndEditable -->
<style type="text/css">
<!--
body {
background: #666666;
margin: 0; /* it's good practice to zero the margin and padding of the body element to account for differing browser defaults */
padding: 0; /* this centers the container in IE 5* browsers. The text is then set to the left aligned default in the #container selector */
color: #000000;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
background-color: #000;
.thrColFixHdr #container {
width: 957px; /* the auto margins (in conjunction with a width) center the page */
border: 1px solid #000000; /* this overrides the text-align: center on the body element. */
margin-top: 0;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;
background-image: url(../images/main_bkg.gif);
background-repeat: repeat-y;
.thrColFixHdr #header {
padding-top: 0;
padding-bottom: 0;
padding-left: 0px;
background-color: #1B75BB;
.thrColFixHdr #header h1 {
margin: 0;
padding: 0px;
.thrColFixHdr #sidebar1 {
float: left; /* since this element is floated, a width must be given */
width: 184px; /* padding keeps the content of the div away from the edges */
color: #FFF;
padding-top: 15px;
padding-right: 10px;
padding-bottom: 15px;
padding-left: 20px;
.thrColFixHdr #sidebar2 {
float: right; /* since this element is floated, a width must be given */
width: 184px; /* padding keeps the content of the div away from the edges */
padding-top: 15px;
padding-right: 10px;
padding-bottom: 15px;
padding-left: 20px;
color: #FFF;
background-color: #000;
.thrColFixHdr #mainContent {
margin-top: 0;
margin-right: 215px;
margin-bottom: 0;
margin-left: 215px;
padding-top: 0;
padding-right: 10px;
padding-bottom: 0;
padding-left: 10px;
.thrColFixHdr #footer {
padding: 0; /* this padding matches the left alignment of the elements in the divs that appear above it. */
background:#DDDDDD;
.thrColFixHdr #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 */
color: #FFF;
background-color: #1B75BB;
text-align: center;
.fltrt { /* this class can be used to float an element right in your page. The floated element must precede the element it should be next to on the page. */
float: right;
margin-left: 8px;
.fltlft { /* this class can be used to float an element left in your page */
float: left;
margin-right: 8px;
.clearfloat { /* this class should be placed on a div or break element and should be the final element before the close of a container that should fully contain a float */
clear:both;
height:0;
font-size: 1px;
line-height: 0px;
-->
</style>
<!--[if IE 5]>
<style type="text/css">
/* place css box model fixes for IE 5* in this conditional comment */
.thrColFixHdr #sidebar1 { width: 180px; }
.thrColFixHdr #sidebar2 { width: 190px; }
</style>
<![endif]-->
<!--[if IE]>
<style type="text/css">
/* place css fixes for all versions of IE in this conditional comment */
.thrColFixHdr #sidebar2, .thrColFixHdr #sidebar1 { padding-top: 30px; }
.thrColFixHdr #mainContent { zoom: 1; }
/* the above proprietary zoom property gives IE the hasLayout it needs to avoid several bugs */
</style>
<![endif]-->
<link href="../gcw.css" rel="stylesheet" type="text/css" />
<link href="../p7pmm/p7PMMh09.css" rel="stylesheet" type="text/css" media="all" />
<script type="text/javascript" src="../p7pmm/p7PMMscripts.js"></script>
<style type="text/css">
<!--
a:link {
color: #1B75BB;
font-weight: bold;
text-decoration: none;
a:visited {
text-decoration: none;
a:hover {
text-decoration: underline;
a:active {
text-decoration: none;
.headervariable { font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
line-height: 17px;
font-weight: bold;
color: #FFF;
.bold_copy { font-weight: bold;
.photofloatleft { float: left;
padding-right: 5px;
.thrColFixHdr #container #mainContent h4 {
text-align: center;
-->
</style>
</head>
<body class="thrColFixHdr">
<div id="container">
<div id="header">
<table width="957" border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="center" valign="middle" bgcolor="#000000"><p> </p>
<p><span class="headervariable">"AN ENGLISH-STYLE CIDER<br />
MADE IN OHIO<br />
BY AN ENGLISHMAN!" </span></p></td>
<td align="left" valign="top" bgcolor="#000000"><img src="../images/GCW_header.jpg" width="527" height="228" alt="Griffin Cider Works" /></td>
<td align="left" valign="top" bgcolor="#000000"><img src="../images/gcw_r1.gif" width="215" height="20" /></td>
</tr>
<tr bgcolor="#000000">
<td height="22" colspan="3" align="center" valign="top" bgcolor="#1B75BB" class="nav_cell"><!-- TemplateBeginEditable name="Navigation1" -->
<div id="p7PMM_1" class="p7PMMh09 p7PMMnoscript">
<ul class="p7PMM">
<li><a href="#">Home</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Products</a></li>
<li><a href="#">Find Us At...</a></li>
<li><a href="#">Contact Us</a></li>
<li><a href="#">Acknowledgements</a></li>
<li><a href="#">Photo Gallery</a></li>
</ul>
<!--[if lte IE 6]>
<style>.p7PMMh09 ul ul li {float:left; clear: both; width: 100%;}.p7PMMh09 {text-align: left;}.p7PMMh09, .p7PMMh09 ul ul a {zoom: 1;}</style>
<![endif]-->
<!--[if IE 5]>
<style>.p7PMMh09, .p7PMMh09 ul ul a {height: 1%; overflow: visible !important;} .p7PMMh09 {width: 100%;}</style>
<![endif]-->
<!--[if IE 7]>
<style>.p7PMMh09, .p7PMMh09 a{zoom:1;}.p7PMMh09 ul ul li{float:left;clear:both;width:100%;}</style>
<![endif]-->
<script type="text/javascript">
<!--
P7_PMMop('p7PMM_1',1,2,-5,-5,0,1,0,1,0,3,1,1,0,0,0);
//-->
</script>
</div>
<!-- TemplateEndEditable --></td>
</tr>
<tr>
<td align="left" valign="top" bgcolor="#000000"><img src="../images/gcw_r1.gif" width="215" height="20" /></td>
<td align="left" valign="top" bgcolor="#000000"><img src="../images/gcw_r3_C2.gif" width="527" height="39" /></td>
<td align="left" valign="top" bgcolor="#000000"><img src="../images/gcw_r1.gif" width="215" height="20" /></td>
</tr>
</table>
<!-- end #header -->
</div>
<div id="sidebar1">
<!-- TemplateBeginEditable name="Sidebar1" --><img src="../images/Crest.jpg" width="185" height="140" />
<p>We founded Griffin Cider Works in 2010 in Westlake, Ohio. We wanted to create a high quality cider similar to the ones we were used to drinking in Great Britain. To achieve this, we source Ohio for the best quality apples and blend select varieties to deliver a most premium taste.<br />
<br />
<strong>Griffin Cider Works</strong> – <em>artisan ciders made in Ohio!</em></p>
<p>Enjoy!</p>
<!-- TemplateEndEditable -->
<!-- end #sidebar1 --></div>
<div id="sidebar2"><!-- TemplateBeginEditable name="Sidebar2" -->
<h3>Coming Soon!</h3>
<p>Our newest member of the Giffin Cider Works family–</p>
<!-- TemplateEndEditable -->
<!-- end #sidebar2 --></div>
<div id="mainContent"><!-- TemplateBeginEditable name="MainContent" --><span class="Center_Header">Welcome to Griffin Cider Works!</span>
<p class="BodyContent">As you no doubt have guessed, we are <em>Griffin Cider Works</em>, an Ohio born and based alcoholic cider company. We use 100% Ohio-grown apples from orchards recommended by the <a href="../www.ohioapples.com">Fruit Growers Marketing Association of Ohio. </a></p>
<p class="BodyContent">Apples are selected by variety and quality. Griffin Cider Works operates in close association with Burnham Orchards and Grobes Orchard.to achieve truly remarkable ciders. <em>Read on for a list of news and events!</em></p>
<h2 class="SubHead">News and Events:</h2>
<p><span class="bold_copy"><img src="../images/Ciderman_Richard_Read.jpg" alt="Ciderman Richard Read" width="150" height="175" class="photofloatleft" /><span class="BodyContent">February 23, 2011 - The Plain Dealer</span></span><span class="BodyContent"> - Hard cider on tap and on dinner tables? Cleveland Ciderman Richard Read hopes it's an easy sell. By Joe Crea. <br />
<a href="http://www.cleveland.com/taste/index.ssf/2011/02/hard_cider_on_tap_cleveland_ci.html" target="_blank">Click here for article.</a></span></p>
<p class="BodyContent"><span class="bold_copy">5th November 2010 -</span> <a href = "../www.hfsummitcounty.org">Habitat for Humanity, Summit County </a> - Griffin Cider Works will be supporting families who need a little help getting a roof over their heads and there are many of those these days! We do certainly encourage any donations to the above website. At the event, held at the Portage country club, we will be serving up "Lolo Romy" and the last five gallons of our current batch of the exquisite "Griffin Original."</p>
<p class="BodyContent"><span class="bold_copy">12, 13 and 14th November 2010 -</span> <a href = "../www.fabulousfoodshow.com"> The Fabulous Food Show! </a> - This will be a great event for all! It'll be at the Cleveland I-X center and feature many great foods and drink. Guest appearances include: Michael Symon, Anne Burrell, Alton Brown, Guy Fieri and Giada De Laurentiis. We will be there supported by the American Wine School and serving up our flagship "Lolo Romy." The shop will also have a small amount available for purchase.</p>
<p> </p>
<h4>Griffin Cider Works • J.W.Dover Inc. <br />
24945 Detroit Rd • Westlake, OH 44145 </h4>
<!-- TemplateEndEditable -->
<!-- end #mainContent --></div>
<!-- This clearing element should immediately follow the #mainContent div in order to force the #container div to contain all child floats --><br class="clearfloat" />
<div id="footer">
<p class="footer_type">©2011 Griffin Cider Works</p>
<!-- end #footer --></div>
<!-- end #container --></div>
</body>
</html>
Thanks in advance!
Ninayou could always try using header tags (ie h1-h6) for headers. it is a good practice to get into.
h1 {
text-align:center;
also worth naming your styles something memorable.
.p7PMMh09 ???? whats that meant to be?
and you can also use shorthand for padding and margins
ie change
margin-top: 0;
margin-right: 215px;
margin-bottom: 0;
margin-left: 215px;
padding-top: 0;
padding-right: 10px;
padding-bottom: 0;
padding-left: 10px;
to
margin: 0 215px;
padding:0 10px;
<p><span class="headervariable">
can simply be <p class="headervariable">
border: 1px solid #000000; /* this overrides the text-align: center on the body element. */ ?????? how ?????????
dont know if anyone uses ie5 anymore, so mightnt need those conditional statements. in fact I never use conditional statements, they are just fluff that can be avaoided if your page is coded correctly in the first place.
<span class="bold_copy"> is also not needed just use
<strong> bold text </strong>
what is the best way to avoid the problem to begin with.
dont overcomplicate your code. follow the document flow. use semantic markup. dont make css styles that duplicate simple markup. -
Hello!
I have a very basic theme / csss question:
Working with Oracle XE and Apex I want to create my own theme. Therefore I tried to use
http://wiki.shellprompt.net/bin/view/Apex/ThemeTips
But thereit says:
1. Copy the theme_4 images directory to theme_100
But where do I find the theme_4 images directory???
All I found was:
Shared Components -> Themes
But how can I open the css file (2nd step)??
Excuse me for beeing this stupid...
Thank you
JohannSearching the XE Threads I found out, that
http://myserver.com:8080/i/themes/theme_4/
shows me the themes 4 directory using webdav.
But how writing there?
Bye
Johann -
Some CSS Questions and Firebug Behaviour.
Here's my page: http://martcol.co.uk/brightontherapyservice/
It's a developing site so, I'm still working on it and I know it might be a bit scruffy in places - sorry.
I'll start with the Firbug thing first.
If I check Outline > Outline Block Level Elements why do some of the outlines seem to start left and off the screen and why do some of the outlines not form completely?
If you are able to outline these elements in FireFox this is what I mean:
A is a border that shoots off to the left and B is an example of a border that does not form completely. I am asking this because obviously, I don't understand it and more, because I wonder if it indicates something bad. Which leads me to my next question.
On some of the individual image panels the box-shadow gets shaved off top and right. I can make it come back by fiddling with margins but it is such a fiddle I don't know which is the best way to sort it out.
Thanks
Martin
PS: My next question will be about lining up the bottom text panel. I thought I'd wait to see how you all get on with these questions but since you're here, how can I line that up with the image panels?
Thanks again.
BTW - it's WordPressA1: if you don't need nating, simply do not use a group.
A2: route the traffic without checking if it hits a content rule.
Your acl 1 will permit all traffic and nat traffic from 10.10.10.0/24 when hitting a specific content rule.
Your acl 2 is the same but if you have more content rules the traffic 10.10.10.0/24 will simply be routed and will not hit any of them.
We usually use the bypass for cache devices that would need to access a server directly.
A3: ACL are not mandatory. By default the CSS permits all traffic. If you enable acl so, you then need to explicitly permit the traffic you want to have across the CSS.
Gilles. -
Trying to transition to using CSS for page layout. Ran into an issue, can't figure out why.
Below is the CSS for the page I'm working on:
@charset "UTF-8";
/* CSS Document */
#container {
width: 968px;
margin: 0 auto;
padding-left: 10px;
padding-right: 10px;
overflow: hidden;
border: 2px solid #FF0000;
#main_image {
background-image: url(../images/main.jpg);
background-repeat: no-repeat;
position: relative;
height: 376px;
width: 968px;
#left_column, #center_column, #right_column {
width:316px;
float:left;
#center_column, #right_column {
margin-left: 10px;
The problem occurs when I add the float: left; rule, highlighted above. In Dreamweaver, it appears to push the 3 columns down and outside the container div -- I added the 2px red border to the container to confirm this.
However, viewing the page in a browser, it appears the 3 columns are properly nested in the container div.
It's disconcerting because it's not WYSIWIG!
Someone suggested turning off all Visual Aids. Didn't help.
Can anyone suggest what's going on here? It would be GREATLY appreciated.
Here's the page: http://www.stephencoren.com/CSS_Tutorial/NavBar.htm
Here's the CSS: http://www.stephencoren.com/CSS_Tutorial/css/NavBar.css
Here's a screenshot of what I see in DW CS3 and in Safari: http://www.stephencoren.com/CSS_Tutorial/example.jpg
Thanks.Red Rojo,
You can disable style rendering in Design View or use a Design Time Stylesheet.
http://livedocs.adobe.com/en_US/Dreamweaver/9.0/help.html?content=WScbb6b82af5544594822510 a94ae8d65-7e17.html
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
http://alt-web.com/
http://twitter.com/altweb -
CSS question - complete Novice
i know some of you people must dispair at novice questions
but we all need to start somewhere don't we. i have had dreamweaver
for 18 months and have hardly used it but now i am starting to
learn. basically my problem is this...and i bet it's an old
chesnut.
i have two different places on my website that have links,
one with a green background, that on hover turns white.... thats in
the settings. thing is i want an email link thats on a white
background in the same page, i have tried different colurs but it
just doesn't look right.
could anyone tell me in simple terms what i need to add to
either the CSS file or change something in settings that allow me
to do this.
sorry if this has been asked before...thanks for your help,
Bryan
PS i am using MX 2004Pseudo-classes and container styles are what you need - here
are some
tutorials.
http://www.mako4css.com
http://www.thepattysite.com/linkstyles1.cfm
http://www.projectseven.com/tutorials/pseudoclasses/index.htm
Murray --- ICQ 71997575
Adobe Community Expert
(If you *MUST* email me, don't LAUGH when you do so!)
==================
http://www.dreamweavermx-templates.com
- Template Triage!
http://www.projectseven.com/go
- DW FAQs, Tutorials & Resources
http://www.dwfaq.com - DW FAQs,
Tutorials & Resources
http://www.macromedia.com/support/search/
- Macromedia (MM) Technotes
==================
"beebbuoy" <[email protected]> wrote in
message
news:eng6jm$8dg$[email protected]..
>i know some of you people must dispair at novice
questions but we all need
>to
> start somewhere don't we. i have had dreamweaver for 18
months and have
> hardly
> used it but now i am starting to learn. basically my
problem is
> this...and i
> bet it's an old chesnut.
>
> i have two different places on my website that have
links, one with a
> green
> background, that on hover turns white.... thats in the
settings. thing is
> i
> want an email link thats on a white background in the
same page, i have
> tried
> different colurs but it just doesn't look right.
>
> could anyone tell me in simple terms what i need to add
to either the CSS
> file
> or change something in settings that allow me to do
this.
>
> sorry if this has been asked before...thanks for your
help, Bryan
>
> PS i am using MX 2004
>
Maybe you are looking for
-
I'm trying to log onto app store, but I keep getting a message the my device or computer is unable to be verified. How do I verify it when the app store will not allow me to log onto the account even when I use my Apple ID, which works with no proble
-
Add or delete the summary links web part's[deployed as a VS solution] link using power shell
hi, i am having a visual studio custom solution having page layouts implemented. In that solution i am having 1 summary links web part and in that i have hard coded few links and this is deployed on ion dev and staging env. Now, the issue is : yes
-
Is it possible to have a PDF form flow to a second page IF the user needs to type in a lot of information? ( Like a Word Doc would) An automated second page.
-
How to display arabic Subtitle Language?
How to display arabic Subtitle Language? i buy move with arabic subtitle. when i go to Settings > Audio & Video > Subtitle Language NO arabic option!!!!
-
15"mbpro 4g ram - running canon digtal photo professional - says insufficient memory
I am using a Macbook Pro 15" w/4g ram - while running Canon Digital Photo Professional - "insufficient memory" shows and DPP shuts down. Nothing else is running other than DPP. I was thinking of clearing cache, but not sure how to do that either.