Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

AerSoftware

Conteúdo de um site

Por , em Desenvolvimento frontend

Recommended Posts

AerSoftware    0

AerSoftware
Postado

Oi pessoal, tudo bem? Espero que sim.

 

Bom, estou aqui denovo. Dei uma boa lida nos links que me passaram e ja estou conseguindo contruir meu layout. Está ficando legal, mas me pintou algumas dúvidas. Acho q essa dúvida não é nem sobre como fazer, mas sim o que é mais recomendável.

 

Vamos lá.

 

Eu fiz a estrutra do site (este aqui) com a idéia de deixar ela fixa e quando o conteúdo ultrapassar sua div, criar uma barra de rolagem ao lado. Bom, isso funciona perfeitamente bem (se quiserem ver, no link "Quem Somos").

 

Mas tenho notado em vários sites que visito, que o conteúdo se estende pra baixo, fazendo uso da barra do proprio navegador.

 

Qual é a melhor opção pra se usar nesse caso?

 

E ja vou imbutir uma outra dúvida aí. Se a melhor opção for a segunda, de usar a barra de rolagem do proprio navegador, como faço pra cor da div menu, e a cor da borda dela também acompanhar esse conteudo? pois se eu tirar do css a opção (overflow: auto;) ele manté a estrutrura dos lados, mas abaixo o tamanho do menu continua fixo, deixando um branco entre o final da div menu e o inicio da div rodape.

 

Agraço desde ja a ajuda pessoal, abraços.

Compartilhar este post

Link para o post
Compartilhar em outros sites

dvdddd    0

dvdddd
Postado

cara, eu particularmente gosto da barra de rolagem do próprio browser ao invés da div ou iframe!mas evita usar aquela barra de rolagem horizontal!!

Compartilhar este post

Link para o post
Compartilhar em outros sites

Giovani    104

Giovani
Postado

Em relação a barra de rolagem, eu acho que a do navegador é a melhor opção, até hoje não li nada sobre o assunto, acho que deve ser algo mais pessoal mesmo....uma tendência!!!Sobre o seu site, tenho que falar uma coisa... ;) ....acbai de abrir ele no firefox e tá todo desconfigurado.Sugiro que de uma revisada no seu código e sempre que for fazendo...vai testando no firefox e no ie![]´s

Compartilhar este post

Link para o post
Compartilhar em outros sites

AerSoftware    0

AerSoftware
Postado

Hmm.. entendi. Realmente não pretendo mesmo usar a barra de rolagem horizontal dvdddd.Gio, eu notei já que no Firefox o layout fica errado, mas ainda nao consegui descobrir o pq. O que notei é que a div menu fica menor no FF, mas nao sei se aumentando ela, nao vá aumentar na IE tb e ficar errado nele.Uma dúvidazinha rápida. como faço pra deixar o tamanho da div geral igual na altura? É que to fazendo ele baseado no IE, entao ajustei a altura certa pro IE, mas se abro no FF, ele ja cria a barra de rolagem ao lado, e gostaria q ele ajustasse automatico a altura.

Compartilhar este post

Link para o post
Compartilhar em outros sites

AerSoftware    0

AerSoftware
Postado

É o navegador mesmo Gio. Notei também que pudesse ser pela barra de informações. É que estou acustumado com um padrão que deixou sempre no IE. Deve ser por isso que notei a diferença.

Compartilhar este post

Link para o post
Compartilhar em outros sites

§ÜP®ËM3 (Daniel/Nerd)    0

§ÜP®ËM3 (Daniel/Nerd)
Postado

É o navegador mesmo Gio. Notei também que pudesse ser pela barra de informações. É que estou acustumado com um padrão que deixou sempre no IE. Deve ser por isso que notei a diferença.

Tem como colocar barra de rolagem em cima e do lado esquerdo tmbm, dentro do iframe ou na própria página, coloridas tmbm em CSS, lembrando*

 

Se quiser pd usar o DOCTYPE 4.1 (neste caso) e barra de rolagens coloridas dentro do iframe, e para inverter os lados aí tá o cod.

 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.1 Transitional//EN">
<!-- saved from url=(0038)http://nerddownloads.zip.net/home.html -->
<HTML lang=pt xml:lang="pt" xmlns="http://www.w3.org/1999/xhtml"><HEAD>
<META http-equiv=Content-Type content="text/html; charset=windows-1252">

<style type="text/css">
body {
scrollbar-arrow-color: red;
scrollbar-3dlight-color: blue;
scrollbar-highlight-color: green;
scrollbar-face-color: gold;
scrollbar-shadow-color: white;
scrollbar-darkshadow-color: black;
scrollbar-track-color: silver;
direction: rtl;text-align:left;
}
</style>

