Foros del Web » Creando para Internet » CSS »

Ayuda con mi primer pagina con el posicionamiento de un DIV

Estas en el tema de Ayuda con mi primer pagina con el posicionamiento de un DIV en el foro de CSS en Foros del Web. Wenas... antes que nada, feliz año para todos!...... Aca dejo mi primer problema. Soy nuevo en esto del diseño Web, estuve leyendo 2 pdf de ...
  #1 (permalink)  
Antiguo 02/01/2011, 19:03
 
Fecha de Ingreso: enero-2011
Mensajes: 3
Antigüedad: 6 años, 11 meses
Puntos: 0
Ayuda con mi primer pagina con el posicionamiento de un DIV

Wenas... antes que nada, feliz año para todos!......

Aca dejo mi primer problema. Soy nuevo en esto del diseño Web, estuve leyendo 2 pdf de www.librosweb.es, sobre HTML y CSS. Y ahora estoy tratando de hacer mi primera pagina......

El primer problema que se me presento, es que al minimizar y reducir el tamaño del navegador, el div del cuerpo se corre hacia abajo del menu lateral izquierdo.

Asi es como quiero que se vea siempre



Y asi es como me corre el div del cuerpo cuando minimizo el navegador



Les dejo el codigo HTML y la hoja de estilo.

Código HTML:
<html>
<head>
		<link href="for2.css" type="text/css" rel="stylesheet"/>  
</head>

<body>
	<div id="contenedor">   
		<div id="cabecera"> 
				<p> rock </p>
		</div>
			
		<div id="menulateral">
			<ul id="lista">
				<li> <a href="#">Inicio</a></li>
				<li> <a href="#">Bandas</a></li>
				<li> <a href="#">Contacto</a></li>
			</ul>
		</div>
		
		<div id="cuerpo">
			<p>Aca va la informacion</p>
		</div>
		
		<div id="pie">
			
		</div>
		
	</div>

</body>	


</html> 

CSS

body{
background-image:url(imgfondo2.jpg);
background-repeat:repeat;
text-align:center;
}


#cabecera, #cuerpo{
color: green;
text-align: center;
}


#pie{
clear:both;
}


#contenedor {
overflow:hidden;
}


#menulateral {
Width: 150px;
float: left;
}


#cuerpo{
width: 550px;
float: left;
}


#cabecera{
font-size: 3.5em;
}


#menulateral li {
list-style: none;
}


#menulateral li a {
background-image:url(imgfondo2.jpg);
background-repeat:repeat;
display: block;
text-decoration: none;
color: green;
margin: 1em;
}


#menulateral, #cabecera, #cuerpo {
background-image:url(imgfondo.jpg);
background-repeat:repeat;
border-width: 0.1em;
border-color: black;
border-style: solid;
}




Gracias a todos!
  #2 (permalink)  
Antiguo 02/01/2011, 22:02
Avatar de luciio  
Fecha de Ingreso: junio-2009
Ubicación: Guadalajara, MX.
Mensajes: 351
Antigüedad: 8 años, 6 meses
Puntos: 38
Respuesta: Ayuda con mi primer pagina con el posicionamiento de un DIV

Hola para esto lo que yo haria seria establecer un bloque contenedor para las cajas "menulateral" y "cuerpo" y ponerle un minimo de anchura del tamaño de la anchura de las cajas que contendra para que asi al manipular la ventana el bloque contenedor no permita que se modifique el tamaño de lo que contiene en su interior.

aqui esta desarrollado.

HTML:
Cita:
<html>
<head>
<link href="for2.css" type="text/css" rel="stylesheet"/>
</head>

<body>
<div id="contenedor">
<div id="cabecera">
<p> rock </p>
</div>

<div id="contenedorcuerpo">
<div id="menulateral">
<ul id="lista">
<li> <a href="#">Inicio</a></li>
<li> <a href="#">Bandas</a></li>
<li> <a href="#">Contacto</a></li>
</ul>
</div>

<div id="cuerpo">
<p>Aca va la informacion</p>
</div>
</div>

<div id="pie">

</div>

</div>

</body>


</html>
CSS:
Cita:
body{
background-image:url(imgfondo2.jpg);
background-repeat:repeat;
text-align:center;
}


#cabecera, #cuerpo{
color: green;
text-align: center;
}


#pie{
clear:both;
}


#contenedor {
overflow:hidden;
}

#contenedorcuerpo{
width:100%;
min-width:800px;
}

#menulateral {
Width: 150px;
float: left;
}


#cuerpo{
width: 550px;
float: left;
}


#cabecera{
font-size: 3.5em;
}


#menulateral li {
list-style: none;
}


#menulateral li a {
background-image:url(imgfondo2.jpg);
background-repeat:repeat;
display: block;
text-decoration: none;
color: green;
margin: 1em;
}


#menulateral, #cabecera, #cuerpo {
background-image:url(imgfondo.jpg);
background-repeat:repeat;
border-width: 0.1em;
border-color: black;
border-style: solid;
}
Esto es "lo que yo haria" y lo probe y funciona, espero te sirva, slds !
__________________
cursos delineado permanente - mi selección de plantillas para wordpress
  #3 (permalink)  
Antiguo 03/01/2011, 22:41
 
Fecha de Ingreso: enero-2011
Mensajes: 3
Antigüedad: 6 años, 11 meses
Puntos: 0
Respuesta: Ayuda con mi primer pagina con el posicionamiento de un DIV

luciio, muchas gracias...

lo acabo de probar, y me anduvo perfecto en safari, chrome, opera y m firefox... en el unico q no me anduvo fue en IE 8.... pueda ser q halla algun parche o algo asi??

Saludos!
  #4 (permalink)  
Antiguo 04/01/2011, 00:02
Avatar de GAST0N  
Fecha de Ingreso: agosto-2010
Ubicación: Buenos Aires
Mensajes: 680
Antigüedad: 7 años, 4 meses
Puntos: 64
Respuesta: Ayuda con mi primer pagina con el posicionamiento de un DIV

Cita:
Iniciado por af_sg Ver Mensaje
luciio, muchas gracias...

lo acabo de probar, y me anduvo perfecto en safari, chrome, opera y m firefox... en el unico q no me anduvo fue en IE 8.... pueda ser q halla algun parche o algo asi??

Saludos!

tenes DOCTYPE en tu html??
__________________
Twitter: @GastonArnedo

Muerte a los <tr> y <td>
  #5 (permalink)  
Antiguo 04/01/2011, 20:26
 
Fecha de Ingreso: enero-2011
Mensajes: 3
Antigüedad: 6 años, 11 meses
Puntos: 0
Respuesta: Ayuda con mi primer pagina con el posicionamiento de un DIV

no Gaston, no lo puse.... ¿tendría que poner esto?:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="es" xml:lang="es">

saludos!

Etiquetas: posicionamiento, primer
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:07.