Solved

HTML Website Set Certain Portions of background to Different Colors

Posted on 2014-03-30
17
369 Views
Last Modified: 2014-04-04
I am working on an HTML webpage and basically have no clue what im doing.  I want to set a small strip of the background to a different color. How do i do this? i cant even find it on Google.
HDM
0
Comment
Question by:HDM
  • 10
  • 6
17 Comments
 
LVL 28

Expert Comment

by:becraig
ID: 39965326
You can either do this with a image (gif /jpg) horizontal and set it as your background so it repeats to to bottom or (easiest)


separate your body into 3 divs and give them separate colors.


Here is a tutorial:

http://www.w3schools.com/html/html_layout.asp
0
 
LVL 52

Accepted Solution

by:
Scott Fell,  EE MVE earned 500 total points
ID: 39965339
>I am working on an HTML webpage and basically have no clue what im doing

Let me suggest something entirely different.  http://www.wix.com  or http://www.squarespace.com.  There is also www.wordpress.com, www.wordpress.org.  The first 2 are a self contained package, nothing to think about, templates included, just add content system meant for people that are not html developers but need an easy way to create a web presence.  

I included wordpress and it is by far the most widely used CMS but it is not as easy to use as the first two and actually it gives the illusion it is easy but when you don't know what you are doing it can be an open door to trouble.   It is still a good system and it is worth going to all 3 sites, creating a free trial and see how you like it. For wordpress, you can go to wordpress.org and start a demo.  If you want to host it on your own, go to wordpress.com.  I would not recommend hosting wordpress on your own unless you get some more details and do your research.  

>I want to set a small strip of the background to a different color
There are many ways to do this and you can do just about any design today without having to use a background image.   The problem with using a background image is it becomes difficult to make your site responsive.  

If you can provide a link to your current site, we can give you more detailed advise on what you need to do.  In addition, please provide an image to give us an idea of what you are trying to achieve.
0
 

Author Comment

by:HDM
ID: 39965335
Yes but see that tells me how to put text in a column.  i just need to put a simple strip of color change, like thisthe part to the left
0
 
LVL 52

Assisted Solution

by:Scott Fell, EE MVE
Scott Fell,  EE MVE earned 500 total points
ID: 39965348
> The part to the left

