LAYOUT QUESTIONS - CSS ISSUES

I am trying to center the three middle divs (the one with the three tabs and purple text, the one that says rotating images and the black nav - these are 3 separate divs) of the attached page so there is a green border on just the sides with white at the bottom below the footer (and ideally white in the sides of the top blue nav). I tried creating a wrapper, but it dos not cause anything to center. I centered the top blue nav bar with auto margins left and right. Layout/Formatting Questions:
1) How do I center this so there is a green "background" only on eitehr side of this "center" section of the page?
2) how do I ensure the black navigation div Icreated always falls as pictured here and that is rests on topp of the footer, with no green in between? (sometimes it moves to the right of the div above it)
3) How can I right justify just the Email and Facebook icons - I can't get them to move to the right?
Code is pasted below.
<!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>JAHMA New Jersey Affordable Housing Management Association</title>
<style type="text/css">

</style>
<script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<link href="SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
   if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
</script>
</head>
<body leftmargin="0" topmargin="0" onload="MM_preloadImages('images/news-tab-rollover.jpg','images/jahma-resources-tab-rollo ver.jpg','images/events-tab-rollover.jpg','images/about-rollover.jpg','images/programs-tab -rollover.jpg','images/foundation-tab-rollover.jpg')">
<script type="text/javascript">
// Google Internal Site Search script- By JavaScriptKit.com (http://www.javascriptkit.com)
// For this and over 400+ free scripts, visit JavaScript Kit- http://www.javascriptkit.com/
// This notice must stay intact for use
//Enter domain of site to search.
var domainroot="www.jahma.org.com"
function Gsitesearch(curobj){
curobj.q.value="site:"+domainroot+" "+curobj.qfront.value
</script>
<div id="searchBar">
<form action="http://www.google.com/search" method="get" onSubmit="Gsitesearch(this)">
<input name="q2" type="hidden" />
   <br />
   <input name="qfront" type="text" style="width: 180px" /> <input type="image" class="icon" value="Search" src="images/search.png" align="bottom" />
<br />
<span class="search">SEARCH</span>
</p>
</form>
</div>
<div id="#wrapper">
<div id="header">
<img src="images/jahma-banner.jpg" width="960" height="189" alt="logo" /></div>
<div id="mainNavigation">
    <ul id="MenuBar1" class="MenuBarHorizontal">
      <li><a href="#" class="MenuBarItemSubmenu" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('about','','images/about-rollover.jpg',1)"><img src="images/about.jpg" alt="about JAHMA" name="about" width="210" height="49" border="0" id="about" /></a>
        <ul>
          <li><a href="#" class="MenuBarItemSubmenu">Who We Are</a></li>
          <li><a href="#" class="MenuBarItemSubmenu">What We Do</a></li>
          <li><a href="#" >Joining JAHMA</a>
            <ul>
              <li><a href="#" class="MenuBarItemSubmenu">Membership</a></li>
              <li><a href="#" class="MenuBarItemSubmenu">Application</a></li>
            </ul>
          </li>
          <li><a href="#" class="MenuBarItemSubmenu">JAHMA Members</a>
            <ul>
              <li><a href="#" class="MenuBarItemSubmenu">Regular Members</a></li>
              <li><a href="#" class="MenuBarItemSubmenu">Associate Members</a></li>
              <li><a href="#" class="MenuBarItemSubmenu">Affiliate Members</a></li>
            </ul>
          </li>
          <li><a href="#" class="MenuBarItemSubmenu">Board of Directors and Committees</a></li>
          <li><a href="#" class="MenuBarItemSubmenu">JAHMA Administration & Contact Info</a></li>
        </ul>
      </li>
      <li><a href="#" class="MenuBarItemSubmenu" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('programs','','images/programs-tab-rollover.jpg',1)"><img src="images/programs-tab.jpg" alt="JAHMA programs" name="programs" width="210" height="49" border="0" id="progams" /></a>
        <ul>
          <li><a href="#" class="MenuBarItemSubmenu">Events & Training</a></li>
          <li><a href="#" class="MenuBarItemSubmenu">Poster/Calendar Contest</a></li>
          <li><a href="#" class="MenuBarItemSubmenu">Publications and Ad Rates</a>
            <ul>
<li><a href="#" class="MenuBarItemSubmenu">JAHMA Talk</a></li>
<li><a href="#" class="MenuBarItemSubmenu">Membership Directory</a></li>
<li><a href="#" class="MenuBarItemSubmenu">Ad Order Form</a></li>
            </ul>
          </li>
          <li><a href="#" class="MenuBarItemSubmenu">Job Opportunities</a>
            <ul>
              <li><a href="#"class="MenuBarItemSubmenu">Post a Job</a></li>
              <li><a href="#"class="MenuBarItemSubmenu">Available Jobs</a></li>
              <li><a href="#"class="MenuBarItemSubmenu">NAHMA's Career Center</a></li>
              <li><a href="#"class="MenuBarItemSubmenu">USA jobs.gov</a></li>
            </ul>
          </li>
        </ul>
      </li>
      <li><a href="#" class="MenuBarItemSubmenu" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('foundation','','images/foundation-tab-rollover.jpg',1)"><img src="images/foundation-tab.jpg" alt="JAHMA foundation" name="foundation" width="210" height="49" border="0" id="foundation" /></a>
        <ul>
          <li><a href="#" class="MenuBarItemSubmenu">What the Foundation is</a>        </li>
          <li><a href="#" class="MenuBarItemSubmenu">The Scholarship Program</a>
            <ul>
              <li><a href="#" class="MenuBarItemSubmenu">Scholarship Application</a></li>
              <li><a href="#" class="MenuBarItemSubmenu">Past Scholarship Recipients</a></li>
            </ul>
          </li>
          <li><a href="#" class="MenuBarItemSubmenu">Golf Outing Fundraiser</a>
            <ul>
              <li><a href="#" class="MenuBarItemSubmenu">List of Supporters</a></li>
              <li><a href="#" class="MenuBarItemSubmenu">Golf Outing Sign-Up Sheet</a></li>
              <li><a href="#" class="MenuBarItemSubmenu">Make a Contribution</a></li>
            </ul>
          </li>
          <li><a href="#" class="MenuBarItemSubmenu">In Time of Need</a></li>
        </ul>
      </li>
      <li><a href="#" class="MenuBarItemSubmenu" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('contact', '','images/contact-tab-rollover.jpg',1)"><img src="images/contact-tab.jpg" alt="contacts" name="contacts" width="210" height="49" border="0" id="contacts" /></a>
        <ul>
          <li><a href="#" class="MenuBarItemSubmenu">JAHMA Administration & Contact Info</a></li>
          <li><a href="#" class="MenuBarItemSubmenu">NAHMA</a>
            <ul>
              <li><a href="#" class="MenuBarItemSubmenu">Communities of Quality Program</a></li>
              <li><a href="#" class="MenuBarItemSubmenu">Credentials</a></li>
              <li><a href="#" class="MenuBarItemSubmenu">NAHMA Education and Training</a></li>
            </ul>
          </li>
          <li><a href="#" class="MenuBarItemSubmenu">PennDel AHMA</a></li>
          <li><a href="#" class="MenuBarItemSubmenu">Industry/Realtors Associations</a></li>
          <li><a href="#" class="MenuBarItemSubmenu">Government Agencies</a>
            <ul>
              <li><a href="#" class="MenuBarItemSubmenu">NJ Agencies</a></li>
              <li><a href="#" class="MenuBarItemSubmenu">Federal</a></li>
            </ul>
          </li>
        </ul>
      </li>
    </ul>
</div>
<div id="mainContent"><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('events','','images/events-tab-rollover.jpg',1)"><img src="images/events-tab.jpg" alt="events" name="events" width="150" height="53" border="0" id="events" /></a><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('news','','images/news-tab-rollover.jpg',1)"><img src="images/news-tab.jpg" alt="news" name="news" width="150" height="53" border="0" id="news" /></a><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('resources','','images/jahma-resources-tab-rollover.jpg',1)"><i mg src="images/jahma-resources-tab.jpg" alt="resources" name="resources" width="150" height="53" border="0" id="resources" /></a>
    <h1>September 22-23, 2011</h1>
    <h2><img src="images/register-button.jpg" alt="register button" width="100" height="102" class="floatRight" /> NAHMA's TAX CREDIT TRAINING & SHCM™ EXAM</h2>
    <p>sponsored by PennDel AHMA & JAHMA Hotel ML formerly Mt. Laurel Marriott<br />
      Mt. Laurel, NJ<br />
      More Information </p>
    <div id="registerButton"></div>
    <h1>September 27, 2011</h1>
    <img src="images/register-button.jpg" alt="register button" width="100" height="102" class="floatRight" />
    <h2>MAINTENANCE TECHNICIAN'S WORKSHOP: PART II REAC ON-SITE WORKSHOP</h2>
    <p>Gloucester Towne, Gloucester, NJ<br />
      More Information</p>
    <p> </p>
</div>
<div id="rightSidebar">
    <p>Rotating images here</p>
    <p> </p>
    <p> </p>
    <p> </p>
    <p> </p>
    <p> </p>
    <p> </p>
    <p> </p>
    <p> </p>
    <p> </p>
    <p> </p>
    <p> </p>
    <p> </p>
    <p> </p>
    <p> </p>
    <p> </p>
    <p> </p>
    </div>
<div id="memberNav">
    <ul>
      <li><a href="#" >Regular<br />
      Members</a></li>
      <li><a href="#" >Associate<br />
      Members</a></li>
      <li><a href="#" >Affiliate<br />
      Members</a></li>
      </ul>
</div>
<div id="footer">
    <p> <img src="images/JAHMA-footer-logo.jpg" width="100" alt="logo" />P.O. Box 4 • Riverton, NJ 0807 • 856-786-9590 • Fax 856-786-6265<img src="images/email.png" alt="email" width="32" height="42" class="icon" />
    <img src="images/facebook.png" alt="facebook" width="42" height="42" class="icon" /></p>
</div>
</div>
<p> </p>
<script type="text/javascript">
var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"SpryAssets/SpryMenuBarDownHover.gif", imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
</script>
</body>
</html>

To centre the 3 divs under the navigation you'll need to first delete the left margin of 100px set on the 'mainContent' <div> css.
Then you'll need to wrap all three <divs> in another <div></div> and set its width to the same width as the navigation <div> - 860px and use margin: 0 auto; on the wrapper <div>. Then you can adjust the widths of the 3 <divs> inside it.
Trying to get a web page that balances up with equal length columns is a pointless exercise. You need to design taking into account that the web is not a 'fixed' medium such as a desk top publishing package. There may be some javascript methods which you might be able to resort to such as 'equal length columns' over at the Project Seven website (that's if they have that extention still available for download. I don't know have'nt been there for a while)
Wrap your address in its own <div> and float it left and then wrap your icons in their own <div> and float them right (inline css stylng is shown below)
<div style="float: left; width: 400px;"> <img src="images/JAHMA-footer-logo.jpg" width="100" alt="logo" />P.O. Box 4 • Riverton, NJ 0807 • 856-786-9590 • Fax 856-786-6265</div>
<div style="float: right; width: 200px;"><img src="images/email.png" alt="email" width="32" height="42" class="icon" />
<img src="images/facebook.png" alt="facebook" width="42" height="42" class="icon" /></div>

Similar Messages

Css layout problems - css and tables

Hi guys,
Well as some of you suggested months ago, I've been trying to
learn to layout with CSS... It's actually getting a bit rewarding
now as I start to figure a few things out but there's still plenty
of questions!!!
If anyone can take a look at what I'm working on at the
moment and give me some help I'd REALLY REALLY appreciate it!!
My main trouble (I think) is working with a drop-down menu
system that I found on the web and I'm dying to use it because it's
perfect for this design. It's layed out using a table so I'm trying
to incorporate that...
Click
[url=http://home.iprimus.com.au/jediwdog/ltc/mockup2.jpg]here[/url]
for a picture of what i'm trying to get this page to look like and
[url=http://home.iprimus.com.au/jediwdog/ltc/example1.html]here[/url]
to see how far I've got. You can download the stylesheet from
[url=http://home.iprimus.com.au/jediwdog/ltc/example1.css]here[/url].
Here's what I need to know:
1. I'm trying to push the table down so it looks better lined
up with the logo but when I tell it to be further from the top, it
doesn't seem to move. Any ideas on why?
2. As you can see, I've inserted some blank space into the
middle of the menu so that the logo doesn't cover any of the menu
items. I can't seem to get the same 1px black border on this
section.
I assume this is because the border on the other parts is a
layer/div border? Will I have to somehow put a div in there so as
to create the same border effect?
3. I'd really like to keep the header and footer visible at
all times, even if there's lots of content to scroll through. I
found this:
http://www.cssplay.co.uk/layouts/basics2.html#Top
but when I tried to implement this on my page, it all went haywire!
Is this going to be a possibility?
4. I guess other than that, have I completely stuffed this
up!? I don't think I have but it's worth asking I guess!
THANKS IN ADVANCE! I'm really loving using css layout rather
than tables - it's soooo much more versatile. I just need to get
past some obstacles I think!
Cheers
Neil

On Wed, 24 Jan 2007 22:17:20 +0000 (UTC), "Barb S."
<[email protected]> wrote:
>Ok, I made your suggested changes and have this:
>
> body {
> font-family: Georgia, "Times New Roman", Times, serif;
> text-align: center;
> font-size: 1em;
> font-style: normal;
> text-decoration: none;
> top: 15px;
> background-image:
url(/images/backgrounds/background1.gif);
> padding-top: 15px;
>>>> width: 70%;
<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<
> }
>
> #body {
> margin: 0 auto;
> text-align:left;
> width: 760px;
> padding-right: 20px;
> padding-bottom: 20px;
> padding-left: 20px;
> background-color: #FFFFCC;
> padding-top: 20px;
> font-family: Georgia, "Times New Roman", Times, serif;
> font-size: 1em;
> color: #003366;
>
> }
>
>
http://www.japanesetemari.com
>
> The page is on the left size of the screen and the
yellow box does not expand
>out. Not exactly what I'd wanted. I like to take
advantage of larger screens
>and have the page expand out but not so far out so the
lines of text are real
>long.
> Barb
It's this in the body style that is limiting the width -
change that
to 100%
>>>> width: 70%;
<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<
> }
~Malcolm N....
~

Beginner Menu Layout Question

Hello,
I apologize since I know this question has to be answered somewhere but I'm not sure how to search it...
What is the proper way to build a menu for a website? I have built my homepage with the header, footer, and side menu that I like. Now I want to build pages that the menu link while keeping the header, and menus. What is the right approach? My code is written in html and css. I use to develop websites in pure html and used frames but I know they are not recommended. Also, I don't want to have to copy my code into each link.
If you could also recommend a good beginner tutorial on layout for css websites, I would be greatly appreciative. I have read through w3schools tutorials and a few others.
Thank you in advance!
-Eric

You have 2 choices:
Templates
Server Side Includes
Using the template function within Dreamweaver is a good way to go if it's a small site . .
For larger sites then serverside includes would be more practical and easier for maintenance purposes.
Templates:
You create a master template page, you declare which areas will be the same for every page, (non-editable regions) and then declare an area that will
change on every page (the content area) , these are editable regions.
Once you create the template and save it, you are then able to create 'child' pages from this template - as many as you like :-) If you every need to make a change to the menu or the footer or the header, change it in the master template, save it and the changes will flow through to the child pages created from the template.
Using DW Templates:
http://www.adobe.com/devnet/dreamweaver/templates.html
http://www.adobe.com/devnet/dreamweaver/articles/dw_templates.html
The other option is to use Server Side Includes (SSI)
A bit more about SSIs here:
http://help.adobe.com/en_US/Dreamweaver/10.0_Using/WSc78c5058ca073340dcda9110b1f 693f21-7b6ca.html
http://bignosebird.com/ssi.shtml
Using PHP includes if your server supports php:
http://www.w3schools.com/PHP/php_includes.asp
One major difference between using Templates and SSI and PHP Includes?
When you make a change to a template page, you will need to re-upload all the pages to the server that were changed - may become very tedious if it is a very large site.
With using SSI, you make a change to one file and only have to upload the one file and all pages on the server will be update accordingly.
When to use Templates, Library Items & SSIs -
http://www.adobe.com/devnet/dreamweaver/articles/ssi_lbi_template.html
Nadia
Adobe® Community Expert : Dreamweaver
http://www.perrelink.com.au
Unique CSS Templates | Tutorials | SEO Articles
http://www.DreamweaverResources.com
http://csstemplates.com.au/
http://twitter.com/nadiap

Multiple edition magazine layout question

Magazine(s) layout question
Details:
- There are 9 total magazines. The only thing that changes are the ads.
- I have all text set up in Master Pages and the Different publications set up as 'versions' in my file.
My issue:
I also need to ad a footer master (with page number, Publication name, and Date)
- Publication name changes for each version.
In the end I need one master with all magazine text assigned to all version. And a different footer master with page numbers to all versions....
any suggestions on how to complete this?

Either you can use Alternative Layouts in one document, you will need only to work on the first layout, the text in the outher layouts or you can the Content-Tools and Create LInk option to take the original and place it into the new document. Later you have only to update the links in the link panel. You can take by option the whole page with all elements.

Urgent CSS issue in Safari! LIVE site *****

A site I recently wrapped up was working great in all
browsers, and for some reason I hopped on Safari today and noticed
it's not formatting right at all! I'm not sure where the issue is
as it was hunkey dorey before, and am hoping somebody on here might
know so I can fix it quickly before there are complaints from
people browsing to the site.
http://www.mackinnonicehorse.com
Anybody have any ideas? If you look at it in other browsers
you'll see how the navigation should be, and there are some other
small CSS issues in Safari that I'm seeing. It was working fine
though… ideas? Please help!

Never mind… there was ONE little mistake in my
stylesheet that I fixed and BAM - everything back to normal.
PHEW!!! :)

How can I make a part of the body of my content full width of the screen with a fluid grid layout in CSS? (In dreamweaver program)

How can I make a part of the body of my content full width of the screen with a fluid grid layout in CSS? (In dreamweaver program)
and I know it is being over-ridden by
.gridContainer {
width: 88.5%;
max-width: 1232px;
padding-left: 0.75%;
padding-right: 0.75%;
margin: auto;
clear: none;
float: none;

Abdelqader Alnobani wrote:
How can I make a part of the body of my content full width of the screen with a fluid grid layout in CSS? (In dreamweaver program)
and I know it is being over-ridden by
.gridContainer {
width: 88.5%;
max-width: 1232px;
padding-left: 0.75%;
padding-right: 0.75%;
margin: auto;
clear: none;
float: none;
Logically a structure something like below should work BUT whether or not it will upset the FG I don't know as I wouldn't ever use it.
<div class="gridContainer">
Top Code Section Goes Here
</div>

<div id="fullWidth">
Full width section goes here
</div>

<div class="gridContainer">
Bottom Code Section Goes Here
</div>

Hierarchy Viewer CSS issue

Hi,
I have a Fusion Web Application in Jdeveloper 12C that gets the colors and skinning from a CSS file.
When i add:
af|dvt-hierarchyViewer
    background-image: -webkit-linear-gradient(bottom, #FFFFFF 0%, #000000 300%);
    background-color: currentColor;
    background-attachment: scroll;
to my CSS file and run my application, the Hierarchy opens with a grey colour but then it flashes back to the default light blue gradient of fusionFx-simple-v2.desktop as soon as it tries to fetch data.
But if i change these settings on the Hierarchy itself, the colour changes to the grey and it stays grey.
Any help with this will be appreciated
Stefan du Preez

Duplicate Hierarchy Viewer CSS issue
Timo

Firefox 3 CSS issues.

Hello,
We haven't seen any big issues either with the Firefox 3 beta's or Firefox 3 but now that FF 3 is out in the wild and no longer beta there are many more people using it. If you see any strange new CSS issue , in the Application Builder , SQL Workshop .. etc. I'd be much obliged if you posted it here.
Here is a good example http://oracleinsights.blogspot.com/2008/06/oracle-apex-builder-css-fix-for.html even though Mark went so far as to figure out the fix , thanks Mark , don't feel the need to do that just a quick post on the page and/or circumstance you saw it would be great.
Thanks in advance,
Carl
blog : http://carlback.blogspot.com/
apex examples : http://apex.oracle.com/pls/otn/f?p=11933:5

Hi Carl,
Here's something Firebug showed me:
FirebugContext.browser is undefined
E("ContentArea")apex_ns_3_1.js (line 1)
? in apex_ns_3_1.js@1("ContentArea")apex_ns_3_1.js (line 1)
$x("ContentArea")apex_3_1.js (line 1)
$x_Style(["BB", "ContentArea", "ContentBody"], "display", "")apex_3_1.js (line 1)
$x_Show(["BB", "ContentArea", "ContentBody"])apex_3_1.js (line 1)
filterAttributeRegions(a#ALL.htmldbButtonListCurrent f?p=4000:4...682252#ALL, "#DEFAULTALL")apex_builder.js (line 1)
propTest()apex_builder.js (line 1)
? in apex_3_1.js@1()apex_3_1.js (line 1)
[Break on this error] var NameSpaceOnly=false;var apex={};if(a...aram("x02",C);H.ajax.add(I,B);H._get()};
Regards,
Dimitri
-- http://dgielis.blogspot.com/
-- http://www.apex-evangelists.com/
-- http://www.apexblogs.info/

CSS issue in EM

HI,
We have soa suite installed in cloud for the learners and sometimes the Em doesn't load properly..looks like some CSS issue.
How to debug it? what could be the problem?
thanks
Sanjeeva

Sanjeeva,
What do you mean by "Em doesn't load properly"?
Can you post more details? While loading EM look at the log file as well.
Arik

CSS issue in IE 7

> This message is in MIME format. Since your mail reader
does not understand
this format, some or all of this message may not be legible.
--B_3300698008_833609
Content-type: text/plain;
charset="ISO-8859-1"
Content-transfer-encoding: 8bit
Hi
I'm currently redoing an HTML website in CSS within
Dreamweaver CS4 and
picking it up as I go along. Yep another learner!
It¹s at
http://www.dmcdist.co.uk/CSS_Site/index.html
As I see it the Spry menu I¹ve created is shunted up to
the top over the DMC
logo whereas if I look at in Firefox 3 and the Mac browsers
it¹s absolutely
fine. Has IE 7 got issues with certain CSS inputs because
I¹ve tried
everything to get it to jump down.
Thanks.
--B_3300698008_833609
Content-type: text/html;
charset="ISO-8859-1"
Content-transfer-encoding: quoted-printable
<HTML>
<HEAD>
<TITLE>CSS issue in IE 7</TITLE>
</HEAD>
<BODY>
<FONT FACE=3D"Calibri, Verdana, Helvetica,
Arial"><SPAN STYLE=3D'font-size:11pt=
'>Hi<BR>
I'm currently redoing an HTML website in CSS within
Dreamweaver CS4 and pic=
king it up as I go along. Yep another learner!<BR>
It’s at <a href=3D"
/www.dmcdist.co.uk/CSS_Site/index.html</a><BR>
<BR>
As I see it the Spry menu I’ve created is shunted
up to the top over =
the DMC logo whereas if I look at in Firefox 3 and the Mac
browsers it&#8217=
;s absolutely fine. Has IE 7 got issues with certain CSS
inputs because I&#8=
217;ve tried everything to get it to jump down.<BR>
<BR>
Thanks.</SPAN></FONT>
</BODY>
</HTML>
--B_3300698008_833609--

> This message is in MIME format. Since your mail reader
does not understand
this format, some or all of this message may not be legible.
--B_3300714750_1854234
Content-type: text/plain;
charset="ISO-8859-1"
Content-transfer-encoding: 8bit
I¹ve got around it by putting line spacing in above the
Spry table but I¹m
sure there must be a better workaround.
On 04/08/2008 5:00 pm, in article
C4BCE642.8A9E%[email protected], "Garry Bradley"
<[email protected]> wrote:
> Can I bump this as I need to try and figure it out.
>
>
> On 04/08/2008 12:33 pm, in article
C4BCA798.8A57%[email protected],
> "Garry Bradley" <[email protected]>
wrote:
>
>> Hi
>> I'm currently redoing an HTML website in CSS within
Dreamweaver CS4 and
>> picking it up as I go along. Yep another learner!
>> It¹s at
http://www.dmcdist.co.uk/CSS_Site/index.html
>>
>> As I see it the Spry menu I¹ve created is
shunted up to the top over the DMC
>> logo whereas if I look at in Firefox 3 and the Mac
browsers it¹s absolutely
>> fine. Has IE 7 got issues with certain CSS inputs
because I¹ve tried
>> everything to get it to jump down.
>>
>> Thanks.
>
--B_3300714750_1854234
Content-type: text/html;
charset="ISO-8859-1"
Content-transfer-encoding: quoted-printable
<HTML>
<HEAD>
<TITLE>Re: CSS issue in IE 7</TITLE>
</HEAD>
<BODY>
<FONT FACE=3D"Calibri, Verdana, Helvetica,
Arial"><SPAN STYLE=3D'font-size:11pt=
'>I’ve got around it by putting line spacing in
above the Spry table b=
ut I’m sure there must be a better
workaround.<BR>
<BR>
<BR>
On 04/08/2008 5:00 pm, in article <a
href=3D"C4BCE642.8A9E%garry.bradley@btin=
ternet.com">C4BCE642.8A9E%[email protected]</a>,
"Garry Brad=
ley" <<a
href=3D"[email protected]">garry.bradley@btinterne=
t.com</a>> wrote:<BR>
<BR>
</SPAN></FONT><BLOCKQUOTE><FONT
FACE=3D"Calibri, Verdana, Helvetica, Arial"><=
SPAN STYLE=3D'font-size:11pt'>Can I bump this as I need to
try and figure it o=
ut.<BR>
<BR>
<BR>
On 04/08/2008 12:33 pm, in article <a
href=3D"C4BCA798.8A57%garry.bradley@bti=
nternet.com">C4BCA798.8A57%[email protected]</a>,
"Garry Bra=
dley" <<a
href=3D"[email protected]">garry.bradley@btintern=
et.com</a>> wrote:<BR>
<BR>
</SPAN></FONT><BLOCKQUOTE><FONT
FACE=3D"Calibri, Verdana, Helvetica, Arial"><=
SPAN STYLE=3D'font-size:11pt'>Hi<BR>
I'm currently redoing an HTML website in CSS within
Dreamweaver CS4 and pic=
king it up as I go along. Yep another learner!<BR>
It’s at <a href=3D"
/www.dmcdist.co.uk/CSS_Site/index.html</a><BR>
<BR>
As I see it the Spry menu I’ve created is shunted
up to the top over =
the DMC logo whereas if I look at in Firefox 3 and the Mac
browsers it&#8217=
;s absolutely fine. Has IE 7 got issues with certain CSS
inputs because I&#8=
217;ve tried everything to get it to jump down.<BR>
<BR>
Thanks.<BR>
</SPAN></FONT></BLOCKQUOTE><FONT
FACE=3D"Calibri, Verdana, Helvetica, Arial">=
<SPAN STYLE=3D'font-size:11pt'><BR>
</SPAN></FONT></BLOCKQUOTE>
</BODY>
</HTML>
--B_3300714750_1854234--

ADA Fixes for Robohelp: Frames & CSS Issues

Fellow Robohelpers:
I am attempting to resolve a set of major issues within Robohelp 8
a) Frames are not properly named in Robohelp 8. Is anyone aware with which files to change (post generation or pre-generation of outputs) to rename Frames so the visually impaired user is clearly informed which frame they are on
b)When you disable CSS, the navigational elements (frames) become a jumble. They do not function correctly (TOC, Index, Search) since Robohelp is heavily CSS dependent and hides objects (text fields, the various left hand navigational elments) behind CSS.
Any reccomendations how to resolve these, or insights as to how to make Adobe aware of this! I have been reaching out to them about this for quite some time! I am hoping capturing a workaround for at least a) will make the tool one step closer to ADA compliance (screen reader compliance)
Thanks
Yaseen

Hi,
I guess your output is WebHelp. First, try to create 'Section 508 compliant' output or pure HTML output. This may solve quite a bit of your problems.
If you don't want that output, this is what I think:
a) RH nests a lot of frames, but start looking at the launch file, the csh.htm file, whskinfrmset01.htm and whskin_frmset010.htm. Note that if you change the names of frames, this may cause some scripts to stop functioning...
b) As for the CSS issues, the only way to make that work is to manually sort out all problems and amend the javascripts.
If you want to let Adobe know your wish, use the wish form: https://www.adobe.com/cfusion/mmform/index.cfm?name=wishform&product=38
Greet,
Willam

