www.webdeveloper.com
+ Reply to Thread
Results 1 to 2 of 2
  1. 08-17-2012 08:52 AM #1
    ItaliAlphaSig20
    ItaliAlphaSig20 is offline Registered User
    Join Date
    Aug 2012
    Posts
    2

    fixing formatting of site.

    I am currently working a site and a lot of the formatting needs fixed. Here is a link to what it looks like right now: http://everestmedovations.com/new_site/index.html

    Here is the code that I'm working with:

    <!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">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Everest Medovations</title>

    <style type="text/css">
    <!--
    body {
    background: url(images/body-bg.jpg) repeat-x 0 0;
    }

    p {
    font:normal 13px/20px Verdana, Geneva, sans-serif;
    color:#333;
    padding:0;
    margin:10px 0 10px 0px;
    }

    #container {
    width:1000px;
    margin:0 auto;
    }

    #masthead h3 {
    display:block;
    float:left;
    width:178px;
    height:125px;
    text-indent:-9999px;
    }

    #masthead h3 a {
    display:block;
    width:100%;
    height:100%;
    background:url(images/logo.jpg) no-repeat 0 0;
    outline:none;
    }

    #tagline {
    display:block;
    height:54px;
    width:2000px;
    text-align:left;
    font:normal 19px Verdana, Geneva, sans-serif;
    font-weight:bold;
    float:center;

    }

    #nav ul{
    list-style-type:none;
    margin:0;
    padding:0;
    overflow:hidden;
    }

    a {text-decoration:none;}

    #nav li{
    float:right;
    display:block;
    width:120px;
    font-weight:bold;
    color:#FFFFFF;
    background-color:#000;
    text-align:center;
    padding:4px;
    text-decoration:none;
    text-transform:uppercase;
    }

    {
    background-color:#000;
    }

    #featured-area {
    clear:both;
    width:950px;
    height:466px;
    float:center;
    background: url(images/bg-featured.jpg) no-repeat 0 0;
    }

    #description {
    width:300px;
    margin:100px 0 100px 30px;
    float:right;
    }

    #description p {
    font:bold 20px/22px "Lucida Sans Unicode", "Lucida Grande", sans-serif;
    color:#FFF;
    border:1px solid gray;
    margin-left:auto;
    margin-right:auto;
    width:90%;
    background-color:#333;
    text-align:left;
    padding:8px;
    }

    #preview {
    width:1000px;
    margin:25px 20px 25px 0;
    float:left;
    }

    #anchor-menu ul{
    list-style-type:none;
    margin:0;
    padding:0;
    overflow:hidden;
    background:url(images/anchor-menu-bg.jpg) no-repeat 0 0;
    }

    #anchor-menu li{
    float:left;
    display:block;
    width:209px;
    font-weight:bold;
    color:#FFFFFF;
    text-align:center;
    padding:15px;
    text-decoration:none;
    }

    #anchor li{
    background:url(images/anchor-menu-bg.jpg) no-repeat 0 0;
    }

    #handle li{
    background:url(images/anchor-menu-bg.jpg) no-repeat 0 0;
    }

    #ipsum_lorem li{
    background:url(images/anchor-menu-bg.jpg) no-repeat 0 0;
    }

    #ipsum_lorem2 li{
    background:url(images/anchor-menu-bg.jpg) no-repeat 0 0;
    }

    #main-content {
    width:100%;
    float:left;
    }
    #left-column {
    width:445px;
    margin-left:4px;
    float:left;
    }
    #right-column {
    width:442px;
    float:right;

    }

    #footer {
    clear:both;
    background:url(images/footer-image.jpg) repeat-x 0 0;
    }
    #footer p {
    margin:0 auto;
    padding:0;
    width:950px;
    height:50px;
    background:url(images/footer-image.jpg) repeat-x 0 0;
    line-height:50px;
    font:normal Verdana, Geneva, sans-serif;
    }
    -->
    </style>

    </head>

    <body>
    <div id="container">
    <!-- #masthead -->
    <div id="masthead">
    <h3><a href="#">Everest Medovations</a></h3>
    <div id="tagline">
    <font color="white">THE INTERSECTION OF MEDICAL DESIGN AND INNOVATION</font>&nbsp;&nbsp;&nbsp;&nbsp;<img src="images/login-button.jpg" />
    </div>
    <br />
    <div id="nav">
    <ul>
    <li><a href="#contact"><B><font color="white">Contact Us</font></B></a></li>
    <li><a href="#focus"><B><font color="white">Focus</font></B></a></li>
    <li><a href="#services"><B><font color="white">Services</font></B></a></li>
    <li><a href="#about_us"><B><font color="white">About Us</font></B></a></li>
    <li><a href="#home"><B><font color="white">Home</a></font></B></li>
    </ul>
    </div>
    </div>

    <!-- #featured-area -->
    <div id="featured-area">
    <div id="description">
    <p><B>OVER 25 YEARS OF EXPERIENCE BRINGING PRODUCTS TO MARKET.</B></font><br />
    <br />
    <a href=""><img src="images/more_information.jpg" /></a></p>
    </div>
    </div>

    <div id="preview">
    <div id="anchor-menu">
    <ul>
    <li><p><a href="#anchor"><img src="images/anchor.jpg" /></a><br />
    <font color="white"><B>ANCHOR</B><br />
    Lorem Ispsum is simply text of the printing. text the printing.</font><br />
    <br />
    <img src="images/read-more.jpg" /></p></li>

    <div id="handle">
    <li><p><a href="#handle"><img src="images/handle.jpg" /></a><br />
    <font color="white"><B>HANDLE</B><br />
    Lorem Ispsum is simply text of the printing. text the printing.</font><br />
    <br />
    <img src="images/read-more.jpg" /></p></li>
    </div>

    <div id="ipsum_lorem">
    <li><p><a href="#lorem_ipsum"><img src="images/lorem_ipsum.jpg" /></a><br />
    <font color="white"><B>LOREM IPSUM</B><br />
    Lorem Ispsum is simply text of the printing. text the printing.</font><br />
    <br />
    <img src="images/read-more.jpg" /></p></li>
    </div>

    <div id="ipsum_lorem2">
    <li><p><a href="#lorem_ipsum2"><img src="images/lorem_ipsum2.jpg" /></a><br />
    <font color="white"><B>LOREM IPSUM 2</B><br />
    Lorem Ispsum is simply text of the printing. text the printing.</font><br />
    <br />
    <img src="images/read-more.jpg" /></p></li>
    </div>
    </ul>
    </div>
    </div>

    <!-- #main-content" -->
    <div id="main-content">
    <div id="left-column">
    <h2><font color="white">Lorum In his garage lab, Jim developed a new kind of motorcycle
    handgrip with a unique</font></h2>
    <!-- insert about us content -->
    <font color="white">In his garage lab, Jim developed a new kind of motorcycle handgrip with a unique tread and a shape that
    fit the rider's closed hand. "Everything in the world can and will be made better," Jim told skeptics, "The only
    questions are, 'when and whome?'" Top pros took notice of the new design and its material that actually increased grip
    with sweat. It has tread and a shape that fir the rider's closest hand. "Everything in the world can and will pros took
    notice of the new design and its material that actually increased grip with sweat."</font></p>
    </div>
    <div id="right-column">
    <h2 id="featured-work"></h2>
    <div class="featured">
    <div class="content">
    <!-- can contain images or text -->
    <img src="images/video-image.jpg" />
    </div>
    </div>
    </div>
    </div>
    </div>
    <!-- #footer -->
    <div id="footer">
    <p><font color="white">©Copywright Everest Medovations 2012. All Rights Reserved.</font>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp ;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nb sp;<a href=""><font color="white">Home</font></a>&nbsp;&nbsp;|&nbsp;&nbsp;<a href=""><font color="white">About Us</font></a>&nbsp;&nbsp;|&nbsp;&nbsp;<a href=""><font color="white">Services</font></a>&nbsp;&nbsp;|&nbsp;&nbsp;<a href=""><font color="white">Focus</font></a>&nbsp;&nbsp;|&nbsp;&nbsp;<a href=""><font color="white">Contact Us</font></a></p>
    </div>


    </body>

    Here is what I want it to look like:
    http://everestmedovations.com/test/psd_image.html

    How do I change the code so that it looks exactly like this? http://everestmedovations.com/test/psd_image.html

    Please help me.
    Reply With Quote Reply With Quote
  2. 08-21-2012 04:10 PM #2
    polyglot's Avatar
    polyglot
    polyglot is offline Registered User
    Join Date
    Aug 2012
    Location
    Tucson
    Posts
    45
    You will have to help me out -- by the time I click on the two lower URL links I have forgotten exactly how the page differs from the upper link page. Can you explain what is different?

    I do want to congratulate you on using a Strict Doctype and using utf-8 character encoding. Unfortunately your HTML Markup and CSS fail Validation W3C "Why Validate" Document.

    You should keep everything flexible - avoid px where possible and use &#37; and em - especially for font size, padding and margins.Your stylesheet will be far more useful as an externally linked document besides making for a simpler and cleaner HTML Document. All of those replicating &nbsp elements have to go via CSS.

    There is quite a bit more if you wouldn't mind me offering it?

    JP
    Last edited by polyglot; 08-21-2012 at 04:13 PM.
    Web Developer Tool Kit - for creating Standards compliant and Interoperable web pages
    W3C Markup Validation Service - validate HTML code for reliable rendering in all Browsers
    WAVE accessibility evaluation tool - check page structure, image alt text, form labels, etc.
    Reply With Quote Reply With Quote
« Previous Thread | Next Thread »

Thread Information

Users Browsing this Thread

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

     

Bookmarks

Posting Permissions

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

Forum Rules

 HTML5 Development Center



Recent Articles