Editable bg color in div tag

Hello,
I am trying to create an editable background color within the
div tag of the top portion of my webpage. I have a banner image and
I would like not only it, but also its associated bkgd color to be
easily changeable from page to page. So I am trying to have these
appear within an editable region (the div) of my template. It looks
like it works in design view, but when I preview it in a browser,
although the image shows up ok, the background color disappears
here is the code in question:

<div id="header" bgcolor="6999bc">
<img src="../imgs/banr_genl_6999bc.gif" alt="banner
image" width="687" height="118" />
</div>

Any suggestions?
Many thanks!
Alan

> Maybe how
> I have typed the code for this tag is where I have
erred...?
I would think so, yes.
> I think I may have found a workaround though - I created
a separate
> editable
> region in the head of the template and placed the
bgcolor reference there,
> within opening and closing style tags.. that seems to
work although its
> not
> quite as tidy.
It's actually much more tidy, and it's how you should always
do such things.
Murray --- ICQ 71997575
Adobe Community Expert
(If you *MUST* email me, don't LAUGH when you do so!)
==================
http://www.dreamweavermx-templates.com
- Template Triage!
http://www.projectseven.com/go
- DW FAQs, Tutorials & Resources
http://www.dwfaq.com - DW FAQs,
Tutorials & Resources
http://www.macromedia.com/support/search/
- Macromedia (MM) Technotes
==================
"alan kirker" <[email protected]> wrote in
message
news:fc2402$ltt$[email protected]..
> Thanks Murray,
> That is what I would expect as well and its what I
want... however, when I
> apply the template with this code to a page, and then
test it by browsing
> it
> locally, the image appears, but the bkgd color does
not... And although
> its
> technically "editable" for the reason you point out,
changes made to the
> hex
> value still yield no color behind the image. Even when I
add the "#" or
> try
> using "background-color" instead of "bgcolor" as the
attribute name. Maybe
> how
> I have typed the code for this tag is where I have
erred...?
>
> I think I may have found a workaround though - I created
a separate
> editable
> region in the head of the template and placed the
bgcolor reference there,
> within opening and closing style tags.. that seems to
work although its
> not
> quite as tidy.
>
> many thanks for your help... if you have additional
suggestions, I am all
> ears,
> Alan
>

Similar Messages

How to colorize DIV tag scrolbar

Dears,
Someone help me how to color a DIV tag scrolbar in different coloring.
You can send your opinion via e-mail to: [email protected]

I don't know the answer, or even if it's possible to do what you want - but the convention in these forums is for people to answer 'in public' so that others may benefit from any advice. It's also a really bad idea to put your email address on here, you'll get buried in spam.

None editable Div tag within a editable Div tag template

I am using a template i created to build a website and the only editable Div is the 'Content'. Using this template i have created a 2nd template for a portfolio page. On my 2nd template i have a Div tag within the 'Content' Div tag with list of all the jobs i have done with hyperlinked to photos. I want this list to be only editable on the template so when i update the 2nd template rest of the files related to this template get updated.
Is it possible to have a none editable Div tag within an editable Div tag?
I hope i have explained this well. Many thanks for your help

Thank you for your respond.
I have a main template with just the 'Content' Div Tag editable. Using this template i created anyother template for my portfolio page. Inside the editable Div Tag i have another Div Tag with 2 sets of tables for my portfolio lists. I want this Div tag to be only editable through the 2nd template only as i will have portfolio lists of over 30 pages/links.
I selected the Div Tag with the 2 set of tables and selected 'Add Object to Library'. First message was that the CSS coding will not be copied but errors messages as follows;
'While executing canInspectSelectio in phatfusion slideShow_FAB75CA2.htm, a JavaScript error occurred.'
'While executing canInspectSelectio in Ken Burns Slideshow.htm, a JavaScript error occurred.'
'While executing canInspectSelectio in Shadowbox3b Gallery_2528933A.htm, a JavaScript error occurred.'
Everytime i click inside the Div Tag, i keep getting these messages.
I went to the library and amended the list but only the 2nd template changed, not the related pages linked to the 2nd template.
Is there a place where i can upload my page in this website so you can see it?
Please see below the coding for the 2nd template for my portfolio pages;
<!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" />
    <META NAME="robots" CONTENT="index, follow">
    <meta name="google-site-verification" content="a_way2ZMkNZuMTtOveF3o1bvtWsVMBQujbA5jw9i0Q0" />
    <META name="y_key" content="d38873598f3b3934" />

<title>???s</title>

<link href="../_css/main.css" rel="stylesheet" type="text/css" />

    <link href="../Galleria/galleria.css" rel="stylesheet" type="text/css" media="screen">
    <script type="text/javascript" src="../Galleria/jquery.min.js"></script>
    <script type="text/javascript" src="../Galleria/jquery.galleria-0.9.js"></script>
    <script type="text/javascript">
    $(document).ready(function(){ $('ul.gallery_demo2').galleria({nextText:'Next portfolio item'}); }) // activates the gallery
    </script>
    <style media="screen,projection" type="text/css">
    p,.caption{
    font-size: 10px;
    color:#006;
    .demo2{
    position:relative;
    clear:both;
    background:black;
    width: 600px;
    .gallery_demo2{
    width: 600px;
    .gallery_demo2 li{
    width:68px;
    height:50px;
    border:thin solid #000;
    background:#111;
    padding-left: 5px;
    overflow: hidden;
    .gallery_demo2 li.active{
    border-color:#623;
    .gallery_demo2 li div{
    top:60px;
    left:0;
    border:3px solid #111;
    background:#111;
    .gallery_demo2 li img.thumb{
    opacity:.3;
    padding-left: 3px;
    .gallery_demo2 li.active img.thumb,.gallery_demo2 li:hover img.thumb{
    opacity:.99;
    </style>
    



<script src="../SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<link href="../SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />
<style type="text/css">
body {
    background-color: #FFF;
    background-image: url(../_images/background.jpg);
</style>
</head>
<body>
<div class="container">
<div class="header">
    <div class="header2">
      <h4><strong>ARCHITECTURAL & STRUCTURAL ENGINEERING SERVICES<br />
        PROJECT MANAGEMENT & CONSTRUCTIONS</strong></h4>
    </div>
</div>
<div class="linkBar">
    <ul id="MenuBar1" class="MenuBarHorizontal">
      <li><a href="index.html">HOME</a></li>
      <li><a href="about.html">ABOUT US</a></li>
      <li><a href="service.html" class="MenuBarItemSubmenu">SERVICES</a>
        <ul>
<li><a href="service.html">Overview</a></li>
<li><a href="planning.html">Planning Permission</a></li>
<li><a href="building.html">Building Regulations</a></li>
<li><a href="partywall.html">Party Wall Act</a></li>
          <li><a href="schedule.html">Schedule of Work</a></li>
          <li><a href="project.html">Project Management</a></li>
          <li><a href="structural.html">Structural Surveys</a></li>
        </ul>
      </li>
      <li><a href="portfolio.html">PORTFOLIO</a></li>
      <li><a href="contact.html">CONTACT US</a></li>
    </ul>
</div>

<div class="content">
    <h3>PORTFOLIO- website under construction</h3><div class="portfolioText">
      <h2 class="textSubHeading">Commercial</h2>
      <div class="portfolioCommercial">
        <table width="374" align="right">
          <tr>
            <td width="181" height="20">AA Partner Ltd</td>
            <td width="181" height="20">Railing London Ltd</td>
          </tr>
          <tr>
            <td height="20">Pemon Ltd</td>
            <td height="20"> </td>
          </tr>
          <tr>
            <td height="20"> </td>
            <td height="20"> </td>
          </tr>
          <tr>
            <td height="20"> </td>
            <td height="20"> </td>
          </tr>
          <tr>
            <td height="20"> </td>
            <td height="20"> </td>
          </tr>
          <tr>
            <td height="20"> </td>
            <td height="20"> </td>
          </tr>
          <tr>
            <td height="20"> </td>
            <td height="20"> </td>
          </tr>
          <tr>
            <td height="20"> </td>
            <td height="20"> </td>
          </tr>
          <tr>
            <td height="20"> </td>
            <td height="20">lhjffkhgkhg</td>
          </tr>
        </table>
</div>
      <h2 class="textSubHeading"><br />
      </h2>
      <h2 class="textSubHeading"> </h2>
      <h2 class="textSubHeading"> </h2>
      <h2 class="textSubHeading"> </h2>
      <h2 class="textSubHeading">Residential</h2>
      <div class="portfolioResidential">
        <table width="374" align="right">
          <tr>
            <td width="181" height="20">Batchworth Lane, <span dir="ltr">Northwood</span></td>
            <td width="181" height="20">Derrylands, Harrow</td>
          </tr>
          <tr>
            <td height="20">Pine Walk, Surrey</td>
            <td height="20"> </td>
          </tr>
          <tr>
            <td height="20"> </td>
            <td height="20"> </td>
          </tr>
          <tr>
            <td height="20"> </td>
            <td height="20"> </td>
          </tr>
          <tr>
            <td height="20"> </td>
            <td height="20"> </td>
          </tr>
          <tr>
            <td height="20"> </td>
            <td height="20"> </td>
          </tr>
          <tr>
            <td height="20"> </td>
            <td height="20"> </td>
          </tr>
          <tr>
            <td height="20">teytdytyt</td>
            <td height="20"> </td>
          </tr>
        </table>
</div>
    </div><div class="portfolioSlideshow">
      <p>Project Title Goes Here:</p>
      <div class="demo">
</div>
<div class="demo2">
<ul class="gallery_demo2">
    <li class="active"><img src="../_images/portfolio/planning.jpg" alt="Planning sample drawing" width="600" height="400"></li>
    <li><img src="../_images/portfolio/building.jpg" alt="Building Reg sample drawing" width="600" height="400"></li>
    <li><img src="../_images/portfolio/structural.jpg" alt="Structural sample drawing" width="600" height="400"></li>
    <li><img src="../_images/portfolio/fabrication.jpg" alt="Fabrication sample drawing" width="600" height="400"></li>
</ul>
</div>
    </div>
</div>

<div class="footer">
<table width="1025" border="0">
<tr>
    <td width="500"><h6>??? </h6></td>
    <td width="10"> </td>
    <td width="500" align="right"><h6>???</h6></td>
</tr>
</table>
</div>
</div>
<script type="text/javascript">
var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"../SpryAssets/SpryMenuBarDownHover.gif", imgRight:"../SpryAssets/SpryMenuBarRightHover.gif"});
</script>
</body>
</html>

How to Include More Than One Font and Font Color Within a Fluid Grid Div Tag?

Using CSS code, I can make all the words within a fluid grid div tag the same font, font size, and font color, but how do I make a few of the words different?

You can style the basic text and heading selectors with CSS:
p { }
h1 { }
h2 { }
h3 { }
h4 { }
etc...
And you can make classes:
.red {color:red}
.highlight {background-color:yellow}
Then apply classes to your text or sections of it using the HTML properties panel.
<div>
     <p>This is a default paragraph style.</p>
     <p class="red">This is red.</p>
     <p class="highlight">This is highlighted.</p>
     <p>Default style with <span class="red highlight">red, highlighted text</span> and normal text.</p>
</div>
Incidentally, this will work in any layout.
How to Develop with CSS?
http://phrogz.net/css/HowToDevelopWithCSS.html
Nancy O.

When I Insert DIV tag, where is the rule?

http://www3.telus.net/~jessum
Q1) See on my page where it says "Content for new DIV tag
goes here". How do I select this and edit it? When I selected the
"insert new div tag button" I thought it was supposed to add a new
rule under the <style> tag but I don't see it there.
Q2) Also see where the wine color "Sidebar" is. How do I get
the sidebar to extend to the footer?
Thanks in advance :)

When you insert a new DIV, you have an option to also create
a new CSS rule
on the INSERT DIV dialog panel. Click it.
Murray --- ICQ 71997575
Adobe Community Expert
(If you *MUST* email me, don't LAUGH when you do so!)
==================
http://www.projectseven.com/go
- DW FAQs, Tutorials & Resources
http://www.dwfaq.com - DW FAQs,
Tutorials & Resources
==================
"Comp. 792" <[email protected]> wrote in
message
news:ge66kt$quo$[email protected]..
>
http://www3.telus.net/~jessum
>
> See on my page where it says "Content for new DIV tag
goes here". How do I
> select this and edit it? When I selected the "insert new
div tag button" I
> thought it was supposed to add a new rule under the
<style> tag but I
> don't see
> it there.
>
> Thanks in advance :)
>

What's wrong with my div tag / site won't center....

Hi,
I am re-designing a website and I cannot get it to center. I created a div tag and id it "wrapper" and created a css rule. I am sure its a simple mistake, but I cannot figure it out.....
Here is the CSS rules...
@charset "UTF-8";
/* CSS Document */
div, h1, h2, h3, h4, h5, h6, p, pre, address, blockquote, span, ul, ol, li, dl, dd, dt, ing {
          margin: 0px;
          padding: 0px;
#wrapper{
          margin: 0, auto;
          background-color: #9B9E6B;
ul {
          list-style: none;
table#content1{
          background-color: #00C;
          background-image: url(_images/content_bgrnd.png);
          background-repeat: no-repeat;
          font-family: "Arial Black", Gadget, sans-serif;
          font-size: 20px;
          text-align: center;
          padding: 8px;
Here is the code for the site......
<!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>Kiahuna 104</title>
<script type="text/javascript">

</script>
<link href="104.css" rel="stylesheet" type="text/css" />
</head>
<body onload="MM_preloadImages('_images/buttinside1.jpg','_images/buttproperty1.jpg','_images/b uttactivities1.jpg','_images/buttdining1.jpg','_images/buttcontacts1.jpg','_images/home_lg 1.png','_images/home_lg2.png','_images/home_lg3.png','_images/home_lg4.png','_images/home_ lg5.png','_images/home_lg6.png','_images/home_lg7.png','_images/home_lg8.png')">
<div id="wrapper">

<table id="header">
<div class="header"><img src="_images/newLOGO.jpg" alt="Kiahuna 104" width="1000"/>
</div>

<table width="1000" bgcolor="000">
<tr>
    <td width="40"> </td>
    <td width="150"><a href="inside.htm"><img src="_images/butthome1.jpg" alt="home1" name="home1" id="home1" /></a></td>
    <td width="150"><img src="_images/buttinside2.jpg" alt="inside2" name="inside2" id="inside2" onmouseover="MM_swapImage('inside2','','_images/buttinside1.jpg',1)" onmouseout="MM_swapImgRestore()" /></a></td>
    <td width="150"><a href="property.htm"><img src="_images/buttproperty2.jpg" alt="property2" name="property2" id="property2" onmouseover="MM_swapImage('property2','','_images/buttproperty1.jpg',1)" onmouseout="MM_swapImgRestore()" /></a></td>
    <td width="150"><a href="activities.htm"><img src="_images/buttactivities2.jpg" alt="activities2" name="act2" id="act2" onmouseover="MM_swapImage('act2','','_images/buttactivities1.jpg',1)" onmouseout="MM_swapImgRestore()" /></a></td>
    <td width="150"><a href="dining.htm"><img src="_images/buttdining2.jpg" alt="dining2" name="dining2" id="dining2" onmouseover="MM_swapImage('dining2','','_images/buttdining1.jpg',1)" onmouseout="MM_swapImgRestore()" /></a></td>
    <td width="150"><a href="contact.htm"><img src="_images/buttcontacts2.jpg" alt="contact2" name="contact2" id="contact2" onmouseover="MM_swapImage('contact2','','_images/buttcontacts1.jpg',1)" onmouseout="MM_swapImgRestore()" /></a></td>
</tr>
</table>

<table id="content1" table width="1000" height="371">
<tr>
    <td width="34"> </td>
    <td width="897"><p>blah blah blah.</p>
      <p class="center2">NEW: IN-CONDO WASHER & DRYER - COMPLETELY NEW FURNITURE</p></td>
    <td width="53"> </td>
</tr>
</table>
</body>
</html>

I tried to assign a width in both the page and CSS and it still doesn't center. Here is a link to the site and the CSS....
http://taffyproductions.com/test/
@charset "UTF-8";
/* CSS Document */
div, h1, h2, h3, h4, h5, h6, p, pre, address, blockquote, span, ul, ol, li, dl, dd, dt, ing {
          margin: 0px;
          padding: 0px;
#wrapper{
          margin: 0, auto;
          background-color: #000;
ul {
          list-style: none;
table#content1{
          background-color: #00C;
          background-image: url(_images/content_bgrnd.png);
          background-repeat: no-repeat;
font-size: 16px;
          font-family: Papyrus, Arial, "Helvetica Bold", serif;
          font-size: 22px;
          text-align: center;
          padding: 8px;
table#imagegallery{
          background-image: url(_images/imageGallery_bckgrnd.png);
          background-repeat: no-repeat;
#imagegallery a img{
    padding: 0px;
    margin: 2px;
    border: 2px solid #000;
#imagegallery a:hover img {
          border: 2px solid #C00;
table#footer{
          background-image: url(_images/footer_bckgrnd.png);
          background-repeat: no-repeat;

Can you change the default code that targets a new window to change the content in a div tag instead

I created a database for store locations. I was able to display the list of stores. Here though I don't want the list to show the number in front of it... I still need to find the CSS to edit my results for this one. However, more importantly, I don't want to open my results in a new window, I want to be able to target a DIV tag instead.
This is the code that is created to display the list of stores.
{module_webapps,5665,a,,,_blank,,50,,1}
Currently it opens a blank window. I'd like to target a div tag on the right of the list area where the store info can appear.
Perhaps the gurus at adobe can upgrade this feature? Target DIVs instead of new or blank windows, or using frames. Below is the screen of the links created from the DB.
Below is the blank window that it opens.
Would like to make it open in a div to the right of the list. Not sure how to change to core code that was created to make that change.

I'm doing something wrong. I have the list showing the stores in CA
<div class="flip" id="woodcontainer" style="width: 160px; height: 23px;">
<h1>CALIFORNIA</h1>
</div>
<div class="panel">
<script>
$("#infochange").load("{module_webapps,5665,c,41140}"); /* this creates the list of stores in CA where #infochange is the DIV I am targeting.
</script>
</div>
<br />
The code for the DIV where I want the details to load.
<div id="infochange"></div>
This doesn't make sense because I need to have something in the DIV as a holder of some sort?

Dreamweaver cs5.5 - div tags won't float next to eachother

I have being trying to get 2 div tags to float next to eachother for hours! I've been messing with the float and messing with margins, but what ever i do the div is always somewhat under my other div tag. I want them completely side by side. I have tried changing the top and bottom margins but that doesn't work either. how can i get them side by side? One is called 'textbox' and the other 'imagewrapper'. The code is:
<!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>
<script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<link href="SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />
<link href="main.css" rel="stylesheet" type="text/css" />
<link href="style2.css" rel="stylesheet" type="text/css" />

<style type="text/css">
body {
margin:0;
padding:0;
font: 1em/1.5 "Lucida Sans", "Lucida Sans Unicode";
#wrapper {
width: 1064px;
margin: 0 auto; /**with width, this centers page on screen**/
background: #FFF;
text-align:center;
/**this styles image container**/
#thumbs p {
          float:center;
          width: 50px;
          height: 75px;
          /**this styles caption text**/
font: italic 14px/1.5 Geneva, Arial, Helvetica, sans-serif;
          color: #666;
          text-align:center;
          border: 1px solid silver;
          margin-top: 10px;
          margin-right: 5px;
          margin-bottom: 18px;
          margin-left: 5px;
/**recommend using same size images**/
#thumbs img {
          width: 50px; /**adjust width to photo**/
          height: 75px; /**adjust height to photo**/
          /**CSS3 drop shadows**/
-moz-box-shadow: 5px 5px 5px #666;
          -webkit-box-shadow: 5px 5px 5px #666;
          -khtml-box-shadow: 5px 5px 5px #666;
          box-shadow: 5px 5px 5px #666;
/**float clearing**/
#thumbs:after{
          display:block;
          visibility:hidden;
          height:0;
          font-size:0;
          content: " ";
          clear: left;
#wrapper #thumbs #imagewrapper {
          height: 362px;
          width: 280px;
          float: right;
          margin-right: 720px;
#wrapper #thumbs #imagewrapper img {
          height: 362px;
          width: 280px;
#wrapper #textbox {
          float: right;
          height: 300px;
          width: 600px;
          margin-right: 70px;
.clearing {
clear:left;
height:px;
width: 100%;
</style>
</head>
<body>
<div id="wrapper">
<img src="product and website photos/header.png" width="1064" height="116" alt="header" />

<ul id="MenuBar1" class="MenuBarHorizontal">
<li><a href="#home.html">Home</a></li>
<li><a href="#" class="MenuBarItemSubmenu">Boutique</a><ul>
<li><a href="#" class="MenuBarItemSubmenu">Women</a><ul>
<li><a href="bwt.html">Tops</a></li>
<li><a href="bws.html">Skirts/Shorts</a></li>
<li><a href="bwl.html">Trousers/Leggings</a></li>
<li><a href="bwa.html">Accessories</a></li>
<li><a href="bwd.html">Dresses</a></li></ul></li>
<li><a href="#" class="MenuBarItemSubmenu">Men</a>
<ul>
<li><a href="#">Tops</a></li>
<li><a href="#">Bottoms</a></li>
<li><a href="#">Accessories</a></li>
</ul>
</li>
<li><a href="#">Semi-Unique</a></li>
</ul>
</li>
<li><a class="MenuBarItemSubmenu" href="#">T-shirt Shop</a><ul>
<li><a href="t-shirt shop.html">Men</a></li>
<li><a href="t-shirt shop.html">Women</a></li>
<li><a href="t-shirt shop.html">Unique</a></li>
</ul></li>
<li><a href="clearance.html">Clearance</a></li>
<li><a href="#">About</a></li>
</ul>
<h2> </h2>
<div id="textbox"></div>
<div id="thumbs">
<div id="imagewrapper"></div>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
</div>
<hr align="center" size="10" noshade="noshade" class="clearing" color="#999999" />
<div align="left">© 2012 your footer text goes here</div>
</div>
<script type="text/javascript">
var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"SpryAssets/SpryMenuBarDownHover.gif", imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
</script>
</body>
</html>

If you want to position 2 divs - one on left and other on right, the float for your left div should say float: left; and for the one on the right the CSS should say float:right;
In your code, I see you want imagewrapper to come on right and textbox to come on left. But your float for BOTH these say right. This is where the issue lies.
You can combine float:left and float:right to achieve side by side divs provided the overall width (container width+padding+margin) of both divs is less than or equal to the width of the wrapper div.
In the OP's example:
#wrapper = 1064+0+0 = 1064px
#textbox + #imagewrapper = 600+70+280+720 = 1670px = float drop

Floating div tags - won't align

Hi there,
I am trying to align 2 div tags next to one another in the latest version of dreamweaver cc. At the moment I have one floating to the left 60% wide and on the the right 40% wide. The second div tag sits on the next line down to the right but I can't seem to get them the sit directly next to one another. Please help Thank you

Copy & paste this code into a new, blank document. SaveAs test.html and preview in browsers.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>HTML5 Document</title>

<style>
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
body {
    padding: 0;
    width: 90%; /**adjust width as required**/
    margin: 0 auto; /**this is centered**/
    background: #F5DD83;
    color: #2294AE;
    font-family: Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, sans-serif;
    font-size: 100%;
    box-shadow: 2px 2px 4px #333;
header {
    margin: 0;
    padding: 0 1%;
    width: 100%;
    background: #B00202;
    color: #FFF;
header h1, header h2 {
    display: inline;
    color: #F5DD83;
    padding: 0 3%;
section {
    margin: 0;
    padding: 0;
    background: #FFF;
    overflow: hidden; /**float containment**/
article {
    margin: 0;
    padding: 0 2%;
    float: left;
article.left { width: 60%; }
article.right {
    border-left: 1px solid #366;
    width: 40%;
footer {
    background: #B00202;
    clear: left;
    display: block;
    padding: 2%;
    color: #FFF;
</style>
</head>
<body>

<header>
<h1>Sitename</h1>
<h2>Some pithy slogan...</h2>
<nav>Horizontal menu goes here...</nav>
</header>

<section>
<article class="left"> <h3>Article Left 60% wide</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris vitae libero lacus, vel hendrerit nisi!
Maecenas quis velit nisl, volutpat viverra felis. Vestibulum luctus mauris sed sem dapibus luctus. </p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris vitae libero lacus, vel hendrerit nisi!
Maecenas quis velit nisl, volutpat viverra felis. Vestibulum luctus mauris sed sem dapibus luctus. </p>

</article>

<article class="right"> <h3>Article Right 40% wide</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris vitae libero lacus, vel hendrerit nisi!
Maecenas quis velit nisl, volutpat viverra felis. Vestibulum luctus mauris sed sem dapibus luctus. </p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris vitae libero lacus, vel hendrerit nisi!
Maecenas quis velit nisl, volutpat viverra felis. Vestibulum luctus mauris sed sem dapibus luctus. </p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris vitae libero lacus, vel hendrerit nisi! Maecenas quis velit nisl, volutpat viverra felis. Vestibulum luctus mauris sed sem dapibus luctus. </p>
</article>

<footer> <small>© 2014 Your Site Name. All rights reserved</small> </footer>
</section>
</body>
</html>
Nancy O.

Noob question about DIV tags

Learning DW and CSS so patience is in order .
I've being reading numerous posts here and on the web about avoiding tables for laying out web pages. I can see the advantages in terms of cleaner codes and easiness of updating and changing sites at a later time. So I started learning about DIV tags (although tables is very easy for me) and have practice a few times with fairly good results, love the absolute positioning with it. Having said that, for the love of me, can't find a way of centering horizontally a page designed with DIV tags (due to ignorance), for example, 1 column/three rows page, after defining styles, size and colors I enclosed everything in another DIV tag, wrapper I think is called, but have not found a way of centering it on the page, text-aligment on the DIV tag only centers the text not the DIV itself, how to go about this? Help is appreciated.

love the absolute positioning with it.
Get over it. It's a trojan horse. Absolute positioning is not a general layout method.
To center ANY block (non-absolutely positioned) element, use CSS to give it a width and left/right margins of 'auto'. For example -
<div id="foo">...</div>
That div will be centered with this CSS -
#foo { width:300px; margin:0 auto; }
I think you are on the wrong path already, though. Stick with tables (which you say are very easy for you) UNTIL you a) understand CSS well enough to understand what absolute positioning is and why I say it's bad, and b) understand how to use float, margin, and padding to place things on the page. Then you are ready to move away from tables.

Is this a bug for using DIV tag in adf page?

I'm using the version 11.1.1.2.0. And when I write the adf page code with empty content in div tag like this :
<div id="ex"></div>
<othertags>123</othertags>Then the code in randered page :
<div id="ex">
<othertags>123</othertags>
</div>Bug ?
Edited by: Derek.Jaa on 2010-4-21 上午4:00

Hi Simon
Thanks for you help and I can't see the tag you suggested. Maybe you should make you code between tag, replace the [] with {} .

How to auto adjust the height of my div tag?

This is my website www.whistleandlisten.com
The white background is a div tag and whenever I add new content within the div tag I want it to auto adjust to extend the white div tag down as the page gets longer. I have tried css and set my height to auto but that makes it disappear. Right now I have to set it to a certain amount of pixels which gets annoying and sometimes I forget to after adding lots of content. PLEASE HELP.

To have an extensible height element, you should not apply the height property as you have done starting at line 9 of songcss.css
#whitediv
position: absolute;
left: 50%;
margin-left: -490px;
top: 0px;
width: 950px;
height: 2900px;
z-index: 1;
background-color: #ffffff;
background-image: none;
background-repeat: repeat;
background-attachment: scroll;
background-position: 0% 0%;
background-clip: border-box;
background-origin: padding-box;
background-size: auto auto;
color: #ffffff;
box-shadow: #ffffff;
overflow-x: visible;
overflow-y: visible;

Please help! IE6 won't display my div tags!

My page looks fine in the other Mac browsers but the divs won't show up in Internet Explorer. Please tell me what I am doing wrong and how to fix it so that my div tags display correctly. Here is my source and CSS 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>Untitled Document</title>



<style type="text/css">

</style>
<link href="../navmenu.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="wrapper">
<div id="logo"></div>
<div id="nav"></div>
<div id="buffer">this is a buffer</div>
</div>
</body>
</html>
     margin: 0px;
     padding: 0px;
#wrapper {
     width: 909px;
     background-color: #999;
     margin-right: auto;
     margin-left: auto;
     height: 54px;
     overflow: auto;
#wrapper #logo {
     width: 208px;
     float: left;
     background-color: #33F;
     height: 39px;
#wrapper #nav {
     background-color: #933;
     float: right;
     width: 701px;
     height: 39px;
#wrapper #buffer {
     width: 909px;
     clear: both;
     background-color: #0F6;
     height: 15px;

Because IE 6 is 5+ years old and hasn't been updated in a long while and the only reason it's still kicking in somewhat decent numbers is because some large companys utilized IE-only type features for internal applications and intranets and thus forced Microsoft to conitnue to support it beyond the original end-of-support date. :-)
By the way, potentially you could just give IE 6 a really bare-bones layout - but you'll need to make sure that that's acceptable for the project. Also it's good for your sanity if you stop trying to make the site look exactly the same in every browser. It's much easier to make it look "good enough" and make sure that the content is accessible and the site usable.

Rich Text Editor functionality for a DIV tag in a publishing page in SharePoint online

Hi,
We are having a requirement where we need RTE behavior of SharePoint 2013 Rich Html Field for a custom DIV. The scenario goes like this:
1. I have a publishing page
2. I dropped the content editor web part and to that content editor web part I will point to an HTML file that needs to be rendered in that content editor web part
3. I have one DIV in the above mentioned HTML files and I want that div to be editable and I need to RTE options for that DIV.
How to accomplish the above behavior?

Hi,
According to your post, my understanding is that you wanted to create html rich text editor for a DIV tag in a publishing page in SharePoint online.
You can create your own Rich Text Editor.
Here are some great blogs for your reference:
An Example to Use HTML Rich Text Editor
Example: Using the Editor's instance
Rich Text Editor control in SharePoint 2010
Regarding SharePoint Online, for quick and accurate answers to your questions, it is recommended that you initial a new thread in Office 365 forum.
Office 365 forum
http://community.office365.com/en-us/forums/default.aspx
Best Regards,
Linda Li
Linda Li
TechNet Community Support

Why aren't my CSS and div tag boxes displaying the background images I'm plugging in?

I'm using the CSS dialog boxes to places images via the background image option into my dreamweaver site. Everything looks fine in dreamweaver but when I view it any of the browsers, two of the images I've place as div tag background images don't work....the overal background image of the site works, but these don't show up ....
here's my code if it helps to answer
<!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>Main</title>
<style type="text/css">
body {
background-image: url(images/realgrade.jpg);
background-repeat: repeat-x;
text-align: center;
html, body {
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
margin-top: 0px;
padding-top: 25px;
#wrapper {
width: 930px;
text-align: left;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
position: relative;
background-image: url(file:///Macintosh%20HD/Users/jimmymoreira/Unnamed%20Site%204/images/possible%20image. jpg);
background-repeat: no-repeat;
#header {
height: 192px;
width: 237px;
background-image: url(images/logo_fill.jpg);
background-repeat: no-repeat;
position: absolute;
left: 35px;
top: -25px;
#mainNav {
background-color: #33F;
height: 200px;
width: 272px;
float: left;
margin-top: 233px;
#maincontent {
height: 600px;
width: 608px;
float: right;
margin-bottom: 45px;
padding-right: 25px;
background-repeat: no-repeat;
background-position: center 270px;
background-image: url(file:///Macintosh%20HD/Users/jimmymoreira/Unnamed%20Site%204/images/opaqueMaincontent .png);
#sidebar {
background-color: #F36;
height: 250px;
width: 272px;
clear: left;
float: left;
#footer {
height: 525px;
width: 870px;
clear: both;
padding-top: 45px;
padding-right: 30px;
padding-bottom: 30px;
padding-left: 30px;
background-image: url(images/footer_image.jpg);
background-repeat: no-repeat;
margin-top: 45px;
</style>
</head>
<body>
<div id="wrapper">
<div id="header">
    <p> </p>
    <p> </p>
    <p> </p>
</div>
<div id="mainNav">
<p> </p>
</div>
<div id="maincontent"></div>
<div id="sidebar"></div>
<div id="footer"></div>
</div>
</body>
</html>
here's what I'm going for
here's what I'm getting in the browser
Please help!

Your image files are pointing to your hard drive, not your server. You have this
background-image: url(file:///Macintosh%20HD/Users/jimmymoreira/Unnamed%20Site%204/imag es/opaqueMaincontent.png);
and you should have this
background-image: url(imag es/opaqueMaincontent.png);
Also, is your images file named imag es?
Gary

Editable bg color in div tag

Similar Messages

Maybe you are looking for