ayuda con css!!

pollojuanpa1 · 17 Dic 2009

hola bakunos, por favor, alguien que me ayude, me urge componer una pagina web que estoy haciendo y tengo dias con un error tonto que no se que es, estoy usando css con id's para crear divs y ahi insertar clases de texto y escribir, el problema es que no se por que, a pesar de ser css el archivo se mira muy diferente en internet explorer y en mozilla, en ambos tiene varios defectos que no se.... en el editor (dreamweaver) se mira todo bien, a excepcion que el divisor que contiene todo se re diseña y aunque le pongo ancho 850 termina con 12000 y no hay nada ahi que le haga expandirse, alguna idea? alguien que me ayude? aqui les pongo unas caps de lo que les digo, tambien tengo el codigo css por si lo queiren ver, esta medio complicado porque tiene muchos divs dentro de mas divs, pero revisandolo bien no tendria por que fallar, no entiendo, alguien me da una ayuda?? XD por favor!

asi se mira con internet explorer
http://img710.imageshack.us/i/iexplorer.jpg/

asi con chrome y tambien asi con internet explorer
http://img9.imageshack.us/i/gchromei.jpg/

asi se mira con el dreamweaver (se supone que todo estaria bien)
http://img46.imageshack.us/i/diseodreamweaver.jpg/

y este es mi codigo (css y dreamweaver)

CSS

body
{
background:url(images/top_bg.jpg) repeat-x top #F6F5E9;
margin:auto;
font-family: Arial, Verdana, Helvetica, sans-serif;
font-size:11px;
color:#ccc;
}

h1{
font-size:35px;
font-family:Arial, Verdana, Helvetica, sans-serif;
text-align:center;
text-transform:capitalize;
color: #660066;
width:550px;
height:auto;
}

}
h2{
font-size:13px;
color:#666666;
margin:0px;
padding:3px;
}
h3{
font-size:14px;
color:#666666;
margin:0px;
padding:3px;
}
h4{
font-size:12px;
color: #CE6700;
margin:0px;
padding:3px;
font-weight:normal;
}
.clear {
clear:both;
overflow:hidden;
height:4px;
}

#main_content{
width:850px;
height:auto;
margin:auto;
margin-top: 20px;
background-color:#F6F6EE;
border:8px #FFFFFF solid;
}

#top_banner{
width:850px;
height:450px;
background:url(images/illustr.jpg) no-repeat right;
}
img.logo{
padding-left:15px;
}

/* CONTENEDOR TOPE*/
#contenedortope{
width:850px;
height:300px;
margin:auto px;
background:url(images/logosuperior1.jpg)no-repeat right;
}

#contenedorabajo{
width:350px;
height:174px;
float:left;
background:url(images/logoparte2.jpg)no-repeat right;
}

/*------parte 2 del logo---------*/
#contenedorabajo2{
width:500px;
height:174px;
float:right;
background:url(images/vision11.jpg)no-repeat right;
}

/*------animacion flash---------*/
#contenedorflash{
width:850px;
height:225px;
float:left;

}

/*-----contiene el panel azul y el verde--------*/
#contenedortiendahostal{
width:850px;
height:200px;
float:left;
}

/*------parte a la mitad el contenedor de arriba, es el */
/*-------panel azul---------*/
#espaciohostal{
width:420px;
height:200px;
float:left;
}

/*--espacio para el hostal a, dejando un espacio a la izq--*/
#espaciohostal1{
width:275px;
height:200px;
float:right;
background:url(images/hostalindex.jpg);
}

/*espacio final donde el panel a estara (panel azul) -*/
#espaciotienda12{
width:430px;
height:200px;
}

/*-separador vertical-*/
#espaciovertical{
width:10px;
height:200px;
}

/*panel b, o panel verde*/
#espaciotienda{
width:430px;
height:200px;
float:right;
}

/*---espacio para adentro del panel verde----*/
#espacioadentro12{
width:420px;
height:200px;
float:right;
}

/*----aqui ira toda la info del panel------*/
#finalpanelb{
width:275px;
height:200px;
float:left;
background:url(images/fondopanelb.jpg);
}

#espaciologos{
width:110px;
height:200px;
float:left;
}

#espacioescribir{
width:165px;
height:200px;
float:right;
}

/*------top menu---------*/
#top_menu{
width:850px;
margin:auto;
padding:15px;
}

