INFORMATICA Y OCIO

CECISOL08 · Conociendo Foroz Registrado: 29 Feb 2008 Mensajes: 16

Hola que tal, nuevamente pidiendo ayuda...
Practicando con CSS hice un contenedor general, un content donde estara la columna left, right y centro.... pero algo mal estoy poniendo por que hal insertar una imagen en la columna centro las demas columnas right y left se desplazan hacia abajo...
les paso lo que hice..
estoy probando cual es el error y no me sale.....
si alguien me pueda ayudar.....

por que al probar sacas pones...y hago lio.... nada mas.....

saludos amigos..

#container{
width:800px;
min-width:760px;
padding:0 20px;
margin:0 auto;
background:#f0f0f0;
color:#333;
text-align:left;
border-left:1px solid #eef;
border-right:1px solid #eef;
}

#content{
margin-top:30px;
width:800px;
clear:both;

#centro{
width:460px;
margin-left:280px;
margin:auto;

}

#right{

width:150px;
margin-left:120px;
margin-top:-200px;
float:right;
left:600px;
top:100px;
height:510px;

}

#left{

border:2px solid #000099;
width:175px;
margin-top:-300px;
margin-left:-15px;
float:left;
clear:left;}

#footer{
clear:both;
padding:10px 0 12px 24px;
text-align:center;
color:#6699FF;
}
Confused

BenJa - KuMo · Publicado: Vie Mar 21, 2008 9:14 pm **Título del mensaje**:

No falta por cerrar el segundo parrafo de codigo? Confused

_________________

Web de Metal Slug y Kof!!

Web en Español de Project Zero!!

CECISOL08 · Conociendo Foroz Registrado: 29 Feb 2008 Mensajes: 16

Si...
Solo que al pasarlo aqui sin querer no coloque la llave...
Pero en el codigo original esta cerrada.

saludos

malder · Publicado: Sab Mar 22, 2008 6:05 pm **Título del mensaje**:

puede ser que la imagen que intruduces sea más ancha que 460px?
_________________
Un titulo descriptivo te da mayor posibilidad a encontrar una buena ayuda.
Por favor lee las normas

BenJa - KuMo · Publicado: Sab Mar 22, 2008 8:50 pm **Título del mensaje**:

Ok, pues revisa esto que te ha dicho Malder ya que en el codigo, en el bloque del centro, esta espeficicado como limite 460px; por lo que si pones una imagen mas grande de esa dimension se fastidia la cosa.. Confused

_________________

Web de Metal Slug y Kof!!

Web en Español de Project Zero!!

CECISOL08 · Conociendo Foroz Registrado: 29 Feb 2008 Mensajes: 16

Benja hice lo que dijistes la imagen esta bien....
Mira si no es molestia les paso todo lo que hice....si hago clic en uno de los botones del menu, las columnas quedan en su posicion....y si hago clic en otros se van hacia arriba....

Te paso....lo que puse en la hoja de estilo.....

Y te paso lo que puse...en ela principal....

Si me pueden hechar una mano les reagradezco, ya que estoy aprendiendo....leeo modifico pero creo que hago mas lio...

SALUDOS

Esto es lo que puse en la hoja de estilo.....
/*todo el body tendra estas prop ..........................................................*/

body{margin:0;
padding:0;
font:76% tahoma,verdana,sans-serif;
background:#e6e6e6 url(images/bodybg.png) repeat-x;
color:#333;
text-align:center;
}

a{
text-decoration:none;
color:#003399;
font-weight:bold;
}

a:hover{
text-decoration:underline;
}
p{
font-size:12px;
margin:0 0 15px 0;
line-height:1.5em;
}
h1,h2,h3,h4{
margin:0;
padding:0;
font-weight:normal;
}
h1{
font-size:3.2em;
letter-spacing:-3px;
color:#003399;
margin:12px 0 5px 20px;
}

h1 a:hover{
text-decoration:none;
}
h2{
font-size:1.8em;
letter-spacing:-1px;
margin:-10px 0 0 50px;
color:#3366CC;
}

h3{
color:#000066;
font-size:1.4em;
margin:1em 0 0.5em 0.5em;
}
h4{
font-size:1.2em;
font-weight:bold;
}
/**contenedor principal............................................................*/
#container{
width:800px;
min-width:760px;
padding:0 20px;
margin:0 auto;
background:#f0f0f0 url(contentbg.png) repeat-x;
color:#333;
text-align:left;
border-left:1px solid #eef;
border-right:1px solid #eef;
}

/*logo.................................................*/
#logo{
float:left;
height:150px;
background:url(globe.gif) no-repeat; /* Delete this line to remove the animated globe */
width: 42%;
color: #333;
}

#logo a{
color:#567;
font-weight:normal;
}

#logo a:hover{
color:#269;
}

/*----menu encabezado----------------------------------------------------*/
#menu{
height:71px;
padding-top:35px;
text-align: right;
}

#menu a{
margin:0;
height:100px;
padding:34px 6px 41px 6px;
font-size:1.6em;
font-weight:normal;
letter-spacing:-1px;
color:#888;
}

#menu a:hover{
color:#003399;
text-decoration:none;
background: #fff url(menuhover.png) repeat-x;
padding:34px 5px 41px 5px;
border-left: 1px solid #eee;
border-right: 1px solid #eee;
}

