Jump to content


Photo

Links Em Css


  • Faça o login para participar
5 replies to this topic

#1 jfjunior

jfjunior

    Novato no fórum

  • Usuários
  • 2 posts
  • Sexo:Não informado

Posted 24/07/2007, 09:38

Pessoal,

Não sou conhecedor de html nem de css, apenas curioso, e criei uma página pessoal, que está abaixo. Alguem poderia me ajudar?? Gostaria que os links que aparecem do box esquerdo aparecessem no box direito. Eu consigo isso usando frames, mas gostaria de fazer isso usando CSS. É possível??? Se for, e alguem puder me ajudar, agradeço.



<html>

<head>

<title>Chinelo de Pneu</title>
<style type="text/css" title="mystyles" media="all">

<!--

body { background-color: #e6e6d9;
color: #5d665b;
margin-top: 50px;
margin-right: 50px;
margin-bottom: 0px;
font-family: Verdana, Geneva, Arial, sans-serif;
font-size: small;
line-height: 180%;
}

p { text-indent: 3em;
}

h1 { color:#966b72;
font-family: Verdana, Geneva, Arial, sans-serif;
}

a:link { color: #00c;
text-decoration: none;
background-color: transparent
}

a:visited { color: #699;
text-decoration: none;
background-color: transparent
}

a:hover { color: #c93;
text-decoration: underline;
background-color: transparent
}

a:active { color: #900;
text-decoration: underline;
background-color: transparent
}

.leftcol { text-align: left;
width: 20%;
float: left
}

.rightcol { text-align: left;
width: 80%;
float: left
}

-->
</style>


</head>

<body>

<div class="leftcol">

<p><a href="turma.htm" target="right">A Turma</a></p>

<p><a href="fotos.htm" target="right">Fotos</a></p>

<p><a href="video.htm" target="right">Vídeos</a></p>

<p><a href="dicas.htm" target="right">Dicas</a></p>

<p><a href="materias.htm" target="right">Matérias</a></p>

<p><a href="provas.htm" target="right">Provas</a></p>

<p><a href="link.htm" target="right">Links</a></p>

<p><a href="atual.htm" target="right">Atualizações</a></p>

<p><a href="fale.htm" target="right">Fale Conosco</a></p>

</div>

<div class="rightcol">

<h1><p>Chinelo de Pneu</p></h1>

<p>Mapa de Acesso</p>

<p>Vejam quantas pessoas já nos visitaram:</p>

</div>

</body>

</html>

#2 '' sem.Ponto

'' sem.Ponto

    Super Veterano

  • Ex-Admins
  • 2098 posts
  • Sexo:Masculino
  • Localidade:Belo Horizonte

Posted 24/07/2007, 09:53

É só trocar as divs de lugar. A div leftcol deve descer e a div rightcol deve subir:

<div class="rightcol">

<h1><p>Chinelo de Pneu</p></h1>

<p>Mapa de Acesso</p>

<p>Vejam quantas pessoas já nos visitaram:</p>

</div>

<div class="leftcol">

<p><a href="turma.htm" target="right">A Turma</a></p>

<p><a href="fotos.htm" target="right">Fotos</a></p>

<p><a href="video.htm" target="right">Vídeos</a></p>

<p><a href="dicas.htm" target="right">Dicas</a></p>

<p><a href="materias.htm" target="right">Matérias</a></p>

<p><a href="provas.htm" target="right">Provas</a></p>

<p><a href="link.htm" target="right">Links</a></p>

<p><a href="atual.htm" target="right">Atualizações</a></p>

<p><a href="fale.htm" target="right">Fale Conosco</a></p>

</div>

;-)

Movido para a sala mais adequada.
att,
Muller Dias
ex-administrador Fórum WMO

#3 jfjunior

jfjunior

    Novato no fórum

  • Usuários
  • 2 posts
  • Sexo:Não informado

Posted 24/07/2007, 10:21

Eu fiz isso, mas ele trocou as posições. Gostaria que o efeito fosse o mesmo que você encontra no endereço www.chinelodepneu.xpg.com.br
Eu consigo o efeito usando frames e apontando para frame right, mas não sei fazer isso em CSS. Aliás, nao sei quase nada em CSS.. rs
Obrigado pela resposta.

#4 '' sem.Ponto

'' sem.Ponto

    Super Veterano

  • Ex-Admins
  • 2098 posts
  • Sexo:Masculino
  • Localidade:Belo Horizonte

Posted 24/07/2007, 13:26

Ah sim!

Agora eu entendi o que você quer. Não basta só CSS... você precisa trabalhar com Ajax também.
att,
Muller Dias
ex-administrador Fórum WMO

#5 Raphaell

Raphaell

    Normal

  • Usuários
  • 80 posts
  • Sexo:Masculino
  • Localidade:Recife/PE
  • Interesses:Tableless, CSS, XHTML, Flash, ActionScript, Photoshop, Fireworks, Teoria das cores, Webdesign.

Posted 24/07/2007, 16:27

jfjunior, no caso do exemplo que você disponibilizou, ele está usando frames, que possibilitam isso.

O código do frame desse site que você passou é:

<frameset cols=20%,*>
<frame src=links.htm name=left scrolling="auto"> 
<frame src=intro.htm name=right scrolling="auto"> 

<noframes>

Raphael Taveira Webdesigner
Avaliação (x)HTML, CSS & Visual.
Ocupado com projeto !!!
"Minhas seções": CSS & Semântica(Tableless)

Contato: raphaelstrous@yahoo.com.br

#6 sigur

sigur

    12 Horas

  • Usuários
  • 158 posts
  • Sexo:Não informado

Posted 04/08/2007, 16:03

opa, estava com a mesma dúvida.

sobre esse ajax, é algo simples? por exemplo, só colocar pra carregar alguma coisa lá em cima do file, ou algo assim? ou precisa instalar, aprender a mexer nem que seja um pouco, etc...

se puderem colocar aqui as linhas que resolveriam esse problema, daí é só editar e colar..

agradeço




0 user(s) are reading this topic

0 membro(s), 0 visitante(s) e 0 membros anônimo(s)

IPB Skin By Virteq