/*----page content----*/
#page_content{
width:800px;
height:auto;
margin:auto;
}
#page_content_left{
width:400px;
height:auto;
float:left;
padding:10px;
border-right:1px #800000 dashed;
}
#page_content_right{
width:400px;
height:auto;
float:left;
padding:10px;
}
.title{
font-size:16px;
color:#808080;
clear:both;
padding-left:10px;
}
.content_text{
font-size:11px;
color:#333333;
height:auto;
text-align:justify;
padding:8px;
}
img.pic{
padding:0px;
margin-right:10px;
margin-bottom:10px;
border:5px #FFFFFF solid;
float:left;
}
img.map_pic{
padding:0px;
margin:10px;
border:5px #FFFFFF solid;
float:right;
}
img.gallery{
padding:0px;
margin:8px;
border:5px #FFFFFF solid;
float:left;
}
.more{
width:auto;
float:right;
height:20px;
}
.link_more a{
width:auto;
float:left;
text-decoration:none;
color:#990000;
font-size:12px;
padding:3px 23px 0 5px;
}
.link_more a:hover{
text-decoration:underline;
}
img.more{
float:left;
}
#page_bottom{
width:830px;
clear:both;
padding:10px;
height:auto;
}
img.inspiration{
padding:2px;
margin:3px;
border:2px #FFFFFF solid;
}

/*-------footer-----*/
#footer{
width: auto;
height:100px;
clear:both;
margin-top:40px;
background-color: #333333;
}
#footer_content{
width:850px;
margin:auto;
}
#copyrights{
width:350px;
color: #666666;
font-size:10px;
float:left;
padding:10px;
}
#madeby{
width:140px;
height:40px;
float:right;
text-align:center;
padding-top:0px;
}
#madeby a{
text-decoration:none;
color:#666666;
}

/*---------footer menu---------*/
ul.footer_menu {
list-style-type:none; float:left; display:block; width:auto; height: auto; margin:0px; padding:3px 0 0 10px;}

ul.footer_menu li {
display:inline;}

