Foros del Web » Creando para Internet » HTML »

Error en mi código HTML + CSS (no sé que puede ser)

Estas en el tema de Error en mi código HTML + CSS (no sé que puede ser) en el foro de HTML en Foros del Web. Saludos: 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 ...
  #1 (permalink)  
Antiguo 16/05/2006, 12:07
Avatar de Jokin  
Fecha de Ingreso: enero-2002
Mensajes: 725
Antigüedad: 15 años, 11 meses
Puntos: 1
Pregunta Error en mi código HTML + CSS (no sé que puede ser)

Saludos:

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:
<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>
y el archivo css, es éste:

Código:
/*   
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;
}
Como habreís adivinado no soy nada expertoen esto (primerizo en programación ) 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
__________________
  #2 (permalink)  
Antiguo 16/05/2006, 13:18
 
Fecha de Ingreso: mayo-2006
Mensajes: 475
Antigüedad: 11 años, 7 meses
Puntos: 58
la imagen que tienes puesta como background sólo ocupa 568px de altura cuando la altura que tiene la capa es de unos 90px más, también la tienes asignada como no-repeat pero aunque la repitieras no te solucionaria nada ya que tiene los bordes inferiores redondeados así que yo creo es que debes redimensionar la imagen.
  #3 (permalink)  
Antiguo 16/05/2006, 16:32
Avatar de Jokin  
Fecha de Ingreso: enero-2002
Mensajes: 725
Antigüedad: 15 años, 11 meses
Puntos: 1
Mil gracias josss.

Voy a alargar la imagen a ver si así me funciona.

Gracias por responder.

Un saludo
__________________
  #4 (permalink)  
Antiguo 16/05/2006, 16:39
Avatar de Jokin  
Fecha de Ingreso: enero-2002
Mensajes: 725
Antigüedad: 15 años, 11 meses
Puntos: 1
Dios!!!

Fantástico!!! Efectivamente, he alargado las dos imágenes y ahora funciona. Podeís verlo en www.gazteoiartzun.net.

Mil gracias otra vez Josssss
__________________
  #5 (permalink)  
Antiguo 16/05/2006, 17:03
Avatar de Jokin  
Fecha de Ingreso: enero-2002
Mensajes: 725
Antigüedad: 15 años, 11 meses
Puntos: 1
ups...me queda una sola cosita y creo que es de estas líneas del archivo css:

.boxbody {
background: url('images/sbbody-l.gif') no-repeat bottom left;
margin: 0;
padding: 5px 5px 10px 5px;

Qué es padding? Qué significan la relación de píxeles 5, 5, 10, 5?

Gracias y un saludo
__________________
  #6 (permalink)  
Antiguo 17/05/2006, 01:56
 
Fecha de Ingreso: abril-2005
Mensajes: 195
Antigüedad: 12 años, 8 meses
Puntos: 0
espero que este link te sirva de ayuda http://www.programacion.com/html/tutorial/css1/10/
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 10:36.