Foros del web, para los que viven de bits

MMCQ · 22-ene-2007, 13:30

Hola! como estar?

estoy haciendo el css de un proyecto personal. tiene la siguiente estructura

Cita:

#contenedor{
width:780px;
height:auto;
margin: 0 auto;

}

.header{
width:780px;
height:80px;
margin:0 0 10px 0;

}
.logo{

width:190px;
height:auto;
float:left;

}
.menu{
width:590px;
height:auto;
float:right;

}

#navcontainer
{
margin: 0px;
padding: 0px;
}

#navcontainer ul
{
margin: 5px ;
padding: 0px;
list-style-type: none;
text-align: center;

margin-right:50px;
float:right;

}
li#active
{
background: url(boton.gif) no-repeat;
color:#FFF;
background-color: #fff;

}
#navcontainer ul li { float: left; }

#navcontainer ul li a
{

text-decoration: none;
color:#333;
font-size: 12px;
font-family: Arial, Helvetica, sans-serif;
float: left;
margin: 0px;
height: 26px;
width: 100px;
padding-top: 5px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
}

#navcontainer li a:hover
{
background: url(boton.gif) no-repeat;
color: #FFF;
}
.barra{
width:780px;
height:12px;

}
contenido{
width: 780px;
height:auto;
}
.ad{
width:300px;
height:250px;
float:left;
background:#333333;
margin-top:20px;
}
.busq{
width:465px;
height:265px;
float:right;
background:#333333;
margin-top:5px;
}
.topranked{
width:375px;
height:auto;
float:left;
margin-top:15px;
}
.titulo{
font-size:26px;
font-family: Trebuchet MS;
}
.top{
width:375px;
height:150px;
background:#333333;
margin-top:10px;
}
.topview{
width:375px;
height:auto;
float:right;
margin-top:15px;
}

.topv{
width:375px;
height:150px;
background:#333333;
margin-top:10px;
}
.upda{
width:375px;
height:auto;
float:left;
margin-top:15px;
}

.updav{
width:375px;
height:150px;
background:#333333;
margin-top:10px;
}
.izquierdo{
width:375px;
height:auto;
float:left;
}
.derecho{
width:375px;
height:auto;
float:right;
}
.new{
width:375px;
height:150px;
float:left;
margin-top:15px;
}

.newv{
width:375px;
height:150px;
background:#333333;
margin-top:10px;
}
.ad2{
width:px;
height:90px;

background:#333333;

}

el ultimo que dice .ad2 es la publicidad que quiero poner debajo de los cuadros. pero no se pone ahi signo que sube arriba. aqui esta en la web:http://www.importzona.com/RS/

Cita:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<title>TunerSpot.net - Beta</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link href="rs.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="contenedor">

<div class="header"><div class="logo">LOGO</div>
<div class="menu">

<div id="navcontainer">

<ul id="navlist">

<li id="active"><a href="index.htm" id="current">home</a></li>
<li><a href="#">mySpot</a></li>
<li><a href="#">Explore</a></li>

</ul>
</div>
</div>
<div class="barra"><img src="barra.gif"></div>

<div class="busq"></div>
<div class="ad"></div>
</div>

<div class="contenido">

<div class="izquierdo">
<div class="topranked">
<div class="titulo">Top Ranking</div>
<div class="top"></div>
</div>
<div class="upda">
<div class="titulo">Recently Updated</div>
<div class="updav"></div>
</div>
</div>
<div class="derecho">

<div class="topview">
<div class="titulo">Most Viewed</div>
<div class="topv"></div>
</div>
<div class="new">
<div class="titulo">Newest Spot</div>
<div class="newv"></div>
</div>
</div>
<div class="ad2"></div>

</div>

</body>

</html>

Mikmoro · 22-ene-2007, 15:41

Buenas. En primer lugar, has dejado esa caja sin anchura:

