Foros del Web » Creando para Internet » HTML »

como hacer en html esto

 Estas en el tema de como hacer en html esto en el foro de HTML en Foros del Web. hola... tengo una web y la pagina principal esta un poco desordenada lorarito.com y entonces me gustaria hacer un rotulado de noticias como en yahooenespanol.com ...
  #1 (permalink)  
Antiguo 28/02/2009, 09:39
Avatar de ramseshatem  
Fecha de Ingreso: febrero-2009
Mensajes: 14
Antigüedad: 15 años, 2 meses
Puntos: 0
Pregunta como hacer en html esto
hola... tengo una web y la pagina principal esta un poco desordenada lorarito.com y entonces me gustaria hacer un rotulado de noticias como en yahooenespanol.com tal vez de otro color pero asi, que se mueva solo, que cuando pares el mause sobre el link salga la informacion
si aun no se ubican... tengo una imagen de lo que quiero img23.imageshack.us/my.php?image=captureu.jpg

ya lo ven en yahooenespanol.com se encuentra facilmente


espero que puedan ayudarme, hasta luego
no pongo la imagen para que la vean por motivos "anti-spam"
  #2 (permalink)  
Antiguo 01/03/2009, 05:21
Avatar de Raulmmmm  
Fecha de Ingreso: marzo-2007
Ubicación: En otro lugar que tú
Mensajes: 1.549
Antigüedad: 17 años, 1 mes
Puntos: 36
Respuesta: como hacer en html esto
Primero decir que sólo con HTML no se puede hacer esto. Este tipo de efectos se hacen con Javascript. Además, para darle estilo, se usa CSS.

Yo sé hacer esto con un framework llamado jQuery, y es mucho código, por lo tanto lo he puesto primero en mi web para ver si es lo que buscas.
  #3 (permalink)  
Antiguo 01/03/2009, 20:05
Avatar de ramseshatem  
Fecha de Ingreso: febrero-2009
Mensajes: 14
Antigüedad: 15 años, 2 meses
Puntos: 0
Respuesta: como hacer en html esto
es justo lo que quiero... a diferencia que me gustaria que los titulos esten a un lado, y que sean mas grandes los cuadros y el cuadro en general pero eso lo puedo arreglar yo con dreamewere supongo... me encanta gracias por tu ayuda
  #4 (permalink)  
Antiguo 02/03/2009, 07:02
Avatar de Raulmmmm  
Fecha de Ingreso: marzo-2007
Ubicación: En otro lugar que tú
Mensajes: 1.549
Antigüedad: 17 años, 1 mes
Puntos: 36
Respuesta: como hacer en html esto
OK, pues si ya sabes cambiar de sitio los botones, me ahorro explicación. De todas maneras, si no te sale, te puedo ayudar.

Bien, para tener eso en tu web, te bajas este archivo (es el jQuery) a la carpeta de tu web, y luego, en modo código, pones entre <head> y </head> esto:
Código HTML:
<style type="text/css">
body {
	background:#657077;
	margin:40px;
}

#tabbed_box_1 {
	margin: 0px auto 0px auto;
	width:300px;
}
.tabbed_box h4 {
	font-family:Arial, Helvetica, sans-serif;
	font-size:23px;
	color:#ffffff;
	letter-spacing:-1px;
	margin-bottom:10px;
}
.tabbed_box h4 small {
	color:#e3e9ec;
	font-weight:normal;
	font-size:9px;
	font-family:Verdana, Arial, Helvetica, sans-serif;
	text-transform:uppercase;
	position:relative;
	top:-4px;
	left:6px;
	letter-spacing:0px;
}
.tabbed_area {
	border:1px solid #494e52;
	background-color:#636d76;
	padding:8px;	
}

ul.tabs {
	margin:0px; padding:0px;
	margin-top:5px;
	margin-bottom:6px;
}
ul.tabs li {
	list-style:none;
	display:inline;
}
ul.tabs li a {
	background-color:#464c54;
	color:#ffebb5;
	padding:8px 14px 8px 14px;
	text-decoration:none;
	font-size:9px;
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-weight:bold;
	text-transform:uppercase;
	border:1px solid #464c54;
}
ul.tabs li a:hover {
	background-color:#2f343a;
	border-color:#2f343a;
}
ul.tabs li a.active {
	background-color:#ffffff;
	color:#282e32;
	border:1px solid #464c54; 
	border-bottom: 1px solid #ffffff;
}
.content {
	background-color:#ffffff;
	padding:10px;
	border:1px solid #464c54; 	
	font-family:Arial, Helvetica, sans-serif;
}
#content_2, #content_3 { display:none; }

.content ul {
	margin:0px;
	padding:0px 20px 0px 20px;
}
.content ul li {
	list-style:none;
	border-bottom:1px solid #d6dde0;
	padding-top:15px;
	padding-bottom:15px;
	font-size:13px;
}
.content ul li:last-child {
	border-bottom:none;
}
.content ul li a {
	text-decoration:none;
	color:#3e4346;
}
.content ul li a small {
	color:#8b959c;
	font-size:9px;
	text-transform:uppercase;
	font-family:Verdana, Arial, Helvetica, sans-serif;
	position:relative;
	left:4px;
	top:0px;
}
.content ul li a:hover {
	color:#a59c83;
}
.content ul li a:hover small {
	color:#baae8e;
}
</style>
    <script src="jquery.js"></script>
    <script>
	
	  // When the document loads do everything inside here ...
	  $(document).ready(function(){
		
		// When a link is clicked
		$("a.tab").hover(function () {
			
			
			// switch all tabs off
			$(".active").removeClass("active");
			
			// switch this tab on
			$(this).addClass("active");
			
			// slide all content up
			$(".content").hide();
			
			// slide this content up
			var content_show = $(this).attr("title");
			$("#"+content_show).fadeIn('slow');
		  
		});
	
	  });
  </script>
Y donde quieras que salga "eso" pones este código:
Código HTML:
<div id="tabbed_box_1" class="tabbed_box">
	<h4>Browse Site <small>Select a Tab</small></h4>
    <div class="tabbed_area">
    
    	
        <ul class="tabs">
            <li><a href="#" title="content_1" class="tab active">Topics</a></li>
            <li><a href="#" title="content_2" class="tab">Archives</a></li>

            <li><a href="#" title="content_3" class="tab">Pages</a></li>

        </ul>
        
        <div id="content_1" class="content">
        	<ul>
            	<li><a href="">HTML Techniques <small>4 Posts</small></a></li>
            	<li><a href="">CSS Styling <small>32 Posts</small></a></li>

            	<li><a href="">Flash Tutorials <small>2 Posts</small></a></li>

            	<li><a href="">Web Miscellanea <small>19 Posts</small></a></li>
            	<li><a href="">Site News <small>6 Posts</small></a></li>
            	<li><a href="">Web Development <small>8 Posts</small></a></li>

			</ul>
        </div>
        <div id="content_2" class="content">

        	<ul>
            	<li><a href="">December 2008 <small>6 Posts</small></a></li>
            	<li><a href="">November 2008 <small>4 Posts</small></a></li>

            	<li><a href="">October 2008 <small>22 Posts</small></a></li>
            	<li><a href="">September 2008 <small>12 Posts</small></a></li>

            	<li><a href="">August 2008 <small>3 Posts</small></a></li>
            	<li><a href="">July 2008 <small>1 Posts</small></a></li>

			</ul>
        </div>
        <div id="content_3" class="content">
        	<ul>
            	<li><a href="">Home</a></li>

            	<li><a href="">About</a></li>
            	<li><a href="">Contribute</a></li>

            	<li><a href="">Contact</a></li>
			</ul>
        </div>
    
    </div>

</div>
Dentro de <div id="content_1"> es donde tienes que cambiar el código para que salga el texto, imágenes... que tú quieras.

Un saludo .
  #5 (permalink)  
Antiguo 02/03/2009, 20:55
Avatar de ramseshatem  
Fecha de Ingreso: febrero-2009
Mensajes: 14
Antigüedad: 15 años, 2 meses
Puntos: 0
Respuesta: como hacer en html esto
gracias...

y como lograria que los cuadros con los titulos estuvieran a un lado... ya lo intente y no lo pude hacer
  #6 (permalink)  
Antiguo 03/03/2009, 06:28
Avatar de danistrein  
Fecha de Ingreso: septiembre-2008
Ubicación: Salta Capital
Mensajes: 550
Antigüedad: 15 años, 7 meses
Puntos: 9
Respuesta: como hacer en html esto
jeje muchas gracias xD yo andaba buscando tambien como hacer eso


ramseshatem eso lo puedes hacer con tablas y creo que tambien con css :D
  #7 (permalink)  
Antiguo 03/03/2009, 06:55
Avatar de Raulmmmm  
Fecha de Ingreso: marzo-2007
Ubicación: En otro lugar que tú
Mensajes: 1.549
Antigüedad: 17 años, 1 mes
Puntos: 36
Respuesta: como hacer en html esto
Sí, con CSS se puede poner los enlaces a la derecha. Te aconsejo que te leas este tutorial para aprender a usarlo.

Y el código quedaría así:
Entre <head> y </head>:
Código HTML:
<style type="text/css">
body {
	background:#657077;
	margin:40px;
}

#tabbed_box_1 {
	margin: 0px auto 0px auto;
	width:300px;
}
.tabbed_box h4 {
	font-family:Arial, Helvetica, sans-serif;
	font-size:23px;
	color:#ffffff;
	letter-spacing:-1px;
	margin-bottom:10px;
}
.tabbed_box h4 small {
	color:#e3e9ec;
	font-weight:normal;
	font-size:9px;
	font-family:Verdana, Arial, Helvetica, sans-serif;
	text-transform:uppercase;
	position:relative;
	top:-4px;
	left:6px;
	letter-spacing:0px;
}
.tabbed_area {
	border:1px solid #494e52;
	background-color:#636d76;
	padding:8px;	
}

ul.tabs {
	margin:0px; padding:0px;
	margin-top:5px;
	margin-bottom:6px;
	float: left;
	width: 40px;
}
ul.tabs li {
	list-style:none;
}
ul.tabs li a {
	width: 100%;
	height: 100%;
	background-color:#464c54;
	color:#ffebb5;
	text-decoration:none;
	font-size:9px;
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-weight:bold;
	text-transform:uppercase;
	border:1px solid #464c54;
}
ul.tabs li a:hover {
	background-color:#2f343a;
	border-color:#2f343a;
}
ul.tabs li a.active {
	background-color:#ffffff;
	color:#282e32;
	border:1px solid #464c54; 
	border-bottom: 1px solid #ffffff;
}
.content {
	background-color:#ffffff;
	padding:10px;
	border:1px solid #464c54; 	
	font-family:Arial, Helvetica, sans-serif;
}
#content_2, #content_3 { display:none; }

#content_1, #content_2, #content_3 { float: left; width: 200px; }
</style>
    <script src="jquery.js"></script>
    <script>
	
	  // When the document loads do everything inside here ...
	  $(document).ready(function(){
		
		// When a link is clicked
		$("a.tab").hover(function () {
			
			
			// switch all tabs off
			$(".active").removeClass("active");
			
			// switch this tab on
			$(this).addClass("active");
			
			// slide all content up
			$(".content").hide();
			
			// slide this content up
			var content_show = $(this).attr("title");
			$("#"+content_show).fadeIn('slow');
		  
		});
	
	  });
  </script>
Donde quieres que salga "eso":
Código HTML:
<div id="tabbed_box_1" class="tabbed_box">
	<h4>Browse Site <small>Select a Tab</small></h4>
    <div class="tabbed_area">
    
    	

        
        <div id="content_1" class="content">
        	<ul>
            	<li><a href="">HTML Techniques <small>4 Posts</small></a></li>
            	<li><a href="">CSS Styling <small>32 Posts</small></a></li>
            	<li><a href="">Flash Tutorials <small>2 Posts</small></a></li>

            	<li><a href="">Web Miscellanea <small>19 Posts</small></a></li>
            	<li><a href="">Site News <small>6 Posts</small></a></li>
            	<li><a href="">Web Development <small>8 Posts</small></a></li>
			</ul>
        </div>
        <div id="content_2" class="content">

        	<ul>
            	<li><a href="">December 2008 <small>6 Posts</small></a></li>
            	<li><a href="">November 2008 <small>4 Posts</small></a></li>
            	<li><a href="">October 2008 <small>22 Posts</small></a></li>
            	<li><a href="">September 2008 <small>12 Posts</small></a></li>

            	<li><a href="">August 2008 <small>3 Posts</small></a></li>
            	<li><a href="">July 2008 <small>1 Posts</small></a></li>
			</ul>
        </div>
        <div id="content_3" class="content">
        	<ul>
            	<li><a href="">Home</a></li>

            	<li><a href="">About</a></li>
            	<li><a href="">Contribute</a></li>
            	<li><a href="">Contact</a></li>
			</ul>
        </div>
            <ul class="tabs">
            <li><a href="#" title="content_1" class="tab active">Topics</a></li>
            <li><a href="#" title="content_2" class="tab">Archives</a></li>
            <li><a href="#" title="content_3" class="tab">Pages</a></li>

        </ul>
<div style="clear: both"></div>
    </div>

</div>
Recuerda que si quieres cambiar cualquier color o estilo puedes hacerlo con CSS.
  #8 (permalink)  
Antiguo 03/03/2009, 09:09
Avatar de SirDuque  
Fecha de Ingreso: febrero-2009
Ubicación: Paso del Rey, Buenos Aires, Argentina
Mensajes: 975
Antigüedad: 15 años, 2 meses
Puntos: 89
Respuesta: como hacer en html esto
Cita:
Iniciado por Raulmmmm Ver Mensaje
Primero decir que sólo con HTML no se puede hacer esto. Este tipo de efectos se hacen con Javascript. Además, para darle estilo, se usa CSS

