como poner barra de desplazamiento a mi pagina web

gabrielcorr4 · #1 (**permalink**) 30/11/2011, 14:10

Hola, quisiera poner las barras de desplazamiento correspondientes a mi pagina web vertical y horizontal pero no me salen poniendo auto al overflow , si pongo scroll al overflow salen pero casi ni se mueven y tengo bastante contenido, o por favor si alguien sabe hacerlo en dreamweaver cs5, llevo 2 dias viendo esto y nada.

mi codigo:

Código 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" lang="es-es"> 
<head> 

<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE8" />

<title>MENUS </title> 
  <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> 
<link rel="stylesheet" href="css/menu.css" type="text/css" /> 
 <link rel="shortcut icon" href="favicon.ico" >
 
 <style type="text/css">
 
   body {overflow-x:auto; overflow-y:auto;}
	 
</style>


 
  
 
 <style type = "text/css">
 
.back{
background-image:url('');
background-repeat:no-repeat;
background-color:#99cccc;}	
<!--estas 3 lineas  de codigo es para que se vea cuadrada la lista desplegable en IE7-->
*{ margin:0; padding:0}
 #menu > li{ position:relative;}
 #menu > li > ul{ left:0;}
 
 #menu{padding-left:0px; margin-top:120px;	}
#menu li{list-style:none; float:left;}
#menu li a{display:block; width:100px;height:20px; background-color:#FF0000;border:1px solid; padding:2px;text-decoration:none;
text-align:center; color:#000;font-family:arial; font-size:15px;font-weight:bold;}
#menu li a:hover{background:navy;border-color:transparent;color:#FF1493;}
#menu li ul{display:none; position:absolute;}
#menu li ul li {display:block;float:none; position:relative; padding:0px}
#menu li:hover ul{display:block; padding-left:0px;}
 
#contenedorr3 {
	border-radius:6px;
	-moz-border-radius:6px; /* Firefox */
	-webkit-border-radius:6px; /* Safari y Chrome */
	/* Otros estilos */
border:1px solid #333;
	width:92%;
	border: 1px solid #FF00FF;
	background-color: #36F;
	top: 147px;
	height: 50px;
	padding: 14.4px;
	float: none;
	clear: none;
	position: static;
	left: 11px;
	text-align: left;
	font-size: 16px;
	font-family: "Arial Black", Gadget, sans-serif;
	background-position: left;
}

body {
	margin-left: 12px;
	margin-top: 80px;
}
 body,td,th {
	font-size: 18px;
	color: #C09;
}
 .LO {font-family: 'Lucida Sans Unicode', 'Lucida Grande', sans-serif}
 .hfhfghfghf {
	color: #6F0;
	font-family: "Arial Black", Gadget, sans-serif;
}
 </style>
 
 <script>
function maximo(campo,limite){
if(campo.value.length>=limite){
campo.value=campo.value.substring(0,limite);
 }
}
</script>



</head> 

<body bgcolor="#000080" topmargin="100">

<SPAN style="position: absolute; top: 12px; left: 25px; width: 120px; height: 49px"><img src="lovemoon.png" width="228" height="50" />
</SPAN>

<SPAN style="position: absolute; top: 16px; left: 279px; width: 539px; height: 95px"><img src="luna romantica.jpg" width="700" height="91"  /></SPAN>

<p><SPAN STYLE="position:absolute; top:22px; left:723px; font-family: 'Lucida Sans Unicode', 'Lucida Grande', sans-serif; width: 62px; color: #FFF;" > 
  
  Hola 
  
  <?php
	echo   $_COOKIE['usuario1'];
	?>
  
  
  </SPAN>
  
  <SPAN STYLE="position:absolute; top:75px; left:20px; font-family: 'Lucida Sans Unicode', 'Lucida Grande', sans-serif; width: 242px; color: #FF00FF; font-size: 12px; font-style: italic;" > 
    
    
    Si Amas algo d&eacute;jalo libre, si regresa es porque es tuyo, sino...nunca lo fue.     
    
  </SPAN> 
  
  
  
  
  
  <SPAN STYLE="position:absolute; top:580px; left:974px; color: #FFF;" > 
    
  <a href="salir.html"><img src="salir.png" alt="" width="36" height="20" /></a>  
    
  </SPAN>
  
  <SPAN STYLE="position:absolute; top:579px; left:934px; font-family: 'Lucida Sans Unicode', 'Lucida Grande', sans-serif; width: 42px; color: #FF8C00;" > 
    
    salir
    
  </SPAN>
  