.ad2{
width:px;
height:90px;

Creo que deberías revisar eso. En segundo lugar, añade a esa clase el selector clear: both;

A ver si se coloca donde tú quieres.

Mikel.

MMCQ · 22-ene-2007, 19:38

mira funciono pero esta pegado de las otras cajas , mira

http://www.importzona.com/RS/

MMCQ · 22-ene-2007, 19:41

le di margin-top:10px ni se mueve

tuky · 22-ene-2007, 19:42

si le agregas un clear:both y margin-top:10px
ahí bajaría...

Código:

.ad2{
  width:728px;
  height:90px;
  clear:both;
  margin-top:10px;
  background:#333333;        
}

y

margin-left:auto;
margin-right:auto;

para centrar..

Mikmoro · 23-ene-2007, 00:11

Para despegarlo de las otras cajas, puedes hacer:

- o ponerle
position:relative;
top: 10px;

-o bien
float: left;
margin-top: 10px;

Depende de lo que quieras hacer.

Mikel.

MMCQ · 23-ene-2007, 08:16

gracias! funciono!

22-ene-2007, 13:30	#1 (permalink)
MMCQ Fecha de Ingreso: marzo-2006 Mensajes: 372	Descecaje! Hola! como estar? estoy haciendo el css de un proyecto personal. tiene la siguiente estructura Cita: #contenedor{ width:780px; height:auto; margin: 0 auto; } .header{ width:780px; height:80px; margin:0 0 10px 0; } .logo{ width:190px; height:auto; float:left; } .menu{ width:590px; height:auto; float:right; } #navcontainer { margin: 0px; padding: 0px; } #navcontainer ul { margin: 5px ; padding: 0px; list-style-type: none; text-align: center; margin-right:50px; float:right; } li#active { background: url(boton.gif) no-repeat; color:#FFF; background-color: #fff; } #navcontainer ul li { float: left; } #navcontainer ul li a { text-decoration: none; color:#333; font-size: 12px; font-family: Arial, Helvetica, sans-serif; float: left; margin: 0px; height: 26px; width: 100px; padding-top: 5px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; } #navcontainer li a:hover { background: url(boton.gif) no-repeat; color: #FFF; } .barra{ width:780px; height:12px; } contenido{ width: 780px; height:auto; } .ad{ width:300px; height:250px; float:left; background:#333333; margin-top:20px; } .busq{ width:465px; height:265px; float:right; background:#333333; margin-top:5px; } .topranked{ width:375px; height:auto; float:left; margin-top:15px; } .titulo{ font-size:26px; font-family: Trebuchet MS; } .top{ width:375px; height:150px; background:#333333; margin-top:10px; } .topview{ width:375px; height:auto; float:right; margin-top:15px; } .topv{ width:375px; height:150px; background:#333333; margin-top:10px; } .upda{ width:375px; height:auto; float:left; margin-top:15px; } .updav{ width:375px; height:150px; background:#333333; margin-top:10px; } .izquierdo{ width:375px; height:auto; float:left; } .derecho{ width:375px; height:auto; float:right; } .new{ width:375px; height:150px; float:left; margin-top:15px; } .newv{ width:375px; height:150px; background:#333333; margin-top:10px; } .ad2{ width:px; height:90px; background:#333333; } el ultimo que dice .ad2 es la publicidad que quiero poner debajo de los cuadros. pero no se pone ahi signo que sube arriba. aqui esta en la web:http://www.importzona.com/RS/ Cita: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>TunerSpot.net - Beta</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <link href="rs.css" rel="stylesheet" type="text/css" /> </head> <body> <div id="contenedor"> <div class="header"><div class="logo">LOGO</div> <div class="menu"> <div id="navcontainer"> <ul id="navlist"> <li id="active"><a href="index.htm" id="current">home</a></li> <li><a href="#">mySpot</a></li> <li><a href="#">Explore</a></li> </ul> </div> </div> <div class="barra"><img src="barra.gif"></div> <div class="busq"></div> <div class="ad"></div> </div> <div class="contenido"> <div class="izquierdo"> <div class="topranked"> <div class="titulo">Top Ranking</div> <div class="top"></div> </div> <div class="upda"> <div class="titulo">Recently Updated</div> <div class="updav"></div> </div> </div> <div class="derecho"> <div class="topview"> <div class="titulo">Most Viewed</div> <div class="topv"></div> </div> <div class="new"> <div class="titulo">Newest Spot</div> <div class="newv"></div> </div> </div> <div class="ad2"></div> </div> </body> </html>

22-ene-2007, 15:41	#2 (permalink)
Mikmoro Colaborador Fecha de Ingreso: octubre-2006 Ubicación: A tu espalda Mensajes: 3.949	Re: Descecaje! Buenas. En primer lugar, has dejado esa caja sin anchura: .ad2{ width:px; height:90px; Creo que deberías revisar eso. En segundo lugar, añade a esa clase el selector clear: both; A ver si se coloca donde tú quieres. Mikel.

22-ene-2007, 19:38	#3 (permalink)
MMCQ Fecha de Ingreso: marzo-2006 Mensajes: 372	Re: Descecaje! mira funciono pero esta pegado de las otras cajas , mira http://www.importzona.com/RS/

22-ene-2007, 19:41	#4 (permalink)
MMCQ Fecha de Ingreso: marzo-2006 Mensajes: 372	Re: Descecaje! le di margin-top:10px ni se mueve

22-ene-2007, 19:42	#5 (permalink)
tuky Fecha de Ingreso: julio-2003 Ubicación: <?="www.tuky.cl";?> Mensajes: 128	Re: Descecaje! si le agregas un clear:both y margin-top:10px ahí bajaría... Código: .ad2{ width:728px; height:90px; clear:both; margin-top:10px; background:#333333; } y margin-left:auto; margin-right:auto; para centrar.. __________________ Mi Empresa ^^ Diseño y Desarrollo Web eMarketing, eCommerce, eBusiness Última edición por tuky; 22-ene-2007 a las 19:46. Razón: te adelantaste a la sugerencia xD, saludos!

23-ene-2007, 00:11	#6 (permalink)
Mikmoro Colaborador Fecha de Ingreso: octubre-2006 Ubicación: A tu espalda Mensajes: 3.949	Re: Descecaje! Para despegarlo de las otras cajas, puedes hacer: - o ponerle position:relative; top: 10px; -o bien float: left; margin-top: 10px; Depende de lo que quieras hacer. Mikel.

23-ene-2007, 08:16	#7 (permalink)
MMCQ Fecha de Ingreso: marzo-2006 Mensajes: 372	Re: Descecaje! gracias! funciono!

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