F.03 - Auto GL clearing
Our SAP 4.6 C structure is
Two Company 0100 and 0200.
Clearing GL transaction - we are executing the F.03 seperately for each company.
F.03. We are giving the company code 0100
It is picking up transaction for both co. 0100 and 0200.
How to restrict this. Please advice.
Thanks,
Abhay
Hi:
GL auto clearing is done as per the parameter entered in OB74 for account type S. Once you are done with this the GL which are given in OB74 will be cleared as per assignment number or any other criteria defined. Automatic clearing can be done using F.13
Regards
Similar Messages
-
I can no longer clear my history. I have done this every day for years, and since two days ago The clear history box wont open when I try to clear my history. I tried setting the auto clear option, but that also did not work.
Is there anything else I can try within firefox or my computer, or will I need to remove firefox and then reinstall it?
Thank youSee the article here...
* http://kb.mozillazine.org/Locked_or_damaged_places.sqlite -
Rebate settlement clearing issue
Hi,
We are using rebate agrement and for each billing doc an accrual doc is generated
Sales ded Dr XXXX
TO Rebate Accrual CR XXXX
assume 100 docs are posted during the period as above
on year end fon inal settlement summation of above 100 accruals are reversed by system as under
Rebate Accrual DR XXXX
To sales deduction XXXX
We have following issues:
- system do not clear open items in Rebate accrual account
- difficult to perform auto GL clear as cannot update assignment field with rebate agreement number.
Need your help
- is there process to perform auto clear or get assignmetn updated with agreement number.
Regards,
AtHi,
I want to perform auto clearing as you said but i don't see any criteria to clear this.
Also cusotmer cannot be used as we are having multiple rebate for an customer.
Regards,
At -
Using Auto Adjustable Fluid Grid Layout Divs to balance two columns
I have a header band, two columns and then a footer band in the layout that I'm working on.I have Div on each side that is set to "Auto" for height so that the two column lengths appear to be the same size when they get to the footer band. That is how I envisioned it, in practice, "Auto" only seems to adjust to the text inside the respective divs.
Something that"hould" be soesy has gotten me banging my head for four days. I thught I had a solution, using "nesting tags" but saw that was not supported.
Any ideas?http://whatwouldwaltdo.businesscatalyst.com/fl0916.html
Source code:
<!doctype html>
<!--[if lt IE 7]> <html class="ie6 oldie"> <![endif]-->
<!--[if IE 7]> <html class="ie7 oldie"> <![endif]-->
<!--[if IE 8]> <html class="ie8 oldie"> <![endif]-->
<!--[if gt IE 8]><!-->
<html class="">
<!--<![endif]-->
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Untitled Document</title>
<link href="boilerplate.css" rel="stylesheet" type="text/css">
<link href="/FL916.css" rel="stylesheet" type="text/css">
<link href="/stylesheets/FL.css" rel="stylesheet" type="text/css">
<link href="/SpryAssets/SpryAccordion.css" rel="stylesheet" type="text/css">
<!--
To learn more about the conditional comments around the html tags at the top of the file:
paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/
Do the following if you're using your customized build of modernizr (http://www.modernizr.com/):
* insert the link to your js here
* remove the link below to the html5shiv
* add the "no-js" class to the html tags at the top
* you can also remove the link to respond.min.js if you included the MQ Polyfill in your modernizr build
-->
<!--[if lt IE 9]>
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<script src="respond.min.js"></script>
<script src="/SpryAssets/SpryAccordion.js" type="text/javascript"></script>
</head>
<body>
<div class="gridContainer clearfix">
<div id="bannertop"><img src="/images/Walt w CMS PIN.fw.png" alt="Walt Disney with Disneyland Cast Members (1966)"></div>
<div id="ticker">This is the content for Layout Div Tag "ticker"</div>
<div id="blocker">
<div id="leftcolumn">This is the content for Layout Div Tag "leftcolumn"
<div id="Accordion1" class="Accordion" tabindex="0">
<div class="AccordionPanel">
<div class="AccordionPanelTab">HOME</div>
<div class="AccordionPanelContent">
<img src="/images/graphics/pagetitles/toallwhocome.gif" alt="The opening line of Walt Disney's dedication speech at Disneyland, "To all who come to this happy place, welcome ..."" width="192" align="absmiddle">
</div>
</div>
<div class="AccordionPanel">
<div class="AccordionPanelTab">Pins</div>
<div class="AccordionPanelContent">
<p>Ordering</p>
<p>Presenting a Pin</p>
<p>Collectors' Corner</p>
<p>Why a Pin?</p>
</div>
</div>
<div class="AccordionPanel">
<div class="AccordionPanelTab">Cast Members</div>
<div class="AccordionPanelContent">
<p>Newest</p>
<p>Nominate Your Own</p>
<p>Alphabetical</p>
<p>By Company/Location</p>
<p>By WWWD Pin</p>
<p>Cast Members' Reactions</p>
</div>
</div>
<div class="AccordionPanel">
<div class="AccordionPanelTab">Traditions</div>
<div class="AccordionPanelContent">
<p>Guests' Traditions</p>
<p>Share Your Traditions</p>
</div>
</div>
<div class="AccordionPanel">
<div class="AccordionPanelTab">Adventures</div>
<div class="AccordionPanelContent">
<p>Guests' Adventures</p>
<p>Share Your Adventures</p></div>
</div>
<div class="AccordionPanel">
<div class="AccordionPanelTab">City Hall</div>
<div class="AccordionPanelContent">
<p>Waltisms</p>
<p>The WWWD Story</p>
<p>About Us</p>
<p>That First Trip</p>
<p>About Us</p>
<p>Ordering</p>
<p>About Us</p>
<p>Ordering</p></div>
</div>
</div>
<div id="social">This is the content for Layout Div Tag "social"</div>
<div id="printer">This is the content for Layout Div Tag "printer"</div>
<div id="banner"><img src="/images/graphics/reg sidebargraphic.gif" alt="White Mickey head with a circle of stars on a blue field"></div>
</div>
<div id="copy">This is the content for Layout Div Tag "copy"<br><br><P> <FONT SIZE="-1" COLOR="#CC0000">Copyright © 2012, 2011, 2010, 2009, 2008, 2007, 2006, 2005, 2004, 2003, 2002 Founder's
Legacy Inc. </FONT><BR>
<FONT SIZE="-1" COLOR="#CC0000">What Would Walt Do and WWWD are trademarks
of Founder's Legacy, Inc.</FONT></P>
<P><FONT COLOR="#000081" SIZE="-1">Founder's Legacy, Inc. is a member
of the Disney Store.com Affiliate Network. As such we are authorized
to display the Disney Store banner on any or all of our webpages.
Founder's Legacy is also listed with The Disneyland Resort Press &
Publicity Department, images used are with their permission.</FONT></P>
<P><FONT COLOR="#000081" SIZE="-1">Founder's Legacy, Inc. is not part
of The Walt Disney Company. The only other relationship between Founder's
Legacy, Inc. and The Walt Disney Company is various members of the
Founder's Legacy Inc.'s Board of Directors and/or their family are
shareholders in The Walt Disney Company.</FONT><FONT SIZE="-1" COLOR="#CC0000"><BR>
<BR>
Additional disclosures for the benefit of insomniacs may be enjoyed
in our <A HREF="/pages/insomniac.shtml">Insomniac's Delight
Page & Privacy Policy</A></FONT> </P></div>
</div>
<div id="mission"><FONT
COLOR="#000081"><B>Our Mission Statement</B></FONT>
<BLOCKQUOTE>
<P><FONT color="#D50000" SIZE="+2"><em>To restore Magical Guest experiences through recognizing outstanding Cast Members.</em></FONT></P>
</div>
<div id="awards"><table width="100%" border="0" cellpadding="0">
<tr>
<TD VALIGN="middle" ALIGN="CENTER"><a href="http://LaughingPlace.com"><img src="/Assets/graphics/Affiliations/LPLogoHighest.gif" width="96" height="82" border="1" alt="LaughingPlace.com"></a></TD>
<TD VALIGN="middle" ALIGN="CENTER"><img src="/Assets/graphics/Affiliations/seek-button01.gif" width="120" height="80"
border="0"></TD>
<TD WIDTH="1" VALIGN="middle" ALIGN="CENTER"><a href="http://disney.go.com/investors/index.html"><img src="/Assets/graphics/Affiliations/shareholder.gif" width="106" height="48"
border="1"></a></TD>
<TD VALIGN="middle" ALIGN="CENTER"> <img src="/Assets/graphics/Affiliations/safewave.gif" width="78" height="74"
border="1"></TD>
<TD VALIGN="middle" ALIGN="CENTER"><a href="http://wdwig.com/"><img src="/Assets/graphics/Affiliations/125x125allearsnet.gif" width="120" height="120" border="0"></a></TD>
</tr>
</table></div>
<div id="bigbottom"><P> <FONT SIZE="-1" COLOR="#CC0000">Copyright © 2012, 2011, 2010, 2009, 2008, 2007, 2006, 2005, 2004, 2003, 2002 Founder's
Legacy Inc. </FONT><BR>
<FONT SIZE="-1" COLOR="#CC0000">What Would Walt Do and WWWD are trademarks
of Founder's Legacy, Inc.</FONT></P>
<P><FONT COLOR="#000081" SIZE="-1">Founder's Legacy, Inc. is a member
of the Disney Store.com Affiliate Network. As such we are authorized
to display the Disney Store banner on any or all of our webpages.
Founder's Legacy is also listed with The Disneyland Resort Press &
Publicity Department, images used are with their permission.</FONT></P>
<P><FONT COLOR="#000081" SIZE="-1">Founder's Legacy, Inc. is not part
of The Walt Disney Company. The only other relationship between Founder's
Legacy, Inc. and The Walt Disney Company is various members of the
Founder's Legacy Inc.'s Board of Directors and/or their family are
shareholders in The Walt Disney Company.</FONT><FONT SIZE="-1" COLOR="#CC0000"><BR>
<BR>
Additional disclosures for the benefit of insomniacs may be enjoyed
in our <A HREF="/pages/insomniac.shtml">Insomniac's Delight
Page & Privacy Policy</A></FONT> </P></div>
</div>
<script type="text/javascript">
var Accordion1 = new Spry.Widget.Accordion("Accordion1");
</script>
</body>
</html>
Stylesheet:
@charset "utf-8";
/* Simple fluid media
Note: Fluid media requires that you remove the media's height and width attributes from the HTML
http://www.alistapart.com/articles/fluid-images/
img, object, embed, video {
max-width: 100%;
/* IE 6 does not support max-width so default to width 100% */
.ie6 img {
width:100%;
Dreamweaver Fluid Grid Properties
dw-num-cols-mobile: 5;
dw-num-cols-tablet: 8;
dw-num-cols-desktop: 12;
dw-gutter-percentage: 25;
Inspiration from "Responsive Web Design" by Ethan Marcotte
http://www.alistapart.com/articles/responsive-web-design
and Golden Grid System by Joni Korpi
http://goldengridsystem.com/
/* Mobile Layout: 480px and below. */
.gridContainer {
margin-left: auto;
margin-right: auto;
width: 87.36%;
padding-left: 1.82%;
padding-right: 1.82%;
#LayoutDiv1 {
clear: both;
float: left;
margin-left: 0;
width: 100%;
display: block;
#bannertop {
clear: both;
float: left;
margin-left: 0;
width: 100%;
display: block;
#ticker {
clear: both;
float: left;
margin-left: 0;
width: 100%;
display: block;
#blocker {
clear: both;
float: left;
margin-left: 0;
width: 100%;
display: block;
#leftcolumn {
clear: both;
float: left;
margin-left: 0;
width: 100%;
display: block;
#copy {
clear: none;
float: left;
margin-left: 4.1666%;
width: auto;
display: block;
#leftnav {
clear: none;
float: left;
margin-left: 4.1666%;
width: 100%;
display: block;
#social {
clear: both;
float: left;
margin-left: 0;
width: 100%;
display: block;
text-align: center;
padding-top: 8px;
padding-bottom: 8px;
padding-left: 35px;
#printer {
clear: both;
float: left;
margin-left: 0;
width: 100%;
display: block;
#banner {
clear: both;
float: left;
margin-left: 0;
width: 100%;
display: block;
#mission {
clear: both;
float: left;
margin-left: 0;
width: 100%;
display: block;
#awards {
clear: both;
float: left;
margin-left: 0;
width: 100%;
display: block;
#bigbottom {
clear: both;
float: left;
margin-left: 0;
width: 100%;
display: block;
/* Tablet Layout: 481px to 768px. Inherits styles from: Mobile Layout. */
@media only screen and (min-width: 481px) {
.gridContainer {
width: 90.675%;
padding-left: 1.1625%;
padding-right: 1.1625%;
#LayoutDiv1 {
clear: both;
float: left;
margin-left: 0;
width: 100%;
display: block;
#bannertop {
clear: both;
float: left;
margin-left: 0;
width: 100%;
display: block;
#ticker {
clear: both;
float: left;
margin-left: 0;
width: 100%;
display: block;
#blocker {
clear: both;
float: left;
margin-left: 0;
width: 100%;
display: block;
#leftcolumn {
clear: both;
float: left;
margin-left: 0;
width: 100%;
display: block;
#copy {
clear: none;
float: left;
width: 55%;
display: block;
margin: 0%;
#leftnav {
clear: none;
float: left;
margin-left: 2.5641%;
width: 100%;
display: block;
#social {
clear: both;
float: left;
margin-left: 0;
width: 100%;
display: block;
#printer {
clear: both;
float: left;
margin-left: 0;
width: 35.8974%;
display: block;
#banner {
clear: both;
float: left;
margin-left: 0;
width: 100%;
display: block;
#mission {
clear: both;
float: left;
margin-left: 0;
width: 100%;
display: block;
#awards {
clear: both;
float: left;
margin-left: 0;
width: 100%;
display: block;
#bigbottom {
clear: both;
float: left;
margin-left: 0;
width: 100%;
display: block;
/* Desktop Layout: 769px to a max of 1232px. Inherits styles from: Mobile Layout and Tablet Layout. */
@media only screen and (min-width: 769px) {
.gridContainer {
width: 88.5%;
max-width: 1232px;
padding-left: 0.75%;
padding-right: 0.75%;
margin: auto;
#LayoutDiv1 {
clear: both;
float: left;
margin-left: 0;
width: 100%;
display: block;
#bannertop {
clear: both;
float: left;
margin-left: 0;
width: 100%;
display: block;
#ticker {
clear: both;
float: left;
margin-left: 0;
width: 100%;
display: block;
#blocker {
clear: both;
float: left;
margin-left: 0;
width: 74.5762%;
display: block;
border-top-width: thick;
border-right-width: thick;
border-bottom-width: thick;
border-left-width: thick;
border-top-style: none;
border-right-style: ridge;
border-bottom-style: none;
border-left-style: none;
border-top-color: #C10B0F;
border-right-color: #C10B0F;
border-bottom-color: #C10B0F;
border-left-color: #C10B0F;
#leftcolumn {
clear: both;
float: left;
margin-left: 0;
width: 100%;
display: block;
#copy {
clear: none;
float: left;
margin-left: 1.6949%;
width: 100%;
display: block;
#leftnav {
clear: none;
float: left;
margin-left: 1.6949%;
width: 100%;
display: block;
#social {
clear: both;
float: left;
margin-left: 0;
width: 100%;
display: block;
#printer {
clear: both;
float: left;
margin-left: 0;
width: 100%;
display: block;
#banner {
clear: both;
float: left;
margin-left: 0;
width: 100%;
display: block;
#mission {
clear: both;
float: left;
margin-left: 0;
width: 100%;
display: block;
#awards {
clear: both;
float: left;
margin-left: 0;
width: 100%;
display: block;
#bigbottom {
clear: both;
float: left;
margin-left: 0;
width: 100%;
display: block; -
Spry Menu Bar jumps off screen-right in CS6
Frustrating little glitch I'm experiencing. When in a NON-LIVE mode in CS6, I have a Spry Menu Bar that I've placed, customized and is functioning properly. It is precisely in the right location in BOTH live mode and in a browser preview, however, when I am editing the site the menu bar jumps off screen right to where I have to scroll right to locate it. The only thing that pops it back in to place is by tweaking a setting like "Float" from right to left then back to right. But once I begin to edit the site again it will jump off the screen. This isn't a massive deal since it remains in place in live and preview modes, it's just annoying for layout purposes while I'm editing. It sort of screws up the aesthetic of the layout. Has anyone found the same problem? Below is my layout.css and my Spry Menu css.
@charset "utf-8";
/* Simple fluid media
Note: Fluid media requires that you remove the media's height and width attributes from the HTML
http://www.alistapart.com/articles/fluid-images/
img, object, embed, video {
max-width: 100%;
/* IE 6 does not support max-width so default to width 100% */
.ie6 img {
width:100%;
Dreamweaver Fluid Grid Properties
dw-num-cols-mobile: 6;
dw-num-cols-tablet: 8;
dw-num-cols-desktop: 12;
dw-gutter-percentage: 15;
Inspiration from "Responsive Web Design" by Ethan Marcotte
http://www.alistapart.com/articles/responsive-web-design
and Golden Grid System by Joni Korpi
http://goldengridsystem.com/
/* Mobile Layout: 480px and below. */
.gridContainer {
margin-left: auto;
margin-right: auto;
width: 95.8695%;
padding-left: 1.0652%;
padding-right: 1.0652%;
#LayoutDiv1 {
clear: both;
float: left;
margin-left: 0;
width: 100%;
display: block;
#header {
clear: both;
float: left;
margin-left: 0;
width: 100%;
display: block;
#maincontent {
clear: none;
float: left;
margin-left: 2.6785%;
width: 100%;
display: block;
#navigation {
clear: none;
float: left;
margin-left: auto;
width: 100%;
display: block;
margin-top: 20px;
margin-bottom: 20px;
background-color: #300;
height: 16px;
top: 5px;
#footer {
clear: both;
float: left;
margin-left: 0;
width: 100%;
display: block;
color: #FFF;
background-attachment: fixed;
background-image: url(../bkgdContent.png);
background-repeat: repeat;
margin-top: 20px;
/* Tablet Layout: 481px to 768px. Inherits styles from: Mobile Layout. */
@media only screen and (min-width: 481px) {
.gridContainer {
width: 91.4836%;
padding-left: 0.7581%;
padding-right: 0.7581%;
#LayoutDiv1 {
clear: both;
float: left;
margin-left: 0;
width: 100%;
display: block;
#header {
clear: both;
float: left;
margin-left: 0;
width: 100%;
display: block;
text-align: center;
#maincontent {
clear: none;
float: left;
margin-left: 1.6574%;
width: 100%;
display: block;
#navigation {
clear: both;
float: left;
margin-left: 0;
width: 100%;
display: block;
height: 16px;
#whf-content {
clear: both;
float: left;
margin-left: 0;
width: 100%;
display: block;
#donatecontent {
clear: none;
float: left;
margin-left: 1.6574%;
width: 100%;
display: block;
#theride-content {
clear: both;
float: left;
margin-left: 0;
width: 49.1712%;
display: block;
#donate-content {
clear: none;
float: left;
margin-left: 1.6574%;
width: 49.1712%;
display: block;
#footer {
clear: both;
float: left;
margin-left: 0;
width: 100%;
display: block;
/* Desktop Layout: 769px to a max of 1232px. Inherits styles from: Mobile Layout and Tablet Layout. */
@media only screen and (min-width: 769px) {
.gridContainer {
width: 89.0217%;
max-width: 1232px;
padding-left: 0.4891%;
padding-right: 0.4891%;
margin: auto;
#LayoutDiv1 {
clear: both;
float: left;
margin-left: 0;
width: 100%;
display: block;
#header {
clear: both;
float: left;
margin-left: 0;
width: 100%;
display: block;
color: #FFF;
#maincontent {
clear: both;
float: left;
margin-left: 0;
width: 32.6007%;
display: block;
#navigation {
clear: both;
float: left;
margin-left: 0;
width: 100%;
display: block;
#whf-content {
clear: both;
float: left;
margin-left: 0;
width: 32.6007%;
display: block;
#donatecontent {
clear: none;
float: left;
margin-left: 1.0989%;
width: 100%;
display: block;
#donate-content {
clear: none;
float: left;
margin-left: 1.0989%;
width: 32.6007%;
display: block;
#footer {
clear: both;
float: left;
margin-left: 0;
width: 100%;
display: block;
#theride-content {
clear: none;
float: left;
margin-left: 1.0989%;
width: 32.6007%;
display: block;
#whf-content {
font-family: Georgia, "Times New Roman", Times, serif;
SPRY CSS
@charset "UTF-8";
/* SpryMenuBarHorizontal.css - version 0.6 - Spry Pre-Release 1.6.1 */
/* Copyright (c) 2006. Adobe Systems Incorporated. All rights reserved. */
LAYOUT INFORMATION: describes box model, positioning, z-order
/* The outermost container of the Menu Bar, an auto width box with no margin or padding */
ul.MenuBarHorizontal
margin: 0;
padding: 0;
list-style-type: none;
font-size: 100%;
cursor: default;
width: auto;
float: right;
/* Set the active Menu Bar with this class, currently setting z-index to accomodate IE rendering bug: http://therealcrisp.xs4all.nl/meuk/IE-zindexbug.html */
ul.MenuBarActive
z-index: 1000;
/* Menu item containers, position children relative to this container and are a fixed width */
ul.MenuBarHorizontal li
margin: 0;
padding: 0;
list-style-type: none;
font-size: 100%;
position: relative;
text-align: left;
cursor: pointer;
width: 4.3em;
float: left;
/* Submenus should appear below their parent (top: 0) with a higher z-index, but they are initially off the left side of the screen (-1000em) */
ul.MenuBarHorizontal ul
margin: 0;
padding: 0;
list-style-type: none;
font-size: 100%;
z-index: 1020;
cursor: default;
width: 4.3em;
position: relative;
left: -1000em;
/* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to auto so it comes onto the screen below its parent menu item */
ul.MenuBarHorizontal ul.MenuBarSubmenuVisible
left: auto;
/* Menu item containers are same fixed width as parent */
ul.MenuBarHorizontal ul li
/* Submenus should appear slightly overlapping to the right (95%) and up (-5%) */
ul.MenuBarHorizontal ul ul
position: relative;
margin: -5% 0 0 95%;
/* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to 0 so it comes onto the screen */
ul.MenuBarHorizontal ul.MenuBarSubmenuVisible ul.MenuBarSubmenuVisible
left: auto;
top: 0;
DESIGN INFORMATION: describes color scheme, borders, fonts
/* Submenu containers have borders on all sides */
ul.MenuBarHorizontal ul
/* Menu items are a light gray block with padding and no text decoration */
ul.MenuBarHorizontal a
display: block;
cursor: pointer;
background-color: #300;
color: #FFF;
text-decoration: none;
font-size: 12px;
font-family: Georgia, "Times New Roman", Times, serif;
text-align: center;
height: 16px;
padding: 0px;
/* Menu items that have mouse over or focus have a blue background and white text */
ul.MenuBarHorizontal a:hover, ul.MenuBarHorizontal a:focus
background-color: #003;
color: #FFF;
/* Menu items that are open with submenus are set to MenuBarItemHover with a blue background and white text */
ul.MenuBarHorizontal a.MenuBarItemHover, ul.MenuBarHorizontal a.MenuBarItemSubmenuHover, ul.MenuBarHorizontal a.MenuBarSubmenuVisible
background-color: #003;
color: #FFF;
SUBMENU INDICATION: styles if there is a submenu under a given menu item
/* Menu items that have a submenu have the class designation MenuBarItemSubmenu and are set to use a background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal a.MenuBarItemSubmenu
background-image: url(SpryMenuBarDown.gif);
background-repeat: no-repeat;
background-position: 95% 50%;
/* Menu items that have a submenu have the class designation MenuBarItemSubmenu and are set to use a background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal ul a.MenuBarItemSubmenu
background-image: url(SpryMenuBarRight.gif);
background-repeat: no-repeat;
background-position: 95% 50%;
/* Menu items that are open with submenus have the class designation MenuBarItemSubmenuHover and are set to use a "hover" background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal a.MenuBarItemSubmenuHover
background-image: url(SpryMenuBarDownHover.gif);
background-repeat: no-repeat;
background-position: 95% 50%;
/* Menu items that are open with submenus have the class designation MenuBarItemSubmenuHover and are set to use a "hover" background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal ul a.MenuBarItemSubmenuHover
background-image: url(SpryMenuBarRightHover.gif);
background-repeat: no-repeat;
background-position: 95% 50%;
BROWSER HACKS: the hacks below should not be changed unless you are an expert
/* HACK FOR IE: to make sure the sub menus show above form controls, we underlay each submenu with an iframe */
ul.MenuBarHorizontal iframe
position: absolute;
z-index: 1010;
filter:alpha(opacity:0.1);
/* HACK FOR IE: to stabilize appearance of menu items; the slash in float is to keep IE 5.0 from parsing */
@media screen, projection
ul.MenuBarHorizontal li.MenuBarItemIE
display: inline;
f\loat: left;
background: #FFF;Design view is not reliable. Learn to work in Code View or Split View with Live View to check your layout.
Spry menus are not responsive so they will not work well in a Fluid Grid Layout. Find a better menu system.
Project Seven Responsive Tabs
http://www.projectseven.com/products/tools/tpm2/tutorials/responsive/index.htm
10 Responsive Menus
http://speckyboy.com/2012/08/29/10-responsive-navigation-solutions-and-tutorials/
In the meantime,
It's often easier to work with an unstyled HTML page.
To disable CSS, go to View > Style Rendering > untick Display Styles.
Or, use a Design-Time Style Sheet.
http://help.adobe.com/en_US/dreamweaver/cs/using/WScbb6b82af5544594822510a94ae8d65-7e17a.h tml
Nancy O. -
Spry Tab Panel is not working properly on remote server
Hello All,
I have a problem with spry tab panel, it is not displaying image in the background when it is active, it is working properly in local server but when i upload to remote it vanishes.
Here is the link
http://www.geftas.com/temaritestpage/about.html
Also I am uploading Css and html code below
Any help would be exteremely appreciated.
Thanks
<!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=utf8"/>
<meta http-equiv="content-type" content="cache" />
<meta http-equiv="robots" content="INDEX,FOLLOW" />
<meta http-equiv="keywords" content="Enter Keywords"/>
<meta http-equiv="description" content="Description Here" />
<title>TEMARI&CO. | Business Strategists</title>
<link href="css/about.css" rel="stylesheet" type="text/css" media="screen" />
<script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<script src="SpryAssets/SpryTabbedPanels.js" type="text/javascript"></script>
<link href="SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />
<link href="SpryAssets/SpryTabbedPanels.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="wrapper">
<div id="header"></div>
<div id="navigation">
<ul id="MenuBar1" class="MenuBarHorizontal">
<li><a href="index.html">HOME</a></li>
<li><a href="about.html" class="current">ABOUT</a></li>
<li><a href="#" class="MenuBarItemSubmenu">CONSULTING</a>
<ul>
<li><a href="#">Business Plan</a></li>
<li><a href="#">Marketing Plan</a></li>
<li><a href="#">Incorporation</a></li>
<li><a href="#">Accounting System</a></li>
</ul>
</li>
<li><a href="#" class="MenuBarItemSubmenu">INDUSTRIES</a>
<ul>
<li><a href="#">Untitled Item</a></li>
<li><a href="#">Untitled Item</a></li>
<li><a href="#">Untitled Item</a></li>
<li><a href="#">Untitled Item</a></li>
</ul>
</li>
<li><a href="#">OUR PROCESS</a></li>
<li><a href="#">CAREERS</a> </li>
<li><a href="#">CONTACT</a></li>
</ul>
</div>
<div class="shadow" id="content">
<div id="TabbedPanels1" class="TabbedPanels">
<ul class="TabbedPanelsTabGroup">
<li class="TabbedPanelsTab" tabindex="0">values</li>
<li class="TabbedPanelsTab" tabindex="0">people</li>
</ul>
<div class="TabbedPanelsContentGroup">
<div class="TabbedPanelsContent">
<div id="scrolltext">
<h1>Heading1</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. N</p>
</div>
</div>
<div class="TabbedPanelsContent">
<div id="scrolltext">
<h1>Heading1</h1>
<p>Lorem n, </p>
<h1>Heading1</h1>
<p>Lorem ipsum dolor sit amet, , </p>
<h1>Heading1</h1>
<p>Lorem ipsum dolor sit a, </p>
<h1>Heading1</h1>
<p>Lorem ipsum dolor sit amet, </p>
</div>
</div>
</div>
</div>
</div>
<div id="footer">
<div id="legal">
<ul>
<li>Copyright © 2012 Temari&Co</li>
<li>| Privacy Policy |</li>
<li>Terms of Use</li>
</ul>
</div>
<div id="socialmedia">
<ul>
<li><img src="images/fbicongri.png" width="20" height="20" alt="fbicon" /></li>
<li><img src="images/gicongri.png" width="20" height="20" alt="gicon"/></li>
<li><img src="images/linkedinicongri.png" width="20" height="20" alt="linkedin"/></li>
<li><img src="images/twittericongri.png" width="20" height="20" alt="twitter"/></li>
</ul>
</div>
</div><!-- end footer-->
</div><!-- end wrapper-->
<script type="text/javascript">
var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"SpryAssets/SpryMenuBarDownHover.gif", imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
var TabbedPanels1 = new Spry.Widget.TabbedPanels("TabbedPanels1");
</script>
</body>
</html>
@charset "UTF-8";
/* SpryTabbedPanels.css - version 0.6 - Spry Pre-Release 1.6.1 */
/* Copyright (c) 2006. Adobe Systems Incorporated. All rights reserved. */
/* Horizontal Tabbed Panels
* The default style for a TabbedPanels widget places all tab buttons
* (left aligned) above the content panel.
.TabbedPanels {
overflow: hidden;
margin: 0px;
padding: 0px;
clear: none;
width: 100%;
height:100%; /* IE Hack to force proper layout when preceded by a paragraph. (hasLayout Bug)*/
.TabbedPanelsTabGroup {
margin: 0px;
padding: 0px;
.TabbedPanelsTab {
position: relative;
float: left;
background-color: #FFF;
list-style: none;
-moz-user-select: none;
-khtml-user-select: none;
cursor: pointer;
font-family: Arial, Helvetica, sans-serif;
font-size: 9pt;
font-weight: normal;
color: #666;
height: 30px;
width: 116px;
text-transform: uppercase;
text-align: center;
line-height: 30px;
margin: 0px;
padding: 0px;
.TabbedPanelsTabHover {
background-image: url(../../SUPEROLDU/images/menubaractive.png);
background-repeat: repeat-x;
color: #FFF;
.TabbedPanelsTabSelected {
background-image: url(../../SUPEROLDU/images/menubaractive.png);
background-repeat: repeat-x;
color: #FFF;
height: 30px;
width: 116px;
.TabbedPanelsTab a {
color: black;
text-decoration: none;
.TabbedPanelsContentGroup {
clear: both;
background-color: #FFF;
height: 100%;
width: 824px;
font-family: Arial, Helvetica, sans-serif;
font-size: 9pt;
color: #666;
border-top-width: 1px;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
border-top-style: dotted;
border-top-color: #CCC;
border-right-color: #CCC;
border-bottom-color: #CCC;
border-left-color: #CCC;
.TabbedPanelsContent {
height: 100%;
width: 100%;
overflow:hidden;
.TabbedPanelsContentVisible {
.VTabbedPanels {
overflow: hidden;
zoom: 1;
.VTabbedPanels .TabbedPanelsTabGroup {
float: left;
background-color: #EEE;
position: relative;
.VTabbedPanels .TabbedPanelsTab {
float: none;
margin: 0px;
border-top: none;
border-left: none;
border-right: none;
.VTabbedPanels .TabbedPanelsTabSelected {
background-color: #EEE;
.VTabbedPanels .TabbedPanelsContentGroup {
clear: none;
/* Styles for Printing */
@media print {
.TabbedPanels {
overflow: visible !important;
.TabbedPanelsContentGroup {
display: block !important;
overflow: visible !important;
height: auto !important;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
.TabbedPanelsContent {
clear:both !important;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
width: 744px;
.TabbedPanelsTab {
overflow: visible !important;
display: block !important;
clear:both !important;Hi
Please Upload SpryTabbed Panels.css and menubaractive.png to their respective remote directories/folders.
The images have not been uploaded at all, the online CSS is the one without a link to the images
Regards
Adaan Pre-Media Services
For more image editing services follow us @
web designing services -
How do I use a div as a spacer?
If I put 6 divs next to each other and put wording in each they work fine in the desktop view but if I leave the left div blank to use as a spacer It will not work. The other 5 move to the left. I need to use the first and last divs as spacers. I have heard you can use a blank transparent .gif but is that the only way? Can you please advise?
I am trying to convert from Expression Web 4 to DW CS6 which is quite a learning experience. I can't send you a link because it isn't published but the following is the CSS for the desktop section. I tried to set the width to 175 px but that didn't help at all. I would appreciate your advice. @media only screen and (min-width: 769px) { .gridContainer { width: 99.2424%; max-width: 1232px; padding-left: 0.3787%; padding-right: 0.3787%; margin: auto; } #LayoutDiv1 { clear: both; float: left; margin-left: 0; width: 100%; display: block; } #N1 { clear: both; float: left; margin-left: 0; width: 16.0305%; display: block; text-align: center; color: #930; } #pic1 { clear: none; float: left; margin-left: 0.7633%; width: 16.0305%; display: block; } #pic2 { clear: none; float: left; margin-left: 0.7633%; width: 16.0305%; display: block; } #pic3 { clear: none; float: left; margin-left: 0.7633%; width: 16.0305%; display: block; } #pic4 { clear: none; float: left; margin-left: 0.7633%; width: 16.0305%; display: block; } #N2 { clear: none; float: left; margin-left: 0.7633%; width: 16.0305%; display: block; text-align: center; color: #900; } }
-
Spry tab menu background image is not displaying on remote server
Hello All,
I have a problem with spry tab panel, it is not displaying image in the background when it is active, it is working properly in local server but when i upload to remote it vanishes.
Here is the link
http://www.geftas.com/temaritestpage/about.html
Also I am uploading Css and html code below
Any help would be exteremely appreciated.
Thanks
<!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=utf8"/>
<meta http-equiv="content-type" content="cache" />
<meta http-equiv="robots" content="INDEX,FOLLOW" />
<meta http-equiv="keywords" content="Enter Keywords"/>
<meta http-equiv="description" content="Description Here" />
<title>TEMARI&CO. | Business Strategists</title>
<link href="css/about.css" rel="stylesheet" type="text/css" media="screen" />
<script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<script src="SpryAssets/SpryTabbedPanels.js" type="text/javascript"></script>
<link href="SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />
<link href="SpryAssets/SpryTabbedPanels.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="wrapper">
<div id="header"></div>
<div id="navigation">
<ul id="MenuBar1" class="MenuBarHorizontal">
<li><a href="index.html">HOME</a></li>
<li><a href="about.html" class="current">ABOUT</a></li>
<li><a href="#" class="MenuBarItemSubmenu">CONSULTING</a>
<ul>
<li><a href="#">Business Plan</a></li>
<li><a href="#">Marketing Plan</a></li>
<li><a href="#">Incorporation</a></li>
<li><a href="#">Accounting System</a></li>
</ul>
</li>
<li><a href="#" class="MenuBarItemSubmenu">INDUSTRIES</a>
<ul>
<li><a href="#">Untitled Item</a></li>
<li><a href="#">Untitled Item</a></li>
<li><a href="#">Untitled Item</a></li>
<li><a href="#">Untitled Item</a></li>
</ul>
</li>
<li><a href="#">OUR PROCESS</a></li>
<li><a href="#">CAREERS</a> </li>
<li><a href="#">CONTACT</a></li>
</ul>
</div>
<div class="shadow" id="content">
<div id="TabbedPanels1" class="TabbedPanels">
<ul class="TabbedPanelsTabGroup">
<li class="TabbedPanelsTab" tabindex="0">values</li>
<li class="TabbedPanelsTab" tabindex="0">people</li>
</ul>
<div class="TabbedPanelsContentGroup">
<div class="TabbedPanelsContent">
<div id="scrolltext">
<h1>Heading1</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. N</p>
</div>
</div>
<div class="TabbedPanelsContent">
<div id="scrolltext">
<h1>Heading1</h1>
<p>Lorem n, </p>
<h1>Heading1</h1>
<p>Lorem ipsum dolor sit amet, , </p>
<h1>Heading1</h1>
<p>Lorem ipsum dolor sit a, </p>
<h1>Heading1</h1>
<p>Lorem ipsum dolor sit amet, </p>
</div>
</div>
</div>
</div>
</div>
<div id="footer">
<div id="legal">
<ul>
<li>Copyright © 2012 Temari&Co</li>
<li>| Privacy Policy |</li>
<li>Terms of Use</li>
</ul>
</div>
<div id="socialmedia">
<ul>
<li><img src="images/fbicongri.png" width="20" height="20" alt="fbicon" /></li>
<li><img src="images/gicongri.png" width="20" height="20" alt="gicon"/></li>
<li><img src="images/linkedinicongri.png" width="20" height="20" alt="linkedin"/></li>
<li><img src="images/twittericongri.png" width="20" height="20" alt="twitter"/></li>
</ul>
</div>
</div><!-- end footer-->
</div><!-- end wrapper-->
<script type="text/javascript">
var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"SpryAssets/SpryMenuBarDownHover.gif", imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
var TabbedPanels1 = new Spry.Widget.TabbedPanels("TabbedPanels1");
</script>
</body>
</html>
@charset "UTF-8";
/* SpryTabbedPanels.css - version 0.6 - Spry Pre-Release 1.6.1 */
/* Copyright (c) 2006. Adobe Systems Incorporated. All rights reserved. */
/* Horizontal Tabbed Panels
* The default style for a TabbedPanels widget places all tab buttons
* (left aligned) above the content panel.
.TabbedPanels {
overflow: hidden;
margin: 0px;
padding: 0px;
clear: none;
width: 100%;
height:100%; /* IE Hack to force proper layout when preceded by a paragraph. (hasLayout Bug)*/
.TabbedPanelsTabGroup {
margin: 0px;
padding: 0px;
.TabbedPanelsTab {
position: relative;
float: left;
background-color: #FFF;
list-style: none;
-moz-user-select: none;
-khtml-user-select: none;
cursor: pointer;
font-family: Arial, Helvetica, sans-serif;
font-size: 9pt;
font-weight: normal;
color: #666;
height: 30px;
width: 116px;
text-transform: uppercase;
text-align: center;
line-height: 30px;
margin: 0px;
padding: 0px;
.TabbedPanelsTabHover {
background-image: url(../../SUPEROLDU/images/menubaractive.png);
background-repeat: repeat-x;
color: #FFF;
.TabbedPanelsTabSelected {
background-image: url(../../SUPEROLDU/images/menubaractive.png);
background-repeat: repeat-x;
color: #FFF;
height: 30px;
width: 116px;
.TabbedPanelsTab a {
color: black;
text-decoration: none;
.TabbedPanelsContentGroup {
clear: both;
background-color: #FFF;
height: 100%;
width: 824px;
font-family: Arial, Helvetica, sans-serif;
font-size: 9pt;
color: #666;
border-top-width: 1px;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
border-top-style: dotted;
border-top-color: #CCC;
border-right-color: #CCC;
border-bottom-color: #CCC;
border-left-color: #CCC;
.TabbedPanelsContent {
height: 100%;
width: 100%;
overflow:hidden;
.TabbedPanelsContentVisible {
.VTabbedPanels {
overflow: hidden;
zoom: 1;
.VTabbedPanels .TabbedPanelsTabGroup {
float: left;
background-color: #EEE;
position: relative;
.VTabbedPanels .TabbedPanelsTab {
float: none;
margin: 0px;
border-top: none;
border-left: none;
border-right: none;
.VTabbedPanels .TabbedPanelsTabSelected {
background-color: #EEE;
.VTabbedPanels .TabbedPanelsContentGroup {
clear: none;
/* Styles for Printing */
@media print {
.TabbedPanels {
overflow: visible !important;
.TabbedPanelsContentGroup {
display: block !important;
overflow: visible !important;
height: auto !important;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
.TabbedPanelsContent {
clear:both !important;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
width: 744px;
.TabbedPanelsTab {
overflow: visible !important;
display: block !important;
clear:both !important;Assuming these are the images you're trying to display:
.TabbedPanelsTabHover {
background-image: url(../../SUPEROLDU/images/menubaractive.png);
background-repeat: repeat-x;
color: #FFF;
.TabbedPanelsTabSelected {
background-image: url(../../SUPEROLDU/images/menubaractive.png);
background-repeat: repeat-x;
color: #FFF;
height: 30px;
width: 116px;
You have 2 root paths in your URL code. I think this is how your file structure looks like on your local computer. However, on a remote server, ../ by itself means you're pointing to the root folder of your website. Your URL linkage should be corrected based on the relativity and your background will work without a problem. -
CSS height property use in Fluid grid layout
Hi, I'm totally new to fluid grid layout and just got started in it. I have a div tag that has 5px height and I sucessfully applied that and seem fine only on Tablet landscape (1024x768) and Small tablet landscape (800x600), nevertheless it isn't even displaying on Mobile portrait (320x480), Mobile landscape (480x320), Small tablet portrait (600x800) and Tablet portrait (768x1024).
My coding is below
index.html
<!doctype html>
<!--[if lt IE 7]> <html class="ie6 oldie"> <![endif]-->
<!--[if IE 7]> <html class="ie7 oldie"> <![endif]-->
<!--[if IE 8]> <html class="ie8 oldie"> <![endif]-->
<!--[if gt IE 8]><!-->
<html class="">
<!--<![endif]-->
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Untitled Document</title>
<link href="fluid.grid.layout/boilerplate.css" rel="stylesheet" type="text/css">
<link href="fluid.grid.layout/style.css" rel="stylesheet" type="text/css">
<!--
To learn more about the conditional comments around the html tags at the top of the file:
paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/
Do the following if you're using your customized build of modernizr (http://www.modernizr.com/):
* insert the link to your js here
* remove the link below to the html5shiv
* add the "no-js" class to the html tags at the top
* you can also remove the link to respond.min.js if you included the MQ Polyfill in your modernizr build
-->
<!--[if lt IE 9]>
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<script src="fluid.grid.layout/respond.min.js"></script>
</head>
<body>
<div class="gridContainer clearfix">
<div id="LayoutDiv1"></div>
</div>
</body>
</html>
boilerplate.css
@charset "utf-8";
* HTML5 ✰ Boilerplate
* What follows is the result of much research on cross-browser styling.
* Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
* Kroc Camen, and the H5BP dev community and team.
* Detailed information about this CSS: h5bp.com/css
* Dreamweaver modifications:
* 1. Commented out selection highlight
* 2. Removed media queries section (we add our own in a separate file)
* ==|== normalize ==========================================================
/* =============================================================================
HTML5 display definitions
========================================================================== */
article, aside, details, figcaption, figure, footer, header, hgroup, nav, section { display: block; }
audio, canvas, video { display: inline-block; *display: inline; *zoom: 1; }
audio:not([controls]) { display: none; }
[hidden] { display: none; }
/* =============================================================================
Base
========================================================================== */
* 1. Correct text resizing oddly in IE6/7 when body font-size is set using em units
* 2. Force vertical scrollbar in non-IE
* 3. Prevent iOS text size adjust on device orientation change, without disabling user zoom: h5bp.com/g
html { font-size: 100%; overflow-y: scroll; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; }
body { margin: 0; font-size: 13px; line-height: 1.231; }
body, button, input, select, textarea { font-family: sans-serif; color: #222; }
* Remove text-shadow in selection highlight: h5bp.com/i
* These selection declarations have to be separate
* Also: hot pink! (or customize the background color to match your design)
/* Dreamweaver: uncomment these if you do want to customize the selection highlight
*::-moz-selection { background: #fe57a1; color: #fff; text-shadow: none; }
*::selection { background: #fe57a1; color: #fff; text-shadow: none; }
/* =============================================================================
Links
========================================================================== */
a { color: #00e; }
a:visited { color: #551a8b; }
a:hover { color: #06e; }
a:focus { outline: thin dotted; }
/* Improve readability when focused and hovered in all browsers: h5bp.com/h */
a:hover, a:active { outline: 0; }
/* =============================================================================
Typography
========================================================================== */
abbr[title] { border-bottom: 1px dotted; }
b, strong { font-weight: bold; }
blockquote { margin: 1em 40px; }
dfn { font-style: italic; }
hr { display: block; height: 1px; border: 0; border-top: 1px solid #ccc; margin: 1em 0; padding: 0; }
ins { background: #ff9; color: #000; text-decoration: none; }
mark { background: #ff0; color: #000; font-style: italic; font-weight: bold; }
/* Redeclare monospace font family: h5bp.com/j */
pre, code, kbd, samp { font-family: monospace, monospace; _font-family: 'courier new', monospace; font-size: 1em; }
/* Improve readability of pre-formatted text in all browsers */
pre { white-space: pre; white-space: pre-wrap; word-wrap: break-word; }
q { quotes: none; }
q:before, q:after { content: ""; content: none; }
small { font-size: 85%; }
/* Position subscript and superscript content without affecting line-height: h5bp.com/k */
sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; }
sup { top: -0.5em; }
sub { bottom: -0.25em; }
/* =============================================================================
Lists
========================================================================== */
ul, ol { margin: 1em 0; padding: 0 0 0 40px; }
dd { margin: 0 0 0 40px; }
nav ul, nav ol { list-style: none; list-style-image: none; margin: 0; padding: 0; }
/* =============================================================================
Embedded content
========================================================================== */
* 1. Improve image quality when scaled in IE7: h5bp.com/d
* 2. Remove the gap between images and borders on image containers: h5bp.com/e
img { border: 0; -ms-interpolation-mode: bicubic; vertical-align: middle; }
* Correct overflow not hidden in IE9
svg:not(:root) { overflow: hidden; }
/* =============================================================================
Figures
========================================================================== */
figure { margin: 0; }
/* =============================================================================
Forms
========================================================================== */
form { margin: 0; }
fieldset { border: 0; margin: 0; padding: 0; }
/* Indicate that 'label' will shift focus to the associated form element */
label { cursor: pointer; }
* 1. Correct color not inheriting in IE6/7/8/9
* 2. Correct alignment displayed oddly in IE6/7
legend { border: 0; *margin-left: -7px; padding: 0; }
* 1. Correct font-size not inheriting in all browsers
* 2. Remove margins in FF3/4 S5 Chrome
* 3. Define consistent vertical alignment display in all browsers
button, input, select, textarea { font-size: 100%; margin: 0; vertical-align: baseline; *vertical-align: middle; }
* 1. Define line-height as normal to match FF3/4 (set using !important in the UA stylesheet)
* 2. Correct inner spacing displayed oddly in IE6/7
button, input { line-height: normal; *overflow: visible; }
* Reintroduce inner spacing in 'table' to avoid overlap and whitespace issues in IE6/7
table button, table input { *overflow: auto; }
* 1. Display hand cursor for clickable form elements
* 2. Allow styling of clickable form elements in iOS
button, input[type="button"], input[type="reset"], input[type="submit"] { cursor: pointer; -webkit-appearance: button; }
* Consistent box sizing and appearance
input[type="checkbox"], input[type="radio"] { box-sizing: border-box; }
input[type="search"] { -webkit-appearance: textfield; -moz-box-sizing: content-box; -webkit-box-sizing: content-box; box-sizing: content-box; }
input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; }
* Remove inner padding and border in FF3/4: h5bp.com/l
button::-moz-focus-inner, input::-moz-focus-inner { border: 0; padding: 0; }
* 1. Remove default vertical scrollbar in IE6/7/8/9
* 2. Allow only vertical resizing
textarea { overflow: auto; vertical-align: top; resize: vertical; }
/* Colors for form validity */
input:valid, textarea:valid { }
input:invalid, textarea:invalid { background-color: #f0dddd; }
/* =============================================================================
Tables
========================================================================== */
table { border-collapse: collapse; border-spacing: 0; }
td { vertical-align: top; }
/* ==|== primary styles =====================================================
Author:
========================================================================== */
/* ==|== non-semantic helper classes ========================================
Please define your styles before this section.
========================================================================== */
/* For image replacement */
.ir { display: block; border: 0; text-indent: -999em; overflow: hidden; background-color: transparent; background-repeat: no-repeat; text-align: left; direction: ltr; }
.ir br { display: none; }
/* Hide from both screenreaders and browsers: h5bp.com/u */
.hidden { display: none !important; visibility: hidden; }
/* Hide only visually, but have it available for screenreaders: h5bp.com/v */
.visuallyhidden { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; }
/* Extends the .visuallyhidden class to allow the element to be focusable when navigated to via the keyboard: h5bp.com/p */
.visuallyhidden.focusable:active, .visuallyhidden.focusable:focus { clip: auto; height: auto; margin: 0; overflow: visible; position: static; width: auto; }
/* Hide visually and from screenreaders, but maintain layout */
.invisible { visibility: hidden; }
/* Contain floats: h5bp.com/q */
.clearfix:before, .clearfix:after { content: ""; display: table; }
.clearfix:after { clear: both; }
.clearfix { zoom: 1; }
/* ==|== print styles =======================================================
Print styles.
Inlined to avoid required HTTP connection: h5bp.com/r
========================================================================== */
@media print {
* { background: transparent !important; color: black !important; text-shadow: none !important; filter:none !important; -ms-filter: none !important; } /* Black prints faster: h5bp.com/s */
a, a:visited { text-decoration: underline; }
a[href]:after { content: " (" attr(href) ")"; }
abbr[title]:after { content: " (" attr(title) ")"; }
.ir a:after, a[href^="javascript:"]:after, a[href^="#"]:after { content: ""; } /* Don't show links for images, or javascript/internal links */
pre, blockquote { border: 1px solid #999; page-break-inside: avoid; }
thead { display: table-header-group; } /* h5bp.com/t */
tr, img { page-break-inside: avoid; }
img { max-width: 100% !important; }
@page { margin: 0.5cm; }
p, h2, h3 { orphans: 3; widows: 3; }
h2, h3 { page-break-after: avoid; }
style.css
@charset "utf-8";
/* Simple fluid media
Note: Fluid media requires that you remove the media's height and width attributes from the HTML
http://www.alistapart.com/articles/fluid-images/
img, object, embed, video {
max-width: 100%;
/* IE 6 does not support max-width so default to width 100% */
.ie6 img {
width:100%;
Dreamweaver Fluid Grid Properties
dw-num-cols-mobile: 4;
dw-num-cols-tablet: 8;
dw-num-cols-desktop: 10;
dw-gutter-percentage: 25;
Inspiration from "Responsive Web Design" by Ethan Marcotte
http://www.alistapart.com/articles/responsive-web-design
and Golden Grid System by Joni Korpi
http://goldengridsystem.com/
/* Mobile Layout: 480px and below. */
.gridContainer {
margin-left: auto;
margin-right: auto;
width: 85.5%;
padding-left: 2.25%;
padding-right: 2.25%;
#LayoutDiv1 {
clear: both;
float: left;
margin-left: 0;
width: 100%;
height:5px;
display: block;
/* Tablet Layout: 481px to 768px. Inherits styles from: Mobile Layout. */
@media only screen and (min-width: 481px) {
.gridContainer {
width: 97.5%;
padding-left: 1.25%;
padding-right: 1.25%;
#LayoutDiv1 {
clear: both;
float: left;
margin-left: 0;
width: 100%;
height:5px;
display: block;
/* Desktop Layout: 769px to a max of 1232px. Inherits styles from: Mobile Layout and Tablet Layout. */
@media only screen and (min-width: 769px) {
.gridContainer {
width: 98%;
max-width: 1232px;
padding-left: 1%;
padding-right: 1%;
margin: auto;
#LayoutDiv1 {
clear: both;
float: left;
margin-left: 0;
width: 100%;
display: block;
height:5px;
background-color:#FBB829;
respond.min.js
/*! Respond.js v1.0.1pre: min/max-width media query polyfill. (c) Scott Jehl. MIT/GPLv2 Lic. j.mp/respondjs */
(function(e,h){e.respond={};respond.update=function(){};respond.mediaQueriesSupported=h;if(h){return}var u=e.document,r=u.documentElement,i=[],k=[],p=[],o={},g=30,f=u.getElementsByTagName("head")[0]||r,b=f.getElementsByTagName("link"),d=[],a=function(){var B=b,w=B.length,z=0,y,x,A,v;for(;z<w;z++){y=B[z],x=y.href,A=y.media,v=y.rel&&y.rel.toLowerCase()==="stylesheet";if(!!x&&v&&!o[x]){if(y.styleSheet&&y.styleSheet.rawCssText){m(y.styleSheet.rawCssText,x,A);o[x]=true}else{if(!/^([a-zA-Z]+?:(\/\/)?)/.test(x)||x.replace(RegExp.$1,"").split("/")[0]===e.location.host){d.push({href:x,media:A})}}}}t()},t=function(){if(d.length){var v=d.shift();n(v.href,function(w){m(w,v.href,v.media);o[v.href]=true;t()})}},m=function(G,v,x){var E=G.match(/@media[^\{]+\{([^\{\}]+\{[^\}\{]+\})+/gi),H=E&&E.length||0,v=v.substring(0,v.lastIndexOf("/")),w=function(I){return I.replace(/(url\()['"]?([^\/\)'"][^:\)'"]+)['"]?(\))/g,"$1"+v+"$2$3")},y=!H&&x,B=0,A,C,D,z,F;if(v.length){v+="/"}if(y){H=1}for(;B<H;B++){A=0;if(y){C=x;k.push(w(G))}else{C=E[B].match(/@media ([^\{]+)\{([\S\s]+?)$/)&&RegExp.$1;k.push(RegExp.$2&&w(RegExp.$2))}z=C.split(",");F=z.length;for(;A<F;A++){D=z[A];i.push({media:D.match(/(only\s+)?([a-zA-Z]+)(\sand)?/)&&RegExp.$2,rules:k.length-1,minw:D.match(/\(min\-width:[\s]*([\s]*[0-9]+)px[\s]*\)/)&&parseFloat(RegExp.$1),maxw:D.match(/\(max\-width:[\s]*([\s]*[0-9]+)px[\s]*\)/)&&parseFloat(RegExp.$1)})}}j()},l,q,j=function(E){var v="clientWidth",x=r[v],D=u.compatMode==="CSS1Compat"&&x||u.body[v]||x,z={},C=u.createDocumentFragment(),B=b[b.length-1],w=(new Date()).getTime();if(E&&l&&w-l<g){clearTimeout(q);q=setTimeout(j,g);return}else{l=w}for(var y in i){var F=i[y];if(!F.minw&&!F.maxw||(!F.minw||F.minw&&D>=F.minw)&&(!F.maxw||F.maxw&&D<=F.maxw)){if(!z[F.media]){z[F.media]=[]}z[F.media].push(k[F.rules])}}for(var y in p){if(p[y]&&p[y].parentNode===f){f.removeChild(p[y])}}for(var y in z){var G=u.createElement("style"),A=z[y].join("\n");G.type="text/css";G.media=y;if(G.styleSheet){G.styleSheet.cssText=A}else{G.appendChild(u.createTextNode(A))}C.appendChild(G);p.push(G)}f.insertBefore(C,B.nextSibling)},n=function(v,x){var w=c();if(!w){return}w.open("GET",v,true);w.onreadystatechange=function(){if(w.readyState!=4||w.status!=200&&w.status!=304){return}x(w.responseText)};if(w.readyState==4){return}w.send(null)},c=(function(){var v=false;try{v=new XMLHttpRequest()}catch(w){v=new ActiveXObject("Microsoft.XMLHTTP")}return function(){return v}})();a();respond.update=a;function s(){j(true)}if(e.addEventListener){e.addEventListener("resize",s,false)}else{if(e.attachEvent){e.attachEvent("onresize",s)}}})(this,(function(f){if(f.matchMedia){return true}var e,i=document,c=i.documentElement,g=c.firstElementChild||c.firstChild,h=!i.body,d=i.body||i.createElement("body"),b=i.createElement("div"),a="only all";b.id="mq-test-1";b.style.cssText="position:absolute;top:-99em";d.appendChild(b);b.innerHTML='_<style media="'+a+'"> #mq-test-1 { width: 9px; }</style>';if(h){c.insertBefore(d,g)}b.removeChild(b.firstChild);e=b.offsetWidth==9;if(h){c.removeChild(d)}else{d.removeChild(b)}return e})(this));
I really do appreciate your efforts to help me solve this problem... Thank you in advanceHeight is determined by content. I can't think of a single reason to have a div height of 5px because almost nothing will fit inside that small a space without problems.
As to why it doesn't show up in other devices, you must have put that style into the Tablet CSS code instead of the default Mobile CSS code.
Fluid Grids build up from Mobile (applied to everything) with specific rules for Tablets, then Desktops.
Best advice, use Fluid Grids for layout only. Use a separate CSS file for content styles.
Hope this helps,
Nancy O. -
Full width slider in a fluid grid layout ???
I'm fairly fluent in Dreamweaver building fixed pixel sites, but cannot seem to grasp fluid grid layouts. At least with what I'm trying to accomplish. mostly all of the tutorials Ive seen dont address anything complicated.
Question:
I'm trying to achieve a 100% nivo slider at the top of a page, with a main body area below it that only uses 960px or what ever the equivalent would be as a percentage. How do I do this?
Initially for testing purposes, I tried to experiment by simply creating two divs. One full screen and one less than that. What I am seeing first is that after creating two divs, and placing color in the divs, when viewed in browser, it does not fill the screen and leaves a small margin on either both side. Looking into the css properties, there's padding in the grid container and the percentage is less than 100%. Why If 100% is selected when setting the new document properties.
Maybe this is the wrong way to achieve what I'm trying to achieve, but I did attempt to get started here. I'm totally lost here guys and girls. Are there any advanced tuts out there that address this?
Thanks in advance!
Bob
<body>
<div class="gridContainer clearfix">
<div id="LayoutDiv1">Use Insert Panel for additional Fluid Grid Layout Div tags. Note: All Layout Div tags must be inserted directly inside the "gridContainer" div tag. Nested Layout Div tags are not currently supported. </div>
<div id="LayoutDiv2">This is the content for Layout Div Tag "LayoutDiv2"</div>
</div>
</body>
</html>
@media only screen and (min-width: 769px) {
.gridContainer {
width: 98.5507%;
max-width: 1232px; (I deleted this)
padding-left: 0.7246%;
padding-right: 0.7246%;
margin: auto;
#LayoutDiv1 {
clear: both;
float: left;
margin-left: 0;
width: 100%;
display: block;
#LayoutDiv2 {
clear: both;
float: left;
margin-left: 22.549%;
width: 54.9019%;
display: block;Thanks for the input. I have the slider working now. Placing it before the grid container worked. Also setting the desk top grid to 81-88% answered my other question. That renders the gutters I'm looking for. But I have a question. I asked this above. If I select 100% on the mobile, 100% for tablet, and 88% for desktop, why does DW produce padding in the css files? I keep hearing references to not mess with the css file, and create a new file to perform styling. Can I safely delete this padding and change this percentage to 100%? Confusing to me. If it's mobile first, and all calculations are based on these numbers, then.... Well you understand what I'm saying.
/* Mobile Layout: 480px and below. */
.gridContainer {
margin-left: auto;
margin-right: auto;
width: 96%;
padding-left: 2%;
padding-right: 2%;
So secondly, do we create a separate css file for styling?
And third, how do you create subsequent pages. Does this work with dwt files?
Thanks in advance. I will get my head around this soon, I promise.
B -
I am trying to create a fluid grid layout. In fact it is why I purchased Dreamweaver CS6. Problem is after I create the first div which I named header it works fine. However, on inserting the next div Dreamweaver inserts the following text in my index.html:
@charset "utf-8"; /* Simple fluid media Note: Fluid media requires that you remove the media's height and width attributes from the HTML http://www.alistapart.com/articles/fluid-images/ */ img, object, embed, video { max-width: 100%; } /* IE 6 does not support max-width so default to width 100% */ .ie6 img { width:100%; } /* Dreamweaver Fluid Grid Properties ---------------------------------- dw-num-cols-mobile:3; dw-num-cols-tablet 8; dw-num-cols-desktop: 12; dw-gutter-percentage 20; Inspiration from "Responsive Web Design" by Ethan Marcotte http://www.alistapart.com/articles/responsive-web-design and Golden Grid System by Joni Korpi http://goldengridsystem.com/ */ /* Mobile Layout: 480px and below. */ .gridContainer { margin-left: auto; margin-right: auto; width: 85.9444%; padding-left: 2.5277%; padding-right: 2.5277%; } #LayoutDiv1 { clear: both; float: left; margin-left: 0; width: 100%; display: block; } #header { clear: both; float: left; margin-left: 0; width: 100%; display: block; } #nav { clear: both; float: left; margin-left: 0; width: 100%; display: block; } /* Tablet Layout: 481px to 768px. Inherits styles from: Mobile Layout. */ @media only screen and (min-width: 481px) { .gridContainer { width: 91.0625%; padding-left: 0.9687%; padding-right: 0.9687%; } #LayoutDiv1 { clear: both; float: left; margin-left: 0; width: 100%; display: block; } #header { clear: both; float: left; margin-left: 0; width: 100%; display: block; } #nav { clear: both; float: left; margin-left: 0; width: 100%; display: block; } } /* Desktop Layout: 769px to a max of 1232px. Inherits styles from: Mobile Layout and Tablet Layout. */ @media only screen and (min-width: 769px) { .gridContainer { width: 88.75%; max-width: 1232px; padding-left: 0.625%; padding-right: 0.625%; margin: auto; } #LayoutDiv1 { clear: both; float: left; margin-left: 0; width: 100%; display: block; } #header { clear: both; float: left; margin-left: 0; width: 100%; display: block; } #nav { clear: both; float: left; margin-left: 0; width: 100%; display: block; } }
I suspected the respond.min.js file was causing the problem so I downloaded an update but it didn't help. At this point I am not able to use this feature of Dreamweaver. Any help will be appreciated.Thanks for the help. I am using version 12.0 build 5861.
I was trying to follow the example in a book I have called Dreamweaver CS6 – The Missing Manual. When I got to the section discussing Fluid Grid Layout, I attempted to follow the example step by step. I was able to insert the first div which I named header. I looked at my css file and it had placed the #header.
I knew that I had to remain within the container div. I went into the code view and placed the cursor to the right of the header div. I then clicked the insert Fluid Grid Layout Div Tag button. That’s when it automatically inserted all of the code I indicated in my post.
I then started to follow the example in http://www.adobe.com/inspire/2012/08/fluid-grid-layouts-dreamweaver-cs6.html . I got the same results.
I’m beginning to wonder if there is an error in the Dreamweaver software itself.
Any help you can give will be appreciated.
Sheridan -
Inconsistent results wrapping text using floats in CSS
I have <div id="sidebar1"> that floats right, inside of
<div id="mainContent"> which houses all the content. IE won't
allow the text to extend (wrap) the entire width of <div
id="mainContent"> once it is past or below <div
id="sidebar1"> that floats right. Firefox allows it and displays
correctly. I am using SPRY widgets in <div id="sidebar1">
Below is the 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>Citecast Digital Signage</title>
<link href="/CSS/twoColElsRtHdr.css" rel="stylesheet"
type="text/css" />
<!--[if IE]>
<style type="text/css">
/* place css fixes for all versions of IE in this conditional
comment */
.twoColElsRtHdr #sidebar1 { padding-top: 30px; }
.twoColElsRtHdr #mainContent { zoom: 1; padding-top: 15px; }
/* the above proprietary zoom property gives IE the hasLayout
it needs to avoid several bugs */
</style>
<![endif]-->
<script src="Scripts/AC_RunActiveContent.js"
type="text/javascript"></script>
<script src="SpryAssets/SpryMenuBar.js"
type="text/javascript"></script>
<script type="text/javascript"
src="p7pm/p7popmenu.js"></script>
<script src="SpryAssets/SpryAccordion.js"
type="text/javascript"></script>
<style type="text/css" media="screen">
<!--
@import url("p7pm/p7pmh7new.css");
-->
</style>
<link href="SpryAssets/SpryAccordion.css" rel="stylesheet"
type="text/css" />
</head>
<body class="twoColElsRtHdr"
onload="P7_initPM(1,7,1,-20,10)">
<div class="twoColElsRtHdr" id="container">
<div id="header">
</div>
<!-- end #header -->
<div id="container_margintop">
<div id="menu">
<!--#include virtual="/includes/citecastmenu-NEW.html"
-->
</div>
<div id="sidebar1">
<div id="Accordion1" class="Accordion" tabindex="0">
<div class="AccordionPanel">
<div class="AccordionPanelTab">Research shows digital
signage is more memorable, less annoying than other
media</div>
<div class="AccordionPanelContent">
<p><strong>Caveats to keep in mind
...</strong></p>
<p>Like any research sponsored by a party with a
vested interest in the outcome, these results need to be taken with
a grain of salt. </p>
<p> <a
href="/Pages/articles-columns-news/researchShows...caveats to keep
in mind.shtml">more ...</a> </p>
</div>
</div>
<div class="AccordionPanel">
<div class="AccordionPanelTab">Research shows digital
signage is more memorable ... <strong>What does it all
mean?</strong></div>
<div class="AccordionPanelContent">
<p>Some of the above results simply indicate how much
time the respondents spend interacting with each type of media.
</p>
<p><a
href="/Pages/articles-columns-news/researchShows...what does it all
mean.shtml">More ...</a> </p>
</div>
</div>
</div>
<br />
<br />
<div align="center"><img
src="/Images/clarkpowell-integrator-logo.png" alt="clark powell"
width="214" height="69" /></div>
<div align="center"><img src="/Images/cp 25yr
seal.png" /></div>
<br />
<div align="center"><img
src="/Images/princeton_logo_horiz.jpg" alt="princeton"
/></div><br />
<br />
<!-- end #sidebar1 --></div>
<div id="mainContent">
<h1 align="center"> </h1>
<h2 align="center">Turn Key Digital Signage</h2>
<p align="center">
<script type="text/javascript">
AC_FL_RunContent( 'codebase','
http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0','wid th','344','height','400','title','Citecast
digital signage
example','src','/flash/home-tv-reflection','quality','high','pluginspage','
http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash','movi e','/flash/home-tv-reflection'
); //end AC code
</script>
<noscript>
<object
classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="
http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0"
width="344" height="400" title="Citecast digital signage
example">
<param name="movie" value="/flash/home-tv-reflection.swf"
/>
<param name="quality" value="high" />
<embed src="/flash/home-tv-reflection.swf" quality="high"
pluginspage="
http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash"
type="application/x-shockwave-flash" width="344"
height="400"></embed>
</object>
</noscript>
</p>
<h3>Complete Digital Signage Solution</h3>
<p align="left"><strong>Citecast is a turnkey,
worry free digital signage solution</strong> that includes
content, appropriate hardware, software, installation, training and
support. </p>
<p align="left">Need it quickly? Citecast can be
deployed rapidly so that you are up and communicating fast.
We make it easy to try Citecast with a low cost of entry and
reasonable monthly usage fees. There is no need to purchase
expensive equipment or grow and train your staff. </p>
<p align="left">A Citecast Solution is high end
digital signage without a huge capital investment.
Citecast’s affordable options offer alternatives to
costly capital expenditure by allowing you to use existing
operating or marketing budgets. </p>
<div class="spacershad"></div>
<h3 align="center" class="twoColElsRtHdr">Compelling
digital signage at the point of decision! </h3>
<p class="text1">
What is it worth to you and your organization to have a
sales representative who is always in the right
place to interact with the right people when they are at the
point of decision? What is it worth
to have representation that is informative, always accurate,
and up-to-date delivering an efficient,
positive, message to a captive market in at their point of
decision. </p>
<p class="text1"><a
href="/Pages/Products_and_Services/Examples.shtml">View Citecast
examples </a>
<!-- 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>
<div class="clearfloat"></div>
<div id="footer">
<p></p>
<!-- end #footer --></div>
<!-- end #container -->
</div>
<script type="text/javascript">
<!--
var Accordion1 = new Spry.Widget.Accordion("Accordion1");
//-->
</script>
</body>
</html>Can't see your CSS code this way. Much better to publish to a
testing
folder on your remote server.
But as a guess, I think this might work. Add this to your
outer div's CSS.
#mainContent {
height: 1%; /** IE6 peekaboo fix **/
overflow: auto; /** Mozilla clear floats **/
--Nancy O.
Alt-Web Design & Publishing
www.alt-web.com
"Dad Blame" <[email protected]> wrote in
message
news:[email protected]...
> I have <div id="sidebar1"> that floats right,
inside of <div
id="mainContent">
> which houses all the content. IE won't allow the text to
extend (wrap) the
> entire width of <div id="mainContent"> once it is
past or below <div
> id="sidebar1"> that floats right. Firefox allows it
and displays
correctly. I
> am using SPRY widgets in <div id="sidebar1">
> Below is the 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>Citecast Digital Signage</title>
> <link href="/CSS/twoColElsRtHdr.css" rel="stylesheet"
type="text/css" />
> <!--[if IE]>
> <style type="text/css">
> /* place css fixes for all versions of IE in this
conditional comment */
> .twoColElsRtHdr #sidebar1 { padding-top: 30px; }
> .twoColElsRtHdr #mainContent { zoom: 1; padding-top:
15px; }
> /* the above proprietary zoom property gives IE the
hasLayout it needs to
> avoid several bugs */
> </style>
> <![endif]-->
> <script src="Scripts/AC_RunActiveContent.js"
type="text/javascript"></script>
> <script src="SpryAssets/SpryMenuBar.js"
type="text/javascript"></script>
> <script type="text/javascript"
src="p7pm/p7popmenu.js"></script>
> <script src="SpryAssets/SpryAccordion.js"
type="text/javascript"></script>
>
> <style type="text/css" media="screen">
> <!--
> @import url("p7pm/p7pmh7new.css");
> -->
> </style>
> <link href="SpryAssets/SpryAccordion.css"
rel="stylesheet"
type="text/css" />
> </head>
>
> <body class="twoColElsRtHdr"
onload="P7_initPM(1,7,1,-20,10)">
>
> <div class="twoColElsRtHdr" id="container">
>
>
> <div id="header">
>
> </div>
>
> <!-- end #header -->
>
>
>
> <div id="container_margintop">
>
> <div id="menu">
> <!--#include
virtual="/includes/citecastmenu-NEW.html" -->
> </div>
>
>
>
> <div id="sidebar1">
> <div id="Accordion1" class="Accordion"
tabindex="0">
> <div class="AccordionPanel">
> <div class="AccordionPanelTab">Research shows
digital signage is more
> memorable, less annoying than other media</div>
> <div class="AccordionPanelContent">
> <p>
Caveats to keep in mind ...</p>
> <p>Like any research sponsored by a party with a
vested interest in
the
> outcome, these results need to be taken with a grain of
salt. </p>
> <p> <a
href="/Pages/articles-columns-news/researchShows...caveats
to
> keep in mind.shtml">more ...</a> </p>
> </div>
> </div>
> <div class="AccordionPanel">
> <div class="AccordionPanelTab">Research shows
digital signage is more
> memorable ...
What does it all mean?</div>
> <div class="AccordionPanelContent">
> <p>Some of the above results simply indicate how
much time the
> respondents spend interacting with each type of media.
</p>
> <p><a
href="/Pages/articles-columns-news/researchShows...what does
it
> all mean.shtml">More ...</a> </p>
> </div>
> </div>
> </div>
> <br />
> <br />
>
>
> <div align="center"><img
src="/Images/clarkpowell-integrator-logo.png"
> alt="clark powell" width="214" height="69"
/></div>
>
> <div align="center"><img src="/Images/cp 25yr
seal.png" /></div>
> <br />
> <div align="center"><img
src="/Images/princeton_logo_horiz.jpg"
> alt="princeton" /></div><br />
> <br />
>
>
> <!-- end #sidebar1 --></div>
>
> <div id="mainContent">
> <h1 align="center"> </h1>
> <h2 align="center">Turn Key Digital
Signage</h2>
> <p align="center">
> <script type="text/javascript">
> AC_FL_RunContent(
>
'codebase','
http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.
cab#
>
version=9,0,28,0','width','344','height','400','title','Citecast
digital
> signage
>
example','src','/flash/home-tv-reflection','quality','high','pluginspage','h
ttp:
>
//www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFla
sh',
> 'movie','/flash/home-tv-reflection' ); //end AC code
> </script>
> <noscript>
> <object
classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
>
codebase="
http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.ca
b#ve
> rsion=9,0,28,0" width="344" height="400" title="Citecast
digital signage
> example">
> <param name="movie"
value="/flash/home-tv-reflection.swf" />
> <param name="quality" value="high" />
> <embed src="/flash/home-tv-reflection.swf"
quality="high"
>
pluginspage="
http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Ve
rsio
> n=ShockwaveFlash" type="application/x-shockwave-flash"
width="344"
> height="400"></embed>
> </object>
> </noscript>
> </p>
>
> <h3>Complete Digital Signage Solution</h3>
> <p align="left">
Citecast is a turnkey, worry free digital
signage
> solution that includes content, appropriate
hardware, software,
> installation, training and support. </p>
> <p align="left">Need it quickly? Citecast can be
deployed rapidly
so
> that you are up and communicating fast.
> We make it easy to try Citecast with a low cost of entry
and
> reasonable monthly usage fees. There is no need to
purchase expensive
equipment
> or grow and train your staff. </p>
> <p align="left">A Citecast Solution is high end
digital signage
without
> a huge capital investment.
> Citecast?s affordable options offer alternatives to
costly
capital
> expenditure by allowing you to use existing operating or
marketing
budgets. </p>
> <div class="spacershad"></div>
> <h3 align="center"
class="twoColElsRtHdr">Compelling digital
signage at
> the point of decision! </h3>
> <p class="text1">
> What is it worth to you and your organization to have a
sales
> representative who is always in the right
> place to interact with the right people when they are at
the
point of
> decision? What is it worth
> to have representation that is informative, always
accurate, and
> up-to-date delivering an efficient,
> positive, message to a captive market in at their point
of
decision.
> </p>
> <p class="text1"><a
>
href="/Pages/Products_and_Services/Examples.shtml">View Citecast
examples
</a>
>
> <!-- 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>
>
> <div class="clearfloat"></div>
>
> <div id="footer">
> <p></p>
> <!-- end #footer --></div>
> <!-- end #container -->
>
> </div>
>
> <script type="text/javascript">
> <!--
> var Accordion1 = new
Spry.Widget.Accordion("Accordion1");
> //-->
> </script>
> </body>
> </html>
>
> -
Problems with Vertical Spry menu bar in Internet Explora
Hi I'm new to Dreamweaver,
I having trouble with a new site I'm making in CS4. A problem with a vertical menu bar, in IE. Can anyone help?
1. The text is left aligned and should be centered.
2. The menu bar has moved left
3. My paragraph text has moved up the page and aligned itself to the to the menu bar.
Website address: http://www.greenwyse.co.uk/
I'm finding dreamweaver a bit clunky, reading the 'Missing Manual' but still very frustrating. Any one have any idea's/
cheers
myquirkSorry, but your CSS is has been mangled beyound recognition.
The solution is to start with an untouched style sheet. Then add or modify the CSS testing in your browsers as you make the changes.
Have a look at the following where I have positioned the menu. All that is now required is the styling for font and the hover event.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<link href="SpryAssets/SpryMenuBarVertical.css" rel="stylesheet">
<style>
body {width: 960px; margin: auto;}
.article {clear: both; margin: 20px;}
/* SPRY MENUBAR */
ul.MenuBarVertical {width: 29em; margin: auto; border: none;}
ul.MenuBarVertical li {width: 29em; text-align: center;}
ul.MenuBarVertical a {background-color: transparent;}
</style>
</head>
<body>
<h1><img src="http://www.greenwyse.co.uk/greenwyse natural products/green_wyse_logo.png" width="200" height="136" alt="Green Wyse Natural Body Care Products" longdesc="greenwyse natural products/green_wyse_natural_body_care_products.png" /></h1>
<ul id="MenuBar1" class="MenuBarVertical">
<li><a href="index.html">100% Natural</a></li>
<li><a href="greenwyse natural products/about dawn Ireland.html">Handmade</a></li>
<li><a href="greenwyse natural products/Hand-Made-Natural-Bodycare.html">Eco Friendly</a> </li>
<li><a href="greenwyse natural products/green wyse body care products.html">Luxurious Body Care</a> </li>
</ul>
<div class="article">
<p>Working through a top-down, bottom-up approach, the vitality of conceptual synergies is of supreme importance to focus on improvement, not cost. Motivating participants and capturing their expectations, through the adoption of a proactive stance, the astute manager can adopt a position at the vanguard. Building flexibility through spreading knowledge and self-organization, by moving executive focus from lag financial indicators to more actionable lead indicators, the new golden rule gives enormous power to those individuals and units.</p>
<p>Organizations capable of double-loop learning, empowerment of all personnel, not just key operatives, measure the process, not the people. In a collaborative, forward-thinking venture brought together through the merging of like minds. The balanced scorecard, like the executive dashboard, is an essential tool in order to build a shared view of what can be improved, the vitality of conceptual synergies is of supreme importance. While those at the coal face don't have sufficient view of the overall goals.</p>
</div>
<!-- I prefer to keep the JS at the bottom of my document -->
<script src="SpryAssets/SpryMenuBar.js"></script>
<script>
var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
</script>
</body>
</html>
Gramps -
IE7 locks onto Mobil layout vs desktop layout
I am developing a new site and using the fluid grid layout. I have tested it on my laptop in Firefox v18, Internet Explorer 9, and Chrome v24. Everything was fine until I tested it on an XP desktop. Everything looked fine in Firefox v18 on the desktop, however, Internet Explorer 7 did not show the Content1 and Content2 as side by side columns that all the other browsers showed. In using the IE Developer Tool Bar it shows that the division style for them is width=100%. In reviewing my css the only place where Content 1 and Content 2 has width=100% is in the Mobile Layout for 480px and below. The Tablet and Desktop Layout both have those widths below 50%.
Here is my html:
<!doctype html>
<!--[if lt IE 7]> <html class="ie6 oldie"> <![endif]-->
<!--[if IE 7]> <html class="ie7 oldie"> <![endif]-->
<!--[if IE 8]> <html class="ie8 oldie"> <![endif]-->
<!--[if gt IE 8]><!-->
<html class="">
<!--<![endif]-->
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Conestoga Wagon Web Service - Your Business Ally</title>
<meta name="author" content="Conestoga Wagon Web Service">
<meta name="description" content="Conestoga Wagon Web Service, your business ally; where the mystique of yesteryear meets the technolgy of today and provides small business and organizations access to affordable professional web site design and hosting.">
<meta name="keywords" content="cheap website design,website design,affordable website design,custom website design,small businesses,website solutions,idaho website design,website designers,website hosting,web hosting">
<link href="css/boilerplate.css" rel="stylesheet" type="text/css">
<link href="css/fluid.css" rel="stylesheet" type="text/css">
<script src="js/jquery-1.4.1.min.js" type="text/javascript">
</script>
<script src="js/jquery.jcarousel.pack.js" type="text/javascript">
</script>
<script src="js/jquery-func.js" type="text/javascript"></script>
<!--
To learn more about the conditional comments around the html tags at the top of the file:
paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/
Do the following if you're using your customized build of modernizr (http://www.modernizr.com/):
* insert the link to your js here
* remove the link below to the html5shiv
* add the "no-js" class to the html tags at the top
* you can also remove the link to respond.min.js if you included the MQ Polyfill in your modernizr build
-->
<!--[if lt IE 9]>
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<script src="js/respond.min.js">
</script>
</head>
<body>
<div class="gridContainer clearfix">
<div id="Header">
<!-- Start of Header -->
<img src="images/header.png" alt="Conestoga Wagon Web Service Header Image">
<!-- End of Header -->
</div>
<div id="Menu">
<!-- Start of the Navigation -->
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="about.html">About Us</a></li>
<li><a href="design.html">Design</a></li>
<li><a href="hosting.html">Hosting</a></li>
<li><a href="contact.html">Contact Us</a></li>
<li><a href="faq.html">FAQ</a></li>
</ul>
<!-- End of the Navigation -->
</div>
<!-- Start of Content Area -->
<div id="Content1">
<h2>This is a test of H2 on Home page</h2>
This is the content for Layout Division Tag "Content"
<p>Combined with optimal use of human resources, big is no longer impregnable to ensure that non-operating cash outflows are assessed. An important ingredient of business process reengineering the vitality of conceptual synergies is of supreme importance the new golden rule gives enormous power to those individuals and units. Exploitation of core competencies as an essential enabler, through the adoption of a proactive stance, the astute manager can adopt a position at the vanguard.</p>
<p>As knowledge is fragmented into specialities from binary cause and effect to complex patterns, an important ingredient of business process reengineering. Building flexibility through spreading knowledge and self-organization, benchmarking against industry leaders, an essential process, should be a top priority at all times defensive reasoning, the doom loop and doom zoom. Maximization of shareholder wealth through separation of ownership from management the vitality of conceptual synergies is of supreme importance as knowledge is fragmented into specialities. The balanced scorecard, like the executive dashboard, is an essential tool building a dynamic relationship between the main players. An important ingredient of business process reengineering in a collaborative, forward-thinking venture brought together through the merging of like minds.</p>
<p>By moving executive focus from lag financial indicators to more actionable lead indicators, working through a top-down, bottom-up approach, the strategic vision - if indeed there be one - is required to identify. Organizations capable of double-loop learning, that will indubitably lay the firm foundations for any leading company to focus on improvement, not cost. By moving executive focus from lag financial indicators to more actionable lead indicators, benchmarking against industry leaders, an essential process, should be a top priority at all times building flexibility through spreading knowledge and self-organization. To ensure that non-operating cash outflows are assessed.</p>
<p>Measure the process, not the people. As knowledge is fragmented into specialities combined with optimal use of human resources, in order to build a shared view of what can be improved. Exploiting the productive lifecycle the components and priorities for the change program motivating participants and capturing their expectations. Big is no longer impregnable as knowledge is fragmented into specialities.</p>
<p>By moving executive focus from lag financial indicators to more actionable lead indicators, organizations capable of double-loop learning, building a dynamic relationship between the main players. To focus on improvement, not cost, quantitative analysis of all the key ratios has a vital role to play in this exploitation of core competencies as an essential enabler. From binary cause and effect to complex patterns, the new golden rule gives enormous power to those individuals and units, to experience a profound paradigm shift.</p>
</div>
<div id="Content2">This is the content for Layout Div Tag "Content2"
<p>Love's not time's fool, though rosy lips and cheeks oh, no, it is an ever fixed mark or bends with the remover to remove. Love alters not with his brief hours and weeks, it is the star to every wand'ring bark, within his bending sickle's compass come. Admit impediments; love is not love that looks on tempests and is never shaken; oh, no, it is an ever fixed mark. If this be error and upon me proved, whose worth's unknown, although his height be taken. But bears it out even to the edge of doom.</p>
<p>It is the star to every wand'ring bark, which alters when it alteration finds. Love's not time's fool, though rosy lips and cheeks within his bending sickle's compass come; which alters when it alteration finds. Admit impediments; love is not love if this be error and upon me proved, oh, no, it is an ever fixed mark. Love alters not with his brief hours and weeks, whose worth's unknown, although his height be taken. That looks on tempests and is never shaken; admit impediments; love is not love love's not time's fool, though rosy lips and cheeks.</p>
<p>Let me not to the marriage of true minds it is the star to every wand'ring bark, within his bending sickle's compass come. Which alters when it alteration finds, oh, no, it is an ever fixed mark love's not time's fool, though rosy lips and cheeks. Admit impediments; love is not love let me not to the marriage of true minds that looks on tempests and is never shaken. Within his bending sickle's compass come; if this be error and upon me proved, I never writ, nor no man ever loved. Love's not time's fool, though rosy lips and cheeks love alters not with his brief hours and weeks, oh, no, it is an ever fixed mark.</p>
<p>Let me not to the marriage of true minds but bears it out even to the edge of doom. Oh, no, it is an ever fixed mark that looks on tempests and is never shaken; or bends with the remover to remove. Within his bending sickle's compass come; but bears it out even to the edge of doom.</p>
<p>Admit impediments; love is not love love alters not with his brief hours and weeks, love's not time's fool, though rosy lips and cheeks. It is the star to every wand'ring bark, or bends with the remover to remove. Within his bending sickle's compass come; oh, no, it is an ever fixed mark whose worth's unknown, although his height be taken. Love's not time's fool, though rosy lips and cheeks.</p>
</div>
<!-- End of Content Area -->
<div id="Footer"> <hr class="divider">
<!-- Start of Footer Area -->
<script type="text/javascript">
now=new Date();
year=now.getFullYear();
</script>Copyright © 2012-<script type="text/javascript">
document.write(year);
</script>
<strong> Conestoga Wagon Web Service</strong><br>
| <a class="active" href="index.html">Conestoga Wagon Web Service</a> | <a href="hosting.html">Conestoga Wagon Web Hosting</a> | <a href="proposal.html">Request Proposal</a> | <a href="tos.html">TOS</a> | <a href="privacy.html">Privacy Policy</a> | <a href="hostagreement.html">Web Hosting Agreement</a> | <br>
<strong>An Idaho owned and operated Web Design and Hosting company.</strong>
<!-- End of Footer Area -->
</div>
</div>
</body>
</html>
Here is my css:
@charset "utf-8";
/* Simple fluid media
Note: Fluid media requires that you remove the media's height and width attributes from the HTML
http://www.alistapart.com/articles/fluid-images/
img, object, embed, video {
max-width: 100%;
/* IE 6 does not support max-width so default to width 100% */
.ie6 img {
width:100%;
Dreamweaver Fluid Grid Properties
dw-num-cols-mobile: 5;
dw-num-cols-tablet: 8;
dw-num-cols-desktop: 12;
dw-gutter-percentage: 10;
Inspiration from "Responsive Web Design" by Ethan Marcotte
http://www.alistapart.com/articles/responsive-web-design
and Golden Grid System by Joni Korpi
http://goldengridsystem.com/
/* Mobile Layout: 480px and below. */
.gridContainer {
margin-left: auto;
margin-right: auto;
width: 98.1818%;
padding-left: 0.909%;
padding-right: 0.909%;
#Header {
clear: both;
float: left;
margin-left: 0;
width: 100%;
#Menu {
clear: both;
float: left;
margin-left: 0;
width: 100%;
display: block;
#Menu ul{
list-style-type: none;
text-align: center;
font-weight: bold;
float: right;
padding-top: 0;
padding-right: 0px;
padding-bottom: 0;
padding-left: 0;
#Menu ul li{
float: left;
display: inline;
#Menu ul li a{
float: left;
display: inline;
width: 151px;
height: 100px;
background: url(../images/nav.png);
text-decoration: none;
line-height: 67px;
color: #ffb400;
#Menu ul li a.active,
#Menu ul li a:hover{ color:#fff; background: url(../images/nav-active.png) }
#Content1 {
clear: both;
float: left;
margin-left: 0;
width: 100%;
display: block;
text-align: justify;
#Footer {
clear: both;
float: left;
margin-left: 0;
width: 100%;
display: block;
color: #ffb400;
text-align: center;
padding-top: 0px;
padding-bottom: 10px;
#Footer a {color: #ffb400; }
#Content2 {
clear: both;
float: left;
margin-left: 0;
width: 100%;
display: block;
text-align: justify;
/* Tablet Layout: 481px to 768px. Inherits styles from: Mobile Layout. */
@media only screen and (min-width: 481px) {
.gridContainer {
width: 98.8636%;
padding-left: 0.5681%;
padding-right: 0.5681%;
#Header {
clear: both;
float: left;
margin-left: 0;
width: 100%;
#Menu {
clear: both;
float: left;
margin-left: 0;
width: 100%;
display: block;
#Content1 {
clear: both;
float: left;
margin-left: 0;
width: 49.4252%;
display: block;
#Footer {
clear: both;
float: left;
margin-left: 0;
width: 100%;
display: block;
#Content2 {
clear: none;
float: left;
margin-left: 1.1494%;
width: 49.4252%;
display: block;
/* Desktop Layout: 769px to a max of 1232px. Inherits styles from: Mobile Layout and Tablet Layout. */
@media only screen and (min-width: 769px) {
.gridContainer {
width: 99.2424%;
max-width: 1232px;
padding-left: 0.3787%;
padding-right: 0.3787%;
margin: auto;
#Header {
clear: both;
float: left;
margin-left: 0;
width: 100%;
#Menu {
clear: both;
float: left;
margin-left: 0;
width: 100%;
display: block;
#Content1 {
clear: both;
float: left;
margin-left: 0;
width: 49.6183%;
display: block;
#Footer {
clear: both;
float: left;
margin-left: 0;
width: 100%;
display: block;
#Content2 {
clear: none;
float: left;
margin-left: 2%;
width: 48%;
display: block;
It just seems like IE7 is locking onto the very first section of the css and not moving to the desktop and I just haven't been able to solve this so any assistance would be greatly appreciated.
Thanks,
VerneI have been doing a lot of looking around for possible solutions to this IE 7 issue with media queries. While there were a lot of diverse views on the subject I came across an article that seemed to be an easier solution to try than everything else. I downloaded the js file they recommended, copied and pasted
<!-- css3-mediaqueries.js for IE less than 9 -->
<!--[if lt IE 9]>
<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
<![endif]-->
into my document and now IE 7 shows the web page just like FF, IE9, and Chrome does. It was a super easy fix, even for a novice.
I hope this helps someone else like it has helped me.
Thanks,
Verne
Message was edited by: in-idaho -
Expand a centered div's width incrementally
I have a gallery in which I want to to expand to the width of the screen doing "auto width", but then add as many thumbnails across as possible. Then center that main gallery div so it's in the middle of the screen.
Keep in mind the number of images being displayed across each row is dynamically controlled by the width of the users screen. Below is the html I have so far.
Thanks
Here is the result I have right now.
I want this though.
<!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>Untitled Document</title>
<style type="text/css">
@charset "utf-8";
/* HTML5 RESET */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
body {
line-height: 1;
ol, ul {
list-style: none;
blockquote, q {
quotes: none;
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
table {
border-collapse: collapse;
border-spacing: 0;
#wrapper {
height: auto;
width: auto;
background-color: #0CC;
#gallery {
height: auto;
background-color: #09C;
margin-right: auto;
margin-left: auto;
padding-right: 20px;
padding-left: 20px;
width: auto;
overflow: auto;
.clearboth {
clear: both;
height: 0px;
width: auto;
.itempreview {
height: 300px;
width: 300px;
background-color: #3FF;
float: left;
margin-right: 10px;
margin-bottom: 20px;
margin-left: 10px;
</style>
</head>
<body>
<div id="wrapper">
<div id="gallery">
<div class="itempreview"> </div><!--itempreview end-->
<div class="itempreview"> </div><!--itempreview end-->
<div class="itempreview"> </div><!--itempreview end-->
<div class="itempreview"> </div><!--itempreview end-->
<div class="itempreview"> </div><!--itempreview end-->
<div class="itempreview"> </div><!--itempreview end-->
<div class="itempreview"> </div><!--itempreview end-->
<div class="itempreview"> </div><!--itempreview end-->
<div class="itempreview"> </div><!--itempreview end-->
</div>
</div>
</body>
</html>I wasn't sure if there was a way to incrementally adjust the width of that wrapper div so it would then always be centered.
To do so it would take an equation. One which would take the total width of the viewport and divided it by "320px" which each div is 300 and then the additional 20px for the padding on each side. Then it would round down to the nearest whole number. Then making the div wide enough to fit that "number of divs" and then centering the wrapper div in the viewport.
Example:
screen size = 1800 x 1200px
thumbnail/div size = 300 x 300px
-equation for seeing how many divs can fit width wise on the screen (screen width / thumbnail size)
1800 / 300 = 5.625
round 5.625 to the nearest whole number which eaquals 5.
so then there will be 5 thumbnails displayed in each row. Then center that wrapper div.
I don't know how to write js or else I'd write up an equation.
Is something like that possibe? And then have it update is the user changes there viewport size.
Maybe you are looking for
-
Text on Third Party Sales Order to PO
We have a thrid party sales order that creates a purchase requistion then PO. If line item text is added at time of order creation it will transfer to the purchase requistion then the PO. However if you add line item text when changing the sales or
-
Hi, Does anybody know if the sneak preview comes with the TREX search engine? If yes, does some configuration have to be done after installation? If no, can it be installed afterwards seperately? Thanks in advance, Vincent
-
Free Tutorials on Premiere Pro CS6
Hi Just found some free tutorials, and wanted to share them, in case you are interested: http://blogs.adobe.com/kevinmonahan/2012/08/28/free-video-tutorial-samples-from-learning-p remiere-pro-cs6/ /Ulf
-
hi how can i import mails from a .olm archive ? and if i will import to a mailbox will it duplicate with the existing mails if they are same messages ? i want to import from outlook 2011 to apple mac as outlook 2011 messed up with my contacts and con
-
Resizing in Illustrator CC using the Bounding Box is no longer accurate. What happened?
In Illustrator CC, resizing an object using the bounding box is no longer accurate. Snapping to other objects or the grid or anything is completely wrong and, worse, inconsistent. Here is a single box being resized 3 times to the same object. Each ti