Conflicto con DIVs y tablas

Daphne · #1 (**permalink**) 02/07/2004, 22:45

Estoy aprendiendo a prescindir de las tablas, pero me ha surgido un gran problema: quiero separar dos secciones (SECCIÓN 1 y SECCIÓN 2 en el código), pero con DIVs no soy capaz y llevo ya muchas horas tras ello. Así que, finalmente, decidí hacerlo con tablas, pero al insertar las tablas entre los DIVs, todo toma un aspecto horroroso y, desde luego, no consigo lo que pretendía.

¿Alguien sería tan amable de ayudarme?

Código:

<div id="contentleft"> 



			<div id="titlesection"><p class="seccionlateral">SECCIÓN 1</p></div>

				<div id="leftinside">
					<p class="apartado">::Apartado 1::</p>
					<p class="enlacesmenu">
				 	<a href="http://">Enlace 1</a> <br />
				 	<a href="http://">Enlace 2</a> <br />
				 	<a href="http://">Enlace 3</a> <br />
					</p>
					<p class="apartado">::Apartado 2::</p>
					<p class="enlacesmenu">
                                                       		 <a href="http://">Enlace 1</a> <br />
					</p>
				</div>

		
			<div id="titlesection"><p class="seccionlateral">SECCIÓN 2</p></div>	
			<div id="leftinside">
				<p class="apartado">::Apartado 1::</p>
				<p class="enlacesmenu">
				 <a href="http://">Enlace 1</a> <br />
				 <a href="http://">Enlace 2</a> <br />
				 <a href="http://">Enlace 3</a> <br />
				 <a href="http://">Enlace 4</a> <br />
				 <a href="http://">Enlace 5</a> <br />
				 <a href="http://">Enlace 6</a> <br />
				</p>
				<p class="apartado">::Apartado 2::</p>
				<p class="enlacesmenu">
				 <a href="http://">Enlace 1</a> <br />
				 <a href="http://">Enlace 2</a> <br />
				 <a href="http://">Enlace 3</a> <br />				
				</p>
				<p class="apartado">::Apartado 3::</p>
				<p class="enlacesmenu">
				 <a href="http://">Enlace 1</a> <br />
				 <a href="http://">Enlace 2</a> <br />
				 <a href="http://">Enlace 3</a> <br />
				 <a href="http://">Enlace 4</a> <br />
				 <a href="http://">Enlace 5</a> <br />
				 <a href="http://">Enlace 6</a> <br />
				 <a href="http://">Enlace 7</a> <br />
				 <a href="http://">Enlace 8</a> <br />
				</p>
			</div>
		
			
		</div>

Edición: También me vendría bien que alguien me dijera si se puede resaltar una línea entera que sea un enlace, no sólo el texto, sino todo el fondo, igual que se puede hacer con tablas. Y en caso de que se pueda, cómo se hace, por favor. Espero haberme explicado bien. Gracias por leerme.

Zokor · #2 (**permalink**) 03/07/2004, 04:18

A ver si esta página te ayuda un poco. Mira el código fuente y el archivo .css. También aparece en los estilos lo que preguntas de resaltar una línea entera. Saludos.

http://www.alu.ua.es/d/dcmc/Enlaces.htm

Y un manual que te puede ayudar: http://www.sitepoint.com/article/tables-vs-css

Daphne · #3 (**permalink**) 03/07/2004, 09:27

Gracias por la respuesta, Zokor.

Ya había estado en esa página que me indicas, la había visto en otro lugar del foro, pero tras tantas horas no fui capaz de sacar nada en claro. Así que me he puesto hoy a ver si ya, despejada, era capaz de saber cómo el diseñador ha conseguido que en vez de cambiar sólo el fondo de detrás de las letras al pasar el ratón por encima, se cambie toda la línea sin ser una celda de una tabla.

Por favor, ¿alguien lo sabe? Trasteo con el código pero no tengo ni idea. Si lo intento adaptar a la mía algo falla porque no funciona.