Background image seems to be applied twice Can someone help with this CSS issue....

Can someone help with this CSS issue....
http://66.162.81.144/cms400min/default.aspx
If you view the main page you will see that our background is
2 shades of
orange.. if you look at the line that divides those colors to
the right and
left you wil notice that the line is higher
if you notice that it seems that there is another background
on top of the
first one..its the only thing i can think of..
the only place where the image is being referenced is in this
CSS style
html, body
min-height:100%;
margin-bottom:1px;
text-align:center;
background-repeat:no-repeat;
background-image:url(images/Background-Color2.jpg);
background-color:#F74902;
background-position:center;
background-attachment:fixed;
Is there something wrong with the above CSS that could or
would cause this?
is it because im applying the image to both the HTML and
BODY?
ASP, SQL2005, DW8 VBScript, Visual Studio 2005, Visual Studio
2008

You've attached the background to both the html and the body.
I would do this:
html, body {
min-height:100%;
margin-bottom:1px;
body{
text-align:center;
background-repeat:no-repeat;
background-image:url(images/Background-Color2.jpg);
background-color:#F74902;
background-position:center;
background-attachment:fixed;
Having said that the image doesn't look any higher on the
right than the
left to me in Firefox. Is it just an optical illusion?
Daniel wrote:
> Can someone help with this CSS issue....
>
>
http://66.162.81.144/cms400min/default.aspx
>
> If you view the main page you will see that our
background is 2 shades of
> orange.. if you look at the line that divides those
colors to the right and
> left you wil notice that the line is higher
>
> if you notice that it seems that there is another
background on top of the
> first one..its the only thing i can think of..
>
> the only place where the image is being referenced is in
this CSS style
>
> html, body
>
> {
>
> min-height:100%;
>
> margin-bottom:1px;
>
> text-align:center;
>
> background-repeat:no-repeat;
>
> background-image:url(images/Background-Color2.jpg);
>
> background-color:#F74902;
>
> background-position:center;
>
> background-attachment:fixed;
>
>
> }
>
> Is there something wrong with the above CSS that could
or would cause this?
> is it because im applying the image to both the HTML and
BODY?
>

ITSMobile - Problems when changing screen layout with CSS

Good afternoon,
I have a service ZLM00(SICF) with some public screens in the stile MOBILE4(Service of internet-se80), and I am trying change your layouts with CSS.
Steps taken:
    1 u2013 I activated the repository MIMES (/default_host/sap/public/bc/its/mimes);
    2 u2013 I copied the mobile.css from internet service standard ITSMOBILE for my service ZLM00(se80) with the name ZRF01.CSS;
    3 u2013 I added the parameter ~ITSMOBILECSSINCLUDE = ZRF01 in my service ZLM00(SICF);
    4 u2013 I published all screens and file ZRF1.CSS;
The problem:
      When I test the service in the browser, I see in the source code that the file CSS was added u201C<link rel="stylesheet" href="/sap/public/bc/its/mimes/zlm00/99/ZRF01.css" type="text/css" />u201D
      And the screens received some changes, however when I added a new line in file CSS for exemple
/* --- Basic Row -
      .MobileRow {
        white-space:pre;
        vertical-align:middle;
        background-color:#F3F3F3; "new lineu201D
        Is not ok. Just the command standard works.
        I am doing something wrong ? Is missing some step ?
        My configurations:
         - Version SAP ECC 6.0/SAP_APPL 604 SP8;
         - Device mobile Symbol/motorola MC3190;
         - Operating system Windows CE 6.0 with Internet Explorer 6.0;
         SICF:
         ~THEME                          99
         ~TRANSACTION                          LM01
         ~ITSMOBILE                          1
         ~SOURCES                          ZLM00,ITSMOBILE
         ~POPUPS                           1
         ~ITSMOBILECSSINCLUDE     ZRF01
         ~ITSMOBILEELEMUNITS      px
         ~DYNPRO_COMPRESSION     1
         ~ITSMOBILECUAINCLUDE     ZCUAAREA
         ~ITSMOBILEELEMFACTOR      6
      PS: I am trying change the layout of the screens only to remove blank spaces placed on the screen MOBILE4, the objects do not fit the device screen.
      Best regards,
      Gerson S. Livio

No.
If you want to see how the screen will look; look in the iPhone/ iOS 7 section of this site.

CSS layout question regarding browser sizing

Hi,
Basically I want the basis of my site to be - A header, Main content with a background image, A Footer.
I'm having problems however, I can't seem to get my footer to position where I want it i.e. at the bottom of the browser window at all times. I'm doing it as an AP div and how it should work is that it's fixed at the bottom of the page and then if the user resizes their browser in the y direction the footer moves up with it, over the top of the main content (but not the header which will have a higher z-index).
The way I THOUGHT to do it was to firstly create a div tag for the whole page (780 pixels wide, auto left and right margins, auto height) and then inside that put my ap div header fixed height at the top and have another ap div as the footer, fixed height and tell it to position 0 pixels from the bottom. However this doesn't seem to do the trick, I'm sure I'm missing something really really simple. Anyone who's vaguely familiar with the program will be able to answer this I'm sure. If my question isn't clear please let me know and I'll rephrase,
Ta

There is no reason to use APDivs for such a simple layout. Default CSS positioning (which is no positioning at all) is typically all you need for most layouts. Build your HTML markup logically from top to bottom of page and your footer will naturally appear at page bottom.
Live Demo (view page source to see the code)
http://alt-web.com/TEMPLATES/Basic-1-col-fixed.html
Or, for a Sticky Footer using Fixed positioning:
http://alt-web.com/DEMOS/CSS2-Sticky-Footer.shtml
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
http://alt-web.com/
http://twitter.com/altweb
http://alt-web.blogspot.com

CSS Layout Questions

Only making baby steps in CSS still but I am learning a lot. Here's a link to the page I am trying to create: http://www3.telus.net/~jessum/details_layout.html
Here's what I have managed to create so far: http://www3.telus.net/~jessum/details.html
When explaining any steps please explain it using Dreamweaver. I will be looking in the code to see how it all works but I want to be able to get proficient using Dreamweaver so I can see how things flow etc. before I try and hand code.
Questions
1. Is it a good practice to use a "container" to hold all of the div's or is it better to start by adding a header without a container?
2. How can I centre a div in the page?
I read that to align the div so it's "centred' in the page I can use: margin: auto;
but I'm not sure how to do this. Please explain.
3. How do I remove the space around the "container"? I've set the margin and padding to: "0" but the space is still there.
Thanks

osgood_ wrote:
Not sure where this notion of using the body as a container came from but for years a wrapper or container was considered standard practice.
The idea is being promoted by several of the most active and knowledgeable members of this forum. I think the idea first came from Altruistic Gramps, and I remember debating the issue with him about a year ago. It has also been picked up enthusiastically by Murray, and I've seen Nancy O suggest the same idea.
I've been doing a lot of research into CSS3 recently, and discovered that the Borders and Backgrounds module specifically advises against styling the <html> element (http://www.w3.org/TR/css3-background/#special-backgrounds). It doesn't give a reason for this recommendation.
I suppose the idea of giving the body a width instead of using a container might come from the HTML5 definition of the body as representing the main content of the document (http://dev.w3.org/html5/spec/the-body-element.html#the-body-element).
I suspect that this is likely to develop into the same type of fruitless argument as we had several years ago about the "superiority" of ems over pixels. Adding a single <div> to act as the container or wrapper for the content doesn't strike me as being less efficient. It also has the advantage of avoiding styling the <html> element.

LAYOUT QUESTIONS - CSS ISSUES

Similar Messages

Maybe you are looking for