Foros del Web » Creando para Internet » CSS »

Cambiar layout de menú

Estas en el tema de Cambiar layout de menú en el foro de CSS en Foros del Web. Hola, soy novato y no sé mucho de CSS, y tengo un menú de operaciones en fila, y cada módulo se va agregando en una ...
  #1 (permalink)  
Antiguo 11/09/2013, 22:24
 
Fecha de Ingreso: abril-2013
Mensajes: 2
Antigüedad: 5 años, 4 meses
Puntos: 0
Cambiar layout de menú

Hola, soy novato y no sé mucho de CSS, y tengo un menú de operaciones en fila, y cada módulo se va agregando en una columna, así:
Y quiero poner cada casilla de esta forma:


Pero no tengo idea de cómo lo hago. Tengo este código en la página:

Código HTML:
Ver original
  1. <div class="art-sheet clearfix">
  2.             <div class="art-layout-wrapper">
  3.                 <div class="art-content-layout">
  4.                     <div class="art-content-layout-row">
  5.                         <div class="art-layout-cell art-content"><article class="art-post art-article">
  6.                                
  7.                                                
  8.                         <div class="art-postmetadataheader">
  9.                                         <h2 class="art-postheader">Autenticación</h2>
  10.                                     </div>
  11.                         <img width="400" height="236" alt="" src="images/DSC_3049.jpg" style="float: left; border-top-width: 2px; border-right-width: 2px; border-bottom-width: 2px; border-left-width: 2px;" class="">
  12.  
  13.         <div style="margin-left:60%;">
  14.         <form  action="Controladores/autenticacion.php" method="post" >
  15.  
  16.            
  17.            <label for="nick">NICK</label><br>
  18.            <input id="nick" name="nick" type="Text" class="textos" style="width: 60%; border: 1.5px solid #A0A0A0; border-radius:4px; height:12px; " ><br><br>
  19.            
  20.            <label for="contrasena">CONTRASEÑA</label><br>
  21.            <input id="contrasena" name="contrasena" type="password" style="width: 60%; border: 1.5px solid #A0A0A0; border-radius:4px; height:12px;" ><br><br>
  22.  
  23.  
  24.            <input type="submit" href="#" class="art-button" value="Entrar"><br><br>
  25.  
  26.            <a href="reestablecer.php"> ¿Olvidaste tu contraseña? </a>
  27.         </form>
  28.         </div>
  29.     </div>
  30.     </div>
  31. </div>
  32. <div class="art-content-layout-br layout-item-0">
  33. </div></div>

Y este es el código css de las clases que creo que están relacionadas ahí:

Código CSS:
Ver original
  1. .art-sheet
  2. {
  3.    margin:2px auto 0;
  4.    position:relative;
  5.    cursor:auto;
  6.    width: 900px;
  7.    z-index: auto !important;
  8. }
  9.  
  10. .art-layout-wrapper
  11. {
  12.    position: relative;
  13.    margin: 0 auto 0 auto;
  14.    z-index: auto !important;
  15. }
  16.  
  17. .art-content-layout
  18. {
  19.    display: table;
  20.    width: 100%;
  21.    table-layout: fixed;
  22. }
  23.  
  24. .art-content-layout-row
  25. {
  26.    display: table-row;
  27. }
  28.  
  29. .art-layout-cell
  30. {
  31.    display: table-cell;
  32.    vertical-align: top;
  33. }

Cómo puedo cambiarlo a la forma que quiero? No estoy pidiendo que me hagan eso, pero sí que me digan como hacerlo, soy novato y no entiendo mucho de esto, así que necesito al menos una guía de cómo cambiar esa parte. Muchas gracias!

Última edición por pzin; 12/09/2013 a las 14:32 Razón: formato código
  #2 (permalink)  
Antiguo 12/09/2013, 14:32
Avatar de pzin
Moderata 😈
 
Fecha de Ingreso: julio-2002
Ubicación: Islas Canarias
Mensajes: 10.481
Antigüedad: 16 años, 1 mes
Puntos: 2109
Respuesta: Cambiar layout de menú

En realidad lo ideal sería encontrar una guía manual que te ayuda en cualquier cosa; librosweb.es suele estar bien si andas empezando.

El código no lo entiendo mucho, no corresponde con la imagen, ¿no? Por el código, para ver a qué corresponde cada cosa. Porque así tal cual, no se sabe si cada parte es así o cada parte va ahí.

Y usa highlight cuando publiques código.

Etiquetas: layout, página
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




La zona horaria es GMT -6. Ahora son las 14:38.