Foros del Web » Creando para Internet » CSS »

cuando minimizo la ventana se arruina el estilo

Estas en el tema de cuando minimizo la ventana se arruina el estilo en el foro de CSS en Foros del Web. hola tengo esta hoja de estilos que controla mi index Código: /* CSS Document */ body{background-color:#9999FF;} #title{ width:648px; height:194px; background-image:url(title.jpg); repeat:no-repeat; float:left; } #logo{ width:376px; ...
  #1 (permalink)  
Antiguo 21/06/2009, 17:50
Avatar de el_cesar  
Fecha de Ingreso: mayo-2001
Ubicación: Cali
Mensajes: 2.423
Antigüedad: 22 años, 10 meses
Puntos: 20
cuando minimizo la ventana se arruina el estilo

hola tengo esta hoja de estilos que controla mi index

Código:
/* CSS Document */
body{background-color:#9999FF;}

#title{
width:648px;
height:194px;
background-image:url(title.jpg); repeat:no-repeat;
float:left;	
}
#logo{
width:376px;
height:194px;
background-color:#ffffff;
background-image:url(logo.jpg);
background-repeat:no-repeat;
background-position:center;
float:left;
}
#titulo1{
width:1024px;
margin-top:20px;
background-color:#33CCFF;
text-align:center;
float:left;
font-family:Arial, Helvetica, sans-serif;
font-size:16px;
font-weight:bold;
}

#imagen{
width:288px;
height:192px;
margin-top:50px;
margin-left:30px;
background-image:url(image.jpg);
float:left;
}
#texto{
width:400px;
margin-left:180px;
margin-top:50px;
background-color:#FFFFFF;
float:left;
}
#apoyan_text{
background-color:#3300FF;
width:1024px;
font-family:Arial, Helvetica, sans-serif;
font-size:14px;
font-weight:bold;
float:left;
}
#fundaempresa{
width:70px;
height:58px;
background-image:url(fundaempresa_small.jpg);
float:left;
}
.cont{
font-family:Arial, Helvetica, sans-serif;
font-size:14px;
text-align:justify;
}
pero resulta que cuando restauro la ventana del navegador a un tamaño mas pequeño se arruina todo el estilo y se desordena todo, mi pregunta es, como hago para poner fijos los divs y que no se muevan?

el codigo de mi site es este

Código:
<head>

<title>CRM Business : Seminario Taller -Marketing y Comercio electronico para miPYMES</title>
<meta name="title" content="CRM Business : Seminario Taller -Marketing y Comercio electronico para miPYMES" />
<meta name="description" content="Comprenda como el comercio electronico puede hacer de su empresa una gran compañia" />
<meta name="keywords" content="seminario, marketing electronico, comercio electronico, capacitacion en comercio electronico, formacion en comercio electronico, ventas por internet, venta por internet" />
<meta name="language" content="es-co" />
<meta name="identifier-url" content="http://seminariomipyme.crmbusiness.biz" />
<meta name="author" content="CRM Business" />
<meta name="reply-to" content="[email protected]" />
<meta name="copyright" content="2009 (c) CRM Business" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="resource-type" content="document" />
<link href="images/estilos.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="title"></div>
<div id="logo"></div>
<div id="titulo1">Aproveche esta oportunidad!!!!!!</div>
<div id="imagen"></div>
<div id="texto"><li class="cont">Descubra que los medios electronicos, especialmente Internet, le ofrecen un sin numero de beneficios y que no se limitan a la publicacion de una pagina web.</li>
            <li class="cont">Encuentre las Claves para hacer de su portal web un entorno altamente rentable para su compa&ntilde;ia.</li>

            <li class="cont">Aprenda como su inversion se puede convertir en una opcion altamente rentable, aumentando su base de clientes y fidelizando los que ya tiene.</li>
            <li class="cont">   Amplie su conocimiento en el sector mas competitivo de la economía, las pequeñas y medianas empresas.</li>
            <li class="cont">Descubra  las nuevas tendencias que dan paso a un mercado de Networking, un mercado global donde lo primordial es la interrelación entre las empresas y los consumidores.<br />
            </li>
</div>
<div id="apoyan_text">Apoyan:</div>
<div id="fundaempresa"></div>
__________________
Say no more.......
  #2 (permalink)  
Antiguo 21/06/2009, 18:11
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 16 años, 10 meses
Puntos: 539
Respuesta: cuando minimizo la ventana se arruina el estilo

Hola El_Cesar.
Y lo mismo pasará para quien tenga una pantalla mayor.
Veamos por qué ocurre:
tienes todas tus cajas (div´s) flotadas a la izquierda, por lo que conservarán su alineación mientras tengan espacio en la ventana. Una vez que se completa una línea (horizontal) pasan a la siguiente.
Tienes #title con width:648px y #logo con width:376px; Mientras la ventana sea mayor a 1024px se mantienen parejos, al hacerla más pequeña, como #logo ya no tiene espacio pasa a la línea siguiente, empujando a #logo1 a la tercera línea... como las fichas de dominó.

