[Resolvido] Alinhamento de conteúdo na DIV

Diego Macêdo · Outubro 22, 2009

Abaixo os códigos.

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=iso-8859-1" />
<title>SITE</title>
<link href="estilo.css" rel="stylesheet" type="text/css" />

</head>

<body>
<div id="container">
	<!-- TOPO -->
	<div id="topo">
    	<div id="logo"></div>
      <div id="menu_superior">
      	<ul id="nav_sup">
            <li><a href="#">favoritos</a></li>
            <li><a href="#">webmail</a></li>
        </ul>
      </div>
        <div id="slideshow">
	    <img src="imagens/slide1.jpg" />
            <img src="imagens/slide2.jpg" />
            <img src="imagens/slide3.jpg" />
        </div>
    </div>
    
    <!-- MENU -->
    <div id="menu">
    	<ul id="menu_horizontal">
        	<li><a href="#">HOME</a></li>
            <li><a href="#">SOBRE NÓS</a></li>
            <li><a href="#">FILIADAS</a></li>
            <li><a href="#">NOTÍCIAS</a></li>
            <li><a href="#">GALERIA</a></li>
            <li><a href="#">CONTATO</a></li>
        </ul>
    </div>
    
    <!-- CONTEUDO -->
    <div id="conteudo">
    <p>Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto </p>
    </div>
    
    <!-- COPYRIGHT -->
    <div id="rodape">
    	<div id="rodape_esquerdo">
        	<ul id="rodape_menu">
            	<li><a href="contato.php">home</a></li>
                <li><a href="contato.php">sobre nós</a></li>
                <li><a href="contato.php">notícias</a></li>
                <li><a href="contato.php">galeria</a></li>
                <li><a href="contato.php">contato</a></li>
            </ul>
        </div>
        <div id="rodape_direito">© 2009 www.site.com.br<br />
      Proibida a cópia inteira ou parcial do conteúdo deste site, assim como suas imagens.<br /></div>
    </div>
</div>
</body>
</html>

CSS:

* {
	margin:0;
	padding:0;
}

body {
	background:url(imagens/bg.jpg);
	background-repeat:repeat-x;
	background-color:#333399;
	margin-left: auto;
	margin-top: 0px;
	margin-right: auto;
	margin-bottom: 0px;
}

#container {
	width:640px;
	background-color:#FFF;
	margin-left: auto;
    margin-right: auto;
	padding:10px 5px 10px 5px;
	border-left:3px solid #333399;
	border-right:3px solid #333399;
	display:table;
}

/*********************************************
	SUPERIOR - Logo, Menu Sup. e Slideshow
*********************************************/

#topo {
	width:640px;
	height:360px;
	float:left;
}

#logo {
	float:left;
	width:500px;
	height:100px;
	background:url(imagens/logo.jpg);
	background-repeat:no-repeat;
	padding:0 0 5px 0;
}

#menu_superior {
	float:left;
	width:140px;
	height:100px;
	vertical-align:middle;
	padding:0 0 5px 0;
}

ul#nav_sup {
	width:140px;
	margin:0;
	padding:0;
	list-style-type:none;
	text-align:right;
}

ul#nav_sup li a:link, ul#nav_sup li a:visited {
	display:block;
	text-decoration:none;
	font:Verdana, Geneva, sans-serif;
	font-size:12px;
	color:#ccc;
	padding-right:15px;
}

ul#nav_sup li a:hover {
	text-decoration:underline;
}

#slideshow {
	padding:0; 
	overflow: hidden;
	float: left;
	width:605px;
	height:250px;
	background-color:#fff;
	border:2px solid #360;
	background-repeat:no-repeat;
}

#slideshow img {
	top:0;
	left:0;
}

/*********************************************
	MENU PRINCIPAL
*********************************************/

#menu {
	position:relative;
	float:left;
	width:640px;
	list-style:none;
	line-height:1em;
	height:20px;
	background-color:#FFF;
	text-align:center;
	padding:5px 0 5px 0;
	margin-left: auto;
	margin-rigt: auto; 
}

#menu_horizontal {
	position:relative;
	float:left;
	width:640px;
	margin:0;
	list-style:none;
	line-height:1em;
	height:20px;
	background-color:#FFF;
	text-align:center;
}

#menu_horizontal li {
	float:left;
	font:Verdana, Geneva, sans-serif 14px #333;
	font-weight:bold;
}

