Foros del Web » Creando para Internet » CSS »

Problemas con maquetacion

Estas en el tema de Problemas con maquetacion en el foro de CSS en Foros del Web. Tengo un problema muy grande, estoy tratando de maquetar mi pagina con capas y css pero no lo consigo, todo me funciona perfecto pero en ...
  #1 (permalink)  
Antiguo 10/07/2006, 20:22
 
Fecha de Ingreso: julio-2006
Mensajes: 46
Antigüedad: 11 años, 5 meses
Puntos: 0
Problemas con maquetacion

Tengo un problema muy grande, estoy tratando de maquetar mi pagina con capas y css pero no lo consigo, todo me funciona perfecto pero en la parte de abajo donde aparece una encuesta tengo problemas.

Me descuadra toda la parte final de la pagina.

si por favor me pudieran ayudar, les dejo el html y el css, cualquier comentario es valido
Código:
<body>
	<div id="todo">
		<div id="tope">imagen</div>
		<div id="menusuperior">  menu</div>
		<div id="cuerpo">
			<div id="barraizquierda">barra izquierda</div>
			<div id="centro">
				<div id="barranavegacion">barra que indica en que seccion del sitio estoy</div>
				<div id="ultimosarticulos">ultimos articulos</div>
				<div id="masvotadosarticulos">
				  articulos mas votados
				</div>
				<div id="bannermedio">banner</div>
			  <div id="seccionmedia">
			    <div id="encuesta">
			      encuesta</script>
			    </div>
				<div id="foro">
				  <p>sdasdasd</p>
				  <p>asdasd</p>
				  <p>asd</p>
				  <p>asd</p>
				  <p>asd</p>
				</div>
		      </div>
			  <div id="prueba">Prueba</div>
			</div>
			<div id="barraderecha">barra derecha</div>
		</div>
		<div id="piedepagina">pie de pagina</div>
			<div id="pieinfo">
				informacion variada
			</div>
	</div>
</body>
</html>
y el css es

Código:
#Cuerpo {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	width: 760px;
	overflow: visible;
	margin-right: auto;
	margin-left: auto;
	background-color: #3333FF;
}
#centro {
	margin-right: 4px;
	margin-left: 4px;
	background-color: #FFFFFF;
	width: 502px;
	float: left;
	overflow: visible;
}

#piedepagina {
	clear: both;
	width: 760px;
}
#publicidadforo {
	float: left;
	width: 316px;
}

#barranavegacion {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #007AD5;
	background-color: #DEF6FF;
	margin-top: 2px;
}
#menusuperior {
	background-color: #FFFFFF;
}



#barraizquierda {
	float: left;
	width: 125px;
	background-color: #DEF6FF;
	margin-top: 4px;
}

#tope {
	margin: auto;
	width: 760px;
	border-top-style: none;
	border-right-style: none;
	border-bottom-style: none;
	border-left-style: none;
	overflow: hidden;
}
#barraderecha {
	float: left;
	width: 125px;
	margin-top: 4px;
	background-color: #003333;
}
#todo {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	width: 760px;
	overflow: visible;
	margin-right: auto;
	margin-left: auto;
	font-size: 12px;
	background-image: url(img/fondocolumna.gif);
	background-repeat: repeat-y;
	background-position: left bottom;
}
#pieinfo {
	font-size: 11px;
	color: #999999;
	text-align: center;
	background-color: #FFFFFF;
}
#articulo1 {
	width: 248px;
	float: left;
	border: 1px solid #DEF6FF;
}
.titulossecciones {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-weight: normal;
	color: #007AD5;
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: #007AD5;
}

#articulo2 {
	width: 248px;
	float: right;
	border: 1px solid #DEF6FF;
}
.titulosdorados {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-weight: bold;
	color: #B39861;
}
#masvotadosarticulos {
	margin-top: 4px;
	margin-bottom: 4px;
}
#piedepagina {
	color: #FF9900;
	background-color: #FF9933;
}
#seccionmedia {
	overflow: visible;
	background-color: #00CC66;
}
#encuesta {
	width: 180px;
	float: left;
	border: 1px solid #DEF6FF;
}
#foro {
	clear: right;
	float: right;
	width: 316px;
}
#prueba {
	background-color: #330033;
	float: none;
	clear: both;
}
me estoy volviendo loco... y lo que es peor el firefox me lo muestra de una forma y el explorer de otra, muchas gracias por su ayuda
  #2 (permalink)  
Antiguo 10/07/2006, 20:50
Avatar de AlZuwaga
Colaborador
 
Fecha de Ingreso: febrero-2001
Ubicación: 34.517 S, 58.500 O
Mensajes: 14.550
Antigüedad: 16 años, 9 meses
Puntos: 535
Cita:
Iniciado por imagenarte
les dejo el html
Son puros DIV's!
Te juro que respiré un poco al leer esto:


Código:
				  <p>sdasdasd</p>
				  <p>asdasd</p>
				  <p>asd</p>
				  <p>asd</p>
				  <p>asd</p>
Me resultó casi como leer un párrafo quilométrico sin un solo signo de puntuación
__________________
...___...
  #3 (permalink)  
