Foro de elhacker.net

Programación => Desarrollo Web => Mensaje iniciado por: WIитX en 5 Julio 2015, 02:12 am


Título: Una pequeña ayuda con css y html
Publicado por: WIитX en 5 Julio 2015, 02:12 am
Hola chicos mirar necesito una pequeña ayuda

Necesito hacer una barra de menú se que se hace con una lista <ul> creo pero a la hora del css no se ni por donde empezar sabes alguna source que pueda coger el código y modificarlo a mi gusto?

La barra quiero que quede así a ver si puedo conseguirlo que es lo único que me falta por hacer  :-(

(http://i.gyazo.com/393c2b3a9cd789772f029b3ea957b2e5.png)

Gracias chicos!!

Acabó de poner lo que llevaba echó y mis divs no se ajustan a las pantallas a la barra esta que mencionó arriba le tengo puesto 910px si le pongo en vez de px en tanto % se redimensionara según el tipo de pantalla? Saludos

Título: Re: Una pequeña ayuda con css y html
Publicado por: Usuario Invitado en 5 Julio 2015, 03:03 am
Te hice una, salió parecida: ver fiddle (http://jsfiddle.net/41ha8wh4/)

(http://i.imgur.com/9rso2Gb.png)

Título: Re: Re: Una pequeña ayuda con css y html
Publicado por: WIитX en 5 Julio 2015, 03:04 am
Cita de: Gus Garsaky en  5 Julio 2015, 03:03 am
Te hice una, salió parecida: ver fiddle (http://jsfiddle.net/41ha8wh4/)

(http://i.imgur.com/9rso2Gb.png)
Dios muchas gracias :-\ enserio pero me mirare el código así para la próxima no tengo que pediros ayuda saludos y gracias de verdad

Enviado desde mi Aquaris E6 mediante Tapatalk

Título: Re: Una pequeña ayuda con css y html
Publicado por: DarK_FirefoX en 5 Julio 2015, 03:08 am
No entendí muy bien en que es lo que tienes duda, pero puedes, en el css, seleccionar los elementos <li> y ponerle la propiedad display a inline-block, esto te pondría la lista horizontal, ahora, lo demás es cuestion de padding, margin, color, border, border-radius, y por supuesto, poner los iconos. Si necesitas ayuda pregunta, pero puedes ir mirando por estas cosas.

Salu2s

Título: Re:
Publicado por: WIитX en 5 Julio 2015, 03:20 am
Si muchas gracias dark por tu respuesta también con el ejemplo que me dejo Gus me vendrá de perlas intentaré añadirle alguna que otra cosa y listo gracias a los dos :)

Ahora necesito buscar como hacer para que se adapte la web según el tipo de pantalla jaja que probe en mi portátil y salía mal los divs no se ajustaron según e visto se llama reponsive pero no encuentro como hacerlo si le pongo en vez de px un % al ancho del div funcionará?

Enviado desde mi Aquaris E6 mediante Tapatalk

Título: Re:
Publicado por: DarK_FirefoX en 5 Julio 2015, 03:52 am
Cita de: WIитX en  5 Julio 2015, 03:20 am
Si muchas gracias dark por tu respuesta también con el ejemplo que me dejo Gus me vendrá de perlas intentaré añadirle alguna que otra cosa y listo gracias a los dos :)

Ahora necesito buscar como hacer para que se adapte la web según el tipo de pantalla jaja que probe en mi portátil y salía mal los divs no se ajustaron según e visto se llama reponsive pero no encuentro como hacerlo si le pongo en vez de px un % al ancho del div funcionará?

Enviado desde mi Aquaris E6 mediante Tapatalk

Exactamente, el término es Responsive Web Design (Diseño Web Responsivo), se trata de predefinir el comportamiento/apariencia de las cosas de las páginas para adaptarse a distintas resoluciones de pantalla/tamaño de pantallas/distintos dispositivos. Deberías ser capaz de encontrar información sobre esto.

No se cual es tu objetivo, si quieres trabajar directamente desde 0, pero podrías revisar bootstrap, es un framework que te facilita el desarrollo web, trae muchas cosas muy útiles, haciendo un excelente uso de CSS, además de jQuery, y sobre todo, viene incluido un excelente soporte para el diseño responsivo.

Salu2s

Título: Re: Una pequeña ayuda con css y html
Publicado por: WIитX en 5 Julio 2015, 11:52 am
Cita de: DarK_FirefoX en  5 Julio 2015, 03:52 am
Exactamente, el término es Responsive Web Design (Diseño Web Responsivo), se trata de predefinir el comportamiento/apariencia de las cosas de las páginas para adaptarse a distintas resoluciones de pantalla/tamaño de pantallas/distintos dispositivos. Deberías ser capaz de encontrar información sobre esto.

No se cual es tu objetivo, si quieres trabajar directamente desde 0, pero podrías revisar bootstrap, es un framework que te facilita el desarrollo web, trae muchas cosas muy útiles, haciendo un excelente uso de CSS, además de jQuery, y sobre todo, viene incluido un excelente soporte para el diseño responsivo.

Salu2s

Lo estoy haciendo desde 0 seria una "putada" pasar ahora a bootstrap ese nunca lo e tocado y ya la tengo casi terminada XD

En safari me aparece así:

(http://i.gyazo.com/06499ec0b745521f9418bbd569232c90.png)

Y en chrome así:

(http://i.gyazo.com/4beb2eb6281608face81ffdc99327aed.png)

Mira os dejaré todo lo que llevo echo así a ver si pueden ayudarme un poco mejor por que ya estoy dando palos de ciego y ya también me comentas que tal el codigo y eso jejej

Una preview de como se ahora mismo en chrome:

(http://i.gyazo.com/f387874c9ea6c55e051f62bf6ed540d2.png)

html:

Código
  1. <html xmlns="http://www.w3.org/1999/xhtml">
  2.         <head>
  3.                 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  4.                 <link rel="stylesheet" href="css/style.css">
  5.                 <title>WINTXCODERS | Inicio</title>
  6.         </head>
  7.         <body>
  8.                 <div id="perfil">
  9.                 	<img class="encabezado" src="./images/top.png"/>
  10.                 	<img class="perfil" src="./images/miguelmartin.png"/>
  11.                 	<div id="social">
  12.                 	</div>
  13.                 </div>
  14.                 <div id="add">
  15.                 <img class="yt" src="./images/yt.png"/>
  16.                 <iframe class="video" width="560" height="315" src="https://www.youtube.com/embed/4Z9SDv4JLNU" frameborder="0" allowfullscreen></iframe>
  17.                 </div>
  18.                 </div>
  19.                 <div id="nav">
  20.                         <ul>
  21.                                 <li><a href="#"><i class="fa fa-map-marker"></i>home</a></li>
  22.                                 <li><a href="#"><i class="fa fa-comment"></i>forum</a></li>
  23.                                 <li><a href="#"><i class="fa fa-globe"></i>computer news</a></li>
  24.                                 <li><a href="#"><i class="fa fa-users"></i>team</a></li>
  25.                                 <li><a href="#"><i class="fa fa-gamepad"></i>wargames</a></li>
  26.                         </ul>
  27.                 </div>
  28.                 <div id="contenedor">
  29.                 </div>
  30.         </body>
  31. </html>

css:

Código
  1. body{
  2.  background: url(../images/bg.png) no-repeat center center fixed; 
  3.     -webkit-background-size: cover;
  4.     -moz-background-size: cover;
  5.     -o-background-size: cover;
  6.     background-size: cover;
  7.  }
  8. #perfil {
  9.  	width: 18.8%;
  10.  	height: 389px;
  11.  	background: #FFFFFF;
  12.  	border-radius: 4px;
  13.     border: 1px solid #dadada;;
  14.  	float: right;
  15.  	margin-right: 350px;
  16.     margin-top: 100px;
  17.     position: static;
  18.  }
  19. #social {
  20.  	width: 99.9%;
  21.  	height: 35px;
  22.  	background: #f3f2f0;
  23.  	position: static;
  24.     margin-top: 38px;
  25.  }
  26. #perfil .encabezado {
  27.  	width: 99.9%;
  28.  	height: 180px;
  29.  	border-top-left-radius: 4px;
  30.     border-top-right-radius: 4px;
  31. }
  32. #perfil .perfil {
  33.  	width: 100px;
  34.     border-radius: 100%;
  35.     border: 3px solid #E4E3E2;
  36.     margin-top: 30px;
  37.     margin-left: 10px;
  38.     position: static;
  39. }
  40. #contenedor {
  41.     width: 42%;
  42.  	height: 600px;
  43.  	background: #FFFFFF;
  44.  	border-radius: 4px;
  45.  	border: 1px solid #dadada;
  46.  	float: right;
  47.  	margin-right: 30px;
  48.     margin-top: 25px;
  49.     position: static;
  50. }
  51. #add .video {
  52. 	width: 99.9%;
  53.  	height: 200px;
  54. }
  55. #add {
  56. 	width: 18.8%;
  57.  	height: 600px;
  58.  	float: right;
  59.  	background: #FFFFFF;
  60.  	border-radius: 4px;
  61.  	position: static;
  62.  	margin-right: -361px;
  63.  	margin-top: 520px;
  64.  	border: 1px solid #dadada;
  65. }
  66. #add .yt {
  67.     width: 99.9%;
  68. 	border-top-left-radius: 4px;
  69.     border-top-right-radius: 4px;
  70. }
  71. ul {
  72.     width: 42%;
  73.     background-color: #FFFFFF;
  74.     border-radius: 4px;
  75.     display: flex;
  76.     justify-content: space-between;
  77.     border: 1px solid #dadada;
  78.     float: right;
  79.     margin-right: 30px;
  80.     margin-top: 100px;
  81.     position: static;
  82.     outline-style: none;
  83.  
  84. }
  85. ul li a {
  86.     color: #888;
  87.     display: block;
  88.     font-family: 'cuprum';
  89.     font-size: .85em;
  90.     padding: .9rem 0rem;
  91.     text-decoration: none;
  92.     text-transform: uppercase;
  93.     transition: all .2s ease-in-out;
  94. }
  95. ul li a:hover {
  96.     color: #444;
  97. }
  98. ul li a i {
  99.     margin-right: 15px;
  100. }
  101. *, *:before, *:after {
  102.     box-sizing: inherit;
  103.     margin: 0;
  104.     padding: 0;
  105. }
  106. #nav .fa fa-map-marker {
  107.  
  108. }

Título: Re: Una pequeña ayuda con css y html
Publicado por: DarK_FirefoX en 5 Julio 2015, 16:26 pm
Si te das cuenta, en Safari, la lista se te ve vertical, pues de alguna manera es diferente el trato que le da el Chrome a los elementos <a> (hipervínculo).

Ten en cuenta, que te había dicho:

Cita de: DarK_FirefoX en  5 Julio 2015, 03:08 am
En el css, seleccionar los elementos <li> y ponerle la propiedad display a inline-block, esto te pondría la lista horizontal,

Añádele a tu CSS:

Código
  1. li{
  2. display: inline-block;
  3. }

Aquí estarás seleccionando los elementos <li>. Pues como lo tienes, estás seleccionando los elementos <a> (ul li a) que son descendientes arbitrarios de <li>  y a su vez estos de <ul>.

Salu2s

Título: Re: Una pequeña ayuda con css y html
Publicado por: Usuario Invitado en 5 Julio 2015, 17:42 pm
Se ve así porque te falta agregar un css reset (indispensable). Si lo agregas, verás que la lista se se muestra correctamente.

El reset que uso yo es Normalize (https://necolas.github.io/normalize.css/). Sería bueno también que agregaras Prefixfree (http://leaverou.github.io/prefixfree/) que éste agrega los prefijos css por tí.

Checka a ver si te sirve: Menu responsivo (http://codepen.io/GusGarsaky/pen/bdvVqp). Redimensiona el browser para ver como cambia su forma el menú.

Probado en IE11, Firefox/Chrome/Safari última versión.

Título: Re: Una pequeña ayuda con css y html
Publicado por: MinusFour en 5 Julio 2015, 18:08 pm
Deshazte de:

Código
  1. ul li a {
  2. display: block; /* De esta linea nada mas */
  3. }

Quita las viñetas:

Código
  1. ul {
  2.  list-style-type: none; /*Agregas esta linea*/
  3. }

Y agrega la hoja de estilos de FontAwesome:

Código
  1. <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">

Título: Re: Una pequeña ayuda con css y html
Publicado por: RaloGomez en 5 Julio 2015, 23:37 pm
Perdon, no viene a cuento pero simplemente por curiosidad ¿Que editor de codigo estas utilizando?

Título: Re: Una pequeña ayuda con css y html
Publicado por: WIитX en 6 Julio 2015, 11:43 am
Cita de: Santaclown en  5 Julio 2015, 23:37 pm
Perdon, no viene a cuento pero simplemente por curiosidad ¿Que editor de codigo estas utilizando?

Sublimetext

Título: Re: Una pequeña ayuda con css y html
Publicado por: _Enko en 7 Julio 2015, 16:05 pm
Código:
 <div id="nav">
                        <ul>
                                <li><a href="#"><i class="fa fa-map-marker"></i>home</a></li>
                                <li><a href="#"><i class="fa fa-comment"></i>forum</a></li>
                                <li><a href="#"><i class="fa fa-globe"></i>computer news</a></li>
                                <li><a href="#"><i class="fa fa-users"></i>team</a></li>
                                <li><a href="#"><i class="fa fa-gamepad"></i>wargames</a></li>
                        </ul>
                </div>

Con el estandard html5 creo que es mejor usar
Código:
 <nav id="nav">
                        <ul>
                                <li><a href="#"><i class="fa fa-map-marker"></i>home</a></li>
                                <li><a href="#"><i class="fa fa-comment"></i>forum</a></li>
                                <li><a href="#"><i class="fa fa-globe"></i>computer news</a></li>
                                <li><a href="#"><i class="fa fa-users"></i>team</a></li>
                                <li><a href="#"><i class="fa fa-gamepad"></i>wargames</a></li>
                        </ul>
                </nav>

Visualmente no hará ninguna diferencia, pero el tag NAV es más apropiado ya que identifica que es un bloque dedicado a la navegación.

Tambien, para no sufrir tanto con compatibilidad html-css entre navegadores y ya te lo recomendaron: bootstrap.

http://getbootstrap.com/examples/navbar/

No tienes que usar todo el bootstrap, puedes compilar online en la web solamente el componente navbar. (opcionalmente dropdown tambien, si lo necesitas)

Personalizas luego navbar navbar-default y te asegura un 90-99% compatibilidad en los navegadors modernos. ie11, chrome y firefox.

Saludos.


Powered by SMF 1.1.21 | SMF © 2006-2008, Simple Machines