a.nav2:link, a.nav2:visited {
display:block; float:left; padding:4px 0 0 5px; margin:2px;width: auto; height:20px; text-align:center; line-height:16px;
text-decoration:none; color: #999999;}

a.nav2:hover {
display:block; float:left; padding:4px 0 0 5px; margin:2px;width:auto; height:20px; text-align:center; line-height:16px;
text-decoration:none;color:#000000;}

y Dreamweaver

<!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">
<head>
<title>PhotoGallery</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="style.css" />
<style type="text/css">

</style>
</head>
<body>
<div id="main_content">

<div id="contenedortope">
</div>
<div id="contenedorabajo2">
<div class="content_text">
<p>  </p>
<p>Welcome to our photoGallery Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum </p>
</div>
</div>
<div id="contenedorabajo">

<p> </p>
<p><img src="images/es.gif" width="16" height="11" /></p>
<p><img src="images/en.gif" width="16" height="11" /> </p>
</div>
<div id="contenedorflash">
</div>

<div id="contenedortiendahostal">
<div id="espaciohostal">
<div id="espaciohostal1">
<div id="espaciologos">
</div>
<div id="espacioescribir">
</div>
</div>
</div>

<div id="espaciotienda">
<div id="espaciotienda12">
<div id="espacioadentro12">
<div id="finalpanelb">
<div id="espaciologos">
</div>
<div id="espacioescribir">
</div>
</div>
</div>
<div id="espaciovertical">
</div>
</div>
</div>
</div>

<div id="separadorhorizontal">
</div>

<div id="contenedorpanelescde">
<div id="contenedorpanelescd">
<div id="contenedorpanelec">
<div id="finalpanelc">
<div id="espaciologos">
</div>
<div id="espacioescribir">
</div>
</div>
<div id="separadorpanelc">
</div>
</div>
<div id="contenedorpaneled">
<div id="finalpaneld">
<div id="espaciologos">
</div>
<div id="espacioescribir">
</div>
</div>
<div id="separadorpanelc">
</div>
</div>
</div>
<div id="contenedorpanelc">
<div id="espaciologos">
</div>
<div id="espacioescribir">
</div>
</div>
</div>

<div id="finalabajo1">
</div>

<div id="banerabajo">
<div id="espaciobanerabajo">
<div id="banerabajo12">
<div id="banerabajofinal">

</div>
</div>
</div>
</div>

</div>

<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<div id="footer"><div id="footer_content">
<div>
<ul class="footer_menu">
<li><a href="http://pagina.com/" class="nav2">home </a></li>
<li><a href="http://pagina.com/" class="nav2">services</a></li>
<li><a href="http://pagina.com/" class="nav2">gallery</a></li>
<li><a href="http://pagina.com/" class="nav2">contact</a></li>
</ul>
</div>
<div id="madeby"> <a href="http://www.csscreme.com"><img src="images/csscreme_link.jpg" width="125" height="40" border="0" alt="" /></a><br />
<a target="_blank" href="http://validator.w3.org/check?uri=referer">Xhtml</a> <a target="_blank" href="http://jigsaw.w3.org/css-validator/check/referer">css</a> </div>
</div>
</div>
</body>
</html>

p.d. revise el codigo css y el codigo del dreamweaver y todos los divs van donde tendrian que estar, todos los ciclos cerrados y nada que se supone haga eso...

sroad · 17 Dic 2009

¿y el código?

histericu · 18 Dic 2009

te digo, yo estuve haciendo una cosa asi, y el gran problema en la web es la incompatibilidad de css entre ie y firefox

de hecho uno se la pasa mas tiempo arreglando esas incompatibilidades que desarrollando

yo hize una cosa, por que tenia menus desplegables, y un monton de cosas y me costo pero agarre en php colo una funcion que me retornaba que navegador tenia, si era IE o MOZiLLA

en caso de uno u otro en el id, imprimia el include a una archivo css para ie o para mozilla, segun fuera, y desarrolle cada archivo por separado, en verdad ambos archivos enuncian identicos sectores, pero lo hacen con distintas notaciones, es decir, cada uno con lo que le funcionaba, sino hay otras formas pero esta fue la solucion que opte, por que mi menu desplegable en javscript, no lo pude posicionar para ambos navegadores por un css recontra parchado unico para ambos

nose si te sirva pero suerte compadre

SteveDSG · 18 Dic 2009

Bueno pues en primera voy a decirte mi hermano, que para lo que estas diseñando, es mucho mas facil , y no te quiebras tanto la cabeza, creando el codigo a mano, asi vas paso a paso y no tienes esas complicaciones, y lo digo por que lo que estas haciendo de web, es muy simple.. muy sencillo, pa estar haciendolo en dreamweaber.

Hace muchos años yo trabajaba en dreamweaber, cuando se usaban las tablas, y siempre la bendita pendejada, me causaba los problemas que a ti, salian huecos de la nada, y ya con css y los divs, es mucho mas facil trabajar a mano ya que con margin, y padding, puedes colocar donde quieras tus cajas , imagenes etc.

Bueno aqui te digo algo de lo que puedes checar a ver si te lo corrige;

propiedad Float: Juega con los valores para ver si te lo corrige. Left, right.

Prueba agregando alguna de estas propiedades;

clear:both;

o como he solucionado varias veces problemas del tipo con la propiedad;

position: y jugando con sus valores, relative y absolute

o ya de plano con la propiedad display y las propiedades inline y block .

Espero te sirva de algo, y si no logras arreglarlo pues si quieres te hecho una mano , me mandas MP y te mando mi msn.

Saludos.

Se me olvidaba, para las incompatibilidades que a veces hay , pasa muy seguido , que cierto width, y height, que defines en el css, varia el pixelaje entre navegadores, esto hace que se salgan, digamos los bloques, del espacio que tenian destinado, y es por eso que se brincan de linea como te pasa a ti, para esto se ocupa un fix en el caso de IE, con un simple asterisco * antes de los valores width, heigh, o bien margin y padding.

Ejemplo;
Tengo el siguiente margin; que se me ve bien en opera, y en firefox, pero en IE se brinca hacia abajo el div por que le sobran 3 px digamos en left;

margin: 6px 0px 4px 0px; (orden margin: left top right bottom

como en IE se me descuadra por que le sobran 3px en el margen left, o izquierdo, utilizo el fix para que le de el valor de 3 pero solo en IE; QUEDARIA ASI

*margin: 3px 0px 4px 0px;

entonces

margin: 6px 0px 4px 0px; Margenes Estandard que se ven bien en opera y firefox
*margin: 3px 0px 4px 0px; Fix para que se vea bien en IE.

Eso tambien podria ayudarte, y si no , pues ya sabes otro truquin jajajaja
Ahora si XAU.

pollojuanpa1 · 21 Dic 2009

aun no lo puedo componer

sroad · 21 Dic 2009

Aún es dificil verlo así, mejor sube todo y pon el link, para ver realmente cómo es.

loganmx2000 · 21 Dic 2009

Yo te ayudaría, pero veo demasiado código, se puede hacer que funcione sin tanta línea y hacerlo más limpio. ¿No tendrás los archivos fuentes que puedas subir?

aldebaram798 · 23 Dic 2009

"y este es mi codigo (css y dreamweaver)"... creo que todavía eres novato dreamweaver no es lenguaje es un editor.. (de lo más malo por cierto jeje), el lio que tenes es que hay un montón de capas flotando y ps con eso hay que tener mucho ciudado...

Lo del espacio que deja internet explorer es porque el estilo por defecto trae un padding o un margin con un valor alto, eso se soluciona colocando estas dos propiedades a cero para todos los elementos, mejor dicho debes resetear el css del mavegador para ello te recomiendo que busques un "reset.css" con google se encuentran muchos, y lo de las cajas fuera de flujo debes revisar bien que el elemento padre contenga bien a sus hijos.

Espero haber ayudado en algo.

Saludos

Hola!

ayuda con css!!

pollojuanpa1

Bovino Milenario

sroad

Bovino adicto

histericu

Bovino maduro

SteveDSG

Bovino Milenario

pollojuanpa1

Bovino Milenario

sroad

Bovino adicto

loganmx2000

Bovino adicto

aldebaram798

Bovino maduro