Entrar

Yo VS los divs otra vez y con problemas:(

Foley · · Solicitar retirada
Hola

Voy a vovler a intentar empezar a trabajar mi web actual y las próximas con capas/divs. Más o menos ya tengo un diseño hecho, ahora el problema es que ni si quiera los ejemplos que jorgens dá en el curso paso a paso con divs, se ven igual tanto en ie 7 como en firefox 2.

Os dejo lo que tengo:

index-definitivo.html:

<html>
<head>
<title>Probando las capas con css</title>
<LINK rel="stylesheet" href="estilo-definitivo.css" type="text/css" media="all" />
</head>
<body>
<div id="global">
<div id="logo">


Logo aquí</p>
</div>
<div id="menu-horizontal">


Aquí irá un menu horizontal así: Inicio | Foro</p>
</div>
<div id="bartolo">


Este es mi primer DIV llamado bartolo</p>
</div>
<div id="catalina">


Este es mi segundo div llamado catalina</p>
</div>
<div id="perico">


Este es mi segundo div llamado perico</p>
</div>
</body>
</html>

estilo-definitivo.css:

BODY {BACKGROUND-COLOR:yellow ; TEXT-ALIGN:center; }

#global {BACKGROUND-COLOR:#FF9900 ; BORDER: #000 1px solid ; MARGIN: 4px 4px 4px 4px ; PADDING: 4px 4px 4px 4px ; width: 900px ; }

#logo {BACKGROUND-COLOR:#FF0000 ; BORDER: #000 1px solid ; MARGIN: 0px 0px 4px 0px ; WIDTH: 890px ; TEXT-ALIGN: left ; }

#menu-horizontal {BACKGROUND-COLOR:#FFFFFF ; BORDER: #000 1px solid ; MARGIN: 0px 0px 4px 0px ; WIDTH: 890px ; TEXT-ALIGN: left ; }

#bartolo {BACKGROUND-COLOR:#00CC00 ; BORDER: #000 1px solid ; MARGIN: 0px 4px 0px 0px ; WIDTH: 115px ; FLOAT: left ; TEXT-ALIGN: left ; }

#catalina {BACKGROUND-COLOR:#00CCFF ; BORDER: #000 1px solid ; MARGIN: 0px 4px 0px 0px ; WIDTH: 651px ; TEXT-ALIGN: center ; FLOAT: left ; }

#perico {BACKGROUND-COLOR:#00CC00 ; BORDER: #000 1px solid ; MARGIN: 0px 0px 0px 0px ; WIDTH: 116px ; FLOAT: right ; TEXT-ALIGN: left ; }

P {PADDING: 5px 10px 5px 10px}

Quiero vovler a los divs porque al parecer son mejores, los robots te indexan más rápido y el código es más limpio.

Un saludo, espero que tenga solución :P
Yaneth · · Solicitar retirada
Hola

el lunes llegando lo hago jeje

que ya es sabadito y me tengo que ir

un abrazo
osanmac · · Solicitar retirada
Hola , la base que tienes se ve bien pero, no entendi como quieres que se vea?? :shock: :?:
Foley · · Solicitar retirada
se ve bien en internet explorer pero en mozilla firefox no. Lo que quiero es hacer que se vea bien tanto en internet explorer como en firefox, opera, safari,...

Saludos :wink:
Yaneth · · Solicitar retirada
Hola

primero los fallos,

te falta cerrar el div global

asi me quedó a mi con los ajustes

<html>
<head>
<title>Probando las capas con css</title>
<LINK rel="stylesheet" href="ayuda.css" type="text/css" media="all" >
</head>
<body>
<div id="global">
<div id="logo">


Logo aquí</p>
</div>
<div id="menu-horizontal">


Aquí irá un menu horizontal así: Inicio | Foro</p>
</div>
<div id="bartolo">
Este es mi primer DIV llamado bar
</div>
<div id="catalina">


Este es mi segundo div llamado catalina</p>
</div>
<div id="perico">


Este es mi segundo div llamado perico</p>
</div>
</div>
</body>
</html>


BODY {BACKGROUND-COLOR:yellow ; TEXT-ALIGN:center; }

#global {BACKGROUND-COLOR:#FF9900 ; BORDER: #000 1px solid ; MARGIN: 4px 4px 4px 4px ; PADDING: 4px 4px 4px 4px ; width: 900px ; }

#logo {BACKGROUND-COLOR:#FF0000 ; BORDER: #000 1px solid ; MARGIN: 0px 0px 4px 0px ; WIDTH: 890px ; TEXT-ALIGN: left ; }

#menu-horizontal {BACKGROUND-COLOR:#FFFFFF ; BORDER: #000 1px solid ; MARGIN: 0px 0px 4px 0px ; WIDTH: 890px ; TEXT-ALIGN: left ; }

#bartolo {BACKGROUND-COLOR:#00CC00 ; BORDER: #000 1px solid ; MARGIN: 0px 4px 0px 0px ; WIDTH: 115px ; TEXT-ALIGN: left ; float:left }

#catalina {BACKGROUND-COLOR:#00CCFF ; BORDER: #000 1px solid ; MARGIN: 0px 4px 0px 0px ; WIDTH: 649px ; TEXT-ALIGN: center ; float:left }

#perico {BACKGROUND-COLOR:#00CC00 ; BORDER: #000 1px solid ; MARGIN: 0px 0px 0px 0px ; WIDTH: 115px ; TEXT-ALIGN: left ; float:left }


P {PADDING: 5px 10px 5px 10px}
Raulyure · · Solicitar retirada
Foley escribió:Alguien sabe solucionarlo??:?
Hola:
El internet Explorer supone que las tres capas que usted tiene flotando, ocupan un sitio y por eso "obliga a la capa contenedora a tenerlos dentro de ella, el Firefox no lo hace así porque como para el están esas capas flotando, o sea (en ningún lugar físico) entonces es como si estuviesen en el aire, para que puedan esas capas visualizarse dentro de la capa contenedora o global, lo que puede hacer es al final de la capa global añadirle un ;height:100%;}.
Saludos
Agradecido de los que aprenden enseñando
Raulyure · · Solicitar retirada
Raulyure escribió:
Foley escribió:Alguien sabe solucionarlo??:?
Hola:
El internet Explorer supone que las tres capas que usted tiene flotando, ocupan un sitio y por eso "obliga a la capa contenedora a tenerlos dentro de ella, el Firefox no lo hace así porque como para el están esas capas flotando, o sea (en ningún lugar físico) entonces es como si estuviesen en el aire, para que puedan esas capas visualizarse dentro de la capa contenedora o global, lo que puede hacer es al final de la capa global añadirle un ;height:100%;}. O menos
Saludos
Agradecido de los que aprenden enseñando
Foley · · Solicitar retirada
Gracias por tu ayuda.

De todas formas queda extraño no?? Imagínate que los divs catalina (centro), bartolo (izquierda) y perico (derecha) no tengan suficiente alto como para llegar hasta abajo de todo, entocnes la página quedaría fea no crees? :(

Seguiré intentándolo, hoy me pondré a hacer el disño más o menos definitivo.

Saludos :wink:
Raulyure · · Solicitar retirada
Foley escribió:Gracias por tu ayuda.

De todas formas queda extraño no?? Imagínate que los divs catalina (centro), bartolo (izquierda) y perico (derecha) no tengan suficiente alto como para llegar hasta abajo de todo, entocnes la página quedaría fea no crees? :(

Seguiré intentándolo, hoy me pondré a hacer el disño más o menos definitivo.

Saludos :wink:
Hola:
En realidad a esas tres capas hay que ayudarles un poco para que se puedan quedar dentro, ya que po si solas no lo van a hacer, por eso para que vea a veces lo importante que es el pie, si usted crea un pie por ejemplo en la pagina
<div id="pie">El pie</div>
</div>
</body>
Y en la hoja de estilo le pone:
#pie{background-color:#008000;clear:both;}
entonces verá como la capa global tiene que llegar hasta ese pie, dejando dentro las otras tres capas, sin tener que estar ocupándo ese height:100% que le dije antes. Y en lo que respecta a la capa global, sería conveniente, si usted quiere, centrarla poniéndo
;margin:4px auto;. en vez de margin:4px 4px 4px 4px;
El clear:both que le pone a la capa pie significa que esa capa no dejará que ninguna capa que flote, como Bartolo, Catalina, y Perico lo hagan ni por la izquierda ni por la derecha de la capa pie, por lo tanto les obliga a estar arriba de ella, y eso hace entonces que la capa global tenga que llegar hasta abajo de la capa pie, y lo que escriba en esas capas flotantes siempre quedará dentro de la capa global, cuando vaya experimentando, se dará cuenta que no es tan complicado
Saludos
Agradecido de los que aprenden enseñando
rafaelcarpio · · Solicitar retirada
La mejor manera para que todas las capas te queden dentro de la capa global es añadiendo la propiedad "overflow: auto" a la capa global verás como ahora te queda de P.M.