También he echado varias horas en revisar el otro enlace que me proporcionaste, es muy interesante y está contado de manera amena, pero la verdad es que a la hora de la verdad no he conseguido plasmar lo que propone el autor. Éste afirma: "Making boxes is so much easier with CSS than it is with tables. Having the ability to specify borders separately is really useful." Pues yo estoy teniendo unos problemas impresionantes.

Es decir, aparte de mis avatares para marcar los enlaces en toda una línea, no sólo donde hay texto, tengo el más grave problema de que no sé cómo separar en cajas la sección uno de la sección dos. Estéticamente queda horrible. Por favor, ¿podría alguien ayudarme?

Zokor · #4 (**permalink**) 03/07/2004, 10:11

Aqui tienes un pequeño ejemplo que te cambia el fondo de los enlaces al pasar el ratón por encima. La clave está en los estilos aplicados a la etiqueta <A>. Espero que te sirva. Saludos

<!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" xml:lang="en" lang="en">
<head>

<title></title>
<style type="text/css">
a {
display: block;
height: 20px;
}
a:hover {
background-color: #FF7F50;
}
ul {
margin: 0;
padding: 0;
}
li {
list-style: none;
}
#menu {
background-color: #FFDAB9;
width: 200px;
text-align: center;
}
</style>
</head>

<body>
<div id="menu">
<ul>
<li><a href="http://www.google.com">Google</a></li>
<li><a href="http://www.forosdelweb.com">Foros del web</a></li>
</ul>
</div>
</body>
</html>

Daphne · #5 (**permalink**) 03/07/2004, 11:05

Muchas gracias, Zokor, estoy empezando a ver la luz. Pero me surge un problema (antes también me pasó, pero entre tantas otras cosas, no le di importancia): ¿cómo hago para que no me salga el típico punto de las listas? Es que, con el mismo código, a mí me sale y, obviamente, no lo quiero.

Daphne · #6 (**permalink**) 03/07/2004, 11:19

Dios mío, ¡qué horrible! Se me desplazan todos los DIVs y todo toma una forma completamente distinta a la deseada. Pensé que ya había entendido cómo iba, pero veo que no. Hay algo que se me está escapando en el comportamiento de los DIVs y no sé qué es.

Daphne · #7 (**permalink**) 03/07/2004, 11:35

Si al menos supiera cuál es la propiedad concreta que confiere la característica de marcar toda la línea (no sólo el texto) durante la fase de hover, quizás podría avanzar algo...

Ayuda, por favor.

tunait · #8 (**permalink**) 03/07/2004, 11:39

Hola Daphne,

deja aquí la última versión del código que tienes, a ver por qué parte de la desesperación vas

tunait · #9 (**permalink**) 03/07/2004, 11:42

probando lo que dejas en el primer mensaje llego a la conclusión de que no sé exactamente lo que quieres lograr.

¿Me lo explicas con peras y manzanas? qué datos quieres mostrar, y cómo

Daphne · #10 (**permalink**) 03/07/2004, 11:46

Desesperación es la palabra

, porque encima voy a contrarreloj.

Código:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "DTD/xhtml1-transitional.dtd">
<html>
<head>
	<title></title>
	<link href="estilo.css" rel="stylesheet" media="screen" type="text/css" />
	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
	<meta name="MSSmartTagsPreventParsing" content="true" />
	<meta name="generator" content=""/>
	<link rel="shortcut icon" type="image/ico" href="favicon.ico" /> 
	<meta name="author" content="" />
	<meta name="robots" content="all" />
	<meta name="description" content="" />
	<meta name="keywords" content="" />

</head>

