Foros del web, para los que viven de bits

MMCQ · 21-oct-2006, 12:38

Hola! como estan?

hace unas semana puse una imagen en photoshop que hice de como queria que fuera mi pagina. ahora posteo para que vean el progresos de las misma y para que me ayuden a resolver algunos problemitas..

asi era como queria que saliera

y haci es como me esta saliendo ahora tengo el 70% del CSS , el otro 30% estoy pensando como hacerlo ya que tengo algunas dudas.

Ahi mismo le ppresento el problemita que tengo ese Deslizamiento que tiene, deseo que este aliniado con el header.

aqui les dejo el CSS.

Cita:

#CONTAINER {
background-color:#FFF;
//*border-style:solid;
border-color:#000000;*//
margin: 0 auto;
width:790px;
height:auto;
}

.header{

width:790px;
height:133px;
background-color:#fff ;
margin:0 0 10px 0;
}

.barra{
background-image:url(images/barra.gif);
background-repeat: no-repeat;
width:790px;
height:30px;
background-color:#fff;

margin:0 auto;
}

.izquierda{
width:460px;
height:auto;
background-color:#FFFFFF;
margin:0 auto;
float:left;
color: #FFF;
padding:3px;

}

.izslide{
width:460px;
height:225px;

}
.izpubli{
width:460px;
height:45px;
margin:0 auto;
}

.derecha{
width:310px;
height:auto;
background-color:#fff;
margin:0 auto;
float:right;
color: #FFF;
padding:3px;

}
.izmenu{
width:310px;
height:150px;
border-bottom: 2px solid #F7F7F7;
border-left: 2px solid #F7F7F7;
border-right: 1px solid #F7F7F7;

}

.busqbox{
float:right;
margin: 3px 3px;

}
.loginbox{
float:left;
margin: 2px 2px;

}

ul {
padding:0px;
margin:0px;
width:100%;
color:#333;
}
ul li {
width:100%;
float:left;
margin:0 0 5px 0 ;
}
.lista_izquierda{

float:left;
width:130px;
font: 12px Arial, Helvetica, sans-serif;
border-right: 1px dotted #CFCFCF ;
padding:3px;

}

ul a {
text-decoration: none;
color: #333;
background: #FFF;
display: block;
padding: 3px 6px;
width: 138px;

}
ul a:hover {
background: #FF0000;
color:#fff;

}
ul a:visited {
color:#33333;
}
ul a:active {
color:#333333;
}
.lista_derecha{
float:right;
width:130px;
font: 12px Arial, Helvetica, sans-serif;

}
.sep{
margin:5px;

}
.ssep{
margin:15px;

}
.img-menu{
margin: 0 0 0 5px ;
}

.izpubli2{
width:300px;
height:105px;

}
.noticias_iz{
float:left;
width:250px;

}
.ultima_iz{
float:right;
width:190px;
margin-left:5px;

}
.eventos_iz{
float:left;
width:280px;
margin-left:10px;

}

aqui el HTML

Cita:

<div class="izquierda">
<div class="izslide">
<img src="images/slide.gif"width="460" height="225"></div>
<div class="sep"></div>
<div class="izpubli">
<img src="images/publi.gif"width="460" height="45"></div>
<div class="ssep"></div>

<div class="noticias_iz">
<h1>Noticias</h1>
</div>
<div class="ultima_iz"><img src="images/ultima.gif"width="195" height="190"></div>

</div>

<div class="derecha">

<div class="izmenu">
<div class="img-menu"><img src="images/menu.gif"width="151" height="18"></div>

<div class="sep"></div>
<ul id="lista_izquierda" class="lista_izquierda">
<li><a href="r/2h">Inicio</a></li>
<li><a href="r/25">Features</a></li>
<li><a href="r/28">Noticias</a></li>
<li><a href="r/44">Foros</a></li>
<li><a href="r/2r">Chat</a></li>
</ul>
<ul id="lista_derecha" class="lista_derecha">
<li><a href="r/2h">Eventos</a></li>
<li><a href="r/25">Videos</a></li>
<li><a href="r/28">Registrate!</a></li>
<li><a href="r/44">Blog</a></li>
<li><a href="r/2r">Contacto</a></li>
</ul>
</div>
<div class="sep"></div>

<div class="izpubli2">
<img src="images/banner.gif"width="315" height="104"></div>
</div>
<div class="sep"></div>
<div class="eventos_iz">
<h1> Eventos </h1>
</div>
</div>
</div>

</body>
</html>

Rafael · 01-nov-2006, 10:57

Perdón, me dió un poco de flojera leer. :)

Abajo del encabezado puedes meter tooodo en un div y ajusta o el margin o el padding de la izquierda.