#menu_horizontal li a {
	display:block;
	border-right:2px solid #000;
	text-decoration:none;
	font:Verdana, Geneva, sans-serif 14px #CCC;
	color:#333;
	padding:2px 5px;
}

#menu_horizontal li a:hover {
	color:#060;
	text-decoration:underline;
	background-color:#CCC;
}

/*********************************************
	CONTEÚDO DA PÁGINA
*********************************************/

#conteudo {
	background-color:#FFF;
}

/*********************************************
	RODAPÉ - Menu Inferior e Copyright
*********************************************/

#rodape {
	float:left;
	width: 650px;
	background-color:#FFF;
	color: #000;
	font-size: 11px;
	font-family:Verdana, Geneva, sans-serif;
}

#rodape_esquerdo {
	float:left;
	width: 300px;
	padding-top:20px;
}

#rodape_menu {
	padding:0 0 0 10px;
	text-align:left;
}

#rodape_menu li {
	list-style: none; 
	padding: 0px 5px 0px 0;
	border-right:1px #333 solid;
	display: inline;
	vertical-align:middle;
}

#rodape_menu li a {
	text-decoration: none;
	font-family:Verdana, Geneva, sans-serif;
	color:#03C;
}

#rodape_menu li a:hover {
	text-decoration: underline;
}

#rodape_direito {
	float:left;
	width: 340px;
	text-align: right;
	color: #000;
	font-size: 10px;
	font-family: Verdana, Geneva, sans-serif;
	padding:0 5px 0 0;
}

#rodape_direito a:link{
        font-size:10px;
        color:#F90;
        font-family:Verdana, Geneva, sans-serif;
        text-decoration:none;
	font-weight:bold;
}
#rodape_direito a:hover{
        text-decoration:underline;
}

PROBLEMAS:

1- Centralizar verticalmente os links do "nav_sup";

2- Centralizar a div "slideshow" em relação a div-pai;

3- Centralizar o "menu_horizontal" em relação a div-pai;

4- Centralizar verticalmente os links do "rodape_menu";

Provavelmente as soluções sejam assim 2=3 e 1=4.

Fico no aguardo da ajuda. Agradeço desde já.

Thiago Retondar · Outubro 22, 2009

[1] Você pode usar line-height, margin e até position. Tente com line-height.

[2] Retire o float: left e coloque um margin: 0 auto.

[3] Mesmo processo do item anterior, com o adicional que não precisa de position pois não há nenhum submenu para controlar o fluxo.

[4] Mesmo processo do item 1.

http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

Diego Macêdo · Outubro 23, 2009

Suas dicas ajudaram bastante. Consegui resolver praticamente tudo, só não o menu horizontal. Abaixo o meu código CSS atual:

* {
	margin:0;
	padding:0;
}

body {
	background:url(imagens/bg.jpg);
	background-repeat:repeat-x;
	background-color:#333399;
	margin-left: auto;
	margin-top: 0px;
	margin-right: auto;
	margin-bottom: 0px;
}

#container {
	width:640px;
	background-color:#FFF;
	margin-left: auto;
    margin-right: auto;
	padding:10px 5px 10px 5px;
	border-left:3px solid #333399;
	border-right:3px solid #333399;
	display:table;
}

/*********************************************
	SUPERIOR - Logo, Menu Sup. e Slideshow
*********************************************/

#topo {
	width:650px;
	float:left;
}

#logo {
	float:left;
	width:500px;
	height:100px;
	background:url(imagens/logo.jpg);
	background-repeat:no-repeat;
	padding:5px 0;
}

#menu_superior {
	float:left;
	width:140px;
	height:100px;
	vertical-align:middle;
	padding:5px 0;
}

ul#nav_sup {
	width:140px;
	margin:20px auto;
	padding:0;
	list-style-type:none;
	text-align:right;
	line-height:25px;
}

ul#nav_sup li a:link, ul#nav_sup li a:visited {
	display:block;
	text-decoration:none;
	font:Verdana, Geneva, sans-serif;
	font-size:12px;
	color:#ccc;
	padding-right:15px;
}

ul#nav_sup li a:hover {
	text-decoration:underline;
}

#slideshow {
	padding:0; 
	overflow: hidden;
	margin: 0 auto;
	width:605px;
	height:250px;
	background-color:#fff;
	border:2px solid #360;
	background-repeat:no-repeat;
	overflow:
}

