Retroceder RedUSERS Foros RedUSERS Internet Webmasters Problemas con CSS

Respuesta
post #1 (permalink) Antiguo 06-abr-2009, 14:52
Predeterminado Problemas con CSS
Que hay amigos del foro.
Pues vamos directo a mi duda.
Recién comencé a desarrollar un sitio web, algo sencillo; con HTML, CSS y Javascript. Quiero que tenga un buen menú mediante el cual el usuario pueda navegar fácilmente por el sitio.
Busqué con "San Google" y encontré esta solución: http://www.lwis.net/free-css-drop-do....vertical.html
Descargué el código (que viene en css y javascript), pero el problema es que no logro que el menú quede centrado, lo coloco en una tabla y me queda a la mitad de la misma, ya intenté modificando todo el código css pero nada, quiero que quede debajo del header.

Bueno creo esta algo enredado mi pregunta, ahora mismo no tengo el código para ser más específico....

O alguna otra solución para desarrollar un menú que se vea un poco profesional, encontré este otro sofware http://www.likno.com/, espero me puedan dar opiniones de él, que tan bueno es.
Hace tiempo desarrollé otro sitio, e intenté hacer un menú con otro sofware "libre", pero cada vez que colocabas el puntero del ratón encima del menú, salia un enlace al sitio promocional de este software, tuve que hacer un menú por mi cuenta pero no quedó tan bien, no quiero que pase lo mismo....

Muchas gracias por todo.

P.D. Ofrezco disculpas, me equivoqué de foro en el mensaje anterior, prometo para la próxima leer BIEN todos los tópicos.
Usuario Novato
Fecha de Ingreso: sep-08
Mensajes: 132
Gracias dadas: 0
Agradecido 0 veces en 0 Mensajes
venom_mau está desconectado
Responder Citando
post #2 (permalink) Antiguo 06-abr-2009, 16:00
Predeterminado Re: Problemas con CSS
sin ver el código es imposible poder ayudarte, ponelo o pasá la página donde se ve mal

mientras tanto te dejo un generador de menús en css gratis, muy fácil de usar

http://www.izzymenu.com/
__________________
pinicio.com.ar
Usuario Normal
Fecha de Ingreso: nov-03
Edad: 29
Mensajes: 271
Gracias dadas: 0
Agradecido 0 veces en 0 Mensajes
r_bradbury está desconectado
Responder Citando
post #3 (permalink) Antiguo 06-abr-2009, 21:18
Predeterminado Re: Problemas con CSS
con fireworks es bastante simple armar menus
__________________
-)
Usuario Avanzado
Fecha de Ingreso: may-07
Mensajes: 2,029
Gracias dadas: 0
Agradecido 0 veces en 0 Mensajes
konzerte está desconectado
Responder Citando
post #4 (permalink) Antiguo 07-abr-2009, 13:53
Predeterminado Re: Problemas con CSS
en realidad es algo básico armar un menú con css, o con algo de js si querés ponerle una animación loca, pero hay q tener ganas...
__________________
pinicio.com.ar
Usuario Normal
Fecha de Ingreso: nov-03
Edad: 29
Mensajes: 271
Gracias dadas: 0
Agradecido 0 veces en 0 Mensajes
r_bradbury está desconectado
Responder Citando
post #5 (permalink) Antiguo 07-abr-2009, 16:20
Predeterminado Re: Problemas con CSS
Que hay, pues si con fireworks es sencillo hacer menús desplegables, pero no he encontrado como agregalos a una página sin que pierda su estructura, este programa genera archivos png que luego puedes convertir a varios formatos como html, hago eso, pero luego como colocarlos en una página que tienes ya hecha, con tablas y demás componentes.

Bueno va el código espero no sea demasiado:
Código:
@charset "UTF-8";

/**
 * Vertical Left-to-Right Direction CSS Drop-Down Menu Component
 *
 * @file		dropdown.vertical.css
 * @package		Dropdown
 * @version		0.3
 * @type		Transitional
 * @requires	dropdown.css
 * @browsers	Windows: IE5+, Opera7+, Firefox1+
 *				Mac OS: Safari2+, Firefox2+
 *
 * @link		http://www.lwis.net/
 * @copyright	2006-2008 Live Web Institute. All Rights Reserved.           
 *
 */

@import "dropdown.css";

ul.dropdown-vertical {
 width: 200px;
}

ul.dropdown-vertical ul {
 top: 1px;
 left: 99%;
}

ul.dropdown-vertical li {
 float: none;
}
Ese es el primero ("dropdown.vertical.css"), según entendí genera una lista vertical primordial para el menú, este llama a otro "dropdown.css":

Código:
@charset "UTF-8";

/**
 * Horizontal CSS Drop-Down Menu Module
 *
 * @file		dropdown.css
 * @package		Dropdown
 * @version		0.7.1
 * @type		Transitional
 * @stacks		597-599
 * @browsers	Windows: IE6+, Opera7+, Firefox1+
 *				Mac OS: Safari2+, Firefox2+
 *
 * @link		http://www.lwis.net/
 * @copyright	2006-2008 Live Web Institute. All Rights Reserved.
 *
 */

ul.dropdown,
ul.dropdown li,
ul.dropdown ul {
 list-style: none;
 margin: 0;
 padding: 0;
}

ul.dropdown {
 position: relative;
 z-index: 597;
 float: left;
}

ul.dropdown li {
 float: left;
 line-height: 1.3em;
 vertical-align: middle;
 zoom: 1;
}

ul.dropdown li.hover,
ul.dropdown li:hover {
 position: relative;
 z-index: 599;
 cursor: default;
}

ul.dropdown ul {
 visibility: hidden;
 position: absolute;
 top: 100%;
 left: 0;
 z-index: 598;
 width: 100%;
}

ul.dropdown ul li {
 float: none;
}

ul.dropdown ul ul {
 top: 1px;
 left: 99%;
}

ul.dropdown li:hover > ul {
 visibility: visible;
}





ul.dropdown li.rtl ul {
 top: 100%;
 right: 0;
 left: auto;
}

ul.dropdown li.rtl ul ul {
 top: 1px;
 right: 99%;
 left: auto;
}
esos son los generadores de la lista, ahora los que generan los efectos de desplazamiento (default.ultimate.css)

Código:
@charset "UTF-8";

/** 
 * Default Ultimate Linear CSS Drop-Down Menu Theme
 *
 * @file		default.ultimate.css
 * @name		Default
 * @version		0.1
 * @type		transitional
 * @browsers	Windows: IE5+, Opera7+, Firefox1+
 *				Mac OS: Safari2+, Firefox2+
 *
 * @link		http://www.lwis.net/
 * @copyright	2008 Live Web Institute. All Rights Reserved.
 *
 */

@import "default.css";


/*-------------------------------------------------/
 * @section		Base Style Extension
 */

ul.dropdown a,
ul.dropdown span {
 display: block;
 padding: 7px 10px;
}



/*-------------------------------------------------/
 * @section		Base Style Override
 */

ul.dropdown li {
 padding: 0;
 border: none;
}

ul.dropdown ul a,
ul.dropdown ul span {
 padding: 8px;
}



/*-------------------------------------------------/
 * @section		Base Style Reinitiate: post-override activities
 */





/*-------------------------------------------------/
 *	@section	Custom Styles
 */

ul.dropdown li {
}

ul.dropdown li.hover,
ul.dropdown li:hover {
 background: url(images/grad2.png) 0 100% repeat-x;
 color: #000;
}

ul.dropdown li a:active {
 background: url(images/grad1.png) repeat-x;
}


/* Non-first level */

ul.dropdown ul {
 margin-top: 0;
}

	ul.dropdown ul li {
	}

	ul.dropdown ul li.hover,
	ul.dropdown ul li:hover {
	}



/* Mixed */

ul.dropdown li a,
ul.dropdown *.dir {
 border-style: solid;
 border-width: 1px 1px 1px 0;
 border-color: #fff #d9d9d9 #d9d9d9;
}



/*-------------------------------------------------/
 * @section		Support Class `open` Usage
 * @source		js, artificial
 *
 */

ul.dropdown li.hover *.open {
 border-style: solid;
 border-width: 1px 1px 1px 0;
 border-color: #ffa500 #d9d9d9 #d9d9d9;
 background-color: #fff; 
 color: #000;
}

ul.dropdown ul li.hover *.open,
ul.dropdown-vertical li.hover *.open {
 padding-left: 15px;
 border-top-color: #fff;
 border-left: solid 1px #ffa500;
}

ul.dropdown-vertical-rtl li.hover *.open {
 padding-right: 15px;
 border-right-color: #ffa500;
 border-left: none;
}

ul.dropdown-upward li.hover *.open {
 border-top-color: #fff;
 border-bottom-color: #ffa500;
}

ul.dropdown-upward ul li.hover *.open {
 border-bottom-color: #d9d9d9;
}


	/* CSS2 clone */

	ul.dropdown li:hover > *.dir {
	 border-style: solid;
	 border-width: 1px 1px 1px 0;
	 border-color: #ffa500 #d9d9d9 #d9d9d9;
	 background-color: #fff; 
	 color: #000;
	}

	ul.dropdown ul li:hover > *.dir,
	ul.dropdown-vertical li:hover > *.dir {
	 padding-left: 15px;
	 border-top-color: #fff;
	 border-left: solid 1px #ffa500;
	}

	ul.dropdown-vertical-rtl li:hover > *.dir {
	 padding-right: 15px;
	 border-right-color: #ffa500;
	 border-left: none;
	}

	ul.dropdown-upward li:hover > *.dir {
	 border-top-color: #fff;
	 border-bottom-color: #ffa500;
	}

	ul.dropdown-upward ul li:hover > *.dir {
	 border-bottom-color: #d9d9d9;
	}
Este se llama "default.css" (lo que entendí es que coloca las imágenes para el menú):
Código:
@charset "UTF-8";

