DIVs pequeña ayudita

originalconcept · #1 (**permalink**) 21/08/2008, 12:38

Hola miembros!! Es que soy iniciado en el css, tengo un problema con el div: "cafe-info"

Quiero que aparezca abajo de "cafe-title" (bien pegado)

1) Que es lo que se tiene que hacer?
2) Una cosa mas, en el div "cafe-info" quisiera que la lista no tenga ese margim top que tiene, como se achica?

mil gracias

Código HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">

.cafe-grande {
width:525px; 
height:180px;
background: #FBE0A8;
border: #EFD3A3 1px solid;
margin-bottom: 20px}

.cafe-img {
width:225px;
height:140px;
border: #EFD3A3 1px solid;
margin:20px 10px 10px 20px}

.cafe-title {
float:right;
width:250px;
margin:20px 10px 10px 0px;
color:#5D362F;
font-family: Arial, Helvetica, sans-serif,;
font-weight:bold;
font-size: 15px}

.cafe-info {
float:right;
position: static;
width:250px;
margin: 0px 10px 10px 0px;
color:#5D362F}

body {
	background-color: #FCE7BC;
}
</style>
</head>

<body>
<div class="cafe-grande">
  <div class="cafe-title">Crocante de Nuez</div>

    <div class="cafe-img"><img src="http://marinaorione.com.ar/img/promo-cafe-crocante.jpg" alt="Crocante de Nuez" width="225" height="140" /></div>
	<div class="cafe-info">
	  <ul>
	    <li>Masa dulce</li>
        <li>Crocabte de miel y az&uacute;car nega</li>
	    <li>Nueces</li>
	  </ul>
    </div>
    </div>
</body>
</html>

ilie · #2 (**permalink**) 22/08/2008, 01:03

pon a cafe-title el margin:20px 10px 0px 0px

ya que cuando defines los margin a partir de margin recuerda que es:

margin: arriba derecha abajo izquierda.

ilie · #3 (**permalink**) 22/08/2008, 01:05

lo de la lista prueba con

padding-top:0px y/o cafe-info UL{margin-top:0px}

originalconcept · #4 (**permalink**) 22/08/2008, 05:22

Gracias por todo, lo de la lista lo solucione con esto:

ul {
margin-left: 0;
padding-left: 1em;
margin-top: 0;
padding-top: -1em;
text-indent: -1em;
list-style-position: inside}