elhacker.net cabecera Bienvenido(a), Visitante. Por favor Ingresar o Registrarse
¿Perdiste tu email de activación?.

 

 


Tema destacado:


+  Foro de elhacker.net
|-+  Programación
| |-+  Desarrollo Web (Moderador: #!drvy)
| | |-+  Una pequeña ayuda con css y html		0 Usuarios y 1 Visitante están viendo este tema.
Páginas: [1] 2 Ir Abajo Respuesta Imprimir
Autor Tema: Una pequeña ayuda con css y html  (Leído 5,711 veces)
WIитX


Desconectado Desconectado

Mensajes: 1.024


WINTX


Ver Perfil WWW
Una pequeña ayuda con css y html
« 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  :-(



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
En línea
"Es más divertido hacerse pirata que unirse a la marina." (Steve Jobs)
Usuario Invitado


Desconectado Desconectado

Mensajes: 625



Ver Perfil
Re: Una pequeña ayuda con css y html
« Respuesta #1 en: 5 Julio 2015, 03:03 am »
Te hice una, salió parecida: ver fiddle
En línea
"La vida es muy peligrosa. No por las personas que hacen el mal, si no por las que se sientan a ver lo que pasa." Albert Einstein
WIитX


Desconectado Desconectado

Mensajes: 1.024


WINTX


Ver Perfil WWW
Re: Re: Una pequeña ayuda con css y html
« Respuesta #2 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

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
En línea
"Es más divertido hacerse pirata que unirse a la marina." (Steve Jobs)
DarK_FirefoX


Desconectado Desconectado

Mensajes: 1.263


Be the change you wanna see in te world


Ver Perfil
Re: Una pequeña ayuda con css y html
« Respuesta #3 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
En línea
WIитX


Desconectado Desconectado

Mensajes: 1.024


WINTX


Ver Perfil WWW
Re:
« Respuesta #4 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
En línea
"Es más divertido hacerse pirata que unirse a la marina." (Steve Jobs)
DarK_FirefoX


Desconectado Desconectado

Mensajes: 1.263


Be the change you wanna see in te world


Ver Perfil
Re:
« Respuesta #5 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
En línea
WIитX


Desconectado Desconectado

Mensajes: 1.024


WINTX


Ver Perfil WWW
Re: Una pequeña ayuda con css y html
« Respuesta #6 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í:



Y en chrome así:



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:



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. }
« Última modificación: 5 Julio 2015, 12:42 pm por WIитX » En línea
"Es más divertido hacerse pirata que unirse a la marina." (Steve Jobs)
DarK_FirefoX


Desconectado Desconectado

Mensajes: 1.263


Be the change you wanna see in te world


Ver Perfil
Re: Una pequeña ayuda con css y html
« Respuesta #7 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
En línea
Usuario Invitado


Desconectado Desconectado

Mensajes: 625



Ver Perfil
Re: Una pequeña ayuda con css y html
« Respuesta #8 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. Sería bueno también que agregaras Prefixfree que éste agrega los prefijos css por tí.

Checka a ver si te sirve: Menu responsivo. Redimensiona el browser para ver como cambia su forma el menú.

Probado en IE11, Firefox/Chrome/Safari última versión.
« Última modificación: 5 Julio 2015, 17:44 pm por Gus Garsaky » En línea
"La vida es muy peligrosa. No por las personas que hacen el mal, si no por las que se sientan a ver lo que pasa." Albert Einstein
MinusFour
Moderador Global
***
Desconectado Desconectado

Mensajes: 5.529


I'm fourth.


Ver Perfil WWW
Re: Una pequeña ayuda con css y html
« Respuesta #9 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">
« Última modificación: 5 Julio 2015, 19:34 pm por MinusFour » En línea
Páginas: [1] 2 Ir Arriba Respuesta Imprimir 

Ir a:  

Mensajes similares
Asunto Iniciado por Respuestas Vistas Último mensaje
pequeña ayuda
Programación Visual Basic 		YEVIT 2 1,748 Último mensaje 10 Mayo 2007, 23:51 pm
por Hans el Topo
Una Pequeña Ayuda
Hacking 		trcka 8 5,440 Último mensaje 12 Enero 2011, 21:42 pm
por R007h
pequeña ayuda con HTML
Desarrollo Web 		~ Ghost_Networks ~ 3 3,520 Último mensaje 28 Junio 2011, 18:04 pm
por dark_sargon
Pequeña Ayuda :D
Programación C/C++ 		carmelina 3 2,194 Último mensaje 24 Marzo 2012, 02:04 am
por Eternal Idol
pequeña ayuda en c++ « 1 2 »
Programación C/C++ 		howaboutno 11 5,546 Último mensaje 5 Marzo 2013, 04:41 am
por 85
WAP2 - Aviso Legal - Powered by SMF 1.1.21 | SMF © 2006-2008, Simple Machines