/** 
 * Default CSS Drop-Down Menu Theme
 *
 * @file		default.css
 * @name		Default
 * @version		0.1
 * @type		transitional
 * @browsers	Windows: IE5+, Opera7+, Firefox1+
 *				Mac OS: Safari2+, Firefox2+
 *
 * @link		http://www.lwis.net/
 * @copyright	2008 Live Web Institute. All Rights Reserved.
 *
 * Module Classes: *.dir {} *.on {} *.open {} li.hover {} li.first {} li.last {}
 * Expected directory tag - li
 *
 */

@import "helper.css";


/*-------------------------------------------------/
 * @section		Base Drop-Down Styling
 * @structure	ul (unordered list)
 *				ul li (list item)
 *				ul li a (links)
 *				/*\.class|(li|a):hover/
 * @level sep	ul
 */


ul.dropdown {
 font-weight: bold;
}

	ul.dropdown li {
	 padding: 7px 10px;
	 border-style: solid;
	 border-width: 1px 1px 1px 0;
	 border-color: #fff #d9d9d9 #d9d9d9;
	 background-color: #f6f6f6;
	 color: #000;
	}

	ul.dropdown li.hover,
	ul.dropdown li:hover {
	 background-color: #eee;
	 color: #000;
	}

	ul.dropdown a:link,
	ul.dropdown a:visited	{ color: #000; text-decoration: none; }
	ul.dropdown a:hover		{ color: #000; }
	ul.dropdown a:active	{ color: #ffa500; }


	/* -- level mark -- */

	ul.dropdown ul {
	 width: 150px;
	 margin-top: 1px;
	}

		ul.dropdown ul li {
		 font-weight: normal;
		}



/*-------------------------------------------------/
 * @section		Support Class `dir`
 * @level sep	ul, .class
 */


ul.dropdown *.dir {
 padding-right: 20px;
 background-image: url(images/nav-arrow-down.png);
 background-position: 100% 50%;
 background-repeat: no-repeat;
}


/* -- Components override -- */

ul.dropdown-horizontal ul *.dir {
 padding-right: 15px;
 background-image: url(images/nav-arrow-right.png);
 background-position: 100% 50%;
 background-repeat: no-repeat;
}

ul.dropdown-upward *.dir {
 background-image: url(images/nav-arrow-top.png);
}

ul.dropdown-vertical *.dir,
ul.dropdown-upward ul *.dir {
 background-image: url(images/nav-arrow-right.png);
}

ul.dropdown-vertical-rtl *.dir {
 padding-right: 10px;
 padding-left: 15px;
 background-image: url(images/nav-arrow-left.png);
 background-position: 0 50%;
}
Por último "helper.css" (creo da formato a la página)

Código:
* {
 margin: 0;
 padding: 0;
}

body {
 padding: 50px;
 border-top: solid 1px #fff;
 background: #fff url(images/pattern1.png) 0 0 repeat-x;
 font: 14px/normal Tahoma, Arial, Helvetica, sans-serif;
}

p { margin-bottom: 1em; }

ul.classic {
 list-style: disc;
 margin-bottom: 1em;
 padding-left: 2em;
}

h1,h2,h3 {
 margin-bottom: .5em;
 font-family: Arial, Helvetica, sans-serif;
 line-height: normal;
}

h1 {
 border-bottom: solid 1px #d9d9d9;
 font-weight: normal;
 font-size: 180%;
 text-indent: 5px;
 letter-spacing: -1px;
}

.dropdown-upward {
 margin-top: 400px !important;
}
Ahora bien, este menú que genera lo quiero colocar en una tabla de tres filas por cuatro columnas; la primera fila será el header (combine las columnas con colspan), la segunda fila primer columna es donde puse el menú, la segunda fila segunda y tercer columna será el contenido, y la segunda fila cuarta columna, pondré algunas imágenes o banners publicitarios; todavía no lo tengo decidido.
Por último la tercer fila es donde pondré el pié de página con los datos de la empresa, los del menú (no me gusta piratear código y decir que es mio) y mis datos.

La página todavía no la pongo en un servidor, pero si se quieren dar una idea aqui esta: http://www.powerplatesatelite.com.mx/
El punto es que se vea un poco profesional, la verdad a mi no me gusta como esta ahora, me la encargaron para mejorarla, por eso quiero poner un menú que se vea mejor que unos botones.

Gracias por sus comentarios y por leer este post, revisaré la opción de r_bradbury. ah y perdón por tanto código :P
Usuario Novato
Fecha de Ingreso: sep-08
Mensajes: 132
Gracias dadas: 0
Agradecido 0 veces en 0 Mensajes
venom_mau está desconectado
Responder Citando
Respuesta

« Apache en Windows Vista | Pregunta sobre WordPress »
Herramientas Buscar en Tema
Buscar en Tema:

Búsqueda Avanzada
Desplegado
Mode Lineal Mode Lineal

Ir al Foro


La franja horaria es GMT -3. Ahora son las 05:39.