Antiguo 11/07/2006, 13:33
 
Fecha de Ingreso: julio-2006
Mensajes: 46
Antigüedad: 11 años, 5 meses
Puntos: 0
eso era solo para mostrar algo, en la definitiva eso no pasará

pero me dices que son pueros divs...

entonces como lo podria hacer?

la pagina tiene un tope, un menu abajo del tope, luego 3 columnnas...

y cada una de las columnas esta separada en varias secciones... con demasiados divs?

y debo usar clases en ves de darle estilo a cada div por separado?

gracias por la ayuda...

otra cosa el tipo de documento afecta el como un explorador lo muestra?

es decir stric o transitional?????
  #4 (permalink)  
Antiguo 11/07/2006, 14:17
Avatar de AlZuwaga
Colaborador
 
Fecha de Ingreso: febrero-2001
Ubicación: 34.517 S, 58.500 O
Mensajes: 14.550
Antigüedad: 16 años, 9 meses
Puntos: 535
Bueno, yo también abuso de los divs...
por ejemplo, me acabo de dar cuenta que para hacer un encabezado puse lo siguiente...

Código:
<div id="encabezado">
		<h1><a href="/">nombre del sitio</a></h1>
</div>
... cuando el div encabezado era totalmente innecesario ya que puedo usar al h1 transformándolo como yo quiera con el alto y ancho que quiera.

A lo que me refiero es a que estás usando divs para cosas que las podrías solventar perfectamente con html "con significado"

Por ejemplo, tu <div id="barranavegacion"> se podría reemplazar tranquilamente por un <ul id="barranavegacion"><li>enlace 1</li> .... </ul>

Tu div#ultimosarticulos con un <dl><dd><dt>... etc.

Saludos y una aclaración: intento no responder por mensaje privado, así que te pediría que ese MP lo pongas aquí (no lo pego yo porque no corresponde)
__________________
...___...
  #5 (permalink)  
Antiguo 11/07/2006, 14:25
 
Fecha de Ingreso: julio-2006
Mensajes: 46
Antigüedad: 11 años, 5 meses
Puntos: 0
Disculpa por el mensaje privado... esto del html con significado esta entrandome en la cabeza ahora, uno de los motivos que te envie el mensaje privado es que no se podia poner la direccion en el mensaje normal del foro porque apenas soy novato...

revisaste la pagina? ahora que lei eso que me dijiste tienes razon, voy a tratar de usar otras etiquetas aparte del div pero es que en realidad los veia como contenedores, no se me habia ocurrido que podia prescindir de ellos para ciertos efectos.

Gracias Al, y si pudieras entrar en la pagina y decirme que tal y como podria mejorarla te lo agradeceria.
  #6 (permalink)  
Antiguo 11/07/2006, 15:28
Avatar de webosiris
Moderador egiptólogo
 
Fecha de Ingreso: febrero-2002
Ubicación: Luxor, Egipto
Mensajes: 10.727
Antigüedad: 15 años, 9 meses
Puntos: 997
Cita:
Iniciado por imagenarte
Disculpa por el mensaje privado... esto del html con significado esta entrandome en la cabeza ahora
html es un lenguaje de marcado.. aquí hay un breve pero para mi muy buen ejemplo para ayudarte a entender lo que está detrás de la semántica.

Tu problema de muchos divs (¡17!)es conocido como Divitis

Cita:
otra cosa el tipo de documento afecta el como un explorador lo muestra?
es decir stric o transitional?????
En su gran mayoría, si. Aunque la gran diferencia es cuando no hay doctype o está mal.
Los navegadores generalmente tienen dos modos de interpretar el html (voy a tomar como ejemplo a firefox, que tiene 3):

- Quircks (modo Caprichoso, se comporta como un navegador antiguo)
- Casi estandar
- Estandar

Dependiendo de que y como incluyas el doctype, va a ser un modo o el otro. Aquí están las diferencias del quircks con respecto al Estandar

Cita:
div pero es que en realidad los veia como contenedores
Más que como contenedores, pensá como una cebolla. O como los libros de niños que tienen páginas transparentes que se van sobreponiendo.

Está bien no maquetar con tablas, pero no hay solo que sustituir las tablas por divs, sino es la misma historia. Hay que cambiar la forma de pensar...
__________________
Pasamos tus PSD a HTML

Pobre del que lo sabe todo, porque no tiene nada más que aprender ni razón para vivir. -
  #7 (permalink)  
Antiguo 11/07/2006, 16:04
 
Fecha de Ingreso: octubre-2005
Mensajes: 536
Antigüedad: 12 años, 1 mes
Puntos: 1
Hola a todos. hola webosiris.

Me han llamado la atención los enlaces que has puesto.

Mozilla's DOCTYPE sniffing
este tiene traducción:
Selección de modo en Mozilla

este:
Mozilla Quirks Mode Behavior

aun no.
__________________
Mis comentarios quieren decir lo que dicen, esto es: lo que está escrito. Lo que tú imagines que he dicho o he querido decir es problema tuyo.
  #8 (permalink)  