/**CONTENEDOR DE PRINCIPAL,LEFT*/
#content{
margin-top:30px;
width:800px;
clear:both;
background:url(globebottom.gif) bottom left no-repeat;
}

#content h2{
margin:0 0 10px 0;
color:#555;
border-bottom:2px solid #abb;
}

#content h2 a{
color:#555;
font-weight:normal;
}

#content h2 a:hover{
color:#269;
text-decoration:none;
background:none;
}

#content p{
margin:0.5em 1em 0.8em 1em;
}

/*COLUMNAS*/

#centro{
width:460px;
margin-left:280px;
margin:auto;

}

#right{
width:150px;
margin-left:120px;
margin-top:-300px;
float:right;
left:600px;
top:100px;
height:510px;

}

#right h2{
margin:15px 0 5px 0;
width:98%;
font-size:1.6em;
}

#left{
position:absolute;
border:2px solid #000099;
width:175px;
margin-top:-300px;
margin-left:-15px;
float:left;
clear:left;

}

/*PIE*/
#footer{
clear:both;
padding:10px 0 12px 24px;
text-align:center;
color:#6699FF;
}

#footer a{
color:#3333FF;
font-weight:normal;
}

#footer span{
color:#aaa;
font-size:2em;
letter-spacing:-2px;
}

/*el box principal*/
.entry{
position:relative;
margin:0 0 20px 0;
border:#fff 2px solid;
background:#eee url(entrybg.png) repeat-x;
color:#333;
padding:10px 10px 0 10px;
}

.entry a:hover, .intro a:hover{
text-decoration:none;
padding-bottom:2px;
background:url(flash2.gif) bottom left repeat-x; /* Delete this line to remove the flashing underline for regular links */
}

.entry img{
position:relative;
}

#box{
width:200px;
height:150px;
margin:auto;
}
/*con flechicta para los links*/
.link{
color:#0033CC;
background:url(linkarrow.gif) left no-repeat;
display:block;/*como se va a mostrar*/
margin:4px 0 0 0;
padding:2px 1em;
}

.link:hover{
color:#48b;
background:url(blinkarrow.gif) left no-repeat; /* Delete this line to remove the blinking arrows by the links */
text-decoration:none;
}
/*imagen para el right*/
.thumbs img{
position:relative;
padding:3px;
margin:0 2px 2px 0;
border:1px solid #fff;
background-color:#ddd;
color: #555;
}

.thumbs img:hover{
background: url(flash.gif); /* Delete this line to remove the blinkingblue frame around the thumbnails */
}
/*imagen en el principal*/
.entryphoto{
margin:5px 10px 10px 0;
float:left;
padding:3px;
border:1px solid #fff;
background-color:#ddd;
color:#333;
}

/*datos del texto fecha ymas*/
.meta{
clear:both;
border-top: 2px solid #ccc;
padding: 5px 1px 0 0;
margin:10px 0 0 0;
text-align:right;
font-size:0.9em;
color:#567;
}

.date{
float:left;
font-weight:bold;
}

Te paso lo que puse en el que index....

<style type="text/css">@import url(estilonuevo.css);
</style>
<title>Documento sin título</title>

</head>

<body>
<div id="container">
<div id="logo">
<h1>CONSUMIDORES</h1>
</div>
<div id="menu">
<a href="nuevo.php?op=principal">PRIMERO</a>
<a href="nuevo.php?op=segundo">SEGUNDO</a>
<a href="nuevo.php?op=tercero">TERCERO</a>
</div>

<div id="content">

<div id="centro">
<div class="entry">
<?php
echo '<div id="centro">';

switch($_GET['op'])
{
case principal:
include("principal.php");
break;
case segundo:
include("segundo.php");
break;
case tercero:
include("tercero.php");
break;

}
echo '</div>';
?>
<p class="meta"><span class="date">Marzo 21, 2008 </span>Por CP.</p>
</div>

</div>

<div id="right">
<p>este es derecho</p>
<p class="thumbs">
<a href="index.html"><img src="images/thumb3.png" /></a></p>
</div>

<div id="left">
<p class="thumbs">
<a href="index.html"><img src="images/thumb3.png" /></a></p>
</div>

<div id="footer">
<a href="#">LINK EN PIE</a>
<span>CLASE span</span>
</div>

</div>
</div>
</body>
</html>

BenJa - KuMo · Publicado: Dom Mar 23, 2008 9:55 pm **Título del mensaje**:

Lo siento, a mi se me desencaja el diseño por completo.. no veo ni columnas ni nada.. en la hoja css existen muchas referencias a archivos que tu tendras en tu pc pero al colocarlas yo, no me da el resultado que espero.. Confused

_________________

Web de Metal Slug y Kof!!

Web en Español de Project Zero!!

malder · Publicado: Dom Mar 23, 2008 11:55 pm **Título del mensaje**:

CECISOL08, sube esa página con su css a un host y muestranosla, de esa forma será mas agradable para nosotros poder ayudarte
_________________
Un titulo descriptivo te da mayor posibilidad a encontrar una buena ayuda.
Por favor lee las normas

	Índice del Foro Foroz comunity :: Webmasters	Todas las horas están en GMT + 1 Hora
Página 1 de 1