Error en mi código HTML + CSS (no sé que puede ser) Ya no se que hacer, lo miro y remiro y no soy capaz de saber el por qué.
Les cuento.
Web: www.gazteoiartzun.net
Problema: lateral de la web, donde están colocados los banner pequeñitos. Si pongo 5 banners me cierra el recuadro perfectamente si pongo (como está ahora) 7 banners, se me queda abierta como podeís ver ahora.
El código en cuestión es el siguiente:
Código:
y el archivo css, es éste:<div class="sidebox">
<div class="boxhead"><h3><?php _e('Links'); ?></h3></div>
<div class="boxbody">
<a target="_blank" href="http://www.oiartzun.org/"><img border="0" src="http://www.gazteoiartzun.net/wp-content/uploads/2006/03/Oiartzun.jpg" alt="Oiartzungo Udala"></a>
<a target="_blank" href="http://www.elorsoro.com/"><img border="0"src="http://www.gazteoiartzun.net/wp-content/uploads/2006/03/Elorsoro.jpg" alt="Elorsoro Udal Kiroldegia"></a>
<a target="_blank" href="http://www.arritxulo.org/"><img border="0" src="http://www.gazteoiartzun.net/wp-content/uploads/2006/03/Arritxulo.jpg" alt="Arritxulo Udal Aterpetxea"></a>
<a target="_blank" href="http://www.oiartzunke.com/"><img border="0" src="http://www.gazteoiartzun.net/wp-content/uploads/2006/03/oiartzun-kirol-elkartea.jpg" alt="Oiartzun Kirol Elkartea"></a>
<a target="_blank" href="http://personales.ya.com/kenpokai/"><img border="0" src="http://www.gazteoiartzun.net/wp-content/uploads/2006/05/kenpo-kai.jpg" alt="Kenpo-Kai"></a>
<a target="_blank" href="http://www.ikastola.com/ikasweb/Haurtzaro"><img border="0" src="http://www.gazteoiartzun.net/wp-content/uploads/2006/05/Haurtzaro.jpg" alt="Haurtzaro Ikastola"></a>
<a target="_blank" href="http://www.elizalde.info/"><img border="0" src="http://www.gazteoiartzun.net/wp-content/uploads/2006/05/Elizalde.jpg" alt="Elizalde Herri Eskola"></a>
</div>
</div>
Código:
Como habreís adivinado no soy nada expertoen esto (primerizo en programación /*
Theme Name: Travelogue
Theme URI: http://www.podq.com/travelogue/
Description: Designed with a traveler in mind, or someone with a chronologically-based blog, this theme is attractive and customizable. Don't forget to change the picture in the polaroid!
Author: Josh Lyman
Author URI: http://www.podq.com/
Version: 1.0.3
Released under the GPL. The included font, "Dear Joe," is released by joebob of http://www.joebob.nl/,
and is free to use for any purposes. The default picture supplied in the polaroid header image is
copyrighted by Josh Lyman. I don't care if you keep it, but recommend you change it. And please don't
take credit for it either! ;-) Have fun!.
*/
/* Color Schemes
-------------
Orange Dark: #AA3511
Orange Light: #E0D3CD
GreenBlue Dark: #618788
Green Light: #D4DBD3
Blue Light: #FF0000 */
body {
background-image: url('images/background.jpg');
background-repeat: repeat-x;
background-color: #FFFFFF;
margin: 0;
font-family: "Century Gothic", Verdana, Arial, Helvetica, sans-serif;
}
#polaroid {
position:absolute;
left:0px;
top:0px;
width:279px;
height:285px;
}
/* If you wish to have a random polaroid image popped in, copy the .polaroid1 style and rename it to .polaroid2, .polaroid3, etc.
Also don't forget to go into header.php and on line 22, change the rand(1,1) number to rand(1,X) where X is the number of
polaroid pictures you have defined in your stylesheet. For each polaroid, change the url of the background to the appropriate pic. */
.polaroid1 {
background: url('images/polaroid.jpg') no-repeat;
}
#header-img {
position:absolute;
left:279px;
top:0px;
width:486px;
height:184px;
}
#subheader {
position:absolute;
left:279px;
top:184px;
width:60%;
height:101px;
margin: 3px 5px 0 35px;
}
#subheader #search {
float: left;
width: 45%;
}
#subheader #cats {
float: right;
width: 45%;
}
#sidebar {
position:absolute;
left:0px;
top:285px;
width:279px;
margin: 10px 0 5px 3px;
}
#content {
right:0;
margin: 285px 20px 10px 300px;
padding:0;
z-index:0;
}
#rightcolumn {
float:right;
width: 125px;
height: 605px;
margin:0 0 10px 20px;
}
#footer {
text-align: center;
font-size:.7em;
border: 1px solid #D4DBD3;
width:100%;
height:100%;
}
.post {
border-top: 1px #E0D3CD dotted;
padding: 7px 3px 1px 4px;
}
.comments {
margin: 0 0 5px 5%;
padding-left: 8px;
/*border-left: 3px #618788 solid;
border-bottom: 1px #618788 solid; */
}
/* Text Styles */
h1, h2, h3 {
font-weight: bold;
color: #AA3511;
}
.post_head {
margin-top:-14px;
}
p {
font-size: .8em;
}
a:link {
color: #AA3511;
text-decoration:underline;
}
a:visited {
color: #AB7303;
text-decoration:none;
border-bottom: 1px #AB7303 dashed;
}
a:hover {
color: #FF0000;
text-decoration:underline;
}
a img {
border: none;
}
.pagetitle {
text-align:center;
text-decoration:underline;
}
.entry li {
font-size: smaller;
}
/* End Typography & Colors */
/* Calendar Styles */
#wp-calendar {
border: 2px solid #A6A6A6;
text-align: center;
margin: 0 auto;
padding: 0;
font: bold 1.0em 'Century Gothic', Verdana, Arial, Sans-Serif;
}
#wp-calendar caption {
font: bold 1.2em 'Century Gothic', Verdana, Arial, Sans-Serif;
text-align: center;
background-color: #AA3511;
color:#FFFFFF;
border: 2px solid #A6A6A6;
border-bottom: none;
margin: 0 auto;
}
#wp-calendar tbody, #wp-calendar tfoot {
background-color: #FF9900;
padding: 0;
margin: 0;
}
#wp-calendar th {
padding: 0;
}
/* End Calendar Styles */
/* Postit Date */
.post .post_cal {
border: 1px solid #A6A6A6;
text-align: center;
width: 50px;
float: left;
margin: 0 10px 5px 0;
}
.post_cal .dayname {
background-color: #AA3511;
border-bottom: 1px solid #A6A6A6;
color: #FFFFFF;
font-size: smaller;
font-weight: bolder;
width: 100%;
}
.post_cal .daynum {
border-bottom: 1px solid #A6A6A6;
font-size: xx-large;
font-weight: bold;
width: 100%;
}
.post_cal .month, .post_cal .year {
font-size: smaller;
width: 100%;
}
.postmetadata {
font-weight: bold;
}
/* End Postit Date */
/* Sidebar Styles */
#sidebar ul {
list-style-type: none;
margin: 0 5px 10px 10px;
font-size: smaller;
}
#sidebar ul li h3 {
font-size: 1.35em;
}
#sidebar ul li ul li {
list-style-type: square;
}
/* End Sidebar Styles */
/* Seriously hacked out code for cool boxes */
.sidebox {
margin: 0 auto; /* center for now */
width: 17.5em; /* ems so it will grow */
background: url('images/sbbody-r.gif') no-repeat bottom right;
font-size: 100%;
}
.boxhead {
background: url('images/sbhead-r.gif') no-repeat top right;
margin: 0;
padding: 0;
text-align: left;
}
.boxhead h3 {
background: url('images/sbhead-l.gif') no-repeat top left;
margin: 0;
padding: 8px 30px 8px;
font-weight: bold;
font-size: 1.2em;
line-height: .4em;
}
.boxbody {
background: url('images/sbbody-l.gif') no-repeat bottom left;
margin: 0;
padding: 5px 5px 10px 5px;
}
) así que cualquier ayuda me vendría de perlas.Si se necesita cualquier otra información pedirla que os la paso al momento.
Gracias y un saludo
