Jump to content

Ajuda com CSS


Carlos Rocha
 Share

Recommended Posts

Primeiramente, gostaria de pedir o administrador do fórum que cancelasse ou excluísse os subtópicos abaixo desse:

http://www.portugal-a-programar.pt/topic/64006-float-right-nao-funcionou/#entry538417

Porque o assunto, de certa forma, mudou. Então, peço a ajuda dos colegas em mais um estudo.

Pessoal. Sempre usei tabelas para montar layout's.

Porem, gostaria de começar a usar CSS.

Estou 'tentando' montar um layout simples conforme imagem abaixo mas esta dando certo;

Porem, estou tendo enorme dificuldade em montar o layout abaixo:

Pode me ajudar?

Estou fazendo da forma abaixo mas o quadro que esta em cima da parte colorida no desenho, só fica abaixo da parte colorida.

site.png


*
{	
 margin:0 auto;
}

#topo, #cabecalho, #mensagem, #portais, #imagens, #anuncios, #base
{
position:absolute;
width:1000px;
left:50%;
margin-left:-500px;
background-color:#033;
}
#topo
{
height:100px;
}
#tarja
{
position:absolute;
top:100px;
width:100%;
height:280px;
background-image:url(fundo.jpg);
}
#cabecalho
{
top:120px;
height:400px;
}
 #formBox
 {
text-align:center;
 }
  #formTopo
  {
  }
  #form
 {
 }
#banner
 {
 }
#mensagem
{
top:520px;
height:100px;
}
#portais
{
top:620px;
height:100px;
}
#imagens
{
top:720px;
height:100px;
}
 #destaques
 {
 }
 #galeria
 {
 }
 #midiaSocial
 {
 }
#anuncios
{
top:820px;
height:100px;
}
#base
{
top:920px;
height:100px;
}

Veja o 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>
<link rel="stylesheet" type="text/css" href="global/css/body.css" /></link>
<title>Minha Página</title>
</head>

<body>
 <div id="topo">topo</div>
 <div id="tarja">tarja</div>
 <div id="cabecalho">cabecalho
<div id="formBox">formBox
  <div id="formTopo">formTopo</div>
  <div id="form">form</div>
</div>
<div id="banner">banner</div>
 </div>  
 <div id="mensagem">mensagem</div>
 <div id="portais">portais</div>
 <div id="imagens">imagens
<div id="destaques">destaques</div>
<div id="galeria">galeria</div>
<div id="midiaSocial">midiaSocial</div>
 </div>
 <div id="anuncios">anuncios</div>
 <div id="base">base</div>
</body>
</html>

Alguem poder me ajudar?

Desde já muito obrigado.

Carlos Rocha

Edited by carcleo
Link to comment
Share on other sites

nao tens de que 😉

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
 <title>Hello!</title>
 <style type="text/css">

 /*<![CDATA[*/
/* http://meyerweb.com/eric/tools/css/reset/
  v2.0 | 20110126
  License: none (public domain)
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
/**/
html, body {
height: 100%;
width: 100%;
}
 /* CSS Generated by Primer - primercss.com */
div.main {
height: 100%;
margin: 0 auto;
width: 90%;
background: #aa1111;
}
div.topo {
background: none repeat scroll 0 0 #11AA11;
height: 150px;
margin-bottom: 40px;
}
div.cabecalho {
background: none repeat scroll 0 0 #1111AA;
height: 300px;
}
div.dir {
background: none repeat scroll 0 0 #BB2222;
display: inline;
float: left;
height: 300px;
min-width: 300px;
width: 30%;
}
div.form_top {
background: none repeat scroll 0 0 #00FF00;
height: 75px;
}
div.form {
background: none repeat scroll 0 0 #2222BB;
height: 225px;
}
div.esq {
background: none repeat scroll 0 0 #33CCCC;
display: inline;
float: left;
width: 70%;
}
div.esq img {
display: block;
height: 300px;
width: 100%;
}
div.div1 {
background: none repeat scroll 0 0 #CC33CC;
height: 150px;
}
div.div2 {
background: #cc3;
height: 220px;
}
div.div2-1 {
background: #4dd;
display: inline-block;
float: left;
height: 100%;
width: 33.333%;
}
div.div2-2 {
background: #d4d;
display: inline-block;
float: left;
height: 100%;
width: 33.333%;
}
div.div2-3 {
background: #dd4;
display: inline-block;
float: left;
height: 100%;
width: 33.333%;
}
div.div3 {
background: #e55;
height: 150px;
}
div.footer {
background: #e5e;
height: 150px;
}
 /*]]>*/

 </style>
</head>
<body>
<div class="main">
<div class="topo"></div>
<div class="cabecalho">
	<div class="dir">
		<div class="form_top"></div>
		<div class="form"></div>
	</div>
	<div class="esq">
		<img src="http://placehold.it/700x300/c0c0c0/0056e3/&text=Banner" />
	</div>
</div>
<div class="div1"></div>
<div class="div2">
	<div class="div2-1"></div>
	<div class="div2-2"></div>
	<div class="div2-3"></div>
</div>
<div class="div3"></div>
<div class="footer"></div>
</div>
</body>
</html>

ZL5HqJX.png

alinhar o conteudo ao centro da pagina nao é com margins, é com margin: 0 auto;

Edited by I-NOZex

B2R » Beat2Revolution v3.0b | Regista e divulga-nos

beat2revolution.net
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...

Important Information

By using this site you accept our Terms of Use and Privacy Policy. We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.