PDA

View Full Version : Sidebar Include Issue



ish90an
Jun 24th, 2009, 04:36 PM
I am trying to get a sidebar written in another file(leftBar.shtml) to be included in the pages containing the content using SSI. However when I try this the sidebar seems to overlap over the complete page instead of staying in the div block I put it in. The code for the 3 files ie the sidebar, content page and the css for the 2 is as follows:
Sidebar:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
<script src="calendar.js"
type="text/javascript"></script>
<link rel="stylesheet" type="text/css"
href="calendar.css"/>
<link rel="stylesheet" type="text/css" href="mainStyle.css">
</head>
<body>
<div class="sideBtns"><a href="treinamentos.html"><img src="images/treinamentos.JPG" alt="Treinamentos" align="middle" class="imgTreinamentos"></a>
<a href="concursos.html"><img src="images/Concursos.JPG" alt="Concursos"></a></div>
<br /><br />
<div class="calender"><br />
<script language="JavaScript">
document.write("Calender Goes Here");
</script>
</div>
<div class="login">
<form method="POST">
<div class="username">
<label>Login&nbsp;</label>
<input name="text2" type="text" class="username" />

</div>
<div class="pwd">
<label>Senha</label>
<input type="text" class="password" /></div>
<div class="submitBtn">
<input type="button" name="login create" value="Criar Login" align="middle">
<input type="button" name="login" value="Ok" align="middle">
</div>
</form>
</div>
</body>
</html>

Content Page:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
<link rel="stylesheet" type="text/css" href="mainStyle.css"/>
<title>Home</title>
</head>
<body>
<div class="leftBar">
<!--#include file="leftBar.shtml" -->This is where the sidebar ought to go.
</div>

<div class="mainBody">
<div class="MenuMain">
<p class="mainmenu style1">
| Home |
<a href="emprasa.html"> A emprasa | </a><a href="auditoria.html"> Auditoria |</a><a href="consultoria.html"> Consultoria |</a><a href= "treinamentos.html"> Treinamentos |</a><a href="productos.html"> Productos |</a>
<a href="faleConosco.html"> Fale Conosco |</a><a href="sitemap.html"> Mapa do Site |</a><a href="shopping.html"><img src="images/shop.JPG" alt="Shopping Basket" width="18" height="16" class="shopping"></a> </p>
</div>
<div class="rightMain">
<div class="searchBox">
<form method="POST" class="search">
<label class="search">Busca: </label>
<input name="text" type="text" class="search" />
<input type="button" name="okbtn" value="Ok" class="search">
</form>
</div>
<div class="post">
<img src="images/LogoPost1.JPG" alt="Post1">
<div class="postBody">
A M&F Consultoria Ltda foi fundada em 1995 e desde então tem oferecclasso cursos, treinamentos
e consultorias em sistemas de gestão para outras empresas. Os cursos e treinamentos podem
ser tanto presenciais e abertos para empresas, quanto à distância. A M&F Consultoria Ltda foi
fundada em 1995 e desde então tem oferecclasso cursos, treinamentos e consultorias em sistemas
de gestão para outras empresas. Os cursos e treinamentos podem ser tanto presenciais e abertos
para empresas, quanto à distância. </div>
</div>
</div>
</div>
</body>
</html>
CSS:

body{
background-color:#6666CC;
}
p.mainmenu{
text-align:left;
}
div.sideBtns{
padding-left:10%;
padding-right:10%;
}
.btnGap{padding-bottom:0.1em;
padding-top:0em;
margin-bottom:0em;
margin-top:0em;
}
img.shopping{padding-top:0em;
border-left:none;
border-bottom:none;
border-top:none;
border-right:none;}
div.shopping{padding-top:0.1em;
float:right;
position:relative;}
.style1 {
font-size: 15px;
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
}
a:link{color:#FFFFFF;
text-decoration:none
}
a:visited{color:#CCCCCC;
text-decoration:none}
a:active{color:#CCCCCC;
text-decoration:none}
div.leftBar{
float:left;
padding-right:5px;
padding-left:2px;
padding-top:2em;
width:20%;
overflow:hidden;
height:auto;
}
div.login{background-color:#FFFFFF;
text-align:center;
filter: alpha(opacity=80); -moz-opacity: .80;

}
div.username{
padding-bottom:0.2em;
}

div.sideBtns{
float:inherit;
width:inherit;
text-align:center;}
div.submitBtn{
text-align:center;
padding-left:20%;
padding-right:20%;
padding-top:0.5em;
filter: alpha(opacity=100); -moz-opacity: .100;
}
div.pwd{
padding-top:0.2em;
padding-bottom:0px;
margin-bottom:0.3em;
}
div.mainBody{
width:75%;
float:right;
}
div.menu{
height:10%;
padding-left:0.5%;
width:inherit;
}

div.rightMain{padding-top:0px;
margin-top:0px;
width:inherit;}
div.searchBox{
position:inherit;
float:right;
width: 228px;
z-index:2;
}

div.post{
background-position:left top;
background-repeat:no-repeat;
height:1em;
padding-top:0.3em;
}
div.postBody{padding-top:0.5em;
background-image:url(images/postBg.JPG);
background-repeat:repeat}

Could someone help me fix this issue? Any help would be much appreciated. Thanks

abduraooft
Jun 24th, 2009, 05:07 PM
Your final generated source code after include statements must be valid (http://validator.w3.org/#validate_by_input). So you'd only need to have the relevant tags to produce your side bar, in your leftBar.shtml

Have a try by using
<div class="sideBtns"><a href="treinamentos.html"><img src="images/treinamentos.JPG" alt="Treinamentos" align="middle" class="imgTreinamentos"></a>
<a href="concursos.html"><img src="images/Concursos.JPG" alt="Concursos"></a></div>
<br /><br />
<div class="calender"><br />
<script language="JavaScript">
document.write("Calender Goes Here");
</script>
</div>
<div class="login">
<form method="POST">
<div class="username">
<label>Login&nbsp;</label>
<input name="text2" type="text" class="username" />

</div>
<div class="pwd">
<label>Senha</label>
<input type="text" class="password" /></div>
<div class="submitBtn">
<input type="button" name="login create" value="Criar Login" align="middle">
<input type="button" name="login" value="Ok" align="middle">
</div>
</form>
</div>

ish90an
Jun 24th, 2009, 07:28 PM
Thanks, that works now. It also explains why I was getting </head> on the page.
I am now however facing another issue. Firefox seems to be treating my div blocks strangely. The div blocks for each "post" ought to be one after another, but firefox seems to jumble them together. I have given the div blocks of each post the same classes as I plan on putting a WYSIWYG editor in there for adding new content and it will keep the layout same for all new posts. Here's the code for the main content page.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
<link rel="stylesheet" type="text/css" href="mainStyle.css"/>
<title>Home</title>
</head>
<body>
<div class="leftBar">
<!--#include virtual="leftBar.shtml" -->
</div>

<div class="mainBody">
<div class="menuMain">

<p>| Home |
<a href="emprasa.html"> A emprasa | </a><a href="auditoria.html"> Auditoria |</a><a href="consultoria.html"> Consultoria |</a><a href= "treinamentos.html"> Treinamentos |</a><a href="productos.html"> Productos |</a>
<a href="faleConosco.html"> Fale Conosco |</a><a href="sitemap.html"> Mapa do Site |</a><a href="shopping.html"><img src="images/shop.JPG" alt="Shopping Basket" width="18" height="16" class="shopping"></a></p>
<form method="POST" class="search">
<div class="container">
<label class="search"> Busca: </label>
<input name="text" type="text" class="search" />
<input type="button" name="okbtn" value="Ok" class="search"></div>
</form>
</div>

<div class="rightMain">

<div class="post">This is the first post on the page
<img src="images/LogoPost1.JPG" alt="Post1" width="85" height="18">
<div class="postBody">
A M&F Consultoria Ltda foi fundada em 1995 e desde então tem oferecclasso cursos, treinamentos
e consultorias em sistemas de gestão para outras empresas. Os cursos e treinamentos podem
ser tanto presenciais e abertos para empresas, quanto à distância. A M&F Consultoria Ltda foi
fundada em 1995 e desde então tem oferecclasso cursos, treinamentos e consultorias em sistemas
de gestão para outras empresas. Os cursos e treinamentos podem ser tanto presenciais e abertos
para empresas, quanto à distância.
</div>
</div>
<br />
<div class="post">Beginning of 2nd post. Firefox is jumbling this with the first post
<img src="images/LogoPost2.JPG" alt="Post1" width="85" height="18">
<div class="postBody">
<em>Novo parceiro M&F </em>
A M&F Consultoria Ltda foi fundada em 1995 e desde então tem oferecido cursos, treinamentos
e consultorias em sistemas de gestão para outras empresas. Os cursos e treinamentos podem
ser tanto presenciais e abertos para empresas, quanto à distância. Atua nas áreas de qualidade,
meio ambiente, saúde e gestão.
<em>Qualidade em empresas brasileira cresce</em>
A M&F Consultoria Ltda foi fundada em 1995 e desde então tem oferecido cursos, treinamentos
e consultorias em sistemas de gestão para outras empresas. Os cursos e treinamentos podem
ser tanto presenciais e abertos para empresas, quanto à distância.
</div>
</div>
</div>
</div>
</body>
</html>
CSS file:

body{
background-color:#6666CC;
}
p.mainmenu{
text-align:left;
}
div.sideBtns{
padding-left:10%;
padding-right:10%;
}
.btnGap{padding-bottom:0.1em;
padding-top:0em;
margin-bottom:0em;
margin-top:0em;
}
img.shopping{padding-top:0em;
border-left:none;
border-bottom:none;
border-top:none;
border-right:none;}
div.shopping{padding-top:0.1em;
float:right;
position:relative;}
.style1 {
font-size: 15px;
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
}
a:link{color:#FFFFFF;
text-decoration:none
}
a:visited{color:#CCCCCC;
text-decoration:none}
a:active{color:#CCCCCC;
text-decoration:none}
div.leftBar{
float:left;
padding-right:5px;
padding-left:2px;
padding-top:2em;
width:20%;
overflow:hidden;
height:auto;
}
div.login{background-color:#FFFFFF;
text-align:center;
filter: alpha(opacity=80); -moz-opacity: .80;

}
div.username{
padding-bottom:0.2em;
}

div.sideBtns{
float:inherit;
width:inherit;
text-align:center;}
div.submitBtn{
text-align:center;
padding-left:20%;
padding-right:20%;
padding-top:0.5em;
filter: alpha(opacity=100); -moz-opacity: .100;
}
div.pwd{
padding-top:0.2em;
padding-bottom:0px;
margin-bottom:0.3em;
}
div.mainBody{
width:75%;
float:right;
}
div.MenuMain{padding-bottom:0em;
padding-top:0.1em;}

div.rightMain{padding-top:0px;
margin-top:0px;
width:inherit;}
form.search{text-align:right;
width:14em;
padding-top:0em;
padding-bottom:0em;
margin-bottom:0em;
margin-top:0em;
}
div.container{
position:absolute;
width: 227px;
left: 806px;
top: 39px;
}
div.post{
background-position:left top;
background-repeat:no-repeat;
height:1em;
padding-top:0.3em;
padding-bottom:0.5em;
}
div.postBody{padding-top:0.5em;
background-image:url(images/postBg.JPG);
background-repeat:repeat;
overflow:scroll;
}
div.imageTreinamentos{padding-top:0.1em;
padding-bottom:0.5em;}
div.imageConcursos{padding-top:0.1em;
padding-bottom:0.4em;}
Thanks for the help.

abduraooft
Jun 25th, 2009, 09:58 AM
Firefox seems to be treating my div blocks strangely. Could you post a link to your page?

ish90an
Jun 25th, 2009, 09:58 PM
I dont actually have the site online, I am just creating it locally. Here's a screen shot of it in FF though