Ir para conteúdo

POWERED BY:

Arquivado

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

Isabel

Posicionamento de Scroll

Por , em Desenvolvimento frontend

Recommended Posts

Isabel    0

Isabel
Postado

Oi! ..

to fazendo um layout de home soh que estou com o seguinte problema, eu to colocando uma barra de scroll no conteúdo pra que a pessoa ao entrar bo site veja as informações ao meio de site eh com uma scroll caso ele for extenso...

 

tah aqui o código que eu to usando ..

desculpa colocar tudo .. tah grande eh talz.. mais eu queria saber uq eu to fazendo de errado..

pq eu naum consigo posicionar o meu scroll.. <_<

se alguem puder ajudar.. vlw! http://forum.imasters.com.br/public/style_emoticons/default/grin.gif

 

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>

  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>:: MDnet Soluções em Tecnologia -
Home ::</title>

  <style>
div {
width:300px;
height:100px;
overflow: auto;

}

charset=iso-8859-1">

</style>

  <style>
DIV.imagem1 {
position: relative;
top: 0px;
left: 0px;
margin-left:0px;
margin-top:0px;
}
DIV.imagem2 {
position: relative;
top: 380px;
left:0px;
margin-left:0px;
margin-top:-40px;
}
body { margin: 0px;
position: relative;
padding: 0px;
font-family:Arial, Helvetica, sans-serif;
color:#000000;
}
#container { border: solid 1px #a2b1b8; margin: 0 auto;
position: absolute;
right: 235;
top: 0px;

width: 770px;
height: 550px;

}
#topo { width: auto;
height: 150px;
background: #000000;
}
#esquerda { height: 300px;
float: left;
width: 160px;
padding: 0px;
background: #80b5d3;
margin-top: 10px;
}
#esquerda li{ list-style: none; padding: 1px 1px;
display:block;
background: #80b5d3; margin-left: 0px;
}
#esquerda li:hover{ list-style: none;
display:block;
background: #EAEAEA;
margin-left: 0px;
text-decoration:underline;
}
#esquerda ul{ list-style: none;
padding-left: 0px;
padding-top: 10px;
margin-left: 0px;
}
#direita { height: 300px; width: 160px;
float: right;
background: #80b5d7;
margin-top: 10px;
}
#conteudo { margin: 10px 170px;
height: 300px;
background:#cee0ea;
}

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
<!--
ul#menu {
list-style: none;
background: #f1f1f1;
margin: 0;
padding: 0;
width: 170px;
border-top: 0px solid #f7f7f7;
}
ul#menu li {
border-bottom: 0px solid #f9f9f9;
}
ul#menu li a {
width: 167px;
height: 18px;
display: block;
padding-top: 2px;
padding-left: 3px;
text-decoration: none;
color: #000;
font: 12px Verdana;
font-weight:bold
}
ul#menu li a:hover {
background: #E1E8F8;
color: #085d94;
width: 150px;
}
-->
  </style>

<!--[if IE]>
<style type="text/css">
ul#menu li a, ul#menu li a:hover{
width: 170px;
}
</style>
<![endif]-->
</head>
<body>

<div id="container">
<div class="imagem1"><img style="width: 770px; height: 145px;" src="banner.jpg"></div>

<div class="imagem2">
<img style="width: 770px; height: 63px;" src="rodape.jpg">
</div>

<div id="esquerda">
<ul id="menu">

  <li><a href="#">Empresa</a></li>

  <li><a href="#">Serviços</a></li>

  <li><a href="#">Download</a></li>

  <li><a href="#">Contato</a></li>

  <li><a href="#">Suporte on-line !</a></li>

</ul>

</div>

<div id="direita"></div>

<div id="conteudo"></div>

</div>

</body>
</html>

Compartilhar este post

Link para o post
Compartilhar em outros sites

brcontainer    16

brcontainer
Postado

por que você está usando STYLE mais de tres vezes

poderia por tudo dentro de uma só

 

observe isso:

}

charset=iso-8859-1">

</style>

tem um pedaço de uma tag HTML dentro do seu CSS

faça as alterações necessarias e volte a postar ok

;)

Compartilhar este post

Link para o post
Compartilhar em outros sites

Isabel    0

Isabel
Postado

hmm! tirei a tag de html..

retirei os styles a mais.. eh naum deu certo..

ou fiz algo errado =/

 

dá pra dar uma olhadinha pra mim!?

desculpa tah incomodando ^^

obrigadaa ! xD

 

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
  <title>:: MDnet Soluções em Tecnologia -
Home ::</title>

  <style type="text/css">
div {
width:300px;
height:100px;
overflow: auto;

}

charset=iso-8859-1">

DIV.imagem1 {
position: relative;
top: 0px;
left: 0px;
margin-left:0px;
margin-top:0px;
}
DIV.imagem2 {
position: relative;
top: 380px;
left:0px;
margin-left:0px;
margin-top:-40px;
}
body { margin: 0px;
position: relative;
padding: 0px;
font-family:Arial, Helvetica, sans-serif;
color:#000000;
}
#container { border: solid 1px #a2b1b8; margin: 0 auto;
position: absolute;
right: 235;
top: 0px;

width: 770px;
height: 550px;

}
#topo { width: auto;
height: 150px;
background: #000000;
}
#esquerda { height: 300px;
float: left;
width: 160px;
padding: 0px;
background: #80b5d3;
margin-top: 10px;
}
#esquerda li{ list-style: none; padding: 1px 1px;
display:block;
background: #80b5d3; margin-left: 0px;
}
#esquerda li:hover{ list-style: none;
display:block;
background: #EAEAEA;
margin-left: 0px;
text-decoration:underline;
}
#esquerda ul{ list-style: none;
padding-left: 0px;
padding-top: 10px;
margin-left: 0px;
}
#direita { height: 300px; width: 160px;
float: right;
background: #80b5d7;
margin-top: 10px;
}
#conteudo { margin: 10px 170px;
height: 300px;
background:#cee0ea;
}

<!--
ul#menu {
list-style: none;
background: #f1f1f1;
margin: 0;
padding: 0;
width: 170px;
border-top: 0px solid #f7f7f7;
}
ul#menu li {
border-bottom: 0px solid #f9f9f9;
}
ul#menu li a {
width: 167px;
height: 18px;
display: block;
padding-top: 2px;
padding-left: 3px;
text-decoration: none;
color: #000;
font: 12px Verdana;
font-weight:bold
}
ul#menu li a:hover {
background: #E1E8F8;
color: #085d94;
width: 150px;
}
-->

<!--[if IE]>
<style type="text/css">
ul#menu li a, ul#menu li a:hover{
width: 170px;
}

</style>
<![endif]-->
</head>
<body>

<div id="container">
<div class="imagem1"><img style="width: 770px; height: 145px;" src="banner.jpg"></div>

<div class="imagem2">
<img style="width: 770px; height: 63px;" src="rodape.jpg">
</div>

<div id="esquerda">
<ul id="menu">

  <li><a href="#">Empresa</a></li>

  <li><a href="#">Serviços</a></li>

  <li><a href="#">Download</a></li>

  <li><a href="#">Contato</a></li>

  <li><a href="#">Suporte on-line !</a></li>

</ul>

</div>

<div id="direita"></div>

<div id="conteudo"></div>

</div>

</body>
</html>

Compartilhar este post

Link para o post
Compartilhar em outros sites

brcontainer    16

brcontainer
Postado

você poz isso no CONTAINER, acho melhor que ao invez de se usar position:;

position: absolute;
right: 235;
top: 0px;

para estruturar você de uma olhada no

Laboratório de Scripts (WS)

 

vai ajudar bastante a você entender como estruturar

abraço ;)

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