#slideshow img {
	top:0;
	left:0;
}

/*********************************************
	MENU PRINCIPAL
*********************************************/

#menu {
	float:left;
	width:640px;
	list-style:none;
	line-height:1em;
	height:20px;
	background-color:#FFF;
	text-align:center;
	padding:5px 0;
}

#menu_horizontal {
	width:640px;
	margin:0 auto;
	list-style:none;
	background-color:#FFF;
	text-align:center;
}

#menu_horizontal li {
	float:left;
	font:Verdana, Geneva, sans-serif 14px #333;
	font-weight:bold;
}

#menu_horizontal li a {
	display:block;
	border-right:2px solid #000;
	text-decoration:none;
	font:Verdana, Geneva, sans-serif 14px #CCC;
	color:#333;
	padding:2px 5px;
}

#menu_horizontal li a:hover {
	color:#060;
	text-decoration:underline;
	background-color:#CCC;
}

/*********************************************
	CONTEÚDO DA PÁGINA
*********************************************/

#conteudo {
	background-color:#FFF;
	margin:0 5px;
}

/*********************************************
	RODAPÉ - Menu Inferior e Copyright
*********************************************/

#rodape {
	float:left;
	width: 650px;
	background-color:#FFF;
	color: #000;
	font-size: 11px;
	font-family:Verdana, Geneva, sans-serif;
}

#rodape_esquerdo {
	float:left;
	width: 300px;
	margin:20px auto;
}

#rodape_menu {
	padding:0 0 0 10px;
	text-align:left;
}

#rodape_menu li {
	list-style: none; 
	padding: 0px 5px 0px 0;
	border-right:1px #333 solid;
	display: inline;
	vertical-align:middle;
}

#rodape_menu li a {
	text-decoration: none;
	font-family:Verdana, Geneva, sans-serif;
	color:#03C;
}

#rodape_menu li a:hover {
	text-decoration: underline;
}

#rodape_direito {
	float:left;
	width: 340px;
	text-align: right;
	color: #000;
	font-size: 10px;
	font-family: Verdana, Geneva, sans-serif;
	margin:auto 5px;
}

#rodape_direito a:link{
        font-size:10px;
        color:#F90;
        font-family:Verdana, Geneva, sans-serif;
        text-decoration:none;
		font-weight:bold;
}
#rodape_direito a:hover{
        text-decoration:underline;
}

Thiago Retondar · Outubro 23, 2009

É por que a largura está maior do que realmente é.

Não precisa usar div#menu. use apenas o ul#menu_horizontal.

http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

Diego Macêdo · Outubro 23, 2009

Ainda não estou conseguindo. :wacko:

CSS

#menu_horizontal {
	float:left;
	width:650px;
	margin:5px auto;
	list-style:none;
	background-color:#FFF;
	line-height:25px;	
}

HTML

...
...
<!-- MENU -->
    	<ul id="menu_horizontal">
            <li><a href="#">HOME</a></li>
            <li><a href="#">SOBRE NÓS</a></li>
            <li><a href="#">FILIADAS</a></li>
            <li><a href="#">NOTÍCIAS</a></li>
            <li><a href="#">GALERIA</a></li>
            <li><a href="#">CONTATO</a></li>
        </ul>
    
    <!-- CONTEUDO -->
    <div id="conteudo">
    <p>Texto Texto Texto Texto...
...
...

Thiago Retondar · Outubro 23, 2009

Talvez esteja sendo influência do line-height. Substitua por margin ou valor menor - até pode ser negativo.

http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

Diego Macêdo · Outubro 24, 2009

Bom, eu resolvi diminuindo a largura e ajustando com o margin.

CSS:

#menu_horizontal {
	float:left;
	width:590px;
	list-style:none;
	background-color:#FFF;
	margin:3px 0 0 60px;
}

Obrigado!

Diego Macêdo · Novembro 3, 2009

Re-abrindo este tópico.

Estou querendo alinhar a div "slideshow" ao centro. Eu fiz umas alterações no layout e o slide não ta ficando no centro. Ele está fora do conteudo do site e criando uma barra de rolagem horizontal pq está bem distante da página.