21-oct-2006, 12:38	#1 (permalink)
MMCQ Fecha de Ingreso: marzo-2006 Mensajes: 369	Progreso: Mi CSS Hola! como estan? hace unas semana puse una imagen en photoshop que hice de como queria que fuera mi pagina. ahora posteo para que vean el progresos de las misma y para que me ayuden a resolver algunos problemitas.. asi era como queria que saliera y haci es como me esta saliendo ahora tengo el 70% del CSS , el otro 30% estoy pensando como hacerlo ya que tengo algunas dudas. Ahi mismo le ppresento el problemita que tengo ese Deslizamiento que tiene, deseo que este aliniado con el header. aqui les dejo el CSS. Cita: #CONTAINER { background-color:#FFF; //border-style:solid; border-color:#000000;// margin: 0 auto; width:790px; height:auto; } .header{ width:790px; height:133px; background-color:#fff ; margin:0 0 10px 0; } .barra{ background-image:url(images/barra.gif); background-repeat: no-repeat; width:790px; height:30px; background-color:#fff; margin:0 auto; } .izquierda{ width:460px; height:auto; background-color:#FFFFFF; margin:0 auto; float:left; color: #FFF; padding:3px; } .izslide{ width:460px; height:225px; } .izpubli{ width:460px; height:45px; margin:0 auto; } .derecha{ width:310px; height:auto; background-color:#fff; margin:0 auto; float:right; color: #FFF; padding:3px; } .izmenu{ width:310px; height:150px; border-bottom: 2px solid #F7F7F7; border-left: 2px solid #F7F7F7; border-right: 1px solid #F7F7F7; } .busqbox{ float:right; margin: 3px 3px; } .loginbox{ float:left; margin: 2px 2px; } ul { padding:0px; margin:0px; width:100%; color:#333; } ul li { width:100%; float:left; margin:0 0 5px 0 ; } .lista_izquierda{ float:left; width:130px; font: 12px Arial, Helvetica, sans-serif; border-right: 1px dotted #CFCFCF ; padding:3px; } ul a { text-decoration: none; color: #333; background: #FFF; display: block; padding: 3px 6px; width: 138px; } ul a:hover { background: #FF0000; color:#fff; } ul a:visited { color:#33333; } ul a:active { color:#333333; } .lista_derecha{ float:right; width:130px; font: 12px Arial, Helvetica, sans-serif; } .sep{ margin:5px; } .ssep{ margin:15px; } .img-menu{ margin: 0 0 0 5px ; } .izpubli2{ width:300px; height:105px; } .noticias_iz{ float:left; width:250px; } .ultima_iz{ float:right; width:190px; margin-left:5px; } .eventos_iz{ float:left; width:280px; margin-left:10px; } aqui el HTML Cita: <div class="izquierda"> <div class="izslide"> <img src="images/slide.gif"width="460" height="225"></div> <div class="sep"></div> <div class="izpubli"> <img src="images/publi.gif"width="460" height="45"></div> <div class="ssep"></div> <div class="noticias_iz"> <h1>Noticias</h1> </div> <div class="ultima_iz"><img src="images/ultima.gif"width="195" height="190"></div> </div> <div class="derecha"> <div class="izmenu"> <div class="img-menu"><img src="images/menu.gif"width="151" height="18"></div> <div class="sep"></div> <ul id="lista_izquierda" class="lista_izquierda"> <li><a href="r/2h">Inicio</a></li> <li><a href="r/25">Features</a></li> <li><a href="r/28">Noticias</a></li> <li><a href="r/44">Foros</a></li> <li><a href="r/2r">Chat</a></li> </ul> <ul id="lista_derecha" class="lista_derecha"> <li><a href="r/2h">Eventos</a></li> <li><a href="r/25">Videos</a></li> <li><a href="r/28">Registrate!</a></li> <li><a href="r/44">Blog</a></li> <li><a href="r/2r">Contacto</a></li> </ul> </div> <div class="sep"></div> <div class="izpubli2"> <img src="images/banner.gif"width="315" height="104"></div> </div> <div class="sep"></div> <div class="eventos_iz"> <h1> Eventos </h1> </div> </div> </div> </body> </html>

Herramientas
Mostrar Versión Imprimible Enviar por Correo
Desplegado
Mode Lineal Cambiar a Modo Hibrido Cambiar a Modo Hilado

01-nov-2006, 10:57	#2 (permalink)
Rafael Fecha de Ingreso: marzo-2003 Mensajes: 1.050	Perdón, me dió un poco de flojera leer. :) Abajo del encabezado puedes meter tooodo en un div y ajusta o el margin o el padding de la izquierda.