www.webdeveloper.com
Results 1 to 9 of 9

Thread: Back ground colors

  1. #1
    Join Date
    Apr 2012
    Posts
    6

    Back ground colors

    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!!!

  2. #2
    Join Date
    Sep 2006
    Location
    new york
    Posts
    266
    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; }

  3. #3
    Join Date
    Apr 2012
    Posts
    6
    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!

  4. #4
    Join Date
    Apr 2012
    Posts
    34
    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.

  5. #5
    Join Date
    Dec 2011
    Posts
    68
    you want two color extended on the page use two div

    #div1
    {
    background-color:#000000;

    }
    #div2
    {
    background-color:#c0c0c0;

    }

  6. #6
    Join Date
    Apr 2012
    Posts
    6
    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!!!

  7. #7
    Join Date
    Nov 2007
    Posts
    8
    Quote Originally Posted by BcSurvivor08 View Post
    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.
    Attached Images Attached Images
    • File Type: png 1.png (22.6 KB, 28 views)
    Last edited by D3Sign; 04-13-2012 at 05:27 PM.

  8. #8
    Join Date
    Nov 2007
    Posts
    8
    Quote Originally Posted by BcSurvivor08 View Post
    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.)
    <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>
    and replace with

    <div id="RECOBJ7DC42314121BC02" style="position:absolute; top:75px; left:15px; width:976px; height:20px; z-index:2; background-color:#F13943;"></div>
    <div id="SGROBJ7DC311A151D162881" style="position:absolute; top:94px; left:15px; width:976px; height:40px; z-index:3; background-color:#002880;"></div>
    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.
    Attached Images Attached Images
    • File Type: png 1.png (67.1 KB, 32 views)
    Last edited by D3Sign; 04-13-2012 at 05:30 PM.

  9. #9
    Join Date
    Apr 2012
    Posts
    6
    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 Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles