Passar configuração de ul e li para div

[Marcos Coelho2 2]

como colocar essa configuracao em css que esta para ul e li

 

<style type="text/css">
ul#menutt {
width: 160px; 
list-style:none;
font: bold 16px Arial, Verdana, Serif;
}
ul#menutt li{
position:fixed;
left:100px;
top:150px;
}
ul#menutt a {
width: 160px;
display: block;
text-align:left;
padding: 5px 10px;
margin-bottom:1px;
text-decoration: none;
color: #000;
background: #1cd117;
border-left: 12px solid #05a22e;
border-right: 3px solid #05a22e;
voice-family: "\"}\"";
voice-family:inherit;
width:125px;
}
>#pagebody>ul#menutt a {
width:125px;
}
/* Fix IE. Hide from IE Mac \*/
* html ul#menutt li { float: right; height: 1%; }
* html ul#menutt li a { height: 1%; }
/* End */
ul#menutt a:hover {
color: #fff;
background: #2aec09;
border-right: 3px solid #17c71c;
border-left: 12px solid #17c71c;
}
ul#menutt a span {
display: none;
}
ul#menutt a:hover span {
display: block;
position: absolute;
top:25px;
left: 0px;
width: 160px;
padding: 5px;
margin-left:2px;
color: #fff;
background:#060;
font-size: 10px;
text-align:left;
border:1px solid #000;
}
</style>
<ul id="menutt">
<li>
<a href="#">Home
<span>
</span> 
</a>
</li> 


</ul>

para essa div do meu site

 

<div class="cart-box-top"><a href="http://xxx.com/index.php/checkout/cart/"><span class="item-total-right">
    			               0 Item                         	</span>
           </a></div>

[Valdeir Info 2]

tenta assim. Coloca a "," (virgula) e depois o nome da outra tag que você quer que tenha o mesmo css :S

 

<style>

#tag1, #tag2 {
.....
}

</style>

[Guilherme_90 33]

Primeiramente: Com este código, você tá dizendo que somente ul terá esse estilo. Já ouviu falar em trabalhar com classes? É neste momento que é necessário usar, quando você que reaproveitar estilos, aplicando em diversos objetos HTML. Você pode adicionar quantas classes quiser, e pra mim é maravilhoso desenvolver usando e manipulando classes, pois aproveita muita coisa, além de ter um controle melhor dos elementos. Por exemplo:

 

<style type="text/css">
.menutt {
  width: 160px; 
  list-style:none;
  font: bold 16px Arial, Verdana, Serif;
}

.menutt li{
  position:fixed;
  left:100px;
  top:150px;
}

.menutt a {
  width: 160px;
  display: block;
  text-align:left;
  padding: 5px 10px;
  margin-bottom:1px;
  text-decoration: none;
  color: #000;
  background: #1cd117;
  border-left: 12px solid #05a22e;
  border-right: 3px solid #05a22e;
  voice-family: "\"}\"";
  voice-family:inherit;
  width:125px;
}
</style>

<div class="menuttt cart-box-top">
     <a href="http://xxx.com/index.php/checkout/cart/">
         <span class="item-total-right">0 Item</span>
     </a>
</div>

Viu a diferença agora? Veja que eu coloquei a classe menutt sendo a primeira classe, ou seja, digamos que ela é a classe "pai", e a outra cart-box-top é a filha. No final das contas, quero que você entenda a seguinte lógica: A classe filha irá herdar todo seu estilo da classe pai (menutt), e se caso você queira por algum motivo, alterar a largura SOMENTE PARA ESTA div (cart-box-top), você faria assim:

.menutt.cart-box-top{
  width: 300px; /* largura alterada somente para a classe "cart-box-top" */
  list-style:none;
  font: bold 16px Arial, Verdana, Serif;
}

