CSS + Webstandard+Primeira vez

Julho 2, 2008

gente Seguinte..

eu mexo com html pouco mais de 3 meses e vi que esse negoço de tabela ta por fora mesmo ... ai mal aprendi e já tento dar umas pinceladas com css + tableless

estou fazendo um sitezinho e to tendo varios problemas de posicionamento.. PRINCIPALMENTE COM IMAGEMS .. Agradeceria muito a ajuda...

1º Código Css

@charset "utf-8";

.fonte1
    {font-family:"Book Antiqua", "Alexis Leftalic", "Alba Super";
        font-size:16 px;
        letter-spacing:inherit;
        color:#000099}
    
.fonte2
    {font-family:Verdana, Arial, Helvetica, sans-serif;
     font-size:20px;
     color:#FF0000}
     
.fonte3
    {font-family: "Blue Highway";
    fonte-size:22px;
    color:#6699CC}
     
.botao
    {
    position:relative;
    top:-7px;
    border-style:solid;
    border-color:#003399;
    border-left-width:50px;
    border-left-style:double;
    border-right-style:hidden;
    border-top-style:hidden;
    border-bottom-style:hidden;
    font-size:18px
    }
    
    
    a:link{none}
    a:visited{text-decoration:none}  
    a:hover {color:#990000;background:#003399}  /* ordem das PSEUDOS-CLASSES a:link,a:visited,a:hover,a:active . Se não seguir essa ordem não funciona*/
    a:active {color:#FF6600}
    

.body
    {
    background: url("images/contentwrapperbg.gif") center;
    background-repeat:repeat-y;
    margin:0.3cm 8.7cm;
    padding:100 cm}         /*MARGIN.o primeiro é o HORIZONTAL ,já o segunda o VERTICAL. FAÇA SEMPRE ASSIM ORGANIZA bem melhor a estrutura do site.*/
    
    
.barradenavegacao
    {
    position:relative;
    top:-1.3em;
    background-color:#66CC00;
    width:782px;
    height:35px
}

.barraverticalnavegacao
    {background:url("images/barrasepnavegacao.gif");
    border-bottom,border-left,border-top:hidden;
    border-right:thin;
    border-right-width:thin}
    
    
.main {
        position:relative;
        top:280px;
           margin-left:10.6em;
        margin-right:10.6em;
        padding-left:1em;
        padding-right:1em}
        
        
.menu-esquerdo {
        width:10.2em;
        position:absolute;
        top:200px;
        left:330px;
        font-size:80%;
        padding-left:1%;               /* Menu Esquerdo OBS para POSITION que deve vim com medidas em "em" diferente da relative que vem em CM*/
        padding-right:1%;
        margin-left:0;
        margin-right:0;}
        
.menu-direito {
    width:10.2em;
    position:absolute;
    top:200px;
    right:330px;                        /*muita calma nessa hora yuri,Cuidade com as medidas Px e Cm para absolute e relative,e tambem olha a p**** do right                                                                    e left*/
    font-size:80%;
    padding-left:1%;
    padding-right:1%;
    margin-left:0;
    margin-right:0;
}

.banner {
    background:url("images/banner1_blank.jpg");
    position:relative;
    top:-0.8em;
    width:782px;
    height:180px;
    margin-right:100px
}

2º 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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>.::CSS POWER!::.</title>
<style type="text/css"> 
@import url("aprendendo css.css");


    

</style>


</head>

<body class="body">
<img src="images/banner1_blank.jpg" alt="banner" width="783" class="banner">
<div id="barraverde">
    <h2 class="barradenavegacao">
    
     <a href="#" class="botao">Css</a>
    
     <img src="images/barrasepnavegacao.gif" alt="separador" width="1" height="35" /> <a href="#" class="botao">Web 2.0</a> 
     <img src="images/barrasepnavegacao.gif" alt="separador" width="1" height="35" /> <a href="#" class="botao">Novidades</a>
     <img src="images/barrasepnavegacao.gif" alt="separador" width="1" height="35" /> <a href="#" class="botao">Têndencias</a>
     <img src="images/barrasepnavegacao.gif" alt="separador" width="1" height="35" /><a href="#" class="botao">Portfólio</a> 
     <img src="images/barrasepnavegacao.gif" alt="separador" width="1" height="35" /> <a href="#" class="botao">FlashPlayer</a></h2>
</div>


<div id="lateral1" class="menu-esquerdo">
  <h1 class="fonte1">Saiba Mais </h1>
  <span class="sidebar1">The background color on this div will only show for the length of the content. If you'd like a dividing line instead, place a border on the left side of the #mainContent div if it will always contain more content. 
</p>
</span>
<p>Donec eu mi sed turpis feugiat feugiat. Integer turpis arcu, pellentesque  eget, cursus et, fermentum ut, sapien.
  <!-- end #sidebar1 -->
</div>

<div id="sidebar2" class="menu-direito">
  <h1 class="fonte1">Noticias</h1>
  <p>The background color on this div will only show for the length of the content. If you'd like a dividing line instead, place a border on the right side of the #mainContent div if it will always contain more content. </p>
  <p>Donec eu mi sed turpis feugiat feugiat. Integer turpis arcu, pellentesque  eget, cursus et, fermentum ut, sapien. </p>
  <!-- end #sidebar2 -->
</div>
<div id="mainContent" class="main">
    <h1> Main Content</h1>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam,  justo convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam  ante ac quam. Maecenas urna purus, fermentum id, molestie in, commodo  porttitor, felis. Nam blandit quam ut lacus. Quisque ornare risus quis  ligula. Phasellus tristique purus a augue condimentum adipiscing. Aenean  sagittis. Etiam leo pede, rhoncus venenatis, tristique in, vulputate at,  odio. Donec et ipsum et sapien vehicula nonummy. Suspendisse potenti. 
      <!-- end #mainContent -->
    </p>
    <p>Nonummy quam  ante ac quam. Maecenas urna purus, fermentum scing. Aenean  sagittis. Etiam leo pede, rhoncus venenatis, tristique in, vulputate at,  odio. Doneid, molestie in, commodo  porttitor, felis. Nam blandit quam ut lacus</p>
</div>

</body>
</html>

3º IMAGEM para auxiLialos

Gostaria de antemão já agradecer

e queria umas dicas com esse negoço de tableless , porque eu acho que TEMPLATE quase não se é mais utilizado hoje em dia né?com aqueles milhoes de slices e Site pesadissimo cheio de tabelas...

Estou aceitando também depois que verem meu codigo qualquer tipo de esclarecimento pois estou precisando de um bocado.. principalemnte esse negoço de position :absolute; or relative;

VALEU GENTE

kuroi · Julho 2, 2008

opa só pra dar uma dica, no titulo do tópico você fala de webstandards mas no tópico pergunta sobre tableless.

apesar dos dois assuntos andarem sempre juntos pra levar a uma melhor utilizacao e formatacao do codigo html e etc, os dois são coisas totalmente diferentes, essa é uma coisa muito importante pra se saber caso você queira seguir essas areas.

os padroes web são padroes criados para organizar o html e o tableless é o nome dado a um estilo de criacao de paginas onde não se usa tabelas pra montar o layout.

bom, esse sites aqui tem bastante dicas pra você estudar:

http://www.tableless.com.br/

http://www.maujor.com

já aqui no forum, quando forem aparecendo duvidas especificas q você tiver, vai perguntando q nos ajudamos.

um dica boa tb é você sempre testar sua pagina em varios navegadores, porque sempre tem diferencas. eu sempre testo no ie, ff e opera. pelo menos ie e ff, é importante sempre testar.

bom, quanto aos problemas com sua pagina, onde exatamente estao os objetos q você esta tendo problemas pra posicionar??

olhando sua imagem, parece q o main ficou mais pra baixo, seria isso?? se for, tenta por position relative nos dois menus (direito e esquerdo), e ponha um float: left; nos dois menus e no main e veja se funciona.

a diferenca entre position relative e absolute, é q o absolute, se na me engano, posiciona o seu objeto exatamente no top e left q você puser (em relacao ao objeto em q ele esta dentro), ignorando o espaco ocupado por outros objetos dentro do mesmo objeto pai. com o position relative, isso não acontece.

GemynyWeb · Julho 2, 2008

opa só pra dar uma dica, no titulo do tópico você fala de webstandards mas no tópico pergunta sobre tableless.
apesar dos dois assuntos andarem sempre juntos pra levar a uma melhor utilizacao e formatacao do codigo html e etc, os dois são coisas totalmente diferentes, essa é uma coisa muito importante pra se saber caso você queira seguir essas areas.
os padroes web são padroes criados para organizar o html e o tableless é o nome dado a um estilo de criacao de paginas onde não se usa tabelas pra montar o layout.
bom, esse sites aqui tem bastante dicas pra você estudar:
http://www.tableless.com.br/
http://www.maujor.com
já aqui no forum, quando forem aparecendo duvidas especificas q você tiver, vai perguntando q nos ajudamos.
um dica boa tb é você sempre testar sua pagina em varios navegadores, porque sempre tem diferencas. eu sempre testo no ie, ff e opera. pelo menos ie e ff, é importante sempre testar.
bom, quanto aos problemas com sua pagina, onde exatamente estao os objetos q você esta tendo problemas pra posicionar??
olhando sua imagem, parece q o main ficou mais pra baixo, seria isso?? se for, tenta por position relative nos dois menus (direito e esquerdo), e ponha um float: left; nos dois menus e no main e veja se funciona.
a diferenca entre position relative e absolute, é q o absolute, se na me engano, posiciona o seu objeto exatamente no top e left q você puser (em relacao ao objeto em q ele esta dentro), ignorando o espaco ocupado por outros objetos dentro do mesmo objeto pai. com o position relative, isso não acontece.

po cara valeuuu

mas eu to com duvida no seguinte eu já botei e tirei varios comandos .. e aQUELABARRA DE NAVEGAção verde + aquele banner estranho que botei em cima No se movem .. eu querro "centralizar "ele no layout e como percebe-se ele está mais para a direita "saindo" um pouco do layout..

será que teria como voce me da esse help ai..

enquanto isso vou procurando nesses sites ai..

obrigado

kuroi · Julho 2, 2008

vi q você pos varias propriedades no .barradenavegacao mas nenhuma no .barraverde.

note q o .barradenavegacaoesta dentro do .barraverde. então você deveria tentar ajustar o posicionamento do .barraverde assim como da imagem. de uma classe ou um id para a imagem, e ai va tentando move-la pra tras no css.

GemynyWeb · Julho 3, 2008

Cara consegui!!!!

so to com outra duvida agora.. se voce ver A Screenshot que tirei.. um botao estao esta selecionado(o que estao com fundo azul embaixo da barra grande verde...) ele fica com o fundo azul "pela metade" como faço para o A:hover ocupar o "campo" todo verde?? eu tentei aumentar o height mas não funcionooo

Segue a imagem denovo

Resumo:como fazer essa barra azul(estado a:hover{background-color:"blue"} ) ocupar a barra verde INTEIRA ela esta meio pela metade..

qualquer duvida perguntemm porque talvez eu hosteiii o site que nele quero botar todos os meus conhecimentos css um site simples mas bonito e acima de tudo TABLELESS

kuroi · Julho 3, 2008

então, o fundo azul vai ocupar todo o espaco do a. então você tem q por o a pra ocupar o espaco inteiro. mas você ve q existe uma imagem antes de cada a, q acho q são os separadores certo??

ai já não sei direito então, mas tente apagar as tags img e inserir as imagens no fundo das tags a (com css background:url) e veja o q da.

Entrar

CSS + Webstandard+Primeira vez

Pergunta

Guest --gemyny --

Link para o comentário

Compartilhar em outros sites

5 respostass a esta questão

Posts Recomendados

kuroi

Link para o comentário

Compartilhar em outros sites

GemynyWeb

Link para o comentário

Compartilhar em outros sites

kuroi

Link para o comentário

Compartilhar em outros sites

GemynyWeb

Link para o comentário

Compartilhar em outros sites

kuroi

Link para o comentário

Compartilhar em outros sites

Participe da discussão

Estatísticas dos Fóruns

Navegação

Atividades