[HTML/CSS] posicionamento de conteudo

AndersonRO · Junho 18, 2013

Boa noite a todos, venho aqui para tirar umas duvidas.
estou aprendendo html/css, e apos ler algumas apostilas e tutoriais na net começecei a desenvolver minha pagina, porem me deparei com pequenos problema.

Porem não estou conseguindo fazer a parte do meio da pagina principal, bem então venho aqui para ver se alguem pode me ajudar com algum exemplo ou algo do genero de como ficaria, pois ja tentei de varias formas e não consegui deixar igual da image.

desde já um muito obrigado a todos e uma boa noite.

Link da img: http://img259.imageshack.us/img259/3379/12xr.jpg

Codigo:

<!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>Titulo da pagina</title>
	<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
	<script type="text/javascript" src="js/jquery-func.js"></script>
<style type="text/css">
* { margin: 0; padding: 0; outline:0; }

body {
    font-size: 12px;
    line-height: 1.3;
    font-family: Arial, Helvetica, Sans-Serif;
    color: #ccc;
    background-color:#DFDFDF; padding:0; margin:0; text-align:center;
}

a { color: #e7b038; text-decoration: underline; cursor:pointer; }
a:hover { text-decoration: none; }
a img { border: 0; }

input, textarea, select { font-size: 12px; font-family: Arial, Helvetica, sans-serif; }
textarea { overflow: auto; }

.cl { display: auto; height: 0; font-size: 0; line-height: 0; text-indent: -4000px; clear: both; }
.notext { font-size: 0; line-height: 0; text-indent: -4000px; }

.left, .alignleft { float: left; display: inline; }
.right, .alignright { float: right; display: inline; }
.text-right { text-align:right; }

h2 { font-size:10px; color:#f2a223; font-weight:bold; }
h3 { font-size:14px; color:#f3b12b; font-weight:normal; text-align: left; }
h4 { font-size:14px; color:#f3b12b; font-weight:normal; }

#centralizar { width:900px; margin:0 auto; padding-top: 2px; background-color:#FFF; }

#header { 
	position:relative;
	width:900px;
	height: 115px;
}
h1#logo { position:absolute; top:6px; left:0; padding-left:12px; }
h1#logo a { float:left; width:262px; height:102px; background:url('image/logo.png') no-repeat 0 0; font-size: 0; line-height: 0; text-indent: -4000px; }
h2#ads { position:absolute; top:25px; right:0; padding-right:12px; }
h2#ads a { float:right; width:468px; height:60px; background:url('image/ads_468x60.png') no-repeat 0 0; font-size: 0; line-height: 0; text-indent: -4000px; }

.social { float:right; width:140px; padding-top:4px; }
.social span { float:left; display:inline; font-size:11px; color:#9f9f9f; font-weight: bold; line-height:16px; padding-right:5px; }
.social ul { list-style:none; }
.social ul li { float:left; display:inline; width:16px; padding-right:2px;  }
.social ul li a { float:left; display:inline; width:16px; height:16px; background:url('image/social.gif') no-repeat 0 0; font-size: 0; line-height: 0; text-indent: -4000px; }
.social ul li a.facebook { background-position:-18px 0; }
.social ul li a.youtube { background-position:-36px 0; }
.social ul li a.rss { background-position:-54px 0; }

#menu { float:left; clear:left;; width: 895px; height: auto; padding: 3px; background-color:#333; }
#menu ul { list-style:none; }
#menu ul li { float:left; display:inline; padding-left:29px;  }
#menu ul li a { font-size:14px; font-weight:bold; color:#fff; text-decoration:none; }
#menu ul li a.active,
#menu ul li a:hover { color:#CCC; }

#buscar { width:346px; margin:0 0 0 auto; }
#buscar label { float:left; display:inline; font-size:14px; font-weight:bold; color:#000; line-height:24px; padding-right:6px; }
#buscar .buscar-campo { width:238px; border: 1px solid #FFF; background:#333; color:#FFF; padding:2px 0 2px 2px; }
#buscar .botao-buscar { font-size:14px; font-weight:bold; border:0; background:none; color:#FFF;   cursor:pointer; }

#container { 
	width:900px; 
	-webkit-box-shadow: 0px 2px 4px 4px rgba(0, 0, 0, 0.4);
	-moz-box-shadow: 0px 2px 4px 4px rgba(0, 0, 0, 0.4);
	box-shadow: 0px 2px 4px 4px rgba(0, 0, 0, 0.4); 
}
#conteudo {  }
.conteudo { text-align:left; padding:5px; }
.conteudo p { font-size:13px; color:#000; line-height:16px; }
.conteudo a { font-size:11px;  }

#footer { padding:15px 0 0 0; width: 900px; height: auto; background-color:#333; }
#footer p { text-align:center; font-size:10px; padding-bottom:11px; }
#footer a { color:#FFF; font-size:10px; }
#footer a:hover { color:#CCC; text-decoration:none; }

#footer a:hover.designby { color:#CCC; text-decoration:none; }
</style>
</head>

<body>
<!-- centralizar -->
<div id="centralizar">
<!-- container -->
<div id="container">
<!-- header -->
<div id="header">
<h1 id="logo"><a href="/">Nome</a></h1>
<div class="social">
			<span>Visite também:</span>
			<ul>
			    <li><a class="facebook" href="#">facebook</a></li>
                <li><a class="twitter" href="#">twitter</a></li>
			</ul>
		</div>
<h2 id="ads"><a href="/">Nome</a></h2>
</div>
<!-- fim header -->
<!-- menu -->
<div id="menu">
	<ul>
    	<li><a class="active" href="#">Inicio</a></li>
        <li><a href="#">Serviços</a></li>
        <li><a href="#">Noticias</a></li>
        <li><a href="#">Blog</a></li>
        <li><a href="#">Contato</a></li>
    </ul>
<!-- buscar -->
<div id="buscar">
		<form method="get" accept-charset="utf-8">
		<label for="buscar-campo"></label>					
		<input type="text" name="s" value="procurando?" id="buscar-campo" title="procurando?" class="blink buscar-campo"  />
		<input type="submit" value="BUSCAR!" class="botao-buscar" />
		</form>
</div>
<!-- fim buscar -->
</div>
<!-- fim menu -->
<!-- conteudo -->
<div class="conteudo">
<p>adicionar conteudo aqui</p>
</div>
<!-- fim conteudo -->
<!-- footer -->
<div id="footer">
	<p>
		<a href="#">Inicio</a> <span>|</span>
		<a href="#">Serviços</a> <span>|</span>
		<a href="#">Noticias</a> <span>|</span>
		<a href="#">Blog</a> <span>|</span>
		<a href="#">Contato </a>
	</p>
	<p> © 2010-2013 Nome. </p>
</div>
<!-- fim footer -->
</div>
<!-- fim container -->
</div>
<!-- fim centralizar -->
</body>
</html>

AndersonRO · Junho 20, 2013

Bem e o seguinte, consegui montar o codigo por completo porem na pagina de post o header se desloca um pouco para baixo.
segue link: http://japora.net/como-saber-se-meu-computador-esta-infectado-com-virus/

outra coisa tambem, não consigo posicionar nenhum plugin fora do container.
Exemplo: Sharebar.
ele esta habilitado e fica em cima da materia porem era para ficar fora do layout ao lado.

segue css.
Se alguem puder me ajudar ficaria muito grato.

* { margin: 0; padding: 0; outline:0; }

body {
    font-size: 12px;
    line-height: 1.3;
    font-family: Arial, Helvetica, Sans-Serif;
    color: #ccc;
    background-color:#DFDFDF; padding:0; margin:0; text-align:center;
}

a { color: #1D5E8D; text-decoration: underline; cursor:pointer; }
a:hover { text-decoration: none; }
a img { border: 0; }

input, textarea, select { font-size: 12px; font-family: Arial, Helvetica, sans-serif; }
textarea { overflow: auto; }

.cl { display: auto; height: 0; font-size: 0; line-height: 0; text-indent: -4000px; clear: both; }
.notext { font-size: 0; line-height: 0; text-indent: -4000px; }

.left, .alignleft { float: left; display: inline; }
.right, .alignright { float: right; display: inline; }
.text-right { text-align:right; }

h2 { font-size:14px; color:#000; font-weight:normal; }
h3 { font-size:18px; color:#000; font-weight:normal; }
h4 { font-size:25px; color:#000; font-weight:bold; }
h6 { font-size:14px; color:#666; font-weight:bold; }

#header { 
	position:relative;
	width:900px;
	height: 115px;
}
h1#logo { position:absolute; top:6px; left:0; padding-left:12px; }
h1#logo a { float:left; width:262px; height:102px; background:url('http://japora.net/wp-content/themes/japora_v1/image/logo.png') no-repeat 0 0; font-size: 0; line-height: 0; text-indent: -4000px; }

#ads {
	width: 468px;
	height: 60px;
	float: right;
	padding-top:12px;
	padding-left: 300px;
	padding-right: 20px;
}

.social { float:right; width:140px; padding-top:4px; }
.social span { float:left; display:inline; font-size:11px; color:#9f9f9f; font-weight: bold; line-height:16px; padding-right:5px; }
.social ul { list-style:none; }
.social ul li { float:left; display:inline; width:16px; padding-right:2px;  }
.social ul li a { float:left; display:inline; width:16px; height:16px; background:url('http://japora.net/wp-content/themes/japora_v1/image/social.gif') no-repeat 0 0; font-size: 0; line-height: 0; text-indent: -4000px; }
.social ul li a.facebook { background-position:-18px 0; }
.social ul li a.youtube { background-position:-36px 0; }
.social ul li a.rss { background-position:-54px 0; }

#menu { float:left; clear:both; width: 895px; height: auto; padding: 3px; background-color:#333; }
#menu ul { list-style:none; }
#menu ul li { float:left; display:inline; padding-left:29px;  }
#menu ul li a { font-size:14px; font-weight:bold; color:#fff; text-decoration:none; }
#menu ul li a.active,
#menu ul li a:hover { color:#CCC; }

#buscar { width:346px; margin:0 0 0 auto; }
#buscar label { float:left; display:inline; font-size:14px; font-weight:bold; color:#000; line-height:24px; padding-right:6px; }
#buscar .buscar-campo { width:238px; border: 1px solid #FFF; background:#333; color:#FFF; padding:2px 0 2px 2px; }
#buscar .botao-buscar { font-size:14px; font-weight:bold; border:0; background:none; color:#FFF;   cursor:pointer; }

#container { 
	width:900px;
 	margin:0 auto;
	background-color:#FFF;
	-webkit-box-shadow: 0px 2px 4px 4px rgba(0, 0, 0, 0.4);
	-moz-box-shadow: 0px 2px 4px 4px rgba(0, 0, 0, 0.4);
	box-shadow: 0px 2px 4px 4px rgba(0, 0, 0, 0.4);
}
#conteudo {  }
.conteudo  { text-align:left; }
.conteudo p { font-size:13px; color:#000; line-height:16px; }
.conteudo a { font-size:11px; }
/* ----------- Index / Ultimas do Blog ----------- */

.home-latestbn-section {
	margin: 3px 5px 5px 5px;
	float: left;
	width: 480px;
}
.home-latestbn-section h2 { 
	color: #000;
	font-size: 24px; 
	line-height: 36px; 
	margin-bottom: 5px;
	border-bottom: 3px solid #eee;
}
.home-latestbn-section .section-box {
	width: 100%;
}
.home-latestbn-section h2 img{
	width: 30px;
	height: 32px;
	display:inline;/*faz com que a imagem fique na mesma linha que o texto*/
	float:left;/*alinha a imagem � esquerda*/
	margin: 4px 3px 3px 3px;
}

ul.home-latest-list {
	float: left;
	margin: -16px 0px 0px 0px;
	padding: 0px;
	width: 100%;
}
.home-latest-list li {
	margin: 0px;
	padding: 20px 0px 0px 0px;
	list-style-type: none;
}
.home-latest-list li a {
	margin: 0px;
	font-size: 14px;
	color: #222;
	text-decoration: none;
	font-family: 'Oswald', sans-serif;
	font-weight:bold;
}
.home-latest-list li a:hover {
	color: #666;
}
.home-latest-list li img {
	float: left;
	margin: 0px 10px 0px 0px;
}
.home-latest-list li i {
	font-size: 11px;
	font-style: italic;
	display: block;
	color: #a9a9a9;
}
.home-latest-list li p {
	margin-top: 10px;
}
/* ----------- Index / Facebook ----------- */
.home-clientsays-section {
	width: 390px;
	float: right;
	margin: 3px 0px 0 0px;
}
.home-clientsays-section h2 { 
	color: #000;
	font-size: 24px; 
	line-height: 36px;
	margin-bottom: 3px;
	border-bottom: 3px solid #eee;
}
.home-clientsays-section h2 img{
	width: 30px;
	height: 32px;
	display:inline;/*faz com que a imagem fique na mesma linha que o texto*/
	float:left;/*alinha a imagem � esquerda*/
	margin: 4px 3px 3px 3px;
}


/* ----------- Index / Ultimas Noticias ----------- */

.homen-latestbn-section {
	margin: -1px 5px 5px 5px;
	float: right;
	width: 565px;
}
.homen-latestbn-section h2 { 
	color: #000;
	font-size: 24px; 
	line-height: 36px; 
	margin-bottom: 5px;
	border-bottom: 3px solid #eee;
}
.homen-latestbn-section .section-box {
	width: 100%;
}
.homen-latestbn-section h2 img{
	width: 30px;
	height: 32px;
	display:inline;/*faz com que a imagem fique na mesma linha que o texto*/
	float:left;/*alinha a imagem � esquerda*/
	margin: 4px 3px 18px 3px;
}

ul.homen-latest-list {
	float: right;
	margin: -16px 0px 0px 0px;
	padding: 0px;
	width: 100%;
}
.homen-latest-list li {
	margin: 0px;
	padding: 3px;
	list-style-type: none;
	margin-bottom: 3px;
	border-bottom: 1px dashed #666;
}
.homen-latest-list li a {
	margin: 0px;
	font-size: 13px;
	color: #222;
	text-decoration: none;
	font-family: 'Oswald', sans-serif;
	font-weight:bold;
}
.homen-latest-list li a:hover {
	color: #666;
}
.homen-latest-list li i {
	font-size: 11px;
	font-style: italic;
	display: block;
	color: #a9a9a9;
}
.homen-latest-list li p {
	margin-top: 3px;
}
.homen-latest-list h9 {
	margin: 0px;
	font-size: 13px;
	color: #222;
	text-decoration: none;
	font-family: 'Oswald', sans-serif;
	font-weight:normal;
}

/* ----------- Index / Ultimas Promo��es ----------- */
.promocao {
	margin: -1px 5px 5px 5px;
	float: left;
	width: 560px;
	text-align:center;

}
.promocao h2 { 
	text-align:left;
	color: #000;
	font-size: 24px; 
	line-height: 36px; 
	margin-bottom: 5px;
	border-bottom: 3px solid #eee;
}
.promocao .section-box {
	width: 100%;
}
.promocao h2 img{
	width: 30px;
	height: 32px;
	display:inline;/*faz com que a imagem fique na mesma linha que o texto*/
	float:left;/*alinha a imagem � esquerda*/
	margin: 4px 3px 18px 3px;
}
.promocao a { color: #000; text-decoration: none; cursor:pointer; }
.promocao a:hover { text-decoration: underline; }
.promocao a img { border: 0; }

#indexprodutos {
    float:left;
    width: 560px
}

.post {
    width: 30%;
    float: left;
    padding-left:10px;
    padding-right:8px;
    font-size: 13px;
    color: #222;
    font-family: 'Oswald', sans-serif;
    font-weight:bold;
}

/* ----------- Single / Ultimas Noticias ----------- */

.homesn-latestbn-section {
	margin: -1px 5px 5px 5px;
	float: left;
	width: 565px;
}
.homesn-latestbn-section h2 { 
	color: #000;
	font-size: 24px; 
	line-height: 36px; 
	margin-bottom: 5px;
	border-bottom: 3px solid #eee;
}
.homesn-latestbn-section .section-box {
	width: 100%;
}
.homesn-latestbn-section h2 img{
	width: 30px;
	height: 32px;
	display:inline;/*faz com que a imagem fique na mesma linha que o texto*/
	float:left;/*alinha a imagem � esquerda*/
	margin: 4px 3px 18px 3px;
}

ul.homesn-latest-list {
	float: right;
	margin: -16px 0px 0px 0px;
	padding: 0px;
	width: 100%;
}
.homesn-latest-list li {
	margin: 0px;
	padding: 3px;
	list-style-type: none;
	margin-bottom: 3px;
	border-bottom: 1px dashed #666;
}
.homesn-latest-list li a {
	margin: 0px;
	font-size: 13px;
	color: #222;
	text-decoration: none;
	font-family: 'Oswald', sans-serif;
	font-weight:bold;
}
.homesn-latest-list li a:hover {
	color: #666;
}
.homesn-latest-list li i {
	font-size: 11px;
	font-style: italic;
	display: block;
	color: #a9a9a9;
}
.homesn-latest-list li p {
	margin-top: 3px;
}
.homesn-latest-list h9 {
	margin: 0px;
	font-size: 13px;
	color: #222;
	text-decoration: none;
	font-family: 'Oswald', sans-serif;
	font-weight:normal;
}




#img-destaque {
	margin: 5px 18px 3px 3px;
	width: 278px;
	height: 207px;
	border: 1px solid #333;
	float:left;
	padding:3px;
}


/* ----------- Single / Conteudo ----------- */

#single-blog {
	float: left;
	width: 560px;
	padding-left: 5px;
	}

#single-blog p { line-height: 165%; }
.blogentry {  }

.l {
    font-size: 14px;
    color: #999;
    font-family: 'Oswald', sans-serif;
    font-weight:normal;
    text-align: left;
    border-bottom: 2px solid #eee;
}
.t {
    font-size: 30px;
    float:left;
    color: #000;
    font-family: 'Oswald', sans-serif;
    font-weight:normal;
}

/* ----------- page not found ----------- */
.pagenotfound {
	float: left;
	width: 96%;
	height: 150px;
	padding: 0px 15px 15px 15px;
	margin-bottom: 20px;
	background-color: #f9f9f9;
	border: 1px solid #eee;
	font-family: 'Oswald', sans-serif;
	font-weight: normal;
}
.pagenotfound_textbig {
	font-size: 120px;
	font-family: 'Oswald', sans-serif;
	font-weight: normal;
	color: #454545;
	padding-left: 10px;
}

.pagenotfound_left {
	float: left;
	width: 30%;
}
.pagenotfound_right {
	float: left;
	width: 60%;
	padding-left: 30px;
	padding-bottom: 10px;
	border-left: 1px solid #ccc;
	font-size: 21px;
	margin-top: 30px;
}
.pagenotfound_right i {
	font-size: 14px;

}


#ads1 {
	width: 310px;
	float: left;
	padding-top:10px;
	padding-left:5px;
	padding-bottom:10px;
}
#ads2 {
	width: 310px;
	float: right;
	padding-top:10px;
	padding-left:5px;
	padding-bottom:10px;
}





/**** post pagination wordpress - madlyluv.com ***/
.paginacao {
         clear:both;
         padding: 20px 0;
         position:relative;
}

.paginacao span, .paginacao a {
         display:block;
         float:left;
         font: normal 14px georgia, verdana;
         background: #666;
         padding: 4px 7px 4px 7px;
         margin: 1px 2px 0 2px;
         text-transform: capitalize;
         color: #fff;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
}

.paginacao span {
         font: bold normal 14px georgia, verdana;
}

.paginacao .current, .paginacao .current a {
         color: #fff;
         background: #333;
         padding: 4px 7px 4px 7px;
         margin: 1px 2px 0 2px;
         font: bold italic 14px georgia, verdana;
         text-transform: capitalize;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
}


#footer { clear: both; padding:15px 0 0 0; width: 900px; height: auto; background-color:#333; }
#footer p { text-align:center; font-size:10px; padding-bottom:11px; }
#footer a { color:#FFF; font-size:10px; }
#footer a:hover { color:#CCC; text-decoration:none; }

#footer a:hover.designby { color:#CCC; text-decoration:none; }

Bru_ce · Junho 20, 2013

Usa position:absolute para deixar o elemento onde você quer.

AndersonRO · Junho 20, 2013

Opa boa tarde Bru_ce aparentemente o problema esta acontecendo no meu css pois o css do sharebar se encontra ja em absolute.

os div se encontra dessa maneira. http://img43.imageshack.us/img43/9192/hepx.jpg

acredito que algum dos padding ou margin esteja atrapalhando, mais não estou conseguindo localizar quais deles.

Apos eu adicionar:

.blogentry ul {
	text-align: left;
	font-size: 13px;
}

.blogentry li {
	list-style-type: none;
}

em #single-blog deu uma melhorada porem ainda não está aparecendo fora do layout como deveria.

Bru_ce · Junho 20, 2013

Instala o firebug no firefox e utilize esse plugin para verificar seus elementos.

AndersonRO · Junho 21, 2013

Bru_ce, otimo plugin, porem não consegui resolver o problema do plugin sharebar, porem irei deixar isso quieto.

Acredito que 2 dia de estudos ja fiz um trabalho ate bom. site.
Irei continuar a estudar css para ver o que fiz de errado e assim futuramente resolver meu problema.

muito obrigado pela ajuda e uma boa noite.

Bru_ce · Junho 21, 2013

Por nada amigo, continue estudando e boa sorte.

Entrar

Arquivado

[HTML/CSS] posicionamento de conteudo

Recommended Posts

AndersonRO 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

AndersonRO 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Bru_ce 53

Compartilhar este post

Link para o post

Compartilhar em outros sites

AndersonRO 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Bru_ce 53

Compartilhar este post

Link para o post

Compartilhar em outros sites

AndersonRO 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Bru_ce 53

Compartilhar este post

Link para o post

Compartilhar em outros sites

Estou criando uma calculadora de m2 e litros de tinta

Cruzamento de Bases

Consulta sem duplicação

Este projeto é apoiado pelas empresas

Fóruns

Tempo Real

Informação importante