Provavelmente você irá fazer a seguinte pergunta: Mas porquê não tem espaços entre a cart-box-top e menutt? A resposta é bem simples: você está dizendo que, cart-box-top é "filha" do menutt. É difícil explicar, mas na minha cabeça, isso se trata de uma família de classes, em que uma coisa vai herdando da outra (obvio). Todas as outras classes que você inserir depois de menutt (ou até depois de cart-box-top), dependendo irá herdar aquele estilo (como por exemplo, background, color, enfim...).

 

Vou mostrar um exemplo que eu utilizo bastante, e acredito que se caso não tenha entendido, vai abrir mais sua mente.

<style type="text/css">
a.btPadrao, button.btPadrao{
  float:left;
  padding:5px 20px;
  text-decoration:none;
  color:#333;
  border:none;
  -moz-border-radius:4px;
  -webkit-border-radius:4px;
  border-radius:4px;
}

a.btPadrao.btGreen{
   background:#5A8437;
   color:#fff;
}

a.btPadrao.btGray{
   background:#777;
   color:#fff;
   border:1px solid #383838;
}

button.btPadrao.btGray{
   background:#777;
   color:#fff;
   border:1px solid #383838;
}
</style>

<!-- Usando estilo do botão verde (btGreen) -->
<a href="#" class="btPadrao btGreen" title="Botão">Botão de Âncora</a>
<button type="submit" name="bt" class="btPadrao btGreen" title="">Botão do tipo "Button"</button>

<!-- Usando estilo do botão cinza (btGray) -->
<a href="#" class="btPadrao btGray" title="Botão">Botão de Âncora</a>
<button type="submit" name="bt" class="btPadrao btGray" title="">Botão do tipo "Button"</button>

E agora, deu pra entender o sentido de uso das classes? :grin:

O primeiro bloco (a.btPadrao, button.btPadrao), estou dizendo que, este estilo será aplicado tanto para âncoras quanto para buttons para formulários. Usando a vírgula como separador, você consegue ir agregando elementos HTML para aquele estilo, ou seja, é uma agregação de objetos. Eu poderia muito bem melhorar isto, e fazer ainda melhor:

<style type="text/css">
ul.padrao, ol.padrao, li.padrao, a.btPadrao, button.btPadrao{
  float:left;
  padding:5px 20px;
  text-decoration:none;
  color:#333;
  border:none;
  -moz-border-radius:4px;
  -webkit-border-radius:4px;
  border-radius:4px;
}

ul.padrao.items{
  background:#ccc;
  border-radius:none;
}

ul.padrao.items li.padrao.list{
  border-radius:2px;
  float:right;
}

</style>
<ul class="padrao items">
   <li class="padrao list"></li>
</ul>

Viu? É show de bola! Mas neste caso tem um problema. Estou dizendo que isso será aplicado somente para classes em que os elementos forem do tipo "ul, ol, li", mas eu não quero isso, quero que seja aplicado também nas div's, como eu faço? Simples, veja:

<style type="text/css">
.padrao, a.btPadrao, button.btPadrao{
  float:left;
  padding:5px 20px;
  text-decoration:none;
  color:#333;
  border:none;
  -moz-border-radius:4px;
  -webkit-border-radius:4px;
  border-radius:4px;
}

.padrao.items{
  background:#ccc;
  border-radius:none;
}

.padrao.items .padrao.ulClass{
  border-radius:12px;
  border:2px solid #666;
}

.padrao.items .padrao.ulClass .padrao.list{
  border-radius:2px;
  float:right;
}

</style>
<div class="padrao items">
   <ul class="padrao ulClass">
       <li class="padrao list"></li>
   </ul>
</div>

Agora sim, meu estilo poderá ser aplicado de forma mais dinâmica em meus objetos HTML.

Não sei se consegui explicar como realmente funciona a lógica de manipulação de classes. Espero que pelo menos tenha entendido algo, você vai ver que sabendo usar este recurso, é simplesmente LINDO! ^_^ .