Descecaje!

MMCQ · #1 (**permalink**) 22/01/2007, 14: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 · #2 (**permalink**) 22/01/2007, 16: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 · #3 (**permalink**) 22/01/2007, 20:38

mira funciono pero esta pegado de las otras cajas , mira

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

MMCQ · #4 (**permalink**) 22/01/2007, 20:41

le di margin-top:10px ni se mueve

tuky · #5 (**permalink**) 22/01/2007, 20: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 · #6 (**permalink**) 23/01/2007, 01: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 · #7 (**permalink**) 23/01/2007, 09:16

gracias! funciono!