Jump to content
Carlos Rocha

Ajuda com CSS

Recommended Posts

Carlos Rocha

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

Share this post


Link to post
Share on other sites
I-NOZex

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

Share this post


Link to post
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

×
×
  • 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.