www.webdeveloper.com
Results 1 to 3 of 3

Thread: [RESOLVED] Background/Text Color(and positioning)

  1. #1
    Join Date
    Aug 2007
    Posts
    3

    resolved [RESOLVED] Background/Text Color(and positioning)

    So I'm trying to put together a business site. I was doing the layout with tables, but I switched halfway through to css. Aftering fooling around with it for a bit, I finally got almost what I wanted. The only thing I can't get is for the color of an area or text as defined in css to appear. The programs I'm working with are more than a little outdated, so bear with me here. Also, I'm wondering if there's a better way to position things than the way I've done it. I tried a couple different ways, but this seemed the only foolproof method.
    Here's the css:
    <style type-"type/css">
    <!--
    H1 {font-size: 24pt; font-family: Georgia; font-weight: normal; text-decoration: none; text-align: center; text-indent: 0pt; margin-left: 10pt; margin-right: 10pt; color: #004203;}

    #wrapper {width: 850px; margin: 0px; border: solid 5px; background-color: #E0CAB9; padding:10px;}

    #header {width:800px; margin:0px; border:0px; height:150px;}
    #primarynav {width:800px; margin:0px; border:0px; height:60px;}
    #secondarynav {width:800px; margin:0px; border:0px; height:29px;}
    #tertiarynav {width:50px; margin:0px; border:0px; height:365px;}
    #contentframe {width:800px; margin 0px; border:0; height:365px; position: relative;}
    #content {width:300px; border:0px; height:365px; background-color:#F7D2B6;}
    #contenttext {width:350px; margin:0px; border:0px; height:365px;}
    #contentimage {width:450px; margin:0px; border:0px; height:365px;}
    -->
    </STYLE>

    And here's the html for the page:
    <html>
    <head>
    <link rel=stylesheet href="css.css" TYPE="text/css">
    <title> Schafer Appraisal Associates</title>
    </head>
    <body>
    <div id="wrapper" background-color="E0CAB9" style="position:absolute; top:0; right:100px; left:100px">
    <div id="header"><img src="logo.jpg"><br><img src="pre_os.jpg"><img src="order_status.jpg"></div>
    <div id="primarynav"><img src="home.jpg"><img src="about_us_active.jpg"><img src="apprsl_sandf.jpg"><img src="about_apprsl.jpg"><img src="order_apprsl.jpg"><img src="post_buts1.jpg"></div>
    <div id="secondarynav"><a href="au_cu.html"><img src="contact_us.jpg" border=0></a><img src="location_active.jpg"><img src="mission.jpg"><img src="staff.jpg"><img src="post_buts2.jpg"></div>
    <div id="contentframe">
    <div id="tertiarynav"><a href="au_location_nj.html"><img src="nj.jpg" border=0></a><br><a href="au_location_pa.html"><img src="pa.jpg" border=0></a><br><img src="below_buts_long.jpg"></div>
    <div id="content" style="position: absolute; top: 250px; right:542px"><h1>vcb</h1></div>
    <div id="contentimage"><img src="au_main.jpg" style="position:absolute; top:235px;right:0px" ></div>
    </div>
    </div>
    </body>
    </html>

    Any assistance you can render would be greatly appreciated.

  2. #2
    Join Date
    May 2005
    Posts
    2,040
    The programs I'm working with are more than a little outdated, so bear with me here.
    Don't blame it on the program. Notepad works real good.

    First, you don't have a doctype. Without one, you'll never get IE to pretend to be a modern browser. See my link below. Use html4.01 strict.
    Second, it looks like everything is an image. We don't have the images so its harder to help you.
    Third, you have a case of divitis, meaning, everything has a div. Divs are frequently the last thing to put in a web page and not the first.
    Fourth, we don't know what the page is supposed to look like.
    Fifth, even adding a proper doctype, you still have 20 html errors and one css error. Validate both and fix those errors.
    Can you put this online?

  3. #3
    Join Date
    Aug 2007
    Posts
    3
    I am well aware that the program is no excuse, and it was not ment as such, simply as a comment. Anyways, I took out some divs, added a doctype, and validated it. Both the css and html are valid, but when I threw in the doctype, the layout changed drastically. And sorry, but I haven't found a place to put it on the web yet. Thanks for the help.

    html:
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <link rel=stylesheet href="css.css" TYPE="text/css">
    <title> Schafer Appraisal Associates</title>
    </head>
    <body>
    <div id="wrapper" style="float:center">
    <div id="header"><img alt="" src="logo.jpg"><br><img alt="" src="pre_os.jpg"><img alt="" src="order_status.jpg"><br><img alt="" src="home.jpg"><img alt="" src="about_us_active.jpg"><img alt="" src="apprsl_sandf.jpg"><img alt="" src="about_apprsl.jpg"><img alt="" src="order_apprsl.jpg"><img alt="" src="post_buts1.jpg"><a href="au_cu.html"><img alt="" src="contact_us_active.jpg" border=0></a><a href="au_location.html"><img alt="" src="location.jpg" border=0></a><a href="au_mission.html"><img alt="" src="mission.jpg" border=0></a><img alt="" src="staff.jpg"><img alt="" src="post_buts2.jpg"></div>
    <div id="content"><div id="contenttextwide"><h2>Phone: (908) 218- 0271<br>
    Cellphone: (908) 963-3805<br>
    Fax: (908) 526-7209<br>
    Email: cnjappraisals@optonline.net</h2></div>
    <div id="contentimage"><img alt="" src="widemain.jpg"></div>
    </div>
    </div>
    </body>
    </html>

    css:
    <style type-"type/css">
    <!--

    H2 {font-family: Georgia; font-weight: normal; text-decoration: none; text-align: center; text-indent: 0pt; color: #004203;}

    #wrapper {height:650px;margin: 0; border: solid 1px #FF7F50; background-color: #E9967A ; padding:25px; position:absolute; right:75px;}

    #header {width:800px; margin:0px; border:0px; padding:0;}

    #content {width:800px; margin:0px; border:0px; padding:0px; background-color: #F7D2B6; position:relative; right:0;top:0;}

    #contenttextwide {height:360px;margin:0px; border:0px; padding-left:0px; padding-top:45px;position:absolute; left:30px; top:0;z-index:1;}

    #contentimage {width: 750px; margin:0px; border:0px; padding:0; position: absolute; right:0;top:0;}
    -->
    </STYLE>

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