We need to see the code.    You will want to to this in css.  http://www.w3schools.com/css/css_background.asp
http://www.w3schools.com/tags/ref_colorpicker.asp
.myClass{background-color:#CCCC00;}

Open in new window

0
 
LVL 52

Assisted Solution

by:Scott Fell, EE MVE
Scott Fell,  EE MVE earned 500 total points
ID: 39965351
A great place to learn basic html is http://www.codecademy.com/tracks/web
0
 

Author Comment

by:HDM
ID: 39965355
i am trying to create a more advanced website for greenerpc.com .  i usually use web matrix and dot net nuke, but i had to use a dell latitude d630 laptop witch will barely support a second monitor, let alone dotnetnuke.  

oh, and by the way, i am an IT manager for the state of Idaho, eastern Idaho and organ potato committee, sip-co, and several other companies in my area, so you don't have to speak simple. just fyi...
0
 

Author Comment

by:HDM
ID: 39965359
Oh, and this is what my website looks like now.my site
0
 
LVL 52

Assisted Solution

by:Scott Fell, EE MVE
Scott Fell,  EE MVE earned 500 total points
ID: 39965361
I checked the site sample.  That was done in microsoft word.   It creates code that will work in Internet Explorer and that is about it.  MS word creates HTML meant for printing, not the web.  If you paste the url to http://validator.w3.org/ you will see it has 287 validation errors.  

If that is not your site, can you please post your code or a link to your own site.  If that is your site, I suggest starting over and not use ms word.
0
What Security Threats Are You Missing?

Enhance your security with threat intelligence from the web. Get trending threat insights on hackers, exploits, and suspicious IP addresses delivered to your inbox with our free Cyber Daily.

 

Author Comment

by:HDM
ID: 39965365
that is the site i am trying to re-create. I am using notepad ++. here is my code.
<html>
<body>
<body background="/images/background 2.jpg">
<FONT FACE="arial">
<title>greenerpc.com</title>
<DIV align="center" style="position: absolute; top:10px; left:400px; width:500px; height:25px">
<head><b><p><h2>
GREENER VALLEY COMPUTER STORE</h2></text></b></head>
<text><p>The future is here!</p></text></span>
<p>
<img border="1" src="/images/logo.jpg" alt="greenerpc" width="467px" height="125px">
<DIV style="position: absolute; top:327px; left:-200px; width:375px; height:25px">
<p><h2><b>H O M E</p></h2></b>
<hr size="2" width="700">
<p><div align="center">
Greener Valley Computer Store is a provider of the<br> future!
Our staff is certified by Intel and Microsoft. We<br> are: Microsoft
Solutions Providers, Certified Novel<br> Administrators, and Intel
Premier Partners.  Authorized<br> Resellers for: Acer, Cisco, Hewlett
Packard, Creative<br> Labs, Microsoft and more. We provide state-of
-the-art<br> computer systems, software, peripherals, computer
networking, systems integration, computer consulting<br>, and more!
In short we offer a complete solution...from start to finish!<br></p></div>

<big><p><b>At Greener Valley Computer Store, the future is HERE!</b></p></big>



 <p></p><p></P><p><div align="left">
 <small>If you would like a price quote on repair, or just have<br> 
 questions, Please E-mail us at: &nbsp;&nbsp;<a href=
 "http://mailto:tech@greenerpc.com" target="_blank">tech@greenerpc.com</a></p><p></p><p></p>
 Greener valley computer store is proud to be your local computer<br> professionals for over 15 years.
 </small></div><DIV style="position: absolute; top:425px; left:-200px; width:500px; height:25px">
 </div></div><div align="right">
 <img border="1" src="/images/greeners 2.gif" alt="greenerpc" width="75px" height="65px">
 
 <small><h4> Your local computer <br> professionals since 1995</h4></small>

Open in new window

0
 
LVL 52

Assisted Solution

by:Scott Fell, EE MVE
Scott Fell,  EE MVE earned 500 total points
ID: 39965399
I love the state of ID.  Very friendly people that take their outdoors seriously.

Since half your users are going to be using some type of mobile device and there are nearly 1000 viewports when you include portrait and landscape, you will want to  make your site responsive.   I like to use bootstrap as a base http://getbootstrap.com/ and there is also foundation http://foundation.zurb.com/.

The idea of a responsive site is you can make it automatically conform to a 2000px screen or a 340px wide screen and anything in between.   Both start with a css grid that will make your life easier.

Using the grid from bootstrap, the layout of your first sample would be similar to below.
<div class="container">
   <div class="col-xs-12 col-sm-3">I am a narrow left side except for a phone I am a new row</div>
   <div class="col-xs-12 col-sm-9">
    I am a new row for a phone or a wide main area for all other screen sizes 
   </div>
</div>

Open in new window

There are some sample layouts that can get you started http://getbootstrap.com/getting-started/#examples and it will be a matter of adding your custom css for color and design.

Using your current code, it is really best to keep the html and style separate.  Use a separate style sheet for your css.

This kind of code
<DIV style="position: absolute; top:327px; left:-200px; width:375px; height:25px">

Open in new window

Should be

/* this goes in your .css file */
.someClass{
    position:absolute;
    top:327px; 
    left:-200px;
   width:375px; 
    height:25px;
    
}
<!-- below is in your html file -->
<div class="someClass">My Content</div>

Open in new window


Some other quick notes.

The <head> tag is for your meta data and where you place calls to your external css and sometimes your external js (unless you are just above the </body> tag).
Tags like <text> and <small> may validate, but those items should be in your css.
In a site like yours, it would be rare to use absolute positioning.
<div align="center"> is depreciated.  Instead, use css and text-align:center;
Start your page with <!DOCTYPE html> and not just  html
The code in the body of your page will mostly be <div class="something"> and multiple paragraphs will have <p> tags.   The rest of the styling is done in css.

It would be a good idea to take a few hours off and go through the code academy link I provided for html and css. Three or four hours going through that now will save you ten fold later.

For quick references there is
http://www.w3schools.com/html/default.asp
https://developer.mozilla.org/en-US/docs/Web
https://developer.mozilla.org/en-US/docs/Web/HTML
https://developer.mozilla.org/en-US/docs/Web/CSS

It will also help with each page to paste your url or code to the validator http://validator.w3.org/
0
 
LVL 52

Assisted Solution

by:Scott Fell, EE MVE
Scott Fell,  EE MVE earned 500 total points
ID: 39965409
fyi... I am working on some sample code to match your image sample
0
 
LVL 52

Assisted Solution

by:Scott Fell, EE MVE
Scott Fell,  EE MVE earned 500 total points
ID: 39965474
Here is a link to a quick sample http://jsbin.com/roxupamo/1/ and if you want to see the html side by side http://jsbin.com/roxupamo/1/edit

The code is below.

More notes...
For seo, your tags should be semantic.  Just like writing a term paper, only 1 topic sentence (<h1>) and 1 to 2 sub topic sentences <h2> with paragraphs <p>
Do not use "h" tags for style.  They should have a meaning. Instead use css to control font size for div's, p's and your h's.  
substitute the body background-color for background https://developer.mozilla.org/en-US/docs/Web/CSS/background
Don't be confuse with the "head" section of your code and the "header" which in this case is a class.

The basic structure is
Container
    header
         top header
         bottom header
     main
 
<!DOCTYPE html>
<html>
<head>
 <style>
   body{
     background-color:#ccc;
     
   }
   .container{
     width:700px;
     margin-left:auto;
     margin-right:auto;
     
   }
   .header{
     text-align:center;
     height:300px;
   }
   .header h1{font-size:18px;}
   .header img{
     border:1px;
     
   }
   .bottomheader{
     height:100px;
     border-bottom:thin solid #000;
     padding-bottom:20px;
     
   }
   .title{
     float:left;
     padding-top:60px;
   }
   .title h2{
     font-size:18px;
     letter-spacing:8px
   }
   
   .smalllogo {
     float:right;
     text-align:right;
     width:120px;
     height:70px;
    
     /*
     if you want small logo toline up with right edge of big logo use
      margin-right:117px;
     
     margin right about width of container minus width of logo divide by 2 or (700-467)/2 = 117 rounded up 
     */
     
   }
   .smalllogo p{
     font-size:12px;
     margin-top:0px;
   }
   .main{
     width:400px;
     text-align:center;
     font-size:14px;
     
   }
   </style>
  <meta charset="utf-8">
  <title>Greener Valley Computer Store</title>
</head>
<body>
<div class="container">
  
  <div class="header">
    <h1>GREENER VALLEY COMPUTER STORE</h1>
    <div class="tagline">The future is here!</div>
    <div><!-- using div to place image in a block -->
         <img src="/images/logo.jpg" alt="greenerpc" width="467px" height="125px">
     </div>

    
    <div class="bottomheader">
      <div class="title">
        <h2>HOME</h2>
      </div>
    
      <div class="smalllogo">
      
       <img src="/images/greeners 2.gif" alt="greenerpc" width="75px" height="65px" />
 
       <p>Your local computer professionals since 1995</p>
   
     </div><!-- END SMALLLOGO -->
    </div><!-- END BOTTOM HEADER -->
    </div> <!-- END HEADER --> 


  <div class="main">
    
     <p>Greener Valley Computer Store is a provider of the  future!</P>
<p>Our staff is certified by Intel and Microsoft. We  are: Microsoft
Solutions Providers, Certified Novel Administrators, and Intel
  Premier Partners.</p>Authorized Resellers for: Acer, Cisco, Hewlett Packard, Creative  Labs, Microsoft and more.</p>
 <p> We provide state-of-the-art computer systems, software, peripherals, computer networking, systems integration, computer consulting, and more!</p>
  <p> In short we offer a complete solution...from start to finish</p>
  
  <p>At Greener Valley Computer Store, the future is HERE!</p>
  <p>If you would like a price quote on repair, or just have questions, Please E-mail us at:&nbsp;&nbsp;<a href=
 "http://mailto:tech@greenerpc.com" target="_blank">tech@greenerpc.com</a></p>
<p>Greener valley computer store is proud to be your local computer  professionals for over 15 years. </p> 
  
  
  </div><!-- END MAIN -->




</body>
</html>

Open in new window

For more detailed reading, the actual spec for html5 http://www.w3.org/TR/html5/ and css http://www.w3.org/Style/CSS/Overview.en.html and http://www.w3.org/Style/CSS/current-work Where you see level 3, that refers to level3 and still work in progress.   If you need a quick reference if something is out of date or not fully supported there is http://caniuse.com/ but the actual spec is in w3.org.
0
 
LVL 52

Assisted Solution

by:Scott Fell, EE MVE
Scott Fell,  EE MVE earned 500 total points
ID: 39965477
I should have added, I used <style> tags but you should use an external style sheet instead.  

<link href="css/style.css" rel="stylesheet" type="text/css" />
0
 

Author Comment

by:HDM
ID: 39965535
You know what makes me wanna cry? I have been tryin this stupid site for almost a week about an hour a day and you duplicated it in an hour? Youre gooooood
0
 

Author Comment

by:HDM
ID: 39965540
So now im finally back to web matrix and am trying to open my code in chrome. it keeps giving me this pageWHY DO YO DO THIS TO ME CHROME
0
 
LVL 52

Assisted Solution

by:Scott Fell, EE MVE
Scott Fell,  EE MVE earned 500 total points
ID: 39965583
Like I said, take a break, spend several hours going through basic html and css from code academy, it will save you a lot of time in the long run. If you started out last weekend on that site and an hour a day, you could probably have created your page much faster.  While the time for page 1 would have still been a week, pages 2 - 10 would much faster.  

The reason you are getting the error is because there is no default document and you are preventing directory listing which is a security feature for a live webserver.

A default document is typically set to index.html, index.htm, default.html, default.htm, index.php.   If you set a default document to say index.htm and in your folder My Web Sites\EmpySite4 you have an index.htm the physical path would be ...My Web Sites\EmptySite4\index.htm.   It looks like your localhost points to EmptySite4.  If you have a default document set, you can just go to http://localhost:3785 (or whatever port you have set).  It is the same thing as using http://localhost:3785/index.htm.   Since you do not have a default document set and you have directory listing off, you get the error.  

For now you should surf to http://localhost:3785/pagename.htm  

You can set multiple default documents and the order is important.  You may have index.htm, index.html, default.htm.   If you have set all 3 and you have 3 different pages physically on the server in that order each with different content, then when you surf to http://localhost:3785/ you will get the index.htm page since that is listed first.

http://support.microsoft.com/kb/320051
http://www.iis.net/configreference/system.webserver/defaultdocument
0
 
LVL 52

Assisted Solution

by:Scott Fell, EE MVE
Scott Fell,  EE MVE earned 500 total points
ID: 39965588
By the way, it helps a lot to have a flat image or drawing of what the page should look like before you code.
0

Featured Post

Threat Intelligence Starter Resources

Integrating threat intelligence can be challenging, and not all companies are ready. These resources can help you build awareness and prepare for defense.

Join & Write a Comment

Although it can be difficult to imagine, someday your child will have a career of his or her own. He or she will likely start a family, buy a home and start having their own children. So, while being a kid is still extremely important, it’s also …
Any business that wants to seriously grow needs to keep the needs and desires of an international audience of their websites in mind. Making a website friendly to international users isn’t prohibitively expensive and can provide an incredible return…
Any person in technology especially those working for big companies should at least know about the basics of web accessibility. Believe it or not there are even laws in place that require businesses to provide such means for the disabled and aging p…
The viewer will get a basic understanding of what section 508 compliance can entail, learn about skip navigation links, alt text, transcripts, and font size controls.

762 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

20 Experts available now in Live!

Get 1:1 Help Now