<body id="body">
<div id="outerblock">
	<div id="innerblock">

		<div id="contentheader">
			<div id="topheader"><img src="logo.gif" alt="" /></div>			
			<div id="bottomheader">
				<p class="firma">Fecha | Última actualización | Similar</p>
                                        </div>
		</div>
		
		<div id="contentleft"> 



			<div id="titlesection"><p class="seccionlateral">SECCIÓN 1</p></div>

				<div id="leftinside">
					<p class="apartado">::Apartado 1::</p>
					<p class="enlacesmenu">

				 	<a href="http://">Enlace 1</a> <br />
				 	<a href="http://">Enlace 2</a> <br />
				 	<a href="http://">Enlace 3</a> <br />
					</p>

					<p class="apartado">::Apartado 2::</p>
					<p class="enlacesmenu">
                                                       		 <a href="http://">Enlace 1</a> <br />
					</p>

				</div>

		
			<div id="titlesection"><p class="seccionlateral">SECCIÓN 2</p></div>	
			<div id="leftinside">
				<p class="apartado">::Apartado 1::</p>
				<p class="enlacesmenu">

				<a href="http://">Enlace 1</a> <br />
				<a href="http://">Enlace 2</a> <br />
				<a href="http://">Enlace 3</a> <br />
				<a href="http://">Enlace 4</a> <br />
				 <a href="http://">Enlace 5</a> <br />
				 <a href="http://">Enlace 6</a> <br />

				
				</p>
				<p class="apartado">::Apartado 2::</p>
				<p class="enlacesmenu">
				 <a href="http://">Enlace 1</a> <br />
				 <a href="http://">Enlace 2</a> <br />
				 <a href="http://">Enlace 3</a> <br />				
				</p>
				<p class="apartado">::Apartado 3::</p>
				<p class="enlacesmenu">
				 <a href="http://">Enlace 1</a> <br />
				 <a href="http://">Enlace 2</a> <br />
				 <a href="http://">Enlace 3</a> <br />
				 <a href="http://">Enlace 4</a> <br />
				 <a href="http://">Enlace 5</a> <br />
				 <a href="http://">Enlace 6</a> <br />
				 <a href="http://">Enlace 7</a> <br />
				 <a href="http://">Enlace 8</a> <br />
				</p>
			</div>
		
			
		</div>
		<!-- main -->


		<div id="google">
				<!-- Búsqueda Google -->
			<center>
			<FORM method=GET action="http://www.google.com/search">
			<TABLE bgcolor="#FFFFFF"><tr><td>
			<A HREF="http://www.google.com/" target="_blank">
			<IMG SRC="lgf.gif" border="0" ALT="Google" align="absmiddle"></A>
			<INPUT TYPE=text name=q size=31 maxlength=255 value="" 
			STYLE="font-size: 13px; font-family: arial, verdana, sans-serif; color:#0148B2; border:1px solid #0148B2; border-style: solid; border-top-color: 

#0148B2; border-left-color: #0148B2; border-bottom-color: #0148B2; border-right-color: #0148B2; background-image: url(fnd.gif);">
			<INPUT TYPE=hidden name=hl value=es>
			<INPUT type=submit name=btnG VALUE="Búsqueda Google" 
			STYLE="font-size: 12px; font-family: arial, verdana, sans-serif; color:#0148B2; background:#FFFFFF; border:1px solid #0148B2; border-style: 	

			solid; border-top-color: #0148B2; border-left-color: #0148B2; border-bottom-color: #0148B2; border-right-color: #0148B2;">
			</td></tr></TABLE>
			</FORM>
			</center>
				<!-- Búsqueda Google -->
		</div>
		
		<div id="contentmain">
				<h1>Bienvenidos a ...</h1><br />
				<p>Esto es una prueba.</p>
				<p>Esto es otra prueba.</p><br />
				<h1>Más pruebas</h1><br />
				<p>Esto también forma parte de la prueba.</p>
				<p>La prueba se está terminanado.</p>
				<p>Fin de la prueba.</p><br /><br />
				
				<p class="firma">Todo tiene solución</p><br />
		</div>

                           
	</div>		

	<br clear="all"/>
	<div id="contentfooter">
		<p>Éste es el pie de página, aquí podemos colocar lo que queramos como, por ejemplo, la resolución recomendada.</p>
	</div>

</div>

</body>
</html>

Código:

#body {
 background-color: #FFFFFF;
 background-image:url('fnd.gif');
 font-family: arial, verdana, sans-serif;
 scrollbar-face-color: #A28D68; 
 scrollbar-shadow-color: #000000; 
 scrollbar-highlight-color: #000000; 
 scrollbar-3dlight-color: #000000; 
 scrollbar-darkshadow-color: #000000; 
 scrollbar-track-color: #A28D68; 
 scrollbar-arrow-color: #000000;
 }