Solución:
crear un contenedor donde meter toda la página, darle la anchura necesaria para alojarla (1024px más o menos, ya que no me he fijado si alguna tiene margin + padding) y ya de paso le das también un margin:0 auto pensando en resoluciones mayores a los 1024px.

Un saludo
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++
  #3 (permalink)  
Antiguo 21/06/2009, 18:32
Avatar de el_cesar  
Fecha de Ingreso: mayo-2001
Ubicación: Cali
Mensajes: 2.423
Antigüedad: 22 años, 10 meses
Puntos: 20
Respuesta: cuando minimizo la ventana se arruina el estilo

bueno lo que he hecho es asignarle posiciones absolutas y lo he probado y se ve bien, lo que necesito ahora es saber como le puedo poner un hipervinculo a una imagen que tengo como background en un div
__________________
Say no more.......
  #4 (permalink)  
Antiguo 21/06/2009, 20:42
Avatar de el_cesar  
Fecha de Ingreso: mayo-2001
Ubicación: Cali
Mensajes: 2.423
Antigüedad: 22 años, 10 meses
Puntos: 20
Respuesta: cuando minimizo la ventana se arruina el estilo

bueno utilizando la recomendacion de kseso? hice esto con mi codigo
HTML
Código:
<head>

<title>CRM Business : Seminario Taller -Marketing y Comercio electronico para miPYMES</title>
<meta name="title" content="CRM Business : Seminario Taller -Marketing y Comercio electronico para miPYMES" />
<meta name="description" content="Comprenda como el comercio electronico puede hacer de su empresa una gran compañia" />
<meta name="keywords" content="seminario, marketing electronico, comercio electronico, capacitacion en comercio electronico, formacion en comercio electronico, ventas por internet, venta por internet" />
<meta name="language" content="es-co" />
<meta name="identifier-url" content="http://seminariomipyme.crmbusiness.biz" />
<meta name="author" content="CRM Business" />
<meta name="reply-to" content="[email protected]" />
<meta name="copyright" content="2009 (c) CRM Business" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="resource-type" content="document" />
<link href="images/estilos.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="contenedor">
	<div id="title"></div>
	<div id="logo"></div>
	<div id="titulo1">Aproveche esta oportunidad!!!!!!</div>
	<div id="imagen"></div>
	<div id="texto"><li class="cont">Cada día es más notorio que las empresas quieran incrementar sus niveles de tecnología para agilizar sus procesos administrativos y comerciales de una forma eficiente y exitosa, pero desafortunadamente no encuentran una manera rentable de hacerlo. Actualmente el uso de las soluciones electrónicas en mercadeo apoyados en el Internet complementan el progreso de la empresa y posibilitan un negocio tanto a nivel nacional como internacional, abriendo sus puertas a un nuevo modelo de competitividad, incrementando sus relaciones con los clientes y consumidores de manera oportuna y efectiva.

Hoy en día las personas y empresas utilizan el Internet para acceder a un sin número de servicios y a toda la información necesaria para sus actividades diarias, así mismo las empresas pueden utilizar el medio para mejorar sus relaciones con ellos aplicando estrategias de mercadeo electrónico.
            </li>
	</div>
	<div id="menu"><a href="index.html">[INICIO]</a> - <a href="pres.html">[PRESENTACION]</a> - <a href="objetivo.html">[OBJETIVO]</a> - <a href="dirigido.html">[QUIENES DEBEN ASISTIR]</a> - <a href="contenido">[CONTENIDO]</a> - <a href="conferencistas.html">[CONFERENCISTAS]</a> - <a href="informes.html">[INFORMES E INSCRIPCIONES]</a> - <a href="apoyo.html">[PAUTE EN EL EVENTO]</a></div>
	<div id="apoyan_text">Apoyan:</div>
	<div id="pauta"> 
		<div id="fundaempresa" ><a href="http://www.fundaempresa.org" target="_blank"<img src="images/fundaempresa.jpg" border="0"></a></div>
		<div id="cnc"><a href="http://www.cncali.com" target="_blank"<img src="images/cncali.jpg" border="0"></div>
		<div id="bureau" ><a href="http://www.bureau-creativo.com" target="_blank"<img src="images/bureau.jpg" border="0"></div>
		<div id="reserv1"><a href="apoyo.html" target="_blank"<img src="images/reserv.png" border="0"></div>
		<div id="reserv2"><a href="apoyo.html" target="_blank"<img src="images/reserv.png" border="0"></div>
		<div id="reserv3"><a href="apoyo.html" target="_blank"<img src="images/reserv.png" border="0"></div>
		<div id="reserv4"><a href="apoyo.html" target="_blank"<img src="images/reserv.png" border="0"></div>
		<div id="reserv5"><a href="apoyo.html" target="_blank"<img src="images/reserv.png" border="0"></div>
		<div id="reserv6"><a href="apoyo.html" target="_blank"<img src="images/reserv.png" border="0"></div>
		<div id="reserv7"><a href="apoyo.html" target="_blank"<img src="images/reserv.png" border="0"></div>
	</div>
