Ir ao conteúdo
  • Cadastre-se
RaphaellReis

Ajuda códigos CSS

Recommended Posts

Bom vou deixar os códigos aqui primeiro

HTML:

<body>
<div id="header"></div>
<div class="left"></div>
<div class="right"></div>
<div id="rodape"></div>
</body>

CSS:

#header {background-color:#F00;
width:800px;
height:120px;}

.left {background-color:#00F;
width:100px;
height:500px;
float:left;}

.right {background-color:#3C6;
width:750px;
height:500px;
float:right;}

#rodape {background-color:#C6C;
width:800px;
height:65px;
clear:both;}

e o meu right não fica junto com o left fica um espaço no meio, já tentei usar margin-left e nada ..

deve ser algo com o position neah ? Se alguém aí me ajudar .. agradeço (:

Compartilhar este post


Link para o post
Compartilhar em outros sites

Olá,

faltam algumas coisas no seu código.

No html, acrescente mais uma div, com ID "container". Ele servirá de container para sua estrutura. ficando desta maneira:


<body>
[COLOR="Red"]<div id="container"> [/COLOR]
<div id="header"></div>
<div class="left"></div>
<div class="right"></div>
<div id="rodape"></div>
[COLOR="red"]</div> [/COLOR]
</body>

No CSS,

Acrescente a ID container com os seguintes atributos:

  • display: table;
  • width: 800px;

Na CLASS .right, diminua 50px do width... deixando em 700px.

O CSS ficará assim:


[COLOR="Red"]#container{display: table; width: 800px;}[/COLOR]
#header {background-color:#F00;
width:800px;
height:120px;}

.left {background-color:#00F;
width:100px;
height:500px;
float:left;}

.right {background-color:#3C6;
[COLOR="red"]width:700px;[/COLOR]
height:500px;
float:right;}

#rodape {background-color:#C6C;
width:800px;
height:65px;
clear:both;}

Acredito que é isto que você quer. Para ver o código em funcionamento veja este link: http://jsfiddle.net/P6Mbn/

Att,

Dif

  • Curtir 1

Compartilhar este post


Link para o post
Compartilhar em outros sites

Po, valeu ae mano, nem tinha pensado nisso ..

Aproveitando .. tava pesquisando ontem e tenho que aprender também como usar o position, você tem algum link aqui do fórum ou fora que sirva como um tutorial pra mim ?

Obrigado ..

Compartilhar este post


Link para o post
Compartilhar em outros sites

O atributo position serve para posicionar os elementos em uma determinada área. este atributo deve ser usado em conjunto com os atributos: left, right, top e bottom: {valor} px

ele possui 4 argumentos: absolute, fixed, static, relative.

Absolute:

usa a posição absoluta, ou seja, o elemento será posicionado absolutamente.

fixed:

usando ele, ele força a fixação do elemento em um ponto. se hover um scroll, quando rolar o elemento permanecerá no mesmo lugar, enquanto o resto é rolado para baixo..

static:

Como o nome já diz, é estático, em um ponto.. se houver um scroll, ele vai rolar com a pagina pois ele está estático no mesmo lugar diferente de fixed, que fica fixo, mas acompanha a visão.

Relative:

Pelo óbvio, esta é uma posição relativa em com relação ao seu elemento anterior.

Por exemplo:

tens um container, neste container possui um menu horizontal que deve ficar no topo e centralizado, podes usar a posição relativa para deixar no topo, centralizado dentro do container.. pois o menu terá uma posição relativa ao container.

Leia mais sobre o assunto aqui: http://www.maujor.com/index.php

é o site de um dos melhores autores de ótimos livros.. o Maurício "maujor" Samy Silva.. O dinossáuro do CSS!

Compartilhar este post


Link para o post
Compartilhar em outros sites

Crie uma conta ou entre para comentar

Você precisar ser um membro para fazer um comentário

Criar uma conta

Crie uma nova conta em nossa comunidade. É fácil!

Crie uma nova conta

Entrar

Já tem uma conta? Faça o login.

Entrar agora





Sobre o Clube do Hardware

No ar desde 1996, o Clube do Hardware é uma das maiores, mais antigas e mais respeitadas publicações sobre tecnologia do Brasil. Leia mais

Direitos autorais

Não permitimos a cópia ou reprodução do conteúdo do nosso site, fórum, newsletters e redes sociais, mesmo citando-se a fonte. Leia mais

×