#contentheader {
 background:#0148B2;
 margin-bottom:10px;
}

#topheader {
 margin-bottom:0px;
}

#bottomheader {
 background-color: #FFFFFF;
 height:0%;
 margin-bottom:0px;
 border:1px solid #0148B2;
}

#outerblock {
 background-image:url('fnd.gif');
 background-color: #FFFFFF;
 width:98%;
 margin-right:auto;
 margin-left:auto;
 border:0px solid #000000;
 margin-top:0px;
 margin-bottom:0px;
}

#innerblock {
 background-image:url('fnd.gif');
 background-color:#FFFFFF;
 width:100%;
 margin-right:auto;
 margin-left:auto;
 margin-top:0px;
 margin-bottom:0px;
}

/*contentleft contiene a titlesection y a leftinside*/

#contentleft {
 background:#0148B2;
 width:15%;
 float:left;
}

#leftinside {
 background:#C3D9FF;
 width:100%;
 padding:1px;
 float:left;
 margin-top:5px;
 margin-bottom:0px;
 border:1px solid #0148B2;
}

#google {
 background:#FFFFFF;
 width:82%;
 padding:0px;
 float:right;
 margin-top:0px;
 margin-bottom:10px;
 border:1px solid #0148B2;
}

#contentmain {
 background:#FFFFFF;
 width:82%;
 padding:0px;
 float:right;
 margin-top:0px;
 margin-bottom:10px;
 border:1px solid #0148B2;
}

#contentfooter {
 background:#0148B2;
 margin-bottom:10px;
 text-align:absmiddle;
 border:1px solid #0148B2;
}

#titlesection {
 margin-top:0px;
 margin-bottom:0px;
 text-align:center;
 font-weight: bold;
}

/*titulos principales*/
h1 {
 color:#0148B2;
 font-size:14pt;
 font-weight:bold;
 margin:10px 10px 10px 10px;
}

/*titulos secundarios*/
h2 {
 color:#0148B2;
 font-size:12pt;
 font-weight:bold;
 margin:10px 10px 10px 10px;
}