<ul id="menu">

<li><a class="back" href="menus.php">Inicio</a></li>
<li><a class="back" href="mensajes.html">Mensajes</a></li>     
<li><a class="back" href="enlinea.html"> En Linea</a></li>
<li><a class="back" href="busqueda.html">Busqueda</a></li>
<li><a class="back" href="coincidencias.html">Coincidencias</a></li>
<li><a class="back" href="visitantes.html">Visitantes</a></li>
<li><a class="back" href="menus.php">Mi Perfil</a>
<ul> 
<li><a href="editarperfil.php">Editar Perfil</a></li>
<li><a href="fotos.php">Subir Fotos</a></li>
</ul></li>
<li><a class="back" href="chat.html"> CHAT</a></li>
<li><a class="back" href="cuenta_gold.php">Cuenta Gold</a></li>

</SPAN>

<div id="contenedorr3">
<p>La Membresia de Lovemoon es gratuita, pero la Membresia GOLD te ofrece mucho m&aacute;s:            </p>
</div>

<p><SPAN style="position: absolute; top: 152px; left: 810px; width: 129px; height:34px"><a href="cuenta_gold.php"><img src="act_ahora.jpg" width="127" height="32" /></a>
  </SPAN>
  
<DIV STYLE="position:absolute; top:210px; left:10px; width:385px; background-color:midnightblue; height:30px; border:1px solid #333;-webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px; ">
  
  <SPAN STYLE="position:absolute; top:13px; left:19px; font-family: 'Lucida Sans Unicode', 'Lucida Grande', sans-serif; width: 297px; color: white; font-size: 12px; font-style: italic;" > 
    
    
  VER MENSAJES ()    
    
</SPAN> 
  
  <DIV STYLE="position:absolute; top:30px; left:1px; width:385px; background-color:#36F; height:100px;">
  
  <DIV STYLE="position:absolute; top:110px; left:0px; width:385px; background-color:midnightblue; height:30px; border:1px solid #333; -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;">
  
  <SPAN STYLE="position:absolute; top:13px; left:19px; font-family: 'Lucida Sans Unicode', 'Lucida Grande', sans-serif; width: 297px; color: white; font-size: 12px; font-style: italic;" > 
    
    
  FAVORITOS ()    
    
</SPAN> 
  
  <DIV STYLE="position:absolute; top:30px; left:1px; width:385px; background-color:#36F; height:100px;">
  
  
  <DIV STYLE="position:absolute; top:-175px; left:420px; width:470px; background-color:midnightblue; height:30px; border:1px solid #333;-webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px; ">
  
  <SPAN class="formatocolor1" STYLE="position:absolute; top:8px; left:10px; font-family: Georgia, 'Times New Roman', Times, serif; width: 287px; font-size: 14px; font-style: italic; color: #99ff77;" > 
    
    
    
  <a href="recuperar.php" class="hfhfghfghf">BLOG DE LOVEMOON </a></SPAN> 
  
  
<textarea name="text" style="position:absolute; top:35px; left:3px; background-color:#dd00cc; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px;"
cols="56" rows="6"  border:1px solid #333  wrap="hard" onMouseover="this.style.backgroundColor='#ffdd33';" onMouseout="this.style.backgroundColor='#dd00cc';"  onKeyDown="maximo(this,255);" onKeyUp="maximo(this,255);"  readonly=”yes”>hola </textarea>
  </span>
  
  
  <DIV STYLE="position:absolute; top:170px; left:1px; width:476px; background-color:#36F; height:100px;">
  
  <DIV STYLE="position:fixed; top:500px; left:12px; width:900px; background-color:#36F; height:100px;">
  
<SPAN style="position: absolute; top: 168px; left: 44px; width: 137px; height: 49px">

encuentranos en: <img src="facebook.gif" width="25" height="24" /><img src="twitter.jpeg" width="25" height="24" />
<img src="youtube.jpeg" width="25" height="24" />
</SPAN>
</body> 
</html>

emprear · #2 (**permalink**) 30/11/2011, 14:38

Tu html está plagado de errores, antes de hacer cualquier análisis deberías corregir eso

Saludos

gabrielcorr4 · #3 (**permalink**) 30/11/2011, 16:04

ya sabia que iba a decir eso.

emprear · #4 (**permalink**) 30/11/2011, 16:36

y sí, digo eso porque es lo que se vé, ni más ni menos

Código HTML:

Ver originalResult: 56 errors / 0 warnings
 
line 11 column 47 - Error: end tag for "link" omitted, but OMITTAG NO was specified
line 11 column 1 - Info: start tag was here
line 87 column 8 - Error: required attribute "type" not specified
line 99 column 34 - Error: there is no attribute "topmargin"
line 101 column 12 - Error: there is no attribute "style"
line 101 column 83 - Error: element "SPAN" undefined
line 101 column 133 - Error: required attribute "alt" not specified
line 104 column 84 - Error: element "SPAN" undefined
line 104 column 141 - Error: required attribute "alt" not specified
line 106 column 15 - Error: there is no attribute "STYLE"
line 106 column 149 - Error: element "SPAN" undefined
line 117 column 188 - Error: element "SPAN" undefined
line 128 column 71 - Error: element "SPAN" undefined
line 134 column 152 - Error: element "SPAN" undefined
line 140 column 13 - Error: document type does not allow element "ul" here; missing one of "object", "applet", "map", "iframe", "button", "ins", "del" start-tag
line 156 column 6 - Error: end tag for element "SPAN" which is not open
line 158 column 22 - Error: document type does not allow element "div" here; assuming missing "li" start-tag
line 162 column 87 - Error: element "SPAN" undefined
line 162 column 164 - Error: required attribute "alt" not specified
line 165 column 11 - Error: there is no attribute "STYLE"
line 167 column 24 - Error: element "DIV" undefined
line 169 column 186 - Error: element "SPAN" undefined
line 176 column 103 - Error: element "DIV" undefined
line 180 column 23 - Error: element "DIV" undefined
line 182 column 186 - Error: element "SPAN" undefined
line 189 column 103 - Error: element "DIV" undefined
line 194 column 24 - Error: element "DIV" undefined
line 196 column 14 - Error: there is no attribute "class"
line 196 column 199 - Error: element "SPAN" undefined
line 204 column 31 - Error: "border:1px" is not a member of a group specified for any attribute
line 204 column 37 - Error: "solid" is not a member of a group specified for any attribute
line 204 column 48 - Error: there is no attribute "wrap"
line 204 column 67 - Error: there is no attribute "onMouseover"
line 204 column 118 - Error: there is no attribute "onMouseout"
line 204 column 169 - Error: there is no attribute "onKeyDown"
line 204 column 197 - Error: there is no attribute "onKeyUp"
line 204 column 227 - Error: an attribute value specification must be an attribute value literal unless SHORTTAG YES is specified
line 204 column 227 - Error: value of attribute "readonly" cannot be "â"; must be one of "readonly"
line 204 column 228 - Error: character "€" is not allowed in the value of attribute "readonly"
line 205 column 8 - Error: end tag for element "span" which is not open
line 208 column 104 - Error: element "DIV" undefined
line 210 column 102 - Error: element "DIV" undefined
line 212 column 84 - Error: element "SPAN" undefined
line 214 column 65 - Error: required attribute "alt" not specified
line 214 column 114 - Error: required attribute "alt" not specified
line 215 column 48 - Error: required attribute "alt" not specified
line 217 column 6 - Error: end tag for "DIV" omitted, but OMITTAG NO was specified
line 210 column 2 - Info: start tag was here
line 217 column 6 - Error: end tag for "DIV" omitted, but OMITTAG NO was specified
line 208 column 2 - Info: start tag was here
line 217 column 6 - Error: end tag for "DIV" omitted, but OMITTAG NO was specified
line 192 column 2 - Info: start tag was here
line 217 column 6 - Error: end tag for "DIV" omitted, but OMITTAG NO was specified
line 189 column 2 - Info: start tag was here
line 217 column 6 - Error: end tag for "DIV" omitted, but OMITTAG NO was specified
line 178 column 2 - Info: start tag was here
line 217 column 6 - Error: end tag for "DIV" omitted, but OMITTAG NO was specified
line 176 column 2 - Info: start tag was here
line 217 column 6 - Error: end tag for "DIV" omitted, but OMITTAG NO was specified
line 165 - Info: start tag was here
line 217 column 6 - Error: end tag for "p" omitted, but OMITTAG NO was specified
line 162 - Info: start tag was here
line 217 column 6 - Error: end tag for "li" omitted, but OMITTAG NO was specified
line 158 - Info: start tag was here
line 217 column 6 - Error: end tag for "ul" omitted, but OMITTAG NO was specified
line 140 - Info: start tag was here
line 217 column 6 - Error: end tag for "p" omitted, but OMITTAG NO was specified
line 106 - Info: start tag was here

Y algunos, decididamente graves

Saludos

Raziel_Ravenheart · #5 (**permalink**) 30/11/2011, 16:41

Uno de los errores grandes que tienes, es utilizar atributos como bgcolor:

Código HTML:

Ver original<body bgcolor="#000080" topmargin="100">

o style

Código HTML:

Ver original<SPAN style="position: absolute; top: 12px; left: 25px; width: 120px; height: 49px"><img src="lovemoon.png" width="228" height="50" />
</SPAN>

para esto ya existe css, por otro lado, ten cuidado con este tipo de declaraciones, si no las sabes utilizar bien o son un medio un poco engañoso para obligar al navegador hacer algo, difícilmente vas a lograr los resultados esperados

Código HTML:

Ver original<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE8" />

Debes saber que esta etiqueta solo funciona en IE8.

Y por otro lado:

Código CSS:

Ver originalbody {overflow-x:auto; overflow-y:auto;}

no necesitas utilizar un overflow-x o overflow-y, para cada eje, si utilizas auto, ya que el navegador se encarga
de presentar las barras de desplazamiento, si son necesarias en un eje con un simple:

Código CSS:

Ver originalbody {
 overflow: auto;
}

de todos modos, no veo necesario esto, ya que ese es el comportamiento normal del body, además
te recomendaría que para iniciar, vayas aprendiendo algo más de maquetación web, y como utilizar
debidamente propiedades como position, display, float, clear, padding, entre otras. Una recomendación
hecha por muchos e incluso por quienes desarrollan estos estándares es que no se escriba código directamente
en el body, si no que se diseñe un layout o disposición de elementos con divs, donde generalmente
va un wrapper o contenedor, el cual envuelve un header o encabezado, contenido y barras de navegación
y un footer o pie de página, algo así

Código HTML:

Ver original<html>
<head>
<!-- etiquetas que van en el head del documento -->
</head>
<body>
  <div id="contenedor">
 
    <div id="encabezado">
    </div>
 
    <div id="navegacion">
    </div>
    <div id="contenido" >
    </div>
 
    <div id="pie" >
    </div>
    
  </div>
</body>
</html>

Si aprendes un buen uso de las etiquetas html, y los atributos css, podrás realiza cualquier proyecto
y entender el comportamiento de cada elemento bajo ciertas circunstancias en cualquier navegador.

Se me olvidada, las propiedades overflow-x y overflow-y, no son estandard así que es posible
que algunos navegadores no las interpreten bien.

Exitos

Raziel_Ravenheart · #6 (**permalink**) 30/11/2011, 16:46

Emprear, donde sacaste eso, que página utilizaste?. la del w3c?

Se me olvidaba, también cuando tengas código php o código javascript rondando por ahí, trata de no ponerlo
dentro del body, busca otro modo de realizar esas acciones, ya que compromete la buena lectura del
documento, aunque sea solo para tí, con eso en ocasiones posteriores, no tendrás problema manteniendo
tus códigos, ya sea php, html, javascript o css.

Lee mucho sobre el correcto uso de selectores, así sea lo básico, para que con el tiempo vayas mejorando el diseño de layout (disposición o maquetación) en páginas web

Raziel_Ravenheart · #7 (**permalink**) 30/11/2011, 16:54

Cita:

Iniciado por Raziel_Ravenheart

Código HTML:

Ver original<SPAN style="position: absolute; top: 12px; left: 25px; width: 120px; height: 49px"><img src="lovemoon.png" width="228" height="50" />
</SPAN>

Además nunca jamás en la vida vuelvas a usar atributos como width o height dentro de etiquetas como img, debes entender que para algunas personas como emprear que llevan tanto tiempo en esto, eso los hace querer agarrar a golpes su cabeza contra el teclado, y van a luchar hasta el fín del mundo para que las personas al menos aprenda lo básico del buen uso de lenguajes de etiquetado, diseño o programación

Para mí es un poco más fácil lidiar con esto por que donde estudio, con mis compañeros a cada rato veo códigos infernales, casi iguales o peores que este... creeme los hay, así que trata de leer un poco más sobre el uso adecuado de atributos y cuales etiquetas son permitidas. Trata de leer sobre esto en los artículos sobre html bien formado y/o uso de css, en cualquier página como librosweb.es, cristalab y en las faq de este foro, cada sección tiene faq's:

FAQ CSS de foros web

Hasta la próxima

Raziel_Ravenheart · #8 (**permalink**) 30/11/2011, 16:58

Otro enlace a la sección de faqs nueva, pero hasta ahora están migrando

Sección nueva de faqs CSS

Aunque hay pocas cosas son muy interesantes

emprear · #9 (**permalink**) 30/11/2011, 17:27

Cita:

Iniciado por Raziel_Ravenheart

Emprear, donde sacaste eso, que página utilizaste?. la del w3c?

Se me olvidaba, también cuando tengas código php o código javascript rondando por ahí, trata de no ponerlo
dentro del body, busca otro modo de realizar esas acciones, ya que compromete la buena lectura del
documento, aunque sea solo para tí, con eso en ocasiones posteriores, no tendrás problema manteniendo
tus códigos, ya sea php, html, javascript o css.

Lee mucho sobre el correcto uso de selectores, así sea lo básico, para que con el tiempo vayas mejorando el diseño de layout (disposición o maquetación) en páginas web

no, del html validator en el firefox, en la w3c mostraba 3 errores más todavia

Raziel_Ravenheart · #10 (**permalink**) 30/11/2011, 21:57

Muchas gracias emprear.. lo revisaré en cuanto tenga tiempo...!
Más herramientas de firefox para mi colección!!!!

xlos_mas_pro · #11 (**permalink**) 30/11/2011, 22:23

si le quieres poner scroll es haci

Código CSS:

Ver originalscroll: scroll;

kseso? · #12 (**permalink**) 01/12/2011, 07:33

Sólo para evitar confusiones para futuros lectores de este hilo:

Cita:

Iniciado por Raziel_Ravenheart

Se me olvidaba, también cuando tengas código php o código javascript rondando por ahí, trata de no ponerlo dentro del body, busca otro modo de realizar esas acciones

EL código php deberá ir donde corresponda, la mayor parte será dentro del body.
Los js hace tiempo que se recomienda colocar la llamada a ellos justo antes del cierre del body.

Cita:

Iniciado por Raziel_Ravenheart

Además nunca jamás en la vida vuelvas a usar atributos como width o height dentro de etiquetas como img,

Pues lo ideal sería poder indicar las medidas de las imágenes. Entre otras, eso evitaría el redibujado (redimensionado) de la página a medida que el navegador vaya cargándolas.
Al leer los valores de las imágenes, el navegador reserva ese tamaño al leer la etiqueta img, con independencia del tiempo que tarde en descargarlas.

Cita:

Iniciado por xlos_mas_pro

si le quieres poner scroll es haci

Código CSS:

Ver originalscroll: scroll;

¿qué tipo de código es éste?
Css desde luego que no.
scroll es un valor de los varios posibles para la propiedad overflow. Pero no es una propiedad.

IsaBelM · #13 (**permalink**) 01/12/2011, 08:59

Cita:

Iniciado por Raziel_Ravenheart

Se me olvidaba, también cuando tengas código php o código javascript rondando por ahí, trata de no ponerlo dentro del body, busca otro modo de realizar esas acciones

tienes toda la razón. hace años se invocaba tal y como lo usuario lo está haciendo. después se pasó a esto otro y ya por último tenemos este método

con los dos últimos podemos evitarnos problemas de indefiniciones cuando queremos modificar el dom y el documento aún no está totalmente cargado.
también es cosa del pasado, llevar los scripts al final, justamente antes de la etiqueta </body>. aunque con ello evitemos el problema anteriormente mencionado

xlos_mas_pro · #14 (**permalink**) 01/12/2011, 14:42

U.U tienes razon me equivoque y no me debo haber dado cuenta lo lamento el valor real era como dicen

Cita:

overflow:scroll;