Yo sé hacer esto con un framework llamado jQuery, y es mucho código, por lo tanto lo he puesto primero en xxxx para ver si es lo que buscas.
Queridicimo amigo, tu diseño es obsoleto en FireFox, Te recomiendo que revices el lenguaje, :P
  #9 (permalink)  
Antiguo 03/03/2009, 17:11
Avatar de ramseshatem  
Fecha de Ingreso: febrero-2009
Mensajes: 14
Antigüedad: 15 años, 2 meses
Puntos: 0
Respuesta: como hacer en html esto
gracias por todo amigo, y YO MISMO probe el codigo en firefox 3 y funciona correctamente
  #10 (permalink)  
Antiguo 03/03/2009, 17:31
Avatar de Mikmoro
Colaborador
  
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 17 años, 6 meses
Puntos: 280
Respuesta: como hacer en html esto
Cita:
Iniciado por SirDuque Ver Mensaje
Queridicimo amigo, tu diseño es obsoleto en FireFox, Te recomiendo que revices el lenguaje, :P
Qué habrá querido decir ...
__________________
Visita mi nueva web idplus.org
  #11 (permalink)  
Antiguo 03/03/2009, 17:58
Avatar de jomaruro
Colaborador
  
Fecha de Ingreso: junio-2002
Ubicación: Naboo
Mensajes: 5.442
Antigüedad: 21 años, 9 meses
Puntos: 361
Respuesta: como hacer en html esto
Cita:
Iniciado por Mikmoro Ver Mensaje
Qué habrá querido decir ...
¿Que lo ha hecho con el Spectrum?
  #12 (permalink)  
Antiguo 04/03/2009, 06:59
Avatar de Raulmmmm  
Fecha de Ingreso: marzo-2007
Ubicación: En otro lugar que tú
Mensajes: 1.549
Antigüedad: 17 años, 1 mes
Puntos: 36
Respuesta: como hacer en html esto
Cita:
Iniciado por Mikmoro Ver Mensaje
Qué habrá querido decir ...
Lo mismo pensé cuando lo leí.
  #13 (permalink)  
Antiguo 04/03/2009, 18:14
Avatar de ramseshatem  
Fecha de Ingreso: febrero-2009
Mensajes: 14
Antigüedad: 15 años, 2 meses
Puntos: 0
Exclamación Respuesta: como hacer en html esto
me ocurrio algo... no se si sea una estupides o que... pero no se por que... quise añadirle una opcion mas al codigo por que habian 3 y quiero añadir varias modifique el codigo pero quedo muy feo... se ve como si tuviera un error... no se que pude hacer mal
aqui esta el codigo

lorarito.com/otros/codigo.txt

no pongo el codigo directo por "razones antispam"

por favor si puedes revisar y arreglar el codigo para que no salga asi y de paso enseñarme como hacer si quiero incertarle luevos "content"... asi se ve en la web lorarito.com/otros/Untitled-1.html

repito otra vez... no pongo enlace directo por "razones antispam"
  #14 (permalink)  
Antiguo 04/03/2009, 18:21
Avatar de ramseshatem  
Fecha de Ingreso: febrero-2009
Mensajes: 14
Antigüedad: 15 años, 2 meses
Puntos: 0
Respuesta: como hacer en html esto
no ya no importa... lei detenidamente el codigo y aye el problem... pero ahora mi problema es otro xD si soy fastidioso xD bueno ahora mi problem es que cuando pongo asentos y Ñ y cosas que no se utilizan en el ingles se ve feo... no hay forma de remediar esto?...
  #15 (permalink)  
Antiguo 04/03/2009, 18:38
Avatar de jomaruro
Colaborador
  
Fecha de Ingreso: junio-2002
Ubicación: Naboo
Mensajes: 5.442
Antigüedad: 21 años, 9 meses
Puntos: 361
Respuesta: como hacer en html esto
Hola:

Tienes que incluir en el head del html una de estas opciones:

Juego de caracteres internacional:

Código HTML:
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
o juego de caracteres en castellano:

Código HTML:
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
Saludos.
  #16 (permalink)  
Antiguo 04/03/2009, 22:41
Avatar de ramseshatem  
Fecha de Ingreso: febrero-2009
Mensajes: 14
Antigüedad: 15 años, 2 meses
Puntos: 0
Respuesta: como hacer en html esto
mil gracias amigos... espero que con lo de "En tus manos está el poder de evitar que mis ojos sangren:
Por favor, cuida tus expresiones y ortografía." no sea conmigo xD...

ya lo hice y quedo bien... lo he publicado en la portada de mi web lorarito.com solo le noto un defecto... cuando lo muevo muy rapido como que produce error :(
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta


« Tema Anterior | Próximo Tema »


La zona horaria es GMT -6. Ahora son las 21:58.