</head><body>

<div align="center">Aqui você escreve o conteudo do site etc...</div>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>

</body></html>

Exemplo sem barra de rolagem no site (padrão DOCTYPE 3.0 em diante):

 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.0//PT"><HTML><meta name="author" content="Daniel Nerd 

(§ÜP®ËM3)"><meta http-equiv="content-language" content="pt-br, en-US"><meta name="copyright" 

content="NerdDownloads ® 2003-2008"><meta name="description" content="Página repleta de 

novidades sempre."><meta name="keywords" content="nerd, nerddownloads, nerd downloads, 

downloads, windows, textos, dicas, informática, hack, crac, hacking, cracking, orkut, google, 

busca, buscas"><meta name="robots" content="follow"><meta name="rating" content="general"><meta 

name="generator" content="PHPEditor 2.2 Beta">
<TITLE>NerdDownloads ® - Todos os direitos reservados</TITLE><HEAD>

</HEAD><BODY Scroll="no">
Repare que a página não tem barras de rolagem >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
</BODY></HTML>

Barra de rolagem muda de cor ao chegar o mouse perto (só funciona neste caso com DOCTYPE 2.0):

 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 2.0//PT">
<!-- Script funciona só no IE 5.5 - IE 6.0 ou mais recente -->
<HTML><meta name="author" content="Daniel Nerd (§ÜP®ËM3)"><meta http-equiv="content-language" content="pt-br, en-US"><meta name="copyright" content="NerdDownloads ® 2003-2008"><meta name="description" content="Página repleta de novidades sempre."><meta name="keywords" content="nerd, nerddownloads, nerd downloads, downloads, windows, textos, dicas, informática, hack, crac, hacking, cracking, orkut, google, busca, buscas"><meta name="robots" content="follow"><meta name="rating" content="general"><meta name="generator" content="PHPEditor 2.2 Beta">
<TITLE>NerdDownloads ® - Todos os direitos reservados</TITLE><HEAD>
</HEAD><BODY>
<script>
function scrollBar(line,face,theme)
{
if (!line||!face)
{
line=null;face=null;switch(theme)
{
case "blue":
var line="#78AAFF";
var face="#EBF5FF";break;
case "orange":
var line="#FBBB37";
var face="#FFF9DF";break;
case "red":
var line="#FF7979";
var face="#FFE3DD";break;
case "green":
var line="#00C600";
var face="#D1EED0";break;
case "neo":
var line="#BC7E41";
var face="#EFE0D1";break;
}}
with(document.body.style)
{
scrollbarDarkShadowColor=line;
scrollbar3dLightColor=line;
scrollbarArrowColor="black";
scrollbarBaseColor=face;
scrollbarFaceColor=face;
scrollbarHighlightColor=face;
scrollbarShadowColor=face;
scrollbarTrackColor="#F3F3F3";
}}
function colorBar(){
var w = document.body.clientWidth;var h = document.body.clientHeight;var x = event.clientX;var y = event.clientY;
if(x>w||y-3>h) scrollBar('#000080','#BFDFFF'); // Your colors
else scrollBar(null,null,"neo"); // A predefined theme
}
if (document.all){
scrollBar(null,null,"neo");document.onmousemove=colorBar;
}
function offscreen(){
scrollBar(null,null,"neo");}
document.onmouseout=offscreen;
</script>

<BR><BR><BR><BR>
Veja a barra de rolagem quando aproxima o mouse ela muda de cor, show show !!!<BR><BR><BR>
<BR>
<textarea rows="5" cols="25">Veja o textarea muda de cor quando chega o mouse perto da rolagem do site a direita >>



</textarea>
<BR><BR><BR><BR>
</BODY></HTML>

Compartilhar este post

Link para o post
Compartilhar em outros sites

Thiago Retondar    18

Thiago Retondar
Postado

Eu, particularmente, prefiro a scrollbar do navegador. Mas há casos e casos. Tu tem que analisar o seu layout, se é preciso fazer.

 

Como disse, normalmente, uso do browser. Mas se quiser criar uma, pode utilizar overflow-y: scroll.

 

@§ÜP®ËM3 (Daniel/Nerd)

 

não acho legal trocar o local das scrollbars...

 

E para trocar cor da scrollbar, tem que usar JavaScript para todos navegadores, e para Internet Explorer pode se usar esse código proprietário da Microsoft.

 

http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Desenvolvimento frontend
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito