WEB design/coding question

Discussion in 'OT Technology' started by AnoesisX, Sep 10, 2007.

  1. AnoesisX

    AnoesisX New Member

    Joined:
    Feb 19, 2005
    Messages:
    2,868
    Likes Received:
    0
    Location:
    Boca Rotten, Florida
    I am taking up web designing again. its been awhile (before the use of css and php).anyway im trying to make everything on this page to fit the screen better is there away i can scale everything at once instead of one thing at a time and if so how would you do it.

    would it be better to have it when you click on a link open that link inside an embedded window/table or goto a new page with everything the same but the content that was accessed thru the link and how would you do it
    PS this is some template i got off a website just trying to learn the way i learned html....
    This is the css:
    Code:
    /* +++++++++++++++++++++++++++++ Shifting Ground +++++++++++++++++++++++++++++ */
    
    
    /* ++++++++++++++++++++ Common Styles ++++++++++++++++++++ */
    
    
    * {
        margin: 0px;
        padding: 0px;
    }
    
    body {
        color: #fff;
        background-color: #484848;
        font-family: 'verdana', 'helvetica', sans-serif;
        font-size: 100%;
        text-align: center;
    }
    
    table {
        font-size: 1em;
    }
    
    td {
        color: #fff;
        background-color: inherit;
        font-family: 'verdana', 'helvetica', sans-serif;
        font-size: 1em;
    }
    
    a {
        color: #fff;
        background-color: inherit;
        text-decoration: underline;
    }
    
    a:hover {
        color: #fff;
        background-color: inherit;
        text-decoration: none;
    }
    
    img {
        border: none;
    }
    
    ul, ul li {
        list-style: none outside;
    }
    
    ol, ol li {
        list-style: decimal inside;
    }
    
    p {
        padding: 0.6em 0em 0.6em;
    }
    
    fieldset {
        border: none;
    }
    
    input, textarea, select {
        font-family: 'verdana', 'helvetica', sans-serif;
        font-size: 13px;
    }
    
    .hidethis {
        display: none;
    }
    
    .clearthis {
        margin : 0px;
        height : 1px;
        clear : both;
        float : none;
        font-size: 1px;
        overflow : hidden;
        visibility: hidden;
    }
    
    
    /* ++++++++++++++++++++ Image Thumbnails ++++++++++++++++++++ */
    
    .tb_center {
        text-align: center;
    }
    
    .tb_center img {
        margin: 1.3em auto;
        border: 1px #fff solid;
    }
    
    
    
    /* ++++++++++++++++++++ Body Wrappers ++++++++++++++++++++ */
    
    #body_wrapper {
        margin: 35px 10px;
        width: 982px;
        background: url('images/rightcol_img.gif') no-repeat 100% 68px;
        font-size: 0.71em;
    }
    
    /* ++++++++++++++++++++ Body Container ++++++++++++++++++++ */
    
    #body_container {
        float: right;
        position: relative;
        left: -243px;
        width: 496px;
        background: url('images/main_bg_bot.gif') no-repeat 0% 100%;
    }
    
    #body_container_b {
        padding: 15px 0px;
        width: 496px;
        background: url('images/main_bg_top.gif') no-repeat 0% 0%;
    }
    
    #body_container_c {
        color: inherit;
        background-color: #8e8257;
        border-left: #fff 6px solid;
        border-right: #fff 6px solid;
    }
    
    
    
    /* ++++++++++++++++++++ Page Header ++++++++++++++++++++ */
    
    #page_header {
        padding-bottom: 2px;
        color: inherit;
        background-color: #b3ab78;
    }
    
    #page_header h1 {
        position: relative;
        top: -4px;
        width: 100%;
        height: 40px;
        background: url('images/counterstrike_logo.gif') no-repeat 50% 50%;
    }
    
    
    
    /* ++++++++++++++++++++ Page Content ++++++++++++++++++++ */
    
    #page_content {
        padding: 15px 17px 10px;
        font-weight: bold;
        text-align: left;
    }
    
    .link_readmore {
        padding: 35px 0px 10px;
        text-align: right;
    }
    
    .link_readmore a {
        margin-left: auto;
        display: block;
        width: 94px;
        height: 24px;
        background: url('images/button_readmore.gif') no-repeat 0% 0%;
    }
    
    
    
    /* ++++++++++++++++++++ Navigation Menu ++++++++++++++++++++ */
    
    #navmenu {
        float: left;
        margin-top: 68px;
        position: relative;
        left: 77px;
        width: 166px;
        background: url('images/navmenu_bg_bot.gif') no-repeat 0% 100%;
        font-size: 1.15em;
        font-weight: bold;
    }
    
    #navmenu_b {
        padding: 15px 0px;
        width: 166px;
        background: url('images/navmenu_bg_top.gif') no-repeat 0% 0%;
    }
    
    #navmenu_c {
        color: inherit;
        background-color: #6d6845;
        border-left: #fff 6px solid;
    }
    
    #navmenu a {
        text-decoration: none;
        text-transform: uppercase;
    }
    
    #navmenu li {
        border-top: #fff 1px solid;
    }
    
    #navmenu li a {
        display: block;
        padding: 5px 0px;
        width: 160px;
    }
    
    #navmenu li a:hover {
        color: inherit;
        background-color: #989160
    }
    
    #navmenu li.list_first {
        border-top: none;
    }
    
    
    
    /* ++++++++++++++++++++ Page Footer ++++++++++++++++++++ */
    
    #page_footer {
        padding: 20px 0px;
        font-size: 0.9em;
        font-weight: bold;
    }
    
    
    
    HTML
    Code:
    <!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=iso-8859-1" />
    <title>Counter-Strike template</title>
    
    <link rel="stylesheet" href="style.css" type="text/css" media="screen" />
    
    </head>
    
    <body>
    
        <div id="body_wrapper">
    
    
            <!-- Start of Body Container -->
    
            <div id="body_container">
            <div id="body_container_b">
            <div id="body_container_c">
    
    
                <!-- Start of Page Header -->
    
                <div id="page_header">
    
                    <!-- Website Title -->
    
                    <h1><span class="hidethis">
                    Counter Strike
                    </span></h1>
    
                </div>
    
                <!-- End of Page Header -->
    
    
                <!-- Start of Page Content -->             <div id="page_content">
    
    
                    <p>Don't forgot to check <a href="http://www.freewebsitetemplates.com">free website templates</a> every day, because we add at least one free website template daily.</p>
                    
                    <p>This is a template designed by free website templates for you for free you can replace all the text by your own 
                    text. This is just a place holder so you can see how the site would look like.</p> 
                    
                    
                    <p>If you're looking for beautiful and professionally made templates you can find them at <a href="http://www.templatebeauty.com">Template Beauty</a>.</p>
                    
    
                    <div class="tb_center">
                    <img src="images/cs_img01.gif" width="425" height="176" alt="" />
                    </div>
    <p>You can remove any link to our websites from this template you're  free to use the template without linking 
                    back to us. Don't want your boss to know you used a free website template ;) .</p>
                    
                <p>If you're having problems editing the template please don't hesitate to ask for help on the <a href="http://www.freewebsitetemplates.com/forum/">forum</a>.</p>
                    
                    <p>If you're looking for beautiful and professionally made templates you can find them at <a href="http://www.templatebeauty.com">Template Beauty</a>.</p>
                    <p>To find great hosting providers visit <a href="http://www.webhostingzoom.com">Web Hosting Zoom</a></p>
    
    
                    <!-- Read More Button -->
    
                    <div class="link_readmore">
                    <a href="http://www.freewebsitetemplates.com/" title="Read more"><span class="hidethis">Read more</span></a>
                    </div>
    
                </div>
    
                <!-- End of Page Content -->
    
            </div>
            </div>
            </div>
    
            <!-- End of Body Container -->
    
    
            <!-- Start of Navigation Menu -->
    
            <div id="navmenu">
            <div id="navmenu_b">
            <div id="navmenu_c">
    
                <h3><span class="hidethis">Site Menu:</span></h3>
    
                <ul>
                <li class="list_first"><a href="http://www.freewebsitetemplates.com/">Home</a></li>
                <li><a href="http://www.freewebsitetemplates.com/">Members</a></li>
                <li><a href="http://www.freewebsitetemplates.com/">Events</a></li>
                <li><a href="http://www.freewebsitetemplates.com/">Partners</a></li>
                <li><a href="http://www.freewebsitetemplates.com/">About Us</a></li>
                <li><a href="http://www.freewebsitetemplates.com/">Contact Us</a></li>
                <li><a href="http://www.freewebsitetemplates.com/">Home</a></li>
                <li><a href="http://www.freewebsitetemplates.com/">Members</a></li>
                <li><a href="http://www.freewebsitetemplates.com/">Events</a></li>
                <li><a href="http://www.freewebsitetemplates.com/">Partners</a></li>
                <li><a href="http://www.freewebsitetemplates.com/">About Us</a></li>
                <li><a href="http://www.freewebsitetemplates.com/">Contact Us</a></li>
                </ul>
    
    
            </div>
            </div>
            </div>
    
            <!-- End of Navigation Menu -->
    
    
            <div class="clearthis">&nbsp;</div>
    
            <!-- Start of Page Footer -->
    
            <div id="page_footer">
            Web design by <a href="http://www.freewebsitetemplates.com/">Free Website Templates</a>
            </div>
    
            <!-- End of Page Footer -->
    
        </div>
    
    </body>
    </html>
    and what is a good free html and css editor thats free or cheap?
     
  2. drpepper

    drpepper Active Member

    Joined:
    Nov 13, 2006
    Messages:
    38,076
    Likes Received:
    2
    Location:
    San Antonio
    notepad ++ is great.
     

Share This Page