</div>
CSS
Código:
/* CSS Document */
body{background-color:#9999FF;}
#contenedor{
width:1024px;
}
#title{
width:648px;
height:194px;
background-image:url(title.jpg); repeat:no-repeat;
float:left;	
}
#logo{
width:376px;
height:194px;
background-color:#ffffff;
background-image:url(logo.jpg);
background-repeat:no-repeat;
background-position:center;
float:left;
}
#titulo1{
width:1024px;
margin-top:20px;
background-color:#33CCFF;
text-align:center;
float:left;
font-family:Arial, Helvetica, sans-serif;
font-size:16px;
font-weight:bold;
}

#imagen{
width:288px;
height:192px;
margin-top:50px;
margin-left:30px;
background-image:url(image.jpg);
float:left;
}
#texto{
width:400px;
margin-left:120px;
margin-top:50px;
background-color:#FFFFFF;
float:left;
}
#apoyan_text{
background-color:#3300FF;
width:1024px;
font-family:Arial, Helvetica, sans-serif;
font-size:14px;
font-weight:bold;
margin-top:20px;
clear:both;
float:left;
}
#pauta{
background-color:#330099;
width:1024px;
height:90px;
margin-top:20px;
float:left;
}
#fundaempresa{
width:100px;
height:85px;
float:left;
}
.cont{
font-family:Arial, Helvetica, sans-serif;
font-size:14px;
text-align:justify;
}
#cnc{
width:100px;
height:60px;
float:left;
}
#bureau{
width:100px;
height:56px;
float:left;
}
#reserv1{
width:101px;
height:84px;
float:left;
}
#reserv2{
width:101px;
height:84px;
float:left;
}
#reserv3{
width:101px;
height:84px;
float:left;
}
#reserv4{
width:101px;
height:84px;
float:left;
}
#reserv5{
width:101px;
height:84px;
float:left;
}
#reserv6{
width:101px;
height:84px;
float:left;
}
#reserv7{
width:101px;
height:84px;
float:left;
}
#menu{
font-family:Arial, Helvetica, sans-serif;
font-size:11px;
margin-top:40px;
float:left;
}

#menupres{
font-family:Arial, Helvetica, sans-serif;
font-size:11px;
top:520px; position:absolute;
left:40px; position:absolute;
float:left;
}
a:link {
font-family:Arial, Helvetica, sans-serif;
font-size:11px;
color:#FFFFFF;
text-decoration:none; 
}
a:hover {
text-decoration:underline;
font-weight:bold;
font-family:Arial, Helvetica, sans-serif;
font-size:11px;
color:#FFFFFF;
}
pero resulta que no me funka bien porque las imagenes que se supone van dentro del contenedor que he llamado pauta no aparecen dentro de el sino que se ubican a la izquierda de apoyan_text

alguien me podria ayudar a organizarlo?
para ilustrar un poco aqui dejo lo que he hecho hasta ahora http://seminariomipyme.crmbusiness.biz/new

la idea es que las imagenes de abajo queden en una sola linea y que lo que esta debajo del cuadro blanco baje porque automaticamente cuando el tamaño de este cuadro varie

teniendo en cuenta que apenas llevo 5 horas aprendiendo divs creo que he logrado un gran avance, solo me falta lo que pregunto jeje alguien me puede ayudar?
__________________
Say no more.......
  #5 (permalink)  
Antiguo 22/06/2009, 05:34
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 16 años, 10 meses
Puntos: 539
Respuesta: cuando minimizo la ventana se arruina el estilo

Esas imágenes pequeñas yo al menos las veo bajo la línea de "apoyan".

Añade a:
#contenedor {overflow: auto; margin: 0 auto;}
#pauta {clear:both; margin:20px 0; text-align:center;

y para todas esa imágenes inferiores te puedes ahorrar mucho código css (y "curar la divitis")
símplemente creando una clase:
#pauta a img {display: inline; ...} y colocándolas diréctamente en #pauta

Un saludo y enhorabuena por esas cinco horas.
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++
  #6 (permalink)  
Antiguo 22/06/2009, 14:58
Avatar de jomaruro
Colaborador
 
Fecha de Ingreso: junio-2002
Ubicación: Naboo
Mensajes: 5.442
Antigüedad: 21 años, 9 meses
Puntos: 361
Respuesta: cuando minimizo la ventana se arruina el estilo

Hola:

Yo las imágenes las veo juntas en una línea. Lo que he detectado es que no tienes declarado ningún DTD cosa que es muy aconsejable y te falta también las etiquetas <html> y </html>

En resumen, la estructura de una página web:

Código:
1º declarar el DTD
2º etiqueta <html>
3º etiqueta <head> donde se incluyen las etiquetas <title>, <meta>, <link>, <style>, <script> (las que necesites claro)
4º etiqueta </head>
5º etiqueta <body> donde se incluye todo el cuerpo de la página.
6º etiqueta </body>
7º etiqueta </html>
Para que sepas como utilizar el DTD léete este artículo.

Saludos.

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 22:14.