*.azuloscuro {color:#0148B2;}
*.azulclaro {color:#C3D9FF;}

p {
 color:#0148B2;
 font-size:8pt;
 text-align:justify;
 margin:10px 10px 10px 10px;
 line-height:1.2;
}


*.enlacesmenu {
 text-align:left;
 color:#FFCC00;
 line-height:2.2;
 font-size:8pt;
}

*.apartado {
 text-align:left;
 color:#0148B2;
 font-weight:bold;
 font-size:10pt;
}
*.greeting {
 text-align:right;
 font-size:12pt;
 color:#0148B2;

}
*.firma {
 text-align:right;
 color:azuloscuro;
 font-size:8pt;
 font-weight:bold;
 line-height:0.6;
}
*.seccionlateral {
 text-align:center;
 color:#FFFFFF;
 font-size:10pt;
 font-weight:bold;
}


A:link {color: #0148B2; text-decoration: none; }
A:visited {color: #0148B2; text-decoration: none; }
A:active {color: #0148B2; text-decoration: none; }
A:hover {color: #C3D9FF; background-color: #0148B2;}

Posiblemente haya docenas de errores (algunas incongruencias estarán resueltas cuando la web esté conclusa), es mi primera experiencia seria con DIVs.

Muchas gracias a todos por vuestro tiempo y demás.

Daphne · #11 (**permalink**) 03/07/2004, 11:52

Ah, acabo de leer tu segundo mensaje. Pues a ver si soy capaz de explicarme bien, que estoy un poco noqueada con tantas horas seguidas con los DIVs:

Necesito dos cosas:

1.- Que al pasar el cursor sobre los enlaces de la izquierda se marque con fondo azul no sólo el texto, sino toda la línea. Si no me he explicado, puedes ver a qué me refiero consultando el último código aportado por Zokor.

2.- Separar físicamente SECCIÓN 1 de SECCIÓN 2. Es decir, que se vea un trozo de fondo, que parezcan entidades independientes. No entiendo por qué a la derecha me sale, simplemente utilizando dos DIVs en vez de uno, y a la izquierda se monta un pifostio de impresión si lo hago así. No entiendo qué debo hacer para que visualmente aparezcan separados. Estoy muy perdida porque he probado todo lo que se me ha ocurrido y no veo la salida.

Si hay algo en lo que no me he explicado con claridad, lo intentaré de nuevo con sólo pedírmelo.

Gracias. :)

tunait · #12 (**permalink**) 03/07/2004, 12:10

Bueno, por partes, lo del fondo en el estado hover, añádele esto a tu hoja de estilos....

*.seccionlateral {
text-align:center;
color:#FFFFFF;
font-size:10pt;
font-weight:bold;
}

a{display:block}
A:link {color: #0148B2; text-decoration: none; }
A:visited {color: #0148B2; text-decoration: none; }
A:active {color: #0148B2; text-decoration: none; }
A:hover {color: #C3D9FF; background-color: #0148B2;}

Respecto a lo de que se vean como secciones independientes... no acabo de comprender a qué te refieres. Sale una debajo de la otra ... y no lo veo mal ¿cuál es tu idea?

Daphne · #13 (**permalink**) 03/07/2004, 12:25

Lo he hecho como me dices y efectivamente, sale toda una línea (aunque con márgenes). Sin embargo, veo dos problemas:

1.- El estilo de la hoja no se mantiene: el ancho de la línea aumenta y también aumenta la separación entre líneas sin haber tocado nada más en el código. :-O

2.- En el ejemplo de Zokor no era necesario pasar el puntero justo por el texto, bastaba con pasarlo por la línea para poder pinchar en el enlace. Aquí, aunque se ilumina toda la línea, sólo sucede cuando pasamos el puntero por el trocito de texto. No sé si me he explicado.

En cuanto a lo de las secciones independientes, lo que quiero decir es que me sale el cajetín de la primera sección pegado al de la segunda. Lo que yo querría es que apareciera como título, sobre el fondo azul oscuro, una sección, y en el cajetín de esa sección, sobre fondo claro, poner los enlaces de esa sección. Y luego, que se vea el fondo de rayas, o sea, separado, no sé cómo decirte, y que aparezca la otra sección con su cajetín, pero que no se toquen, que no estén tan pegados, que haya un margen, como lo hay en los DIVs de la derecha.

A ver si encuentro una web que tenga la pinta de lo que te estoy intentando explicar, que veo que me explico fatal.

tunait · #14 (**permalink**) 03/07/2004, 12:41

Respecto al punto 1

otros estilos alteran los márgenes y alturas.

Prueba a añadir esto

a{display:block; width: 100%;line-height:normal;}

pero seguirán manteniéndose los espacios a los lados sin abarcar toda la columna. Eso es porque tienes definidos los párrafos con un margen de 10px

p {
color:#0148B2;
font-size:8pt;
text-align:justify;
margin:10px 10px 10px 10px;
line-height:1.2;
}

Para esquivar los márgenes de los párrafos, en vez de meter el grupo de links dentro de un p

<p class="enlacesmenu">

<a href="http://">Enlace 1</a><br />
<a href="http://">Enlace 2</a> <br />
<a href="http://">Enlace 3</a> <br />
</p>

mételas en un div

<div class="enlacesmenu">

<a href="http://">Enlace 1</a><br />
<a href="http://">Enlace 2</a> <br />
<a href="http://">Enlace 3</a> <br />
</div>

Y entonces para manetener ese margen, pídele un padding a tus a

a{display:block; width: 100%;line-height:normal;padding-left: 10px;}

prueba a ver si se va acercando

tunait · #15 (**permalink**) 03/07/2004, 12:43

... por cierto que en eso también está solucionado el punto 2 (lo de que reaccione aunque pase el mouse por el lado)

Daphne · #16 (**permalink**) 03/07/2004, 13:10

Muchísimas gracias, tunait.

Estás hecha una jefa en esto de las CSS.

Surge el problemilla de que los enlaces quedan excesivamente separados, pero ya encontraré la forma en que vuelvan a su estado natural (¡espero!).

En cuanto a la separación de los cajetines: http://www.terra.es/ Ahí aparece el menú de la izquierda en cajetines que están separados, se ve el fondo entre unos y otros. Quizás ahora ya me haya conseguido explicar.

JavierB · #17 (**permalink**) 03/07/2004, 13:14

Hola, Daphne y tunait.

He visto que en el código de Daphne se remiten algunos id, se suponen que solo puede haber uno.

Aprobecho este mensaje para preguntar por que se pone: *.seccionlateral ¿Por qué el asterisco? Tenía entendido que el * se refería a todos los elementos de la página.

Por cierto, Daphne, he probado el código que has puesto en el mensaje sobre la barra de scroll y me ha funcionado sin problemas. Yo tampoco entiendo nada

Suerte. Saludos,

Daphne · #18 (**permalink**) 03/07/2004, 13:23

Hola de nuevo, JavierB. :)

No entiendo qué quieres decir con que se remiten algunos id.

El asterisco está porque así estaba en el tutorial que consulté en su momento, y la verdad es que era la primera vez que veía uno colocado en una CSS, no tenía ni idea de lo que significaba, así que gracias por aclarármelo. Los eliminaré, entonces.

Yo voy a probar el código en otro ordenador, a ver si así... :S Muchas gracias a ti también por haberte tomado la molestia de ver si funcionaba, dónde podía estar el fallo y todo eso. :)

tunait · #19 (**permalink**) 03/07/2004, 13:35

Qué cosas.... no me llegó aviso de que habían nuevas respuestas por email.... recién veo ahora que hay 3 respuestas nuevas ... en fin

lo del asterisco quiere decir algo así como "cualquier elemento que lleve aplicada esta clase"

Por ejemplo, si definimos

div.pepe{lo que sea}

y aplicamos la clase pepe a otro elemento, por ejemplo un span

<span class="pepe">

se ignorará la clase, porque será sólo para los div

Si queremos que la misma clase se aplique a cualquier elemento, se puede poner el asterisco

*.pepe

que es el selector universal.... y que se puede omitir.

.pepe es lo mismo que *.pepe

Así que nos podemos ahorrar la tinta de escribirlo

tunait · #20 (**permalink**) 03/07/2004, 13:42

Cita:

Surge el problemilla de que los enlaces quedan excesivamente separados, pero ya encontraré la forma en que vuelvan a su estado natural (¡espero!).

se me olvidaba............

al pedirle que los enlaces se muestren como elemento de bloque, en cuanto se cierran generan un salto de línea (como un cambio de párrafo)

Es decir, donde se cierra un enlace </a> a continuación en la misma línea no puede haber nada, lo manda debajo.

Así que esos <br /> detrás de los </a> te están generando un salto adicional. Quítaselos y verás que yá no te quedan tan separados los enlaces

Daphne · #21 (**permalink**) 03/07/2004, 13:46

Gracias, aunque aún no lo capté del todo. Entre lo que he contado aquí y lo de la scrollbar, estoy un poco confusa.

tunait · #22 (**permalink**) 03/07/2004, 13:53

Cita:

Iniciado por Daphne

Gracias, aunque aún no lo capté del todo. Entre lo que he contado aquí y lo de la scrollbar, estoy un poco confusa.

...qué de todo lo último no has captado?

Respecto a lo de las separaciones, mira, tienes cada sección de menús en una capa de id="leftinside"

lo que te comentó javierB es así, no pueden (o deben) ir dos elementos con el mismo id. Te sugiero cambies el id por clase, osea, cambia esto

#leftinside {
background:#C3D9FF;
width:100%;
padding:1px;
float:left;
margin-top:5px;
margin-bottom:0px;
border:1px solid #0148B2;
}

por esto

.leftinside {
background:#C3D9FF;
width:100%;
padding:1px;
float:left;
margin-top:5px;
margin-bottom:30px;
border:1px solid #0148B2;
}

y a esas capas les cambias lo de

<div id="leftinside">

por

<div class="leftinside">

y otra cosa, esa clase indica que tenga un margen inferior de 0. Si se lo pones más alto te generará un espacio entre ambas secciones

.leftinside {
background:#C3D9FF;
width:100%;
padding:1px;
float:left;
margin-top:5px;
margin-bottom:30px;
border:1px solid #0148B2;
}

Daphne · #23 (**permalink**) 03/07/2004, 14:15

Lo que no acabé de captar fue tu anterior sobre los asteriscos. Lo releeré cuando no esté tan colapsada, a ver si se me fija y hago buen uso de ellos y no uno tan azariego.

Sobre lo último que has comentado: si hago eso, me queda todo igual (lo cual es estupendo, en vista de que así está más correcto) salvo por lo del margin-bottom, que me hace 30px más alto el fondo azul.

Me gustaría que ese fondo azul sólo tuviera 15px o 20px de alto y que, además, esto parece lo imposible: que hubiera 10px de separación, no que se alargue la parte azul, sino que se vea el fondo. No sé cómo decirlo, pero vamos, es una cosa igual que en Terra (salvando las distancias) como indiqué antes.

Hay un mensaje tuyo que se me había pasado, me ha servido de mucho. ¡Gracias! (Lo de los <br />)

tunait · #24 (**permalink**) 03/07/2004, 14:23

Sabes que pasa... que como no tengo las imágenes definidas en los estilos me sale todo en azul y blanco.... así que es dificil saber por dónde salen azules de más

Pero mira, la solución que usaría yo para eso, es simplemente meter otro div entre cada sección del menú.

defines una clase extra

.separador{
el color o imagen de fondo que quieras
margin-bottom: lo que quieras
}

si no quieres el margen abajo, pues cambias bottom por top

y luego simplemente, al cerrar el primer div con class leftinside, pues le enchufas una capa con class="separador".

Espero haberme explicado....

respecto a lo del asterisco que no entendiste.... no tiene mayor importancia. Digamos que poner el asterisco y no ponerlo es exactamente lo mismo (dicho por la w3c, conste)

Daphne · #25 (**permalink**) 03/07/2004, 14:43

La solución me parece ingeniosa (aunque el fondo no cuadre porque es de rayas horizontales y se nota que hay un salto).

He definido esa clase y sucede lo siguiente:

- Ignora cualquier margin-bottom que le ponga, es rarísimo. Le da igual 0px que 35px.
- No va de un extremo al otro de lo que visualmente se aprecia como columna, es decir que se queda más de la mitad con el fondo que le digo y un trocito rebelde a la derecha con fondo azul, no sé a qué obedece eso, me ha dado problemas cuando he intentado hacer otras cosas y nunca he sabido cómo arreglarlo.
- Sigue quedando "colgado" un trozo de columna azul al final de cada cajetín, no sé por qué ni cómo quitarlo. Puedo poner todo a 0px, que no importa, no se mueve, y lo malo es que yo no recuerdo haberlo creado en ningún momento. :S

Daphne · #26 (**permalink**) 03/07/2004, 14:49

Sorpresa para mí: si le quito el float:left; a leftinside, el "colgajo" azul se reduce, aunque no desaparece.

Daphne · #27 (**permalink**) 03/07/2004, 14:50

Hala, he puesto margin-bottom a 0px y ya casi no está. Queda el trozo azul rebelde que comentaba dos mensajes atrás.

tunait · #28 (**permalink**) 03/07/2004, 14:58

Hum... así en frío no acabo de imaginar qué es lo que puede pasar.

Déjame el código nuevo que tengas, a por dónde vamos

También... pa que me haga yo más a una idea, mira a ver si puedes colgar en interné las imágenes que se usan, por eso de las rayas que me cuentas y que yo no he visto

Daphne · #29 (**permalink**) 03/07/2004, 15:02

http://porinstinto.webcindario.com/f...bienhecho5.htm

Y la hoja de estilo está en el mismo directorio y se llama estilo.css.

Miarroba me está dando algunos problemas, espero que puedas acceder a la web.

Daphne · #30 (**permalink**) 03/07/2004, 15:04

Huy, lo nuevo del todo no está subido precisamente por los problemas con Miarroba, pero bueno, a lo mejor así, viendo el fondo y todo eso te sitúas mejor. Voy a intentar subir el código nuevo justo ahí.

Editado: Ya está, ya se ve lo último.