...

View Full Version : Need help please!



idahoscuba
01-20-2008, 08:09 PM
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:


<!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


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');
}

oesxyl
01-21-2008, 03:39 PM
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.



<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, :)



#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.



#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?verbose=1&uri=http%3A%2F%2Fwww.vrtours360.com%2F

http://jigsaw.w3.org/css-validator/validator?profile=css21&warning=0&uri=http%3A%2F%2Fwww.vrtours360.com%2F

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

PS: I like your site, :)

best regards



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum