Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New to the CF scene
    Join Date
    Jan 2008
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Need help please!

    Hi,
    I am new to web design. I'm not looking for someone to do it for me, but to point me in the right direction.

    I have created a site from a template that I have modified. www.vrtours360.com I have the site working how I want now, but I need to add some space on the left to place adds.

    As you can see the middle area is dynamic from a mysql. I would like a 200px column on the left that stays static like the header at the top does.
    The page is controlled by 2 files main.html and style.css . I have played around with both but always end up blowing the rest of the page away!

    Any help or advice would be greatly appreciated.

    I hope this is the correct place to post this........if I have posted incorrectly let me know where to post.

    Thanks

    main.html:

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <link rel="shortcut icon" href="/images/favicon.ico" />
    <title>{site_title}</title>
    <style type="text/css">
    <!--
    .style1 {font-size: 9px}
    -->
    </style>
    {load_meta_keywords} {load_meta_description} {load_css_style} {license_tag} {load_js}
    <meta name="copyright" content="Open Inmo NET " />
    <meta name="revisit-after" content="7 days" />
    <meta name="distribution" content="GLOBAL" />
    <meta name="rating" content="General" />
    <meta name="robots" content="ALL, INDEX, FOLLOW" />
    <meta http-equiv="imagetoolbar" content="no" />
    <meta http-equiv="Content-Script-Type" content="javascript" />
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    </head><body>
    <div id="head">
      <div id="title"></div>
      <div id="menu">
        <ul>
          <li><a href="{page_link_7}" title="Create a Tour ">Create a Tour</a></li>
          <li><a href="{page_link_6}" title="Portfolio">Portfolio</a></li>
          <li><a href="{page_link_5}" title="Services">Services</a></li>
          <li><a href="{page_link_17}" title="Contact Us">Contact Us</a></li>
        </ul>
      </div>
    </div>
    <div id="body_wrapper">
      <div id="body">
        <div id="left">
          <div class="top"></div>
          <div class="content"> {content} </div>
          <div class="bottom"></div>
        </div>
        <div id="right">
          <div class="top"></div>
          <div class="content">
            <h4>Menu</h4>
            <ul>
              <li><a href="{url_index}" title="Home Page ">Home Page</a></li>
              <li><a href="{page_link_17}" title="Contact Us">Contact Us</a></li>
              <li><a href="{url_search}" title="Search Listings">Search Listings</a></li>
              <li><a href="{url_search_rental}" title="Rental Search">Search Rentals</a></li>
              <li><a href="{url_search_results}" title="View All Listings">View All Listings</a></li>
            </ul>
            <hr />
            <h4>Quick Search</h4>
            <ul>
              <li><a href="{baseurl}/index.php?action=search_step_2&amp;pclass[]=1" title="Homes">Homes</a></li>
              <li><a href="{baseurl}/index.php?action=search_step_2&amp;pclass[]=3" title="Farms">Farms</a></li>
              <li><a href="{baseurl}/index.php?action=search_step_2&amp;pclass[]=4" title="Commercial">Commercial</a></li>
              <li><a href="{baseurl}/index.php?action=search_step_2&amp;pclass[]=2" title="Land">Land</a></li>
              <li><a href="{url_view_agents}" title="">View Agents</a></li>
            </ul>
            <hr />
            <h4>Members</h4>
            <ul>
              {check_member}
              <li><a href="{url_edit_profile}" title="Edit Profile">Edit Profile</a></li>
              <li><a href="{url_view_favorites}" title="View Favorites">View Favorites</a></li>
              <li><a href="{url_view_saved_searches}" title="Saved Searches">Saved Searches</a></li>
              <li><a href="{url_logout}" title="Logout">Logout</a></li>
              {/check_member} {check_guest}
              <li><a href="{url_agent_signup}" title="Agent Signup">Agent Signup</a></li>
              <li><a href="{url_agent_login}" title="Agent Login">Agent Login</a></li>
              <li><a href="{baseurl}/admin/index.php?action=add_listing_property_class" title="Add Listing">Add Listing</a></li>
              {/check_guest}
            </ul>
          </div>
          <div class="bottom"></div>
        </div>
        <div class="clearer"></div>
      </div>
      <div class="clearer"></div>
    </div>
    <div id="footer">Property info deemed reliable but not guaranteed.<br>
    &copy Copyright 2008 <a href="http://www.vrtours360.com">VR Tours360</a></div>
    </body>
    </html>

    style.css

    Code:
    body
    {
      background: #e4e4e4 url('{template_url}/images/background.gif') repeat-x top left;
    	margin: 0px; 
    	padding: 0px;
    	font-family: "Trebuchet MS", Verdana, sans-serif;
    	font-size: 12px;
    }
    
    #head
    {
      background: #e4e4e4 url('{template_url}/images/head_empty.gif') no-repeat top left;
    	width: 747px;
    	height: 117px;
    	padding: 0px;
    	margin: 0 auto;
    }
    
    #head #title
    {
    	float: left;
     	font-size: 30px;
    	color: #F0EBE7;
    	padding: 35px 0px 0px 30px;
    
    }
    
    #body_wrapper
    {
      background: url('{template_url}/images/body_cont.jpg') repeat-y top left;
    	margin: 0px auto;
    	width: 747px;
    	display: block;
    }
    
    
    #body
    {
      background: url('{template_url}/images/body_top.jpg') no-repeat top left;
    	float: left;
    	padding: 10px 20px 0px 20px;
    	min-height: 343px;
    	display: block;
    }
    
    #end_body
    {
      background: url('{template_url}/images/footer.jpg') no-repeat top left;
    	margin: 0px auto;
    	width: 747px;
    	height: 37px;
    	display: block;
    }
    
    .clearer
    {
      clear: both;
    	height: 1px;
    }
    
    #all
    {
      width: 707px;
    	float: left;
    	padding: 0px;
    	background: url('{template_url}/images/all_middle.gif') repeat-y top left;
    }
    
    #all .top
    {
      background: url('{template_url}/images/all_top.gif') no-repeat top left;
    	width: 707px;
    	height: 18px;
    	padding: 0px;
    	margin: 0px;
    }
    
    #all .bottom
    {
      background: url('{template_url}/images/all_bottom.gif') no-repeat bottom left;
    	width: 707px;
    	height: 21px;
    	padding: 0px;
    	margin: 0px;
    }
    
    #left
    {
      width: 538px;
    	float: left;
    	padding: 0px;
    	margin: 0px;
    	background: url('{template_url}/images/left_middle.gif') repeat-y top left;
    }
    
    #left .top
    {
      background: url('{template_url}/images/left_top.gif') no-repeat top left;
    	width: 538px;
    	height: 18px;
    	padding: 0px;
    	margin: 0px;
    }
    
    #left .bottom
    {
      background: url('{template_url}/images/left_bottom.gif') no-repeat bottom left;
    	width: 538px;
    	height: 21px;
    	padding: 0px;
    	margin: 0px;
    }
    
    #right
    {
      width: 169px;
    	float: right;
    	padding: 0px;
    	margin: 0px;
    	background: url('{template_url}/images/right_middle.gif') repeat-y top left;
    }
    
    #right .top
    {
      background: url('{template_url}/images/right_top.gif') no-repeat top left;
    	padding: 0px;
    	margin: 0px;
    	width: 169px;
    	height: 18px;
    }
    
    #right .bottom
    {
      background: url('{template_url}/images/right_bottom.gif') no-repeat bottom left;
    	padding: 0px;
    	margin: 0px;
    	width: 169px;
    	height: 21px;
    }
    
    .content 
    {
      padding: 0px 15px;
    }
    
    #footer
    {
      margin: 0 auto; 
    	width: 747px;
    	text-align: center;
    	color: #B05128;
    	font-weight: bold;
    }
    
    #footer a
    {
     color: #B05128;
    }
    
    #right ul 
    {
    	margin: 0px;
    	padding: 0px;
    	list-style: none;
    }
    
    #right ul li 
    {
    	margin: 0px;
    	padding: 0px;
    	list-style: none;
    	display: block;
    }
    
    #right ul a 
    {
    	display: block;
    	width: 125px;
    	background: #c7b8a4;
    	color: #000;
    	padding: 3px;
    	padding-left: 10px;
    	text-decoration: none;
    	margin: 0px;
    	border: 0px;
    }
    
    #right ul a:hover 
    {
    	color: #FFFFFF;
    	background: #822C0F;
    }
    
    /* Navigation */
    
    #menu 
    {
      float: right;
    	margin: 80px 20px 0px 0px;
    }
    
    #menu ul 
    {
    	margin: 0;
    	padding: 0;
    	white-space : nowrap;
    }
    
    #menu ul li 
    {
    	margin: 0;
    	padding: 0;
    	display: block;
    	float:left;
    	text-align: center;
    }
    
    #menu ul li a 
    {
    	color : #fff;
    	background-color: transparent;
    	text-decoration : none;
    	font-weight: bold;
    	display: block;
    	border-style:none;
    }
    
    #menu ul li a:link, #menu ul li a:visited 
    {
    	background-image: url('{template_url}/images/menu_item2.gif');
    	background-repeat: no-repeat;
    	height: 26px;
    	width: 94px;
    	line-height: 26px;
    	padding-top: 7px;
    }
    
    #menu ul li a:hover, #menu ul li a:active 
    {
    	background-image: url('{template_url}/images/menu_item2.gif');
    	background-repeat: no-repeat;
    	background-position: 0px -33px;
    	height: 29px;
    	width: 94px;
    	line-height: 29px;
    	padding-top: 4px;
    }
    
    #menu ul li.active a:hover, #menu ul li.active a:active, #menu ul li.active a:link, #menu ul li.active a:visited 
    {
    	background-image: url('{template_url}/images/menu_item2.gif');
    	background-repeat: no-repeat;
    	background-position: 0px -66px;
    	height: 29px;
    	width: 94px;
    	line-height: 29px;
    	padding-top: 4px;
    	color: #B05128;
    }
    
    
    /*  Headers  */
    h1 
    {
    	padding: 0px;
    	margin: 0px;
    	margin-bottom: 5px;
    	color: #D96B11;
    	background-color: transparent;
    	font-size: 1.6em;
    	font-weight: bold;
    }
    
    h2 
    {
    	padding: 0px;
    	margin: 0px;
    	margin-bottom: 5px;
    	color: #333;
    	background-color: transparent;
    	font-size: 1.5em;
    	font-weight: bold;
    }
    
    h3 
    {
    	padding: 0px;
    	margin: 0px;
    	margin-bottom: 5px;
    	color: #76b7d7;
    	background-color: transparent;
    	font-size: 1.4em;
    	font-weight: bold;
    }
    
    h4 
    {
    	padding: 0px;
    	margin: 0px;
    	margin-bottom: 5px;
    	color: #333;
    	background-color: transparent;
    	font-size: 1.3em;
    	font-weight: bold;
    }
    
    h5 
    {
    	color: #9ad5f3;
    	background-color: transparent;
    	padding: 0px;
    	font-size: 1.2em;
    	font-weight: bold;
    	margin: 0px;
    	padding: 0px;
    	margin-bottom: 5px;
    }
    
    h6 
    {
    	padding: 0px;
    	margin-top: 0px;
    	margin-right: 0px;
    	margin-bottom: 5px;
    	margin-left: 0px;
    	color: #D96B11;
    	font-size: 1.1em;
    	font-weight: normal;
    	line-height: 150&#37;;
    }
    
    /* HTML Tags */
    
    code
    {
      display: block;
    	margin: 5px;
    	padding: 5px;
    	color: #ad4c21;
    	border: 1px dashed;
    	background: #f0ebe7;
    	font-family: Courier, 'Courier New', 'Andale Mono', Monaco, monospace;
    
    }
    
    a
    {
      color: #AD4C21;
    	text-decoration: none;
    	border-bottom: 1px dashed;
    	padding-bottom: 0px;
    }
    
    a:hover
    {
    	color: #000;
    }
    
    hr
    {
      border: 0px;
      border-bottom: 1px #F0EBE7 dashed;
    	height: 1px;
    }
    
    #left hr, #all hr
    {
      margin: 10px 0px;
    }
    
    form
    {
      margin: 0px;
    	padding: 0px;
    }
    
    form .item
    {
      clear: left;
    	border-top: 1px solid #EEE;
    	margin: 3px;
    }
    
    form .label
    {
      float: left;
    	clear: left;
    	width: 150px;
    }
    
    input, textarea, select
    {
      color: #AD4C21;
    	border: 1px solid;
    	background: #F0EBE7;
    	margin: 3px;
    	padding: 2px;
    }
    
    blockquote {
    	margin: 5px;
      background: transparent url('{template_url}/images/quotes.gif') left top no-repeat;
    	padding-left: 37px;
    }
    
    blockquote[cite]:after {
    	content: "Quote from: " attr(cite);
    	display: block;
    	border-top: 1px solid #999;
    	color: #999;
    	margin: 1em 0 0;
    	padding: .5em 0 0;
    	font-size: .8em;
    	font-weight: bold;
    }
    
    del 
    {
      color: #800;
    	text-decoration: line-through;
    }
    
    dt
    {
      font-weight: bold;
    	font-size: 1.05em;
    	color: #ad4c21;
    }
    
    dd 
    {
      margin-left: 15px;
    }
    
    /* adds a space and then a graphic after any external (i.e. off-site) links */
    a[target]:after{
    	content: " " url('{template_url}/images/externalpage.gif');
    }
    Last edited by rmedek; 01-21-2008 at 01:29 AM. Reason: code tags

  • #2
    Master Coder
    Join Date
    Dec 2007
    Posts
    6,682
    Thanks
    436
    Thanked 890 Times in 879 Posts
    Quote Originally Posted by idahoscuba View Post
    Hi,
    I am new to web design. I'm not looking for someone to do it for me, but to point me in the right direction.
    I hope this is the correct place to post this........if I have posted incorrectly let me know where to post.
    the template use fixed width for many elements. Some of them break the layout when you try to insert something.

    Code:
    <body>
    
    <div id="head">
    ....
    </div>
    <div id="body_wrapper">
    ....
    </div>
    <div id="footer">
    </div>
    
    </body>
    </html>
    this 3 divs has 747px width and probably this must be over 747 + 200 to fit with the new inserted element, margin and padding
    This will be the first step,

    Code:
    #head {
      background: #e4e4e4 url('{template_url}/images/head_empty.gif') no-repeat top left;
    	width: 747px;
    	height: 117px;
    	padding: 0px;
    	margin: 0 auto;
    }
    
    #body_wrapper {
      background: url('{template_url}/images/body_cont.jpg') repeat-y top left;
    	margin: 0px auto;
    	width: 747px;
    	display: block;
    }
    
    #footer {
      margin: 0 auto; 
    		width: 747px;
    	text-align: center;
    	color: #B05128;
    	font-weight: bold;
    }
    there are also other elements with fixed with, and probably you'll need to change some of them, but it's hard to say now what and how.

    Code:
    #all
    {
      width: 707px;
    	float: left;
    	padding: 0px;
    	background: url('{template_url}/images/all_middle.gif') repeat-y top left;
    }
    
    #all .top
    {
      background: url('{template_url}/images/all_top.gif') no-repeat top left;
    	width: 707px;
    	height: 18px;
    	padding: 0px;
    	margin: 0px;
    }
    
    #all .bottom
    {
      background: url('{template_url}/images/all_bottom.gif') no-repeat bottom left;
    	width: 707px;
    	height: 21px;
    	padding: 0px;
    	margin: 0px;
    }
    
    #left
    {
      width: 538px;
    	float: left;
    	padding: 0px;
    	margin: 0px;
    	background: url('{template_url}/images/left_middle.gif') repeat-y top left;
    }
    
    #left .top
    {
      background: url('{template_url}/images/left_top.gif') no-repeat top left;
    	width: 538px;
    	height: 18px;
    	padding: 0px;
    	margin: 0px;
    }
    
    #left .bottom
    {
      background: url('{template_url}/images/left_bottom.gif') no-repeat bottom left;
    	width: 538px;
    	height: 21px;
    	padding: 0px;
    	margin: 0px;
    }
    
    #right
    {
      width: 169px;
    	float: right;
    	padding: 0px;
    	margin: 0px;
    	background: url('{template_url}/images/right_middle.gif') repeat-y top left;
    }
    
    #right .top
    {
      background: url('{template_url}/images/right_top.gif') no-repeat top left;
    	padding: 0px;
    	margin: 0px;
    	width: 169px;
    	height: 18px;
    }
    
    #right .bottom
    {
      background: url('{template_url}/images/right_bottom.gif') no-repeat bottom left;
    	padding: 0px;
    	margin: 0px;
    	width: 169px;
    	height: 21px;
    }
    
    #right ul a 
    {
    	display: block;
    	width: 125px;
    	background: #c7b8a4;
    	color: #000;
    	padding: 3px;
    	padding-left: 10px;
    	text-decoration: none;
    	margin: 0px;
    	border: 0px;
    }
    
    #menu ul li a:link, #menu ul li a:visited 
    {
    	background-image: url('{template_url}/images/menu_item2.gif');
    	background-repeat: no-repeat;
    	height: 26px;
    	width: 94px;
    	line-height: 26px;
    	padding-top: 7px;
    }
    
    #menu ul li a:hover, #menu ul li a:active 
    {
    	background-image: url('{template_url}/images/menu_item2.gif');
    	background-repeat: no-repeat;
    	background-position: 0px -33px;
    	height: 29px;
    	width: 94px;
    	line-height: 29px;
    	padding-top: 4px;
    }
    
    #menu ul li.active a:hover, #menu ul li.active a:active, #menu ul li.active a:link, #menu ul li.active a:visited 
    {
    	background-image: url('{template_url}/images/menu_item2.gif');
    	background-repeat: no-repeat;
    	background-position: 0px -66px;
    	height: 29px;
    	width: 94px;
    	line-height: 29px;
    	padding-top: 4px;
    	color: #B05128;
    }
    
    
    /*  Headers  */
    h1 
    {
    	padding: 0px;
    	margin: 0px;
    	margin-bottom: 5px;
    	color: #D96B11;
    	background-color: transparent;
    	font-size: 1.6em;
    	font-weight: bold;
    }
    
    h2 
    {
    	padding: 0px;
    	margin: 0px;
    	margin-bottom: 5px;
    	color: #333;
    	background-color: transparent;
    	font-size: 1.5em;
    	font-weight: bold;
    }
    
    h3 
    {
    	padding: 0px;
    	margin: 0px;
    	margin-bottom: 5px;
    	color: #76b7d7;
    	background-color: transparent;
    	font-size: 1.4em;
    	font-weight: bold;
    }
    
    h4 
    {
    	padding: 0px;
    	margin: 0px;
    	margin-bottom: 5px;
    	color: #333;
    	background-color: transparent;
    	font-size: 1.3em;
    	font-weight: bold;
    }
    
    h5 
    {
    	color: #9ad5f3;
    	background-color: transparent;
    	padding: 0px;
    	font-size: 1.2em;
    	font-weight: bold;
    	margin: 0px;
    	padding: 0px;
    	margin-bottom: 5px;
    }
    
    h6 
    {
    	padding: 0px;
    	margin-top: 0px;
    	margin-right: 0px;
    	margin-bottom: 5px;
    	margin-left: 0px;
    	color: #D96B11;
    	font-size: 1.1em;
    	font-weight: normal;
    	line-height: 150&#37;;
    }
    
    /* HTML Tags */
    
    code
    {
      display: block;
    	margin: 5px;
    	padding: 5px;
    	color: #ad4c21;
    	border: 1px dashed;
    	background: #f0ebe7;
    	font-family: Courier, 'Courier New', 'Andale Mono', Monaco, monospace;
    
    }
    
    a
    {
      color: #AD4C21;
    	text-decoration: none;
    	border-bottom: 1px dashed;
    	padding-bottom: 0px;
    }
    
    a:hover
    {
    	color: #000;
    }
    
    hr
    {
      border: 0px;
      border-bottom: 1px #F0EBE7 dashed;
    	height: 1px;
    }
    
    #left hr, #all hr
    {
      margin: 10px 0px;
    }
    
    form
    {
      margin: 0px;
    	padding: 0px;
    }
    
    form .item
    {
      clear: left;
    	border-top: 1px solid #EEE;
    	margin: 3px;
    }
    
    form .label
    {
      float: left;
    	clear: left;
    	width: 150px;
    }
    
    input, textarea, select
    {
      color: #AD4C21;
    	border: 1px solid;
    	background: #F0EBE7;
    	margin: 3px;
    	padding: 2px;
    }
    
    blockquote {
    	margin: 5px;
      background: transparent url('{template_url}/images/quotes.gif') left top no-repeat;
    	padding-left: 37px;
    }
    
    blockquote[cite]:after {
    	content: "Quote from: " attr(cite);
    	display: block;
    	border-top: 1px solid #999;
    	color: #999;
    	margin: 1em 0 0;
    	padding: .5em 0 0;
    	font-size: .8em;
    	font-weight: bold;
    }
    
    del 
    {
      color: #800;
    	text-decoration: line-through;
    }
    
    dt
    {
      font-weight: bold;
    	font-size: 1.05em;
    	color: #ad4c21;
    }
    
    dd 
    {
      margin-left: 15px;
    }
    
    /* adds a space and then a graphic after any external (i.e. off-site) links */
    a[target]:after{
    	content: " " url('{template_url}/images/externalpage.gif');
    }
    I don't know how hard is to work with this template but try to make and keep the code valid:

    http://validator.w3.org/check?verbos...ours360.com%2F

    http://jigsaw.w3.org/css-validator/v...ours360.com%2F

    this will help you to fix the broken things more easy.

    PS: I like your site,

    best regards
    Last edited by oesxyl; 01-21-2008 at 03:47 PM.


  •  

    Posting Permissions

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