Back ground colors

**BcSurvivor08** · 04-11-2012 04:49 PM

I made a web site using Webstudio 5.0 and adding some coding myself. What I need help with is how to make 2 colors extend the width of the users computer screen.

Here is the site address: http://www.amerimedems.com

What I'd like to have is the very top where the "Amerimed" logo is to stay white.

The red & blue bars underneath it right now are graphics but I'd rather them go all the way across user screen.

How can I do this?

Thanks!!!

**auntnini** · 04-11-2012 05:39 PM

Fix this </HEAD>
</head> duplication on your page.

The <HTML> and <BODY> are separate elements that can be used independently as CSS style rule selectors so you could

Code:

html { background: white; }
body { background: transparent; }
or
html, body, table { background: white; }

**BcSurvivor08** · 04-11-2012 10:00 PM

Thanks Aunt I fixed the duplicate </head> tags.

Unforturnately, I tried your suggestions, but none achieved what I am trying to accomplish.

Maybe this will help:

Code:

<body style="margin:0 0 1px 0; height:100%">

  <table width="1003" border="0" cellpadding="0" cellspacing="0" align="center">
    <tr>
      <td>
        <div id="ctrdiv" style="position:absolute; top:0; padding: 0px; height:100%; width: 1003px">
          <div id="RECOBJ7DC42314121BC02" style=" position:absolute; top:75px; left:15px; width:976px; height:20px;  z-index:2;">
          <img src="home/goim002.png" width=976 height=20 border=0 alt="">
          </div>

          <div id="SGROBJ7DC311A151D162881" style=" position:absolute; top:94px; left:15px; width:976px; height:40px;  z-index:3;">
            <img src="home/imag000.jpg" width=976 height=40 border=0 alt="">
          </div>

The img "home/goim002.png" is a rectangle that measures width: 976px height: 20px

What I'd like to do is replace this "image" with just a red stripe that measures 20px high but goes the full width of the views screen.

Likewise with the img "home/imag000.jpg" to be a blue stripe that measures 40px high and also goes the full width of the viewers screen.

The rest of the backgound on the page- both above the red stripe and below the blue stripe - to remain white.

Thanks for any help you or anyone else may offer me!

**s5nelson** · 04-12-2012 02:20 AM

Well you can do that one of two ways. Either you can create an image with the exact heights:

HTML Code:

#id {
     background: url(/images/image.jpg) repeat-x;
     height: 60px;
     width: 100&#37;;
}

Or, you can create two divs:

HTML Code:

#div1 {
     background: #blue;
     height: 40px;
     width: 100%;
}
div2 {
     background: #ff0000;
     width: 100%;
     height: 20px;
}

I have temporarily forgotten the exact color # for blue so forgive me

These tags would have to be outside of your wrapper but within the body tags in order to display the full width of the screen.

**mtrick** · 04-12-2012 04:58 AM

you want two color extended on the page use two div

#div1
{
background-color:#000000;

}
#div2
{
background-color:#c0c0c0;

}

**BcSurvivor08** · 04-13-2012 03:59 PM

I appreciate the help, unfortunately non of the above seem to work. I suppose its because everything is inside a table? I dont know how to build an html page placing contents where I want them, which is why I use software.

I've learned enough to edit the pages once they are produced by WebStudio but thats about it.

Anyway, if anyone can help me override the width of the table, that's be much appreciated.

Thanks!!!

**D3Sign** · 04-13-2012 05:03 PM

Originally Posted by BcSurvivor08

I appreciate the help, unfortunately non of the above seem to work. I suppose its because everything is inside a table? I dont know how to build an html page placing contents where I want them, which is why I use software.

I've learned enough to edit the pages once they are produced by WebStudio but thats about it.

Anyway, if anyone can help me override the width of the table, that's be much appreciated.

Thanks!!!

Do you have a cleaner, or higher quality version of that banner image? I suggest you make it transparent like I have done here (see attachment), that will at least make the red bar underneath flow more smoothly. It also makes the white background of the page blend more nicely with the image because right now, the "white background" of the "Amerimed" logo has a bluish tint to it. But a transparent background - i.e., no color there would fix this completely (well, also depending on what format you save the file, but that's a different issue). Keep in mind, this is just a quick thing that I did (took about 20 seconds) so that is why it looks rough, but you can do this easily if you have a higher resolution of it and make it look much more cleaner. Just my small suggestion.

**D3Sign** · 04-13-2012 05:16 PM

Originally Posted by BcSurvivor08

I appreciate the help, unfortunately non of the above seem to work. I suppose its because everything is inside a table? I dont know how to build an html page placing contents where I want them, which is why I use software.

I've learned enough to edit the pages once they are produced by WebStudio but thats about it.

Anyway, if anyone can help me override the width of the table, that's be much appreciated.

Thanks!!!

In your code, look for this part (roughly line 274):

(I've removed some of the extra white spaces; just use the "find and replace" tool and search for div id="REC, this should be enough to bring you to the correct line.)

and replace with

Basically, all I did was remove the image references and replaced them with a background-color attribute for the div tags (set them to the colors you wanted). Now, this means that the "navy blue" region does not have those red vertical divider lines anymore, but it does remove the background images. Let me know if you need any more help with making these changes.

Attached is a screenshot of the changes made above with the new banner image that I made earlier (with the transparent background). This is not the best quality (just did a quick screen capture for demonstration purposes, so please overlook the choppy image quality and the color leakages. Ideally it will be very clean.). Notice that the red background bar goes cleanly behind the logo image and continues and will always remain this way even with different screen resolutions, whereas the way you have it now, you can see a bit of the logo's red part "bumping up," like a staircase -- might be minor to you, but it can easily be cleaned up, so why not?

And as I said, in the navy region, the red divider lines you have currently are gone. If this is a really big thing for you, then we can look into getting them back in there somehow, but I don't think it looks bad without them.

**BcSurvivor08** · 04-13-2012 07:45 PM

Thank you D3! I'm going to work on your suggestions and will post back to let you know how it went. I am soooo appreciative of your help!!!

Thread: Back ground colors

Thread Tools

Display

Back ground colors

Thread Information

Users Browsing this Thread

Bookmarks

Bookmarks

Posting Permissions