Antiguo 12/07/2006, 12:16
 
Fecha de Ingreso: julio-2006
Mensajes: 46
Antigüedad: 11 años, 5 meses
Puntos: 0
Estoy siguiendo sus consejos y remplazando los div por etiquetas con mas sentido, a la ves creo que esto me va a ayudar con el posicionamiento en los buscadores, en cuento a el doctype me dio dolores de cabeza, por los momentos voy a tratar de que la pagina pase la validacion del wc3 y se muestre como yo quiero en los distintos navegadores.

cuando tenga un poco mas de cabeza me siento a leer como afecta el dctype al momento de renderizar las paginas en los diferentes buscadores.

una pregunta, hay alguna forma de visualizar mi pagina en safari desde PC? he encontrado una solucion en internet pero no la muestra, ya que el problema viene con los objetos flash en mi pagina y esa solución no soporta los elementos flash.

gracias a todos por su ayuda
  #9 (permalink)  
Antiguo 12/07/2006, 14:48
Avatar de webosiris
Moderador egiptólogo
 
Fecha de Ingreso: febrero-2002
Ubicación: Luxor, Egipto
Mensajes: 10.727
Antigüedad: 15 años, 9 meses
Puntos: 997
Cita:
Iniciado por imagenarte
Estoy siguiendo sus consejos y remplazando los div por etiquetas con mas sentido

Cita:
a la ves creo que esto me va a ayudar con el posicionamiento en los buscadores
esa es una de las ventajas adicionales

Cita:
en cuento a el doctype me dio dolores de cabeza
Empezá por html 4.01 transitional.. este es el doctype:
Código:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
Cita:
una pregunta, hay alguna forma de visualizar mi pagina en safari desde PC?
Probastes con http://browsershots.org ?
__________________
Pasamos tus PSD a HTML

Pobre del que lo sabe todo, porque no tiene nada más que aprender ni razón para vivir. -
  #10 (permalink)  
Antiguo 12/07/2006, 15:08
 
Fecha de Ingreso: julio-2006
Mensajes: 46
Antigüedad: 11 años, 5 meses
Puntos: 0
PUFFFFFFFFF ese ultimo link si funciona :D
de todos modos ahora voy a comprarme una mini mac solo para ver las paginas, hasta el momento he modificado la pagina con las sugerencias de todos ustedes y paso la validacion del wc3 tanto en xhtml 1.1 y mis css incluyendo contenido flash y con el mismo aspecto en todos los navegadores para windows (firefox, opera, explorer) y algunos de linux (firefox, konkeor).

Cuando pueda incluir links en los mensajes les dejare la dirección de la pagina para que me la destruyan.

Gracias a todos de nuevo
  #11 (permalink)  
Antiguo 12/07/2006, 16:32
Avatar de AlZuwaga
Colaborador
 
Fecha de Ingreso: febrero-2001
Ubicación: 34.517 S, 58.500 O
Mensajes: 14.550
Antigüedad: 16 años, 9 meses
Puntos: 535
dejala igual la dirección, no será un enlace, pero siempre se puede copiar y pegar en la barra de deirecciones ;)
__________________
...___...
  #12 (permalink)  
Antiguo 12/07/2006, 16:34
 
Fecha de Ingreso: julio-2006
Mensajes: 46
Antigüedad: 11 años, 5 meses
Puntos: 0
estoy trabajando todavia eliminando divs, mientras ya empiezo a colocar el contendo dinamico...

es una lata tener que hacer maquetacion + programacion...

bebesvenezuela.com.ve

se aceptan todos los comentarios posibles
  #13 (permalink)  
Antiguo 12/07/2006, 16:45
Avatar de AlZuwaga
Colaborador
 
Fecha de Ingreso: febrero-2001
Ubicación: 34.517 S, 58.500 O
Mensajes: 14.550
Antigüedad: 16 años, 9 meses
Puntos: 535
Cita:
es una lata tener que hacer maquetacion + programacion...
Jajaja, si, estoy en eso también.
Encima estoy programando en PHP con todavía muuuuuy escasos conocimientos (vengo de ASP) y justo me veo en la problemática de separar en párrafos lo que el usuario meta en un textarea y que no hayan párrafos de más. Normalmente hubiese usado nl2br(), pero aquí se me va el diseño a ya sabrás donde porque si o si deben ser párrafos.
__________________
...___...
  #14 (permalink)  
Antiguo 12/07/2006, 16:49
 
Fecha de Ingreso: julio-2006
Mensajes: 46
Antigüedad: 11 años, 5 meses
Puntos: 0
Bueno yo estoy trabajandolo en ASP y creo que me voy a encontrar todavia con algunos problemitas mas, pero estamos alli dandole :D
  #15 (permalink)  
Antiguo 20/11/2007, 17:03
 
Fecha de Ingreso: noviembre-2007
Mensajes: 1
Antigüedad: 10 años
Puntos: 0
Re: Problemas con maquetacion

una consulta.
cual es la diferencia en llenar un HTML con DIVs que colocar un UL y varios LI ??

gracias.
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 12:00.