Ir para conteúdo

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

Green

div class left center e right dentro da div id

Por , em Desenvolvimento frontend

Recommended Posts

Nent    0

Nent
Postado

Regras & HTML:

 

<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="pt" xml:lang="pt-br">
<head>
<title>Testando - 1, 2, 3!</title>
<style type="text/css">
<!--
#container		{width:600px}
.left,.center,.right	{width:200px}
.left			{float:left}
.center,.right		{float:right}
-->
</style>
</head>
<body>
<div id="container">
	<div class="left">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum a nisl sem. Donec tempor ipsum nec mi ullamcorper imperdiet. Duis tincidunt molestie felis laoreet fringilla. Duis porta lacinia libero quis fermentum. Phasellus adipiscing sagittis tempor. Phasellus porttitor, dolor eu porttitor pulvinar, est mi fermentum leo, quis eleifend lorem sem pellentesque lorem. In porttitor nisl et nulla feugiat lacinia. Praesent tempor nisi a augue tempor luctus. Nulla tincidunt consequat leo sit amet mollis. Aenean elementum hendrerit auctor. Etiam id nibh non erat egestas ullamcorper. Aenean suscipit sem ut nulla varius accumsan. Fusce quis dui vel nulla bibendum dictum.</div>
	<div class="center">Mauris at velit id turpis pretium eleifend. Mauris id elit id lorem hendrerit porta. Nunc purus elit, consectetur nec molestie eu, venenatis in ipsum. Nulla facilisi. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam in varius metus. Suspendisse facilisis elit est, vel pretium erat. Sed vehicula nunc ac tortor lobortis ac ornare massa auctor. Proin nec justo a purus bibendum pulvinar eu id diam. Sed egestas, urna id porta tincidunt, nunc massa egestas nunc, vitae dignissim sem elit vitae felis. Curabitur mattis nunc viverra tortor tempus et pellentesque nisl tincidunt. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Duis elementum interdum nulla quis eleifend. Etiam scelerisque augue nec lectus tincidunt et vulputate nisl tincidunt. Sed lectus ligula, sollicitudin sed sagittis id, bibendum sed ante. Pellentesque sollicitudin pretium fermentum. In mattis convallis feugiat.</div>
	<div class="right">Quisque convallis enim et nulla consectetur nec semper mauris fermentum. Maecenas mattis accumsan quam sed cursus. Proin justo enim, tincidunt in aliquam ac, porta id felis. Curabitur accumsan leo et massa feugiat vel aliquet eros tempus. Praesent id sollicitudin erat. Phasellus sit amet arcu sem. Morbi ante dui, tempor eget fermentum nec, posuere nec lectus. Proin nibh elit, auctor at convallis at, pretium sed mi. Proin luctus porta neque quis pellentesque. Nulla malesuada, diam non scelerisque feugiat, orci sapien tempus libero, vel tempus ante dolor et nulla. Nulla diam mauris, semper a facilisis in, viverra non tellus. Vivamus at elit id purus lacinia tincidunt. Vestibulum in lacus turpis, sit amet convallis nisl.</div>
</div>
</body>
</html>

Compartilhar este post

Link para o post
Compartilhar em outros sites

Evandro Oliveira    331

Evandro Oliveira
Postado

Você pode definir quantas classes quiser. Sistemas de framework css trabalham desse modo

 

<div class="texto-vermelho bordas-azuis">Esta div terá o texto vermelho e as bordas azuis</div>

 

.texto-vermelho { color: #f00; }
.bordas-azuis { border: 1px solid #00f; }

 

Trabalhar um pouco de matemática, especificidade e cascata também ajuda a diminuir a marcação:

 

<div id="pai">
   <div>esquerda</div>
   <div>centro</div>
   <div>direita</div>

 

#pai { width: 600px; }
#pai > div { float: left; width: 33.33%; }

 

Boas práticas também sugerem que você classifique os elementos pelo seu conteúdo, não por posicionamento ou características.

 

Suponhamos que seu menu esteja do lado esquerdo, você define a classe como "menu-esquerdo". Amanhã deseja passar o menu para o lado direito, ficaria meio estranho, no css, posicionar o 'menu-esquerdo' à direita, não? Aí você corrige o nome da classe, tem que fazer todas as alterações nas CSS e, eventualmente, em Javascript também. Trabalho triplicado.

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Desenvolvimento frontend
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito