CSS and floating

This is my layout:
Layout
This is how I have it sliced:
Sliced
My div code is set like this (Without the div tag):
wrapper
-header
-navbar
----innerwrapper
--------sidebar
--------sidebar_footer
--------content
--------content_footer
So wrapper contains everything, and sidebar/content can also
be manipulated through innerwrapper. What I'm trying to do, and
have failed at horribly for the past few hours, it float a
background for links that repeats-x to the left, and keep content
centered in the middle. After that, I have the footers for both the
link sidebar and the main content that I need to line up with the
other lines. I read a tutorial that said to achieve this, you have
to float the innerwrapper? I got my code layout from the tutorial,
which the part I'm following can be found
here
Any help is appreciated. =]

Screenshots are of no use. Please upload the page and post a
link so we can
see the code.
Walt
"Bryantos" <[email protected]> wrote in
message
news:fthnb8$slh$[email protected]..
> This is my layout:
>
http://img2.putfile.com/thumb/4/9808425646.jpg
>
> This is how I have it sliced:
>
http://img2.putfile.com/thumb/4/9902113387.jpg
>
> My div code is set like this (Without the div tag):
> wrapper
> -header
> -navbar
> ----innerwrapper
> --------sidebar
> --------sidebar_footer
> --------content
> --------content_footer
>
> So wrapper contains everything, and sidebar/content can
also be
> manipulated
> through innerwrapper. What I'm trying to do, and have
failed at horribly
> for
> the past few hours, it float a background for links that
repeats-x to the
> left,
> and keep content centered in the middle. After that, I
have the footers
> for
> both the link sidebar and the main content that I need
to line up with the
> other lines. I read a tutorial that said to achieve
this, you have to
> float the
> innerwrapper? I got my code layout from the tutorial,
which the part I'm
> following can be found
>
http://http://www.adobe.com/devnet/fireworks/articles/web_standards_layouts_pt3_
> 07.html.
>
> Any help is appreciated. =]
>

Similar Messages

I need help with CSS and floating

