Ajuda códigos CSS

RaphaellReis · 18 de julho de 2013

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 (:

DiF · 18 de julho de 2013

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

RaphaellReis · 19 de julho de 2013

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

DiF · 19 de julho de 2013

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!