Quero o slideshow centralizado com a div "container", mas não estou conseguindo. :wacko:

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=iso-8859-1" />
<title>Untitled Document</title>
<link href="estilo2.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div id="container">
<div id="topo">
   	<div id="barra_data"><?php echo date("d/m/Y")."  "; ?></div>
       <div id="logo"></div>
       <div id="menu_superior">
           <ul id="nav_sup">
               <li><a href="#">favoritos</a></li>
               <li><a href="#">webmail</a></li>
           </ul>
     	</div>
       <div id="slideshow">
        <img src="imagens/slide1.jpg" />
           <img src="imagens/slide2.jpg" />
           <img src="imagens/slide3.jpg" />
       </div>
   </div>

   <div id="centro">
   </div>

   <div id="copyright">
   </div>
</div>
</body>
</html>

CSS:

@charset "iso-8859-1";
/* CSS Document */

* {
	margin:0;
	padding:0;
	font-family:Verdana, Geneva, sans-serif;
	font-size:12px;
	color:#000;
}

body {
	background:url(imagens/bg.jpg);
	background-repeat:repeat-x;
	background-color:#333399;
	margin-left: auto;
	margin-top: 0px;
	margin-right: auto;
	margin-bottom: 0px;
}

#container {
	width:870px;
	border:#006699 2px solid;
	background-color:#FFF;
	margin-left: auto;
    margin-right: auto;
}

#topo {
	width:100%;
	height:380px;
	background-color:#FFF;
}

#barra_data {
	float:left;
	width:100%;
	background-color:#CCC;
	line-height:20px;
	color:#333;
	margin-right:40px;
	text-align:right;
}

#logo {
	float:left;
	width:500px;
	height:100px;
	background:url(imagens/logo_ansef.jpg);
	background-repeat:no-repeat;
	padding:3px 0;
}

#menu_superior {
	float:left;
	width:370px;
	height:100px;
	vertical-align:middle;
	padding:3px 0;
}

ul#nav_sup {
	width:140px;
	margin:20px auto;
	padding:0;
	list-style-type:none;
	text-align:right;
	line-height:25px;
}

ul#nav_sup li a:link, ul#nav_sup li a:visited {
	display:block;
	text-decoration:none;
	font:Verdana, Geneva, sans-serif;
	font-size:12px;
	color:#ccc;
	padding-right:15px;
}

ul#nav_sup li a:hover {
	text-decoration:underline;
}

#slideshow {
        padding:0; 
        overflow: hidden;
        margin: 0 auto;
        width:605px;
        height:250px;
        background-color:#fff;
        border:2px solid #360;
        background-repeat:no-repeat;
}

#slideshow img {
        top:0;
        left:0;
}

Thiago Retondar · Novembro 3, 2009

Quando for assim, crie um novo tópico. ;)

Tem um link para nós vermos? Não consegui rodar direito aqui.

http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

Diego Macêdo · Novembro 3, 2009

Link: http://www.ansefalagoas.com.br

Desculpa aí, mas é que é o mesmo problema, na mesma página, por isso pensei que poderia ser aqui mesmo.

Novo tópico: http://forum.imasters.com.br/index.php?/topic/369523-layout-css/

Arquivado

[Resolvido] Alinhamento de conteúdo na DIV

Recommended Posts

Diego Macêdo 6

Compartilhar este post

Link para o post

Compartilhar em outros sites

Thiago Retondar 18

Compartilhar este post

Link para o post

Compartilhar em outros sites

Diego Macêdo 6

Compartilhar este post

Link para o post

Compartilhar em outros sites

Thiago Retondar 18

Compartilhar este post

Link para o post

Compartilhar em outros sites

Diego Macêdo 6

Compartilhar este post

Link para o post

Compartilhar em outros sites

Thiago Retondar 18

Compartilhar este post

Link para o post

Compartilhar em outros sites

Diego Macêdo 6

Compartilhar este post

Link para o post

Compartilhar em outros sites

Diego Macêdo 6

Compartilhar este post

Link para o post

Compartilhar em outros sites

Thiago Retondar 18

Compartilhar este post

Link para o post

Compartilhar em outros sites

Diego Macêdo 6

Compartilhar este post

Link para o post

Compartilhar em outros sites

php + mysql - where do select em campo varchar com dados numéricos com zeros a direita

tratar hora no php

Navbar no Nextjs

Fóruns

Tempo Real

Informação importante