Background colour of div

I have created a repeating region on a page so that a client can add other items - how can they alter the background colour of the complete div (as opposed to just highlighting the text) so that it stands out from the other divs?

Hi Captain Slocum,
Thanks for your patience. I should preface that InContext Editing doesn't explicitly give you the option to change the background color of a container, so what I'm proposing is sort of "tricking" a background color. This only appears to work consistently in Firefox too, since IE will wrap selected text in span tags even if the entire paragraph is selected.
For example, use the following HTML and CSS as a sample:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:ice="http://ns.adobe.com/incontextediting">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script src="includes/ice/ice.js" type="text/javascript"></script>
<style type="text/css">
body { background-color:#6CF;}
p {
margin: 0;
padding: 20px;
.container_elem { margin: 20px; }
</style>
</head>
<body>
<div ice:repeatinggroup="*">
<div ice:repeating="true" ice:editable="*" class="container_elem"><p style="background-color: #00ffff;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec in accumsan dolor. Nullam vehicula elementum pharetra. Praesent eu varius ligula. Suspendisse libero tortor, sodales quis luctus sit amet, euismod sit amet leo. Praesent ultricies rutrum tortor eu hendrerit. Donec a blandit magna. Fusce et metus sed arcu dignissim ultrices. Mauris vehicula, elit sit amet porttitor placerat, neque nisl condimentum magna, eget facilisis tortor velit volutpat ante. Mauris tristique dolor vitae justo suscipit ut hendrerit lacus congue. In scelerisque diam in odio venenatis cursus. Nulla ac eros tortor. Sed placerat, odio eget lacinia laoreet, libero nisi rutrum eros, ac faucibus mauris mi id metus. Maecenas ut mattis turpis. </p></div>
</div>
</body>
</html>
To create a new region, duplicate the original.
Select all of the text within the new region and apply a highlight color.
Edit the text.
This should change the background color of the <p> (which also includes the padding around the paragraph) giving the appearance of a "container".If you give the .container_elem class a width you can create a sidebar appearance.
Is this what you're trying to accomplish?
Best regards,
Corey

Similar Messages

Why does my footer background colour change when adding a float to a DIV element?

Bear with me as I am a student learning dreamweaver....
I am trying to insert a series of 4 DIVs into a footer area with a black background. WHen I insert a float to constrain them to a horizontal position, the black background disappears and the body background shows through. A strip of the footer displays on top of the area where the DIVs are placed. The float works but the problem is with the background colour. It's almost as if the divs have been pushed down below the footer area. I have tried placing my cursor in several locations before inserting the float but it doesn't change anything.
Can anyone help?

It all depends on the code you're working with.   In the following example, I applied overflow:hidden to the <footer> element.
Copy & paste this code into a new, blank HTML page to see how it works.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>HTML5 Layout</title>
<style type="text/css">
body {
    font: 100%/1.4 Verdana, Arial, Helvetica, sans-serif;
    background-color: #CCC;
    padding: 0;
    color: #000;
    width: 1000px;
    margin: 45px auto;
header {width: 100%; display:block; background: #A5C9C9; min-height: 100px}
section {width: 100%; display:block; background:#FFF; min-height: 300px}
footer {width: 100%; display:block; background: #FF9; overflow:hidden;}
aside {width: 22%; float:left; display:block; margin-right: 4%; background:#D8E9B6; min-height: 200px;}
aside:last-child {margin-right:0}
</style>
</head>
</body>
<header>
<h1>Content for header goes here</h1>
</header>
<section>Content for section goes here</section>
<footer>
    <aside>aside 1</aside>
    <aside>aside 2</aside>
    <aside>aside 3</aside>
    <aside>aside 4</aside>
</footer>
</body>
</html>
Nancy O.

Background colour on menu div

I've got a bit of a problem that has been driving me mad for the last 24 hours. I have created a CSS rollover menu. I have made the div that holds the menu the same width as my wrapper, 800 pixels. I have created 4 rollover menu buttons, however they don't quite fill the whole of the 800 pixels. I have given the div a grey background colour and I was hoping it would fill in the gap at the end. However, it doesn't matter what I do, there is still white gap leftover. Obviously the easiest solution I have found this to make each button 200 pixels wide, that means that because I have for now, they fit in perfectly. Having said that, there is quite a wide gap between the writing on the buttons. But that's not really the point, I can't understand why I'm not able to fill in the extra gap with colour
[IMG]http://i205.photobucket.com/albums/bb230/Oscarfishlover/menu2-1.jpg[/IMG]
[IMG]http://i205.photobucket.com/albums/bb230/Oscarfishlover/menu1.jpg[/IMG]

Thanks guys, that sorted the problem. However, I can see now that if I do want to add a submenu, I may have a problem. Is there any way around this problem where I can still have a submenu, but still have my div background visible? I have included the code for my menu. You'll have to forgive me, I've been using Joomla! for the last few years and it does make you rather lazy because we just basically use templates, rather than having to code everything :-)
#navMenu {
    margin:0;
    padding:0;
    background-color: #999;
    overflow: hidden;
#navMenu ul {
    margin:0;
    padding:0;
    line-height:30px;
    background-color:#999;
#navMenu li {
    padding:0;
    list-style:none;
    position:relative;
    float: left;
    margin: 0;
    background-color: #999;
#navMenu ul li a {
    text-align:center;
    font-family:Arial, Helvetica, sans-serif;
    text-decoration:none;
    display:block;
    color:#fff;
    text-shadow: 1px 1px 1px #000;
    font-weight: bold;

Background colour of Popup LOV

Hi,
The disabled text-box of the popup LOVs in my application do not appear 'greyed' out when viewed in IE (they are fine in FF and GC). I am using Theme 13. Where can I change the background colour? I can't seem to find anywhere in either the template (preferred choice) or even the individual item's options to add the code for the style change.
Thanks
Lucy

Ok. This looks like a bug in the Theme Template.
Does not exactly look good, but better than before in that at least the text and links are visible !
a. Edit the Popu LOV Template from Shared Components for the Slate Theme
b. In Search Field - Before Field Text add the style as given below
<div class="t1PopupHead" style="background-color:#ffffff;">c. Add the above style to Ressult Set - Before Result Set as well
<div class="t1PopupBody" style="background-color:#ffffff;">Might be a known issue, will check it out.
Regards,

White background colour in Iframe?

Hi everyone
I hope you are able to help me with this problem I am having:
I am working with an Iframe, where I would like the
background colour to be a specific colour, relating to the colour
next to the Iframe.
The colour sorounding the Iframe is this #E6E3D2, the
background colour of the html-page to which I am linking in the
Iframe is the same colour, but nonetheless, the Iframe keeps
providing a white frame surrounding the content-html-page.
I have tried to make the Iframe and content.html page the
exact same width, but that just give me a vertical scroller + the
white frame.
This is what I mean:
http://i439.photobucket.com/albums/qq112/GD-Klubben/Example.jpg
Are there anyone out there, who can explane to me (in very
slow and easily understanding phrases ;o)) how I can get rid of the
annoying white background colour?

No, I haven't uploaded it anywhere yet. Not before I can
solve the problem.
But the code to the index.html is this:
<!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>Grand Danois Klubben i Danmark</title>
<style type="text/css">
BODY {
SCROLLBAR-FACE-COLOR: #FFFFFF;
SCROLLBAR-HIGHLIGHT-COLOR: #000000;
SCROLLBAR-SHADOW-COLOR: #FFFFFF;
SCROLLBAR-3DLIGHT-COLOR: #000000;
SCROLLBAR-ARROW-COLOR: #6699FF;
SCROLLBAR-TRACK-COLOR: #000000;
SCROLLBAR-DARKSHADOW-COLOR: #990000;
</style>
<script type="text/javascript">

</script>
<style type="text/css">

</style>
</head>
<body>
<div align="center">
<table width="1143" height="582">
<tr>
<th width="1135" height="24"
scope="row"> </th>
</tr>
<tr>
<th height="550" scope="row"><table width="1023"
align="left">
<tr>
<th width="109" height="547" scope="row"><table
width="100" cellpadding="5">
<tr>
<th class="style23" scope="row"><div
align="right"></div></th>
</tr>
<tr>
<th class="style23" scope="row"><div
align="right"></div></th>
</tr>
<tr>
<th class="style23" scope="row"><div
align="right"></div></th>
</tr>
<tr>
<th class="style23" scope="row"><div
align="right"></div></th>
</tr>
<tr>
<th class="style23" scope="row"><div
align="right"></div></th>
</tr>
<tr>
<th height="210" scope="row"> </th>
</tr>
</table>
<p><br />
</p>
<p><br />
<br />
<br />
</p></th>
<td width="106"><br />
<table width="102" align="center" cellpadding="5">
<tr>
<th width="86" scope="row"><div
align="left"><span
class="style23">Forside</span></div></th>
</tr>
<tr>
<th scope="row"><div align="left"><span
class="style21">Grand Danois</span></div></th>
</tr>
<tr>
<th scope="row"><div align="left"><span
class="style16">Klubben</span></div></th>
</tr>
<tr>
<th scope="row"><div align="left"><span
class="style16">Medlemskab</span></div></th>
</tr>
<tr>
<th scope="row"><div align="left"><span
class="style16">Hvalpe</span></div></th>
</tr>
<tr>
<th scope="row"><div align="left"><span
class="style16">Opdrættere</span></div></th>
</tr>
<tr>
<th scope="row"><div align="left"><span
class="style16">Udstilling </span></div></th>
</tr>
<tr>
<th scope="row"><div align="left"><span
class="style16">Champions</span></div></th>
</tr>
<tr>
<th height="24" scope="row"><div
align="left"><span
class="style16">Links</span></div></th>
</tr>
<tr>
<th height="32" scope="row"><div
align="left"></div></th>
</tr>
</table>
<br />
<br />
<br />
<br />
<br /></td>
<td width="792"><div align="center">
<br />
<br />
<br />
<iframe src="Underside Grand Danois.html" width="785"
height="495" scrolling="Auto" frameborder="0"</iframe>
</div></td>
</tr>
</table></th>
</tr>
</table>
</div>
</body>
</html>

How to insert background colour into text?

Hi,
I'm relatively new to Dreamweaver so I'm not sure how exactly to phrase this question. Within a div file on my HTML I have created I have a few links taking the user to another page. .
For the sake of clarity I have inserted an image to express what I am trying to say.
The background colour for my div is a chocolate brown. I was wondering if there was any way of creating a background for the text for each link within the div? So the text would have a background with a different colour?
I'm trying to create something that looks like this:
Does anyone know if this is possible to do? Do I have to create separate Div files within the main div file to do this?
Apologies for the lack of detail, I just don't know the technical words to show what I'm looking to do! Any tips or links to tutorials would be hugely appreciated.
Thanks for reading.

First, we need to examine the HTML code used to construct your menu. The modern approach is to use an unordered list like this:
<nav>
     <ul>
          <li><a href="#">Menu Item1</a></li>
          <li><a href="#">Menu Item2 </a></li>
          <li><a href="#">Menu Item3</a></li>
          <li><a href="#">Menu Item4</a></li>
          <li><a href="#">Menu Item5</a></li>
     </ul>
</nav>
Then style your navigation with CSS like this:
<style>
/**zero out margins & padding on everything**/
margin:0;
padding:0;
/**fix the CSS Box Model on % layouts**/
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
box-sizing:border-box;
nav {
    width: 100%; /**adjust width as needed**/
    background-color: #960;
    padding: 30px;
nav ul {
    margin: 0;
    padding: 0
nav li {
    width: 20%;
    list-style: none;
    font-size: 14px;
    float: left;
    text-align: center;
/**menu links**/
nav li a {
    display: block;
    text-decoration: none;
    margin-right: 6px;   /* space between links */
    width: auto; /* adjust as needed or use auto */
    padding: 6px;
    font-weight: bold;
    line-height: 2em;
    color: #FFF;
    background: orange;
/**menu style on mouse over**/
nav li:hover {
    color: #FFF;
    background: #1e5799;
/**clear floats after nav element**/
nav:after {
    clear: both;
    display: block;
    content: ' ' ;
/**END MENU STYLES**/
</style>
Nancy O.

Background colour not visible

I've applied a background colour to the body div using
external CSS so that it will fill the margins around my centred
main wrapper div. However, the background colour does not seem to
be applied, whether viewed in Dreamweaver, IE7, Firefox or Safari.
I've used the same code to put a background colour on the main
wrapper div and this worked fine. Strangely enough, if I apply the
same code as an embedded rule then this works fine!
I've selected web colours only.
Any ideas why the code doesn't work?

Remove the 'hash'# symbol before the body.
#body {
text-align:center;
font:small/1.2 Arial, Helvetica, sans-serif;
margin: 0;
padding: 0;
background-color:#ccffff;
RSW14 wrote:
> I've applied a background colour to the body div using
external CSS so that it
> will fill the margins around my centred main wrapper
div. However, the
> background colour does not seem to be applied, whether
viewed in Dreamweaver,
> IE7, Firefox or Safari. I've used the same code to put a
background colour on
> the main wrapper div and this worked fine. Strangely
enough, if I apply the
> same code as an embedded rule then this works fine!
>
> I've selected web colours only.
>
> Any ideas why the code doesn't work?
>
> #body {
> text-align:center;
> font:small/1.2 Arial, Helvetica, sans-serif;
> margin: 0;
> padding: 0;
> background-color:#ccffff;
> }
> #wrapper {
> position:relative;
> margin-left:auto;
> margin-right:auto;
> text-align:left;
> width:760px;
> border:5px;
> border-color:#796460;
> border-style: solid;
> background-color:#ffffcd;
> }
>

How can I change the background colour when working on a doc in full screen view (pages)?

Recently I have been working on docs without the distraction of having to see my desktop around my page file by using the full screen view in pages. I do find the contrast to an all black screen too harsh though and it makes my eyes more tired than seeing the clutter of my desktop around the page. Is there any way I can change the background colour?
Any help much appreciated!

When you are in Full screen mode move the cursor up to the top to show the Format bar. Then look to the far right. There you'll see Background and a rectangle. Click on the rectangle and change the colour.
For information on Pages download the Pages User Guide from your Pages Help menu.

How do I change the background colour on notes. I need a darker background due to a visual issue. Apple has now discriminated those with visual issues. I am so not happy with many of the new changes because of this.

I am so not happy with the new changes especially when it come to the ability to change background colours, fonts and font sizes/ colours... Does Apple really think that their only audience is the young cool crowd or people who do not have a visual impairment. Think before you make changes to your software and programs. You WILL lose more people to androids if you continue this way.
At least give users the ability to make apps like notes their owned by allowing them to pick the style, theme, background and colour, font size and colour.
A very ****** off Apple user who is now looking at Androids.

Hi Tricia,
I'm sorry but I don't see an ideal way to do this. Is it the yellow label text, e.g: "New" against the white background which is causing the difficulty?
The only way I've found of getting the colors to change in Notes is via Settings>General>Accessibility>Invert Colors but then it looks like something has barfed all over your screen.
I'd be very, very surprised if Apple do not fix this, firstly because I believe "Accessibility" is a legal matter and secondly because they will not want to cause difficulty for their customers. We have to remember that this is a major, major overhaul of iOS, it has essentially been taken back to the drawing board and done from scratch again, it may take a little time, but I'm sure they will fix these issues.
Regards,
Steve

Just uploaded iso7 , . . .hate it! Can you change background colours? How do you add a new item/activity to the schedule? In notes the font has changed, can I change it back and the link colour is now yellow instead of blue, can I change it? Thanks

Just uploaded iso7 , . . .hate it! Can you change background colours? How do you add a new item/activity to the schedule? In notes the font has changed, can I change it back and the link colour is now yellow instead of blue, can I change it? Yellow on white is harder to read. Thanks

Another question. How do you bookmark something. It was so easy before, why did they change it? Can I uninstall it?

My iTunes 11.0 (mac) has a black background colour and I can not see all of the information. How do I change the background colour in iTunes 11.0 (mac)

My iTunes 11.0 (mac) has a black background colour and I can not see all of the information for each song. How do I change the background colour in iTunes 11.0 (mac) so I can see check boxes etc. My download window shows no information, it is entirely black.

Trent o
Someone else in the forum told me how to do this. If you have Onyx on your system then select Parameters, iTunes and turn off high contrast mode. If you don't have Onyx, I'd suggest getting it. It is freeware and used to help maintain your system. Good luck
Paul

Changing background colour for a new Workspace page

Hi everybody,
can anybody help me?
I want to create a new Workspace Page. When i create a new page in the workspace, the colour is white. How can i change the background colour?
Thanks for any suggestion!
Eddy

Eddy,
This forum is for workspace manager - a database product that has no UI itself. I'm not sure what product you are using, but it's not WM.
Bryan

Background Colour in Pages 5.0.1

Knowing how Apple likes to have everything sent electronically, and not printed, I am surprised that I can't change the background page colour of documents.
I can change the background of a word, sentence and paragraph. I can even select all the text on a page and change the background colour of that.
But there is still a white border all around this document, where the margins, headers and footers are.
It looks really NAFF.
Anyone got any ideas please.

Make a page size rectangle, color it and send it to the back or make it a master object.
Peter

Background colour in pages document

Is there a way of having white as my background colour for my document and using white script?

Peter, thank you for your response.
I wasn't trying to lock horns with you.
Your story about your sister in law made me laugh.
To be certain, I am NOT arguing that black text on white background is less legible
[I'm sure you are correct that it is more legible. That would stand to reason].
I am saying that staring at lots of white light hurts my eyes and I don't like looking at it for a long time.
I'm sorry you disagree with what I have experienced that applies to me personally over many years.
However,
I don't think that's superstition.
That's years of personal experience, related to my own personal eyeballs [not yours].
To drop pretensions of science,
I'm afraid what this boils down to is I can't be told what I like to see, or look at for long periods, and what is more comfortable for me personally.
To use a very rough analogy :
Would it be more painful for you to stare at a very intense little ball of light [or a few of them] / [or a neutral-coloured ball of light] against a dark night sky?
OR at a few black dots in front of , perhaps not the sun, but some other similarly but far less intense light across say, the sky as a backdrop, all of that light shining in your eyes?
Would you rather try and read small text on a dim lightbulb, or against a fully-lit lightbulb?
You may be different. I personally prefer the text on the more neutral lightbulb.
I'm perfectly happy to be surprised, but I don't think you were addressing a slightly separate topic: legibility, rather than photoreceptors being bombarded with hot-light all day.
While legibility is a factor related to eyestrain, I would suspect for different reasons,
and ultimately, what negligible-difference I may lose in legibility is far-more than made up for by not having to stare at a flat panel beaming hot-light into my eyes all day.

How to change the text color of a label by using RGB values without changing the background colour?

xCode interface builder:
When I try to change the color property of a label's text by using the RGB values, the background color also changes to the same value automatically.
in other words:
While setting the RGB values for text colour of labels, the background colour also changes unless we use the sliders.
How to make sure that only the color of text changes and not the background?

You can simply do this.
[labelname setTextColor:[UIColor colorWithRed:38/255.0f green:171/255.0f blue:226/255.0f alpha:1.0f]];

Background colour of div

Similar Messages

Maybe you are looking for