Forum Moderators: not2easy
I am very new to all this so do not have a very good understanding of things.
I have recently started setting up my own webiste, which is templated software from EKM. I think the template is in CSS and HTML.
The problm I have is that I want to set the page to display across the whole page 95% would be ideal.
I have manged to change the width but only the outer coloums respond, the rest of the inner stuff stay at a set 1000px. It was this container I changed from 1000px to 95%
Is there an easy way to do this? Code is as below:
<!--
[ekm:font_product_header]
[ekm:font_product_header_size]
[ekm:font_product_body]
[ekm:font_product_body_size]
[ekm:font_mainpage_product_body]
-->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content="[ekm:metadescription]">
<meta name="keywords" content="[ekm:metakeywords]">
<title>[ekm:pagetitle][/ekm:pagetitle]</title>
<style type="text/css">
<!--
body {
margin: 0px;
color: #[ekm:colour_1];
}
a {
color: [ekm:colour_2];
}
a:hover {
color: [ekm:colour_3];
text-decoration: none;
}
a img {
border: 0px solid #FFFFFF;
}
.container {
width: 95%;
text-align: left;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
}
.container {
margin-top: 10px;
}
.container .top .bar {
background-image: url(/ekmps/designs/templates/37000/images/bar_bg.gif);
background-repeat: repeat-x;
background-position: center top;
height: 39px;
max-height: 39px;
}
.container .top .bar .bgl {
background-image: url(/ekmps/designs/templates/37000/images/bar_left.gif);
background-repeat: no-repeat;
background-position: left top;
height: 39px;
max-height: 39px;
}
.container .top .bar .bgr {
background-image: url(/ekmps/designs/templates/37000/images/bar_right.gif);
background-repeat: no-repeat;
background-position: right top;
height: 39px;
max-height: 39px;
}
.container .top .bar .items .logo {
float: left;
margin-right: 10px;
margin-left: 10px;
}
.container .top .bar .items .item {
float: left;
min-width: 20px;
max-width: 140px;
max-height: 39px;
overflow: hidden;
text-align: center;
line-height: 37px;
font-size: 14px;
text-transform: capitalize;
font-weight: bold;
color: [ekm:colour_4];
}
.container .top .bar .items .item a{
color: [ekm:colour_4];
text-decoration: none;
display: block;
padding: 0 10px 0 10px;
}
.container .top .bar .items .item a:hover{
color: [ekm:colour_5];
text-decoration: none;
display: block;
background-image: url(/ekmps/designs/templates/37000/images/bar_bg_hover.gif);
background-position: top;
background-repeat: repeat-x;
}
.container .top .bar .items .border {
float: left;
background-image: url(/ekmps/designs/templates/37000/images/bar_menu_border.gif);
background-repeat: no-repeat;
height: 36px;
width: 1px;
background-position: center top;
}
.blank {
clear: both;
}
.container .top .bar .search{
float: right;
padding-right: 10px;
margin-top: 7px;
margin-bottom: -8px;
}
.container .top .bar .search .inner{
background-image: url(/ekmps/designs/templates/37000/images/search_form.gif);
background-repeat: no-repeat;
background-position: center center;
}
.container .top .bar .search input {
border: 0px solid #000000;
padding-left: 20px;
width: 117px;
background-color: transparent;
height: 16px;
font-size: 12px;
color: #999999;
margin-top: 3px;
margin-left: 10px;
margin-right: 14px;
}
.container .body .left {
float: left;
width: 175px;
}
.container .body .right {
float: right;
width: 175px;
}
.container .body .content {
float: left;
width: 640px;
margin-right: 5px;
margin-left: 5px;
}
.container .body .menu {
width: 173px;
margin-bottom: 15px;
}
.container .body .menu a {
text-decoration: none;
}
.container .body .menu .top {
background-image: url(/ekmps/designs/templates/37000/images/menu_top.gif);
background-position: left top;
height: 24px;
background-color: #2B4976;
background-repeat: no-repeat;
line-height: 25px;
font-size: 12px;
font-weight: bold;
color: [ekm:colour_6];
padding-right: 5px;
padding-left: 5px;
}
.container .body .menu .stuff {
border: 1px solid [ekm:colour_7];
}
.container .body .menu .stuff .item {
padding-top: 3px;
padding-right: 5px;
padding-bottom: 3px;
padding-left: 5px;
}
.container .body .menu .stuff .item a {
display: block;
color: [ekm:colour_8];
text-decoration: none;
}
.container .body .menu .stuff .item a:hover {
display: block;
color: [ekm:colour_9];
text-decoration: none;
background-image: url(/ekmps/designs/templates/37000/images/menu_arrow-Bg.gif);
background-repeat: no-repeat;
background-position: right center;
}
.container .body .menu .stuff .breaker {
margin-right: 3px;
margin-left: 3px;
border-top-width: 1px;
border-top-style: solid;
border-top-color: #CCCCCC;
height: 1px;
margin-top: 2px;
}
.container .news {
margin-bottom: 15px;
background-color: [ekm:colour_10];
height: 25px;
}
.container .news .left{
float: left;
}
.container .news .right{
float: right;
}
.container .news .main{
float: left;
width: 977px;
max-width: 977px;
border-top-width: 1px;
border-bottom-width: 1px;
border-top-style: solid;
border-bottom-style: solid;
border-top-color: [ekm:colour_11];
border-bottom-color: [ekm:colour_11];
line-height: 23px;
padding-left: 8px;
padding-right: 7px;
font-size: 11px;
height: 23px;
max-height: 23px;
overflow: hidden;
}
.container .news a{
display: block;
color: #000000;
text-decoration: none;
}
.container .bread {
width: 638px;
background-color: #f4f4f4;
background-image: url(/ekmps/designs/templates/37000/images/breadcrum_bg.gif);
color: #666666;
}
.container .bread .brmain a{
color: #666666;
text-decoration: none;
}
.container .bread .brleft{
float: left;
}
.container .bread .brright{
float: right;
}
.container .bread .brmain{
float: left;
width: 615px;
height: 23px;
border-top-width: 1px;
border-bottom-width: 1px;
border-top-style: solid;
border-bottom-style: solid;
border-top-color: #c7c7c7;
border-bottom-color: #c7c7c7;
line-height: 25px;
padding-left: 8px;
padding-right: 7px;
font-size: 11px;
}
/* Footer */
.footer {
margin: 20px 0px 20px 0px;
font-size: 10px;
color: [ekm:colour_12];
}
.footer a{
color: #0085cf;
text-decoration: none;
}
.footer a:hover{
text-decoration: underline;
}
.footer .footer_top select {
font-size: 11px;
width: 173px;
}
.footer .footer_top form {
height: 11px;
width: 173px;
float: right;
}
.MultiCurrency{
text-align:center;
margin-bottom: 10px;
}
.MultiCurrency table{
display:inline;
}
--
-->
</style>
<!--[if IE]>
<style>
.container .body .menu .stuff img{
margin-bottom: -3px;
}
.container .news .main{
float: left;
width: 992px;
max-width: 992px;
border-top-width: 1px;
border-bottom-width: 1px;
border-top-style: solid;
border-bottom-style: solid;
border-top-color: [ekm:colour_11];
border-bottom-color: [ekm:colour_11];
line-height: 23px;
padding-left: 8px;
padding-right: 7px;
font-size: 11px;
height: 25px;
max-height: 25px;
}
.container .bread .brmain{
float: left;
width: 630px;
height: 23px;
border-top-width: 1px;
border-bottom-width: 1px;
border-top-style: solid;
border-bottom-style: solid;
border-top-color: #c7c7c7;
border-bottom-color: #c7c7c7;
line-height: 23px;
padding-left: 8px;
padding-right: 7px;
font-size: 11px;
}
.container .news {
margin-bottom: 0px;
background-color: [ekm:colour_10];
height: 25px;
}
</style>
<![endif]-->
</head>
<body>
<div align="center">
<div class="container">
<div class="top">
<div class="logo">[ekm:element] elementreference='37000_MAIN_LOGO'; edit_button='YES';[/ekm:element]</div>
<div class="bar">
<div class="bgl">
<div class="bgr">
<div class="items">
<div class="logo">[ekm:element] elementreference='37000_MAIN_LOGO2'; edit_button='YES';[/ekm:element]</div><div class="border"></div>
<div class="item"><a href="index.asp">Home</a></div><div class="border"></div>
[ekm:loop]
loopcounter_start='0';
loopcounter_end='[ekm:howmany]type='webpages';[/ekm:howmany]';
loopcounter_increment='1';
[loopaction]
[ekm:if]
iftype='webpage';
webpageid='[loopcounter]';
ifvalue='TRUE';
ifthen='<div class="item"><a href="[ekm:seofriendlylink]url_type='WEBPAGE';url_id='[loopcounter]';[/ekm:seofriendlylink]">[ekm:webpagename]webpageid='[loopcounter]';[/ekm:webpagename]</a></div><div class="border"></div>';
ifelse='';
[/ekm:if]
[/loopaction]
[/ekm:loop]
</div>
<div class="search"><div class="inner"><form action="index.asp?function=SEARCH" method="post"><input name="search" type="text" value="Search" onClick="this.value=''"/></form>
</div></div>
<div class="blank"></div>
</div>
</div>
</div>
</div>
<!-- CONTENT HERE -->
<br />
<!-- NEWS -->
[ekm:element] elementreference='37000_TOP_NEWS'; edit_button='YES';[/ekm:element]
<!-- END NEWS -->
<!-- Container Area -->
<div class="body">
<!--[if IE]>
<br />
<![endif]-->
<div class="left">
<!-- LEFT -->
<div class="menu">[ekm:element] elementreference='37000_LEFT_SUPPORT'; edit_button='YES';[/ekm:element]</div>
<div class="menu">
<div class="top">Categories</div>
<div class="stuff">
[ekm:showdata]
' This tag is going to output the top tabs which are all the top level categories
data='category';
rows='';
cols='';
location='0';
font_formatting='no';
editbuttons='YES';
output_start='';
output_row_start='';
output_column_start='';
output_item='<div class="item"><a href="[ekm:seofriendlylink] url_type='CATEGORY'; url_id=[id]; [/ekm:seofriendlylink]">[name]</a></div>';
output_column_end='';
output_row_end='';
output_end='';
[/ekm:showdata]
</div>
</div>
<!-- SUBS -->
[ekm:showdata]
' Data to Show
data='categories';
location='0';
' Basic Layout & Navigation
cols='1';
page_navigation='no';
' Advanced Data Manipulation
orderby='orderlocation, name';
skiprecords='0';
excludelist='';
font_formatting='no';
' Output Format
output_start='';
output_row_start='';
output_column_start='';
output_item='
[ekm:nested_if]
iftype="is_selected";
ifvalue="CATEGORY([id])";
ifthen="
[ekm:nested_nested_showdata]
data=(categories);
location=([id]);
cols=(1);
rows=(500);
page_navigation=(no);
font_formatting=(no);
output_start=(<div class="menu"><div class="top">Sub-Categories</div><div class="stuff">);
output_row_start=();
output_column_start=();
output_item=(<div class="item">[nested_nested_name]</div>);
output_column_end=();
output_row_end=();
output_end=(</div></div>);
element_replace=(null);
[/ekm:nested_nested_showdata]
";
ifelse="";
[/ekm:nested_if]
';
output_column_end='';
output_row_end='';
output_end='';
' Element Replace
element_replace='null';
[/ekm:showdata]
<!-- END SUBS -->
<!-- END LEFT -->
</div>
<div class="content">
<!-- MAIN CONTENT -->
<!-- BREADCRUM -->
<div class="bread">
<div class="brleft"><img src="/ekmps/designs/templates/37000/images/news_left.gif" /></div>
<div class="brmain">[ekm:location][/ekm:location]</div>
<div class="brright"><img src="/ekmps/designs/templates/37000/images/news_right.gif" /></div>
<div class="blank"></div>
</div>
<!-- BACK BREADCRUM -->
<!-- CONTENT -->
[ekm:content]
<!-- END CONTENT -->
<!-- END MAIN CONTENT -->
</div>
<div class="right">
<!-- RIGHT -->
<div class="menu"><div class="top">Mini Cart</div>
<div class="stuff">
[ekm:minicart]
' Basic Setup
style='custom';
nocartmessage='<div align="center" style="font-weight: bold; font-size: 14px; padding: 20px;">Your Cart is Empty</div>';
maxcharacters='15';
' Custom Style Layout
output_start='';
output_end='<div class="item"><strong><a href="index.asp?FUNCTION=CART">View Cart</a></strong></div><div class="item"><strong><a href="index.asp?FUNCTION=CHECKOUT">Checkout</a></strong></div>';
output_contents_start='';
output_contents_end='';
output_cart_contents='<div class="item">[product_name] - [product_price]</div>';
output_totals='<div class="breaker"></div><div class="item"><strong>Total</strong> - [total]</div><div class="breaker"></div>';
[/ekm:minicart]
<div class="MultiCurrency">
[ekm:multicurrency]
displaytype='flags';
title='yes';
titlecolour='#313131';
[/ekm:multicurrency]
</div>
</div></div>
<div class="menu">
<div class="top">Special Offers</div>
<div class="stuff" style="padding: 3px;">
[ekm:showdata]
' This tag is going to output the top tabs which are all the top level categories
data='specialoffers';
rows='1';
cols='1';
page_navigation='no';
location='0';
font_formatting='no';
editbuttons='YES';
output_start='';
output_row_start='';
output_column_start='';
output_item='<div align="center" style="padding-bottom: 3px;">[name]</div><div align="center" style="padding-bottom: 3px;">[image]</div><div align="center">Our Price: [price]</div><br />';
output_column_end='';
output_row_end='';
output_end='';
[/ekm:showdata]
</div>
</div>
<div class="menu">
<div class="top">[ekm:elementname]elementreference='37000_RIGHT_1';[/ekm:elementname]</div>
<div class="stuff">
[ekm:element] elementreference='37000_RIGHT_1'; edit_button='YES';[/ekm:element]
</div>
</div>
<div class="menu">
<div class="top">[ekm:elementname]elementreference='37000_RIGHT_2';[/ekm:elementname]</div>
<div class="stuff">
[ekm:element] elementreference='37000_RIGHT_2'; edit_button='YES';[/ekm:element]
</div>
</div>
<!-- END RIGHT -->
</div>
</div>
<!-- END Container -->
<div class="blank"></div>
<div class="footer">
<div class="footer_top">
<div style="float: right; width:173px; text-align: right; height: 20px;">[ekm:category_jumplist]depth='1'; default_value='Jump to a Category';[/ekm:category_jumplist]</div>
<div style="width: 500px; float: left;">[ekm:element] elementreference='37000_FOOTER_2'; edit_button='YES';[/ekm:element]</div>
<div class="blank"></div>
</div>
<div style="border-bottom: solid 1px #cccccc; margin-top: 10px; margin-bottom: 10px;"></div>
<div class="footer_bottom">
<div style="float: left; width:300px;">[ekm:element] elementreference='37000_FOOTER_1'; edit_button='YES';[/ekm:element]</div>
<div style="float: right; width:600px; text-align: right;"><a href="index.asp">Home</a> ¦ <a href="terms.asp">Terms and Condition</a> ¦ <a href="sitemap.asp">Sitemap</a></div>
</div>
</div>
</div>
</div>
<br />
<br />
</body>
</html>
[edited by: eelixduppy at 3:58 pm (utc) on Mar. 27, 2009]
[edit reason] disabled smileys [/edit]
Do you want a design which fills 95% of a particular window size, for example 640, 800 or 1024px, or one that adapts to any size?
I guess one that adapts to any size. I did spend 9 hours yesterday changing various widths, but everytime I changed anything but the first container I got a screen where the main content would appear under the sidebars etec!
If you use the FireFox browser try installing the FireBug add on. This will allow you to click on different areas of your template and see which styles are applied to them. You can even edit the styles to see what effect they have.
I took a quick look at it, you have a left and right col and content in the middle, they are all fixed width, so step one is to change them to %. Then work through their contents.
It's going to be a lot of work. If it was me, I would look for a ready made fluid template!