Okay, I know I need to get up on CSS and get rid of tables in
my sites.
However, I'm running up against a problem, and after banging
my head
against it for a while, I realize I need help. I've stripped
this down
so as to only show the area where I'm having difficulty.
What I want is a page that has everything down the center,
taking up no
more than 750 pixels and no more than 550 pixels of width. No
problem there.
After the header and the top content, I'd like to have two
"columns",
each in it's own separately-colored box. I would like the
right-side
column/box to be a static size, while the left-side
column/box sizes
dynamically.
Where I'm having problems is that when one column is boxed,
it's fine,
but whenever I wrap each column in its own box, the
fixed-size box
either jumps below or above the other box (depending on which
one has
been floated and which order the div's appear in the code).
Here are the links:
CSS:
http://www.afice.org/stylesheet/floatmestyles.css
ex 1:
http://www.afice.org/floatme1.html
ex 2:
http://www.afice.org/floatme2.html
Before sending, I took a look again, just to see if I was
missing
anything. I did notice that it doesn't seem to be that the
box is
jumping down so much as it is that it's getting written over.
Anyway, sorry for the long-winded explanation. I hope I've
managed to
explain what I'm trying to do well enough that someone can
tell me where
I'm going wrong.
Thanks,
--Kevin

Do you want something like this:
http://www.pmob.co.uk/temp/spointfooter.htm
You will need to look at the code to see how it was done.
Otherwise, there are different examples here on Pauls' site:
http://www.pmob.co.uk/temp/3colfixedtest_4.htm
Nadia
Adobe� Community Expert : Dreamweaver
http://www.csstemplates.com.au
- CSS Templates | Free Templates
http://www.perrelink.com.au
- Web Dev
http://www.DreamweaverResources.com
- Dropdown Menu Templates|Tutorials
http://www.adobe.com/devnet/dreamweaver/css.html
"Kevin D-R" <[email protected]> wrote in
message
news:[email protected]...
> Okay, I know I need to get up on CSS and get rid of
tables in my sites.
> However, I'm running up against a problem, and after
banging my head
> against it for a while, I realize I need help. I've
stripped this down so
> as to only show the area where I'm having difficulty.
>
> What I want is a page that has everything down the
center, taking up no
> more than 750 pixels and no more than 550 pixels of
width. No problem
> there.
>
> After the header and the top content, I'd like to have
two "columns", each
> in it's own separately-colored box. I would like the
right-side column/box
> to be a static size, while the left-side column/box
sizes dynamically.
>
> Where I'm having problems is that when one column is
boxed, it's fine, but
> whenever I wrap each column in its own box, the
fixed-size box either
> jumps below or above the other box (depending on which
one has been
> floated and which order the div's appear in the code).
>
> Here are the links:
>
> CSS:
http://www.afice.org/stylesheet/floatmestyles.css
>
> ex 1:
http://www.afice.org/floatme1.html
>
> ex 2:
http://www.afice.org/floatme2.html
>
> Before sending, I took a look again, just to see if I
was missing
> anything. I did notice that it doesn't seem to be that
the box is jumping
> down so much as it is that it's getting written over.
>
> Anyway, sorry for the long-winded explanation. I hope
I've managed to
> explain what I'm trying to do well enough that someone
can tell me where
> I'm going wrong.
>
> Thanks,
>
> --Kevin

CSS and Spry not displaying

Hi, I have recently created a website using Dreamweaver. I don't know much coding at all so I did it using the design view. It is a very basic site. Just one page, styled with CSS and with Spry Tabbed Panels to reveal 4 different 'pages'
I have uploaded my website folder to the server via ftp but none of the CSS, images or spry are displaying.
I uploaded one folder which contained 2 subfolders and one html file
-SubFolder 1: Spry Assets
-SubFolder 2: Images
-index.html (with internal .css)
I can see that the folders have been uploaded but for some reason they are not being read. I would really appreciate some help as my web host says they can't help me. I can send you the html file or whatever you need if you would like to take a look. It really is a very simple website so i'm sure it wouldn't take one of you geniuses very long to figure it out!
Cheers

Thanks for your quick responses guys! Hopefully I can reach a solution with this.
In answer to your questions:
- Yes, I defined a local site folder in Dreamweaver. That is the folder I uploaded via ftp.
-Am I working with valid code? I don't know. I have not touched any of the code. I used 'design view' in Dreamweaver. Previewed in Firefox, Safari and IE and it works with no problems.
Below is the code for index.html and below that is the css code for spry tabbed panels.
index.html:
<!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>DMH Window Cleaning</title>
<style type="text/css">
.main {
    background-color: #0e414f;
    height: 480px;
    width: 960px;
    margin-right: auto;
    margin-left: auto;
    margin-top: 50px;
.right {
    background-color: #FFF;
    float: left;
    height: 440px;
    width: 460px;
    border-right-width: 20px;
    border-right-style: solid;
    border-right-color: #0e414f;
    margin-top: 20px;
.logo {
    float: left;
    border-right-width: 20px;
    border-left-width: 20px;
    border-right-style: solid;
    border-left-style: solid;
    border-right-color: #0e414f;
    border-left-color: #0e414f;
    margin-top: 20px;
</style>
<script src="SpryAssets/SpryTabbedPanels.js" type="text/javascript"></script>
<link href="SpryAssets/SpryTabbedPanels.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="main"><img src="images/DMHLogo.png" width="440" height="440" class="logo" />
<div class="right">
    <div id="TabbedPanels1" class="TabbedPanels">
      <ul class="TabbedPanelsTabGroup">
        <li class="TabbedPanelsTab" tabindex="0">HOME</li>
        <li class="TabbedPanelsTab" tabindex="0">SERVICES</li>
        <li class="TabbedPanelsTab" tabindex="0">ABOUT</li>
        <li class="TabbedPanelsTab" tabindex="0">CONTACT</li>
      </ul>
      <div class="TabbedPanelsContentGroup">
        <div class="TabbedPanelsContent">
          <h1>DMH Window Cleaning is your local window cleaning service for Ipswich, Martlesham and Kesgrave. </h1>
          <p> </p>
          <p>DMH offers an interior and exterior window cleaning service for domestic and commercial properties. </p>
          <p>We have been providing a professional, reliable and regular window cleaning service to hundreds of happy customers for the past 16 years. </p>
          <p>            Just use the links above find out more, alternatively <br />
          send us an email or request a free quote</p>
          <h2> </h2>
</div>
        <div class="TabbedPanelsContent">
          <h1>We offer a range of services to domestic and commercial properties</h1>
          <p>Services: </p>
          <ul>
            <li> Window Cleaning Interior and Exterior</li>
            <li> Guttering</li>
            <li> UPVC Cleaning</li>
            <li> Conservatories          </li>
            <li>Domestic Properties </li>
            <li> All sills included free</li>
          </ul>
<p> </p>
<p><span class="servicesHeading"><strong>Domestic Properties<br />
</strong></span>
- Services offered on a once a month basis          </p>
<p><span class="servicesHeading"><strong>Commercial Properties<br />
</strong>          </span>
          - Services offered on a weekly, two weekly or monthly basis.</p>
        </div>
        <div class="TabbedPanelsContent">
          <h1>We have been providing a professional and reliable window cleaning service for the past 16 years</h1>
          <p class="quoteboxes">"DMH has been our window cleaner for many years and<br />
I would have no hesitation in recommending him. David<br />
is quick, reliable and does a great job!"<br />
<strong class="QuoteName">Ruth Carley, General Manager, Punch and Judy, Ipswich</strong></p>
          <p class="quoteboxes">"David works to a high standard and is professional, he<br />
cleans the inside and outside of Jamie Cann House. David <br />
is punctual and reliable"<br />
          <strong class="QuoteName">Teresa Page, Jamie Cann House, Ipswich</strong></p>
</div>
        <div class="TabbedPanelsContent">
          <h1>Request a free, no obligation quote<br />
          </h1>
<p>If you would like to request a no obligation quote then please do so by email or phone. </p>
          <p>email: [email protected]<br />
            phone: xxx</p>
          <p><strong>Payment</strong></p>
          <p>Please make cheques made payable to:<br />
            'DMH Window Cleaning'</p>
          <p>and post to:<br />
            6 Bramley Hill<br />
            Ipswich<br />
            IPX XXX</p>
          <p>We also accept cash in person. Details will be posted through your door once the job has been completed.</p>
        </div>
      </div>
    </div>
</div>
</div>
<script type="text/javascript">
var TabbedPanels1 = new Spry.Widget.TabbedPanels("TabbedPanels1");
</script>
</body>
</html>
Then I also have a separate 'Spry Assets' folder which has 2 files in it.
1. SpryTabbedPanels.js
2. SpryTabbedPanels.css
the css code for tabbed panels is:
@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.
/* This is the selector for the main TabbedPanels container. For our
* default style, this container does not contribute anything visually,
* but it is floated left to make sure that any floating or clearing done
* with any of its child elements are contained completely within the
* TabbedPanels container, to minimize any impact or undesireable
* interaction with other floated elements on the page that may be used
* for layout.
* If you want to constrain the width of the TabbedPanels widget, set a
* width on the TabbedPanels container. By default, the TabbedPanels widget
* expands horizontally to fill up available space.
* The name of the class ("TabbedPanels") used in this selector is not
* necessary to make the widget function. You can use any class name you
* want to style the TabbedPanels container.
.TabbedPanels {
    overflow: hidden;
    margin: 0px;
    padding: 0px;
    clear: none;
    width: 100%; /* IE Hack to force proper layout when preceded by a paragraph. (hasLayout Bug)*/
    background-color: #0e414f;
/* This is the selector for the TabGroup. The TabGroup container houses
* all of the tab buttons for each tabbed panel in the widget. This container
* does not contribute anything visually to the look of the widget for our
* default style.
* The name of the class ("TabbedPanelsTabGroup") used in this selector is not
* necessary to make the widget function. You can use any class name you
* want to style the TabGroup container.
.TabbedPanelsTabGroup {
    margin: 0px;
    padding: 0px;
/* This is the selector for the TabbedPanelsTab. This container houses
* the title for the panel. This is also the tab "button" that the user clicks
* on to activate the corresponding content panel so that it appears on top
* of the other tabbed panels contained in the widget.
* For our default style, each tab is positioned relatively 1 pixel down from
* where it wold normally render. This allows each tab to overlap the content
* panel that renders below it. Each tab is rendered with a 1 pixel bottom
* border that has a color that matches the top border of the current content
* panel. This gives the appearance that the tab is being drawn behind the
* content panel.
* The name of the class ("TabbedPanelsTab") used in this selector is not
* necessary to make the widget function. You can use any class name you want
* to style this tab container.
.TabbedPanelsTab {
    position: relative;
    top: 1px;
    float: left;
    background-color: #d7df25;
    list-style: none;
    -moz-user-select: none;
    -khtml-user-select: none;
    cursor: pointer;
    text-align: center;
    width: 115px;
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
    margin-left: 0px;
    padding-top: 10px;
    padding-bottom: 10px;
    font-family: sans-serif;
    font-size: 12px;
    font-weight: bold;
    color: #0e414f;
/* This selector is an example of how to change the appearnce of a tab button
* container as the mouse enters it. The class "TabbedPanelsTabHover" is
* programatically added and removed from the tab element as the mouse enters
* and exits the container.
.TabbedPanelsTabHover {
    background-color: #d7df25;
    font-size: 12px;
/* This selector is an example of how to change the appearance of a tab button
* container after the user has clicked on it to activate a content panel.
* The class "TabbedPanelsTabSelected" is programatically added and removed
* from the tab element as the user clicks on the tab button containers in
* the widget.
* As mentioned above, for our default style, tab buttons are positioned
* 1 pixel down from where it would normally render. When the tab button is
* selected, we change its bottom border to match the background color of the
* content panel so that it looks like the tab is part of the content panel.
.TabbedPanelsTabSelected {
    background-color: #0e414f;
    color: #d7df25;
    font-size: 12px;
/* This selector is an example of how to make a link inside of a tab button
* look like normal text. Users may want to use links inside of a tab button
* so that when it gets focus, the text *inside* the tab button gets a focus
* ring around it, instead of the focus ring around the entire tab.
.TabbedPanelsTab a {
    color: black;
    text-decoration: none;
/* This is the selector for the ContentGroup. The ContentGroup container houses
* all of the content panels for each tabbed panel in the widget. For our
* default style, this container provides the background color and borders that
* surround the content.
* The name of the class ("TabbedPanelsContentGroup") used in this selector is
* not necessary to make the widget function. You can use any class name you
* want to style the ContentGroup container.
.TabbedPanelsContentGroup {
    clear: both;
    background-color: #EEE;
/* This is the selector for the Content panel. The Content panel holds the
* content for a single tabbed panel. For our default style, this container
* provides some padding, so that the content is not pushed up against the
* widget borders.
* The name of the class ("TabbedPanelsContent") used in this selector is
* not necessary to make the widget function. You can use any class name you
* want to style the Content container.
.TabbedPanelsContent {
    overflow: hidden;
    background-color: #FFF;
    font-family: Arial, Helvetica, sans-serif;
    padding-top: 20px;
    padding-right: 20px;
    padding-bottom: 0px;
    padding-left: 20px;
.main .right #TabbedPanels1 .TabbedPanelsContentGroup .TabbedPanelsContent.TabbedPanelsContentVisible .quoteboxes strong {
    padding-top: 5px;
.QuoteName {
    padding-top: 20px;
    line-height: 20px;
/* This selector is an example of how to change the appearnce of the currently
* active container panel. The class "TabbedPanelsContentVisible" is
* programatically added and removed from the content element as the panel
* is activated/deactivated.
.TabbedPanelsContentVisible {
    font-size: 14px;
    font-family: Arial, Helvetica, sans-serif;
.main .right #TabbedPanels1 .TabbedPanelsContentGroup .TabbedPanelsContent.TabbedPanelsContentVisible h1 {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 16px;
    font-weight: bold;
.TabbedPanelsContent h1 {
    color: #0e414f;
    font-family: Arial, Helvetica, sans-serif;
    line-height: 20px;
    border-bottom-width: 2px;
    border-bottom-style: solid;
    border-bottom-color: #d7df25;
    padding-bottom: 10px;
    border-top-width: 2px;
    border-top-style: solid;
    border-top-color: #d7df25;
    padding-top: 10px;
li {
    color: #0e414f;
.servicesHeading {
.TabbedPanelsContent h2 {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 14px;
    color: #0e414f;
.quoteboxes {
    background-image: url(../images/quotebox2.png);
    height: 105px;
    background-repeat: no-repeat;
    padding-top: 15px;
    padding-right: 10px;
    padding-bottom: 15px;
    padding-left: 10px;
    width: 400px;
.quoteRight {
    background-image: url(../images/quoteboxright.png);
    background-repeat: no-repeat;
    height: 100px;
.TabbedPanelsContent P {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 14px;
    color: #0e414f;
/* Vertical Tabbed Panels
* The following rules override some of the default rules above so that the
* TabbedPanels widget renders with its tab buttons along the left side of
* the currently active content panel.
* With the rules defined below, the only change that will have to be made
* to switch a horizontal tabbed panels widget to a vertical tabbed panels
* widget, is to use the "VTabbedPanels" class on the top-level widget
* container element, instead of "TabbedPanels".
.VTabbedPanels {
    overflow: hidden;
    zoom: 1;
/* This selector floats the TabGroup so that the tab buttons it contains
* render to the left of the active content panel. A border is drawn around
* the group container to make it look like a list container.
.VTabbedPanels .TabbedPanelsTabGroup {
    float: left;
    width: 10em;
    height: 20em;
    background-color: #EEE;
    position: relative;
    border-top: solid 1px #999;
    border-right: solid 1px #999;
    border-left: solid 1px #CCC;
    border-bottom: solid 1px #CCC;
/* This selector disables the float property that is placed on each tab button
* by the default TabbedPanelsTab selector rule above. It also draws a bottom
* border for the tab. The tab button will get its left and right border from
* the TabGroup, and its top border from the TabGroup or tab button above it.
.VTabbedPanels .TabbedPanelsTab {
    float: none;
    margin: 0px;
    border-top: none;
    border-left: none;
    border-right: none;
/* This selector disables the float property that is placed on each tab button
* by the default TabbedPanelsTab selector rule above. It also draws a bottom
* border for the tab. The tab button will get its left and right border from
* the TabGroup, and its top border from the TabGroup or tab button above it.
.VTabbedPanels .TabbedPanelsTabSelected {
    background-color: #EEE;
    border-bottom: solid 1px #999;
/* This selector floats the content panels for the widget so that they
* render to the right of the tabbed buttons.
.VTabbedPanels .TabbedPanelsContentGroup {
    clear: none;
    float: left;
    padding: 0px;
    width: 30em;
    height: 20em;
/* Styles for Printing */
@media print {
.TabbedPanels {
    overflow: visible !important;
.TabbedPanelsContentGroup {
    display: block !important;
    overflow: visible !important;
    height: auto !important;
.TabbedPanelsContent {
    overflow: visible !important;
    display: block !important;
    clear:both !important;
.TabbedPanelsTab {
     overflow: visible !important;
     display: block !important;
     clear:both !important;
h1 {
    font-weight: bold;
.bottomBox {
    background-color: #0e414f;
    width: 1020px;
    margin-right: auto;
    margin-left: auto;
.box {
    background-color: #0e414f;
    width: 900px;

CSS: img {Float: Left; } gives strange results in Firefox

Hi, I’m having trouble aligning some text to the right
of an image. It looks fine in IE6 but the entire page goes crazy in
Firefox. Here is the link:
http://www.option-price.com/test/index.php
I already have a few pages in place and I just wanted to add
a contact link to the right above the main navigation. Here are the
main pages:
http://www.option-price.com/index.php
The thing is…I could probably do it by creating a
nesting div around the logo div and then another div inside for the
new link (and float to right), but I was trying to cut down on
code.
Can I get this to work using img float in FireFox?
Many thanks.

petertyler wrote:
> Hi, I?m having trouble aligning some text to the right
of an image. It looks
> fine in IE6 but the entire page goes crazy in Firefox.
Here is the link:
>
>
http://www.option-price.com/test/index.php
>
> I already have a few pages in place and I just wanted to
add a contact link to
> the right above the main navigation. Here are the main
pages:
>
>
http://www.option-price.com/index.php
>
> The thing is?I could probably do it by creating a
nesting div around the logo
> div and then another div inside for the new link (and
float to right), but I
> was trying to cut down on code.
>
> Can I get this to work using img float in FireFox?
>
> Many thanks.
>
You would have to float the image in the logo <div>
left. Add another
<div> inside the logo <div> and float that right,
as below.
Html code:
<div id="logo"><img src="index_files/logo.jpg"
alt="Option-Price.com"><div
id="logoRight">Contact</div>
<br style="clear:both;" /></div>
Css:
#logo {
margin: 0px 0px 0px 100px;
padding: 0px;
width: 600px; /* YOU NEED A WIDTH */
#logo img {
float: left;
#logoRight {
float: right;
width: 200px;
text-align: right;
padding-top: 45px;
A simpler method would be to use an absolutely positioned
layer. I can't
see that anything moves on the site which would'nt warrant
the use of an
ap layer in the position you require it.

Dreamweaver and floating dialog

Dreamweaver and floating dialog. You see it on a lot of websites. I am not sure if this done in JavaScript or JQuery. I was wondering if someone can point me to a sample of doing this. I need to incorporated JavaScript and JQuery into my pages .

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Dialog - Default functionality</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.1/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.1/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css">
<script>
$(function() {
$( "#dialog" ).dialog();
</script>
</head>
<body>
<div id="dialog" title="Basic dialog">
<p>This is the default dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.</p>
</div>
</body>
</html>
Also refer to the Documentation:
Dialog Widget | jQuery UI API Documentation
Nancy O.

Time and float masks

Hi everyone,
I got a question, is there anyway to use a mask to time and float values using CSS or maybe another way?.......what i mean is that i wolud like to show time in a outputtext like 10:20:09(hh:mm:ss) but this value stored in a db like a String 102009, and the same thing with floats like 120,000,000.89 but stored like 120000000.89.......
Thanks in advance
Santiago

Joachim i don't know if you can give a hand....i checked what you tell and I can parse a String to date format without milliseconds......but i only need the time, but it gets me the entire date....i checked for the method getTimeInstance() but it returns the same....i'm trying some like this....i hope you could give me a hand
DateFormat a= new SimpleDateFormat("kkmmssSSS");
a.getTimeInstance(DateFormat.SHORT);
try{
      Date pase = a.parse("120350123");
      pase=pase;
      System.out.println(pase);
}catch(Exception e)
           {}that code returns me Thu Jan 01 12:03:50 GMT-05:00 1970 and i just need 12:03:50 with the milliseconds
Thanks in advance,
Santiago

Clear and Float

Hi,
I am atotally new beginner, I have learned some HTML in My life and did two tutorials on the Adobe website, and actually feel like alot of material has been covered,
Though there are some questions that keep on coming and I can't seem to figure them up.
The tutorial in question is the one called:
Taking a Fireworks comp to a CSS-based layout in Dreamweaver – Part 3: Layout and CSS
and is located in this address: http://www.adobe.com/devnet/dreamweaver/articles/dw_fw_css_pt3.html
Questions:
1. why in the Header div (#header) do we need to set up the float to left? obviously without it the background doesn't work well. but we have set the width to be 100% and it's the first component to be shown on stage so why do we need to float it left? and why doesnt it work without it?
2. when setting the properties for the Masthead div (#Masthead) why do we need to do this step? "In the Clear menu, select Both." What's the clear is for? Why background shows with and doesn't show without this step?
3. content-wrapper it says: "From the Float menu, select Left." Why?
4.footer div it says: "From the Clear menu, select Both." Why?
5. The clearfloat class it says:
The clearfloat class rule of the layout is for the br elements you placed in the code before Module 4 and after the closing div for the footer-wrapper and before the closing div for the container. The trick here is to remove anything that causes the break to have dimension:
1. Click the Plus button to create a new CSS rule.
2. Select Class as the selector type.
3. Name the selector .clearfloat (don't forget the period) and click OK.
This is the name you gave the class in the markup when you added the br clearing element.
1. Select Type from the Category list.
2. Set the font size to 1 pixel.
3. Set the Line height to 0.
4. Select Box from the Category list (see Figure 27).
5. Select Both from the Clear pop-up menu.
6. Set the height to 0 and click OK.
I can't seem to understand it and what's the porpuse of this... why did we need to have the BR in the first hand?
I hope those questions make sense
other than that I loved those tutorials and they totally make sense and are so good to help people learn their way into web and dreamweaver
Thanks Ahead!
Shlomimoto

I've just looked at that tutorial and setting float: left; on the 'header' was probably a legitimate way of clearing the floats in the 'header' <div> in 2008. We are now in 2013.
Times move on and the more accepted way now of clearing floats in a wrapper <div>, which the header is, is using overflow: hidden; ( as blelow):
#header {
    color: #FFFFFF;/
    background: #131313 url(images/header_bg.jpg) repeat-x;
    padding: 15px 0px;
    overflow: hidden;
I can't for the life of me see why you would want to set the header <div> width to 100% though. As far as I know a <div> will stretch to fill up the available space, nothing in my experiences has ever required me to set 100% as a width that I can recall.
shlomimoto wrote:
2. when setting the properties for the Masthead div (#Masthead) why do we need to do this step? "In the Clear menu, select Both." What's the clear is for? Why background shows with and doesn't show without this step?
Oh well there you go this just proves this constructon method is way outdated. If you use the more accepeted method overflow: hidden; on the header <div> to clear the floated elements within it there is no need to set clear: both; on the masthead <div> making life much simpler for you.
Conclusion try and find a more up-to-date tutorial because you're already 5 years behind learning this duff stuff.

How to use CSS and images in a plsql-dbms_output reports?

Hi.
Windows 2000 SP4
SQL Developer 1.2.1.32.13
Java 1.5.0_07
Oracle 9.2.0.6
I'm trying to create a plsql-dbms_output report with HTML that uses a stylesheet (CSS) and an image. These seem to be ignored by the report viewer.
The following example works fine in Internet Explorer 6 but the stylesheet is ignored by the viewer and the viewer does not show the images (shows broken images instead). I've tried with various image types (PNG, GIF and JPEG).

Is the HTML viewer limited to not support stylesheets and images?
Thanks in advance.
Cheers
Finn Ellebaek Nielsen

It also seems that links don't work. The mouse cursor changes to a hand when hovering over links and the links are shown in blue and underlined but nothing happens when clicking on them.
Example:

Using CSS and Javascript to display a div with flash in it, mozilla reloads the flash file!

I am using CSS and Javascript to display a div with an
embedded flash object in it. Mozilla Firefox reloads the flash file
when the div is displayed! (I dont want this to happen, as it's
unexpected functionality, my expectation would be that the flash
file would not change it's state at all, and would remain in
whatever state it was left in.)
I was wondering if anyone has come across this issue and is
there something I can do to prevent this from occurring?
To be more specific, I have a single HTML page with 8 flash
files embedded in it (yeah I know, it's a bit much). I am then
using CSS and Javascript to display (via a numbered link (with an
id)) an equivalent numbered div tag containing the flash file.
Mozilla Firefox reloads the flash object that is in the div.
Internet Explorer will not do this and will instead, load the flash
object only upon initial view of the flash object. All subsequent
links (in IE) will NOT reload the flash object on the page. I'm
guessing this is some kind of difference in the flash player as an
Active X object and the plugin, or is it just IE being clever? Or
am I way off?
Anyway, here is the code...

I am using CSS and Javascript to display a div with an
embedded flash object in it. Mozilla Firefox reloads the flash file
when the div is displayed! (I dont want this to happen, as it's
unexpected functionality, my expectation would be that the flash
file would not change it's state at all, and would remain in
whatever state it was left in.)
I was wondering if anyone has come across this issue and is
there something I can do to prevent this from occurring?
To be more specific, I have a single HTML page with 8 flash
files embedded in it (yeah I know, it's a bit much). I am then
using CSS and Javascript to display (via a numbered link (with an
id)) an equivalent numbered div tag containing the flash file.
Mozilla Firefox reloads the flash object that is in the div.
Internet Explorer will not do this and will instead, load the flash
object only upon initial view of the flash object. All subsequent
links (in IE) will NOT reload the flash object on the page. I'm
guessing this is some kind of difference in the flash player as an
Active X object and the plugin, or is it just IE being clever? Or
am I way off?
Anyway, here is the code...

On differences between JavaFX CSS and the w3c standard css

This is a discussion topic which came to mind after reading comments in this thread Re: FXML, css and -fx-font-family
Feel free to comment or share your thoughts on the topic.
Note that these comments relate to the naming and semantic meanings of css tags, and not the syntax and parsing of css (as both w3c css and javaFX css seem to be equivalent in the later regard).
You know, sometimes I find JavaFX's lack of certain css features refreshing. It is nice to have all, well, almost all, of the JavaFX CSS documented on one page. I think if you were to do the same thing for w3c css then it would end up with a much larger, more difficult to understand document and even what the contents of that document should be would probably be pretty controversial, in the same kind of way that the HTML5 specification ended up being. Microsoft contributed over 7000 tests to w3c just to cover only a subset of the css rules available in browsers today. The webkit project lists almost a thousand open CSS bugs: https://bugs.webkit.org/buglist.cgi?product=WebKit&component=CSS&resolution=---. So implementing even partial w3c CSS support is a complex project.
When I first started using JavaFX CSS I found the differences to w3c CSS quite jarring, and it was hard to account for them. Now that I am used to JavaFX CSS, I don't have as much of an issue. The difference in names and semantics is going to be an impediment to designers working on JavaFX who are familar with w3c CSS - but the designers will quickly also discover that FXML is not HTML and Java is not JavaScript and JavaFX deployment is not HTML deployment. So, perhaps, in the larger picture, it is not as big a deal as it would seem. Still, one can't help think that any impediment to people easily picking up and adopting JavaFX is doing the technology a disservice.
There are other advantages in having the JavaFX CSS in it's own namespace to w3c css, in that it can evolve seperately, it is not expected to be exactly the same because it has a different name, it is not expected to fully implement w3c css as browsers do because it's clearly a different thing by name, etc. There is even precedent for it in the use by mozilla of moz- CSS prefixes and webkit css properties http://css-infos.net/properties/webkit - the web as not as standard as a lot of people propose. JavaFX CSS is backing a JavaFX rendering engine and not an HTML rendering engine. It is quite remarkable that Oracle was able to build and make available a CSS model for JavaFX that feels as familar as it does to w3c css, as w3c css is targeted very strongly toward styling a completely different technology set (HTML markup and document object model).
It would be useful to have a tool which translates w3c css to approximations of JavaFX css and vice versa, or the ability for JavaFX to have a mode (perhaps a boolean value when a stylesheet is loaded) to perform an automatic alias or mapping of w3c css to javafx (at least for the subset of w3c css which would make sense to automatically translate to JavaFX css). I haven't checked the JavaFX jira in detail, so perhaps a request for such support already exists - perhaps it is under the private http://javafx-jira.kenai.com/browse/RT-9272 jira.
The JavaFX css model is really powerful and I have found really useful some of the additions that it adds above the baseline 2.1 css that is found consistently in browsers. With the upcoming Java CSS object model http://javafx-jira.kenai.com/browse/RT-17293, you will also get better programmatic access from Java.
So, nice work on building and implementing this complex feature . . .

Thanks for the feedback. Closing the gap between JavaFX CSS and W3C CSS will be an evolutionary process. It would be nice to use a standard's based stylesheet but there is not always a 1-1 mapping to JavaFX. But for those properties that can be mapped, it is something that should be supported. For example, we should be able to handle "font" or "-fx-font".
I have made http://javafx-jira.kenai.com/browse/RT-9272 public.

In fire fox and google chrome CSS and images are not loading

I am facing problem with jrun, In IE-8 application is working fine, but in FireFox and Google chrome CSS and Images are not loading.
in fire fox and google chrome requests are Aborted.
thanks
Ashok Gadiparthi.

Check if Style Resource Readers SharePoint group has permissions on the site, permissions to the style library and make sure that this library provides Style Resource Readers with restricted read.
If you don't see Style resource readers on the site, go to that library and set that permission. you could also just load your installation media to a folder, and execute on setup.exe, select repair option. This second option of the installation
media is the cannon vs. flyswatter approach though, but it will work
Stacy Anothersharepointblog.blogspot.com

Pack and Floating Point Data Type in ABAP

Dear All,
I am new to ABAP. Started with data types. Came across pack and floating point.
Please let me know what PACK and Floating Point stands for with few examples and the main difference between them.
Regards
Arun V

Hi,
You'd better ask this question in ABAP forum http://forums.sdn.sap.com/forum.jspa?forumID=50 .
Best Regards,
Ada

After deleteing Custom CSS and Custom Functions, cannot get FireFox to recognize audio player. Works in IE and Safari. Site is https and using bluehost.

Using the Genesis Framework on my WordPress site. I can use Safari and IE. However, when I try to use Fire Fox, it will not appear. I deleted all of my Custom CSS and Functions. Still, nothing is working. Contacted bluehost, the representative there was not able to help me out and also emailed CD Baby to see what might work. I am not sure if it is something with my site using HTTPS instead of HTTP of why this is not working? I am told the plugin works on Fire Fox but I cannot for the life of me figure out what's going on. Also changed themes and used Twenty Thirteen among others. Still the same thing. Fire Fox will not work. Tried in Text widget, and pasting on a page, and still not working. IE and Safari it is fine. Do I need to add something else within my site? Thanks ahead of time for any way to solve this situation.

There is mixed active content loaded in an iframe that Firefox is blocking as you can see by the shield icon at the left end of the location/address bar.
*https://developer.mozilla.org/Security/MixedContent
*https://developer.mozilla.org/Tools/Web_Console

Dw, css, and a template, what is the best way to create a 20 page website with a different header in each page?

dw, css, and a template, what is the best way to create a 20
page website with different header content on each page? i am
trying to insert a specific image and background color for each
header on every page. what is the easiest or best way to do this?
thanks, bryan

"mediastream13" <[email protected]> wrote in
message
news:f47bes$9om$[email protected]..
> ok, murray, here is the site.
http://www.helphotline.org
> in I.E. 6 i can't see the background color behind the
header images,
I'm seeing a hot pink background (which is my browser default
- so that I do
remember to declare a background color). You need to add:
body { background-color: white;} to your stylesheet, or into
the imbedded
styles on your page.
In Firefox, the very top black section, #headertop is hidden
behind the
header image.
> background of the date/time isn't stretching the full
length of the
> screen, and
> the margins aren't working in the main content area. how
can i put a
> background
> color behind the header images?
I can see the header image stretching right across the page..
so not sure
what color is missing there.
> is there anyway to download i.e. six on my computer if i
already have
> i.e.7? i
> just want to be able to preview the site before i upload
the changes. it
> seems
> everything works in i.e. 7.
Yes, I used this and it works really well.
http://tredosoft.com/Multiple_IE
Nadia
Adobe® Community Expert : Dreamweaver
CSS Templates |Tutorials |SEO Articles
http://www.DreamweaverResources.com
~ Customisation Service Available ~
http://www.csstemplates.com.au

Inline and floating locked in portrait view

My photo book was rejected today because it's not viewable in portrait format. My intention was to have the book ONLY be viewable in landscape format and that it's more than obvious that you need to turn the pad to landscape to view it–the thing is primarily composed of landscape-format images!
I saw in today's "disappearing shapes" thread that you need to edit in portrait and layout in landscape, so I'm trying out that approach.
In portrait mode, I can't get an image to appear in the text column, only as a thumbnail in the left margin. Inline and Floating are greyed out, only Anchored is available.
How can I unlock these? Will that allow me to place the images in the text as in Landscape format?
Thanks.

Never click on anything like that and resubmit.
Test it on a device first.
Testing it goes without saying, right? Seems to work. You saved me a ton of work redesigning a compromised layout. If I could give you doube bonus points I would!
So by clicking disable portrait view it will force the landscape layout to resize smaller to fit portrait view like a pdf does?
No idea what that means, sorry. How could something resize from something it doesn't do...
Where did you learn that iBA's portrait view supports PDFs?
I was talking about looking at a PDF version of this book in iBooks. When you rotate the pad the landscape image simply rotates and resizes. Disabling portrait in .iba just locks the book in landscape no matter how you turn the pad. Perfect for my needs.
Thanks for your help.

CSS and floating

Similar Messages

Maybe you are looking for