Tema: Post general para mis dudas :D
Ver Mensaje Individual
  #1 (permalink)  
Antiguo 23/01/2013, 09:23
kraxxis
 
Fecha de Ingreso: enero-2013
Mensajes: 5
Antigüedad: 11 años, 3 meses
Puntos: 0
Pregunta Post general para mis dudas :D
Antes que nada voy a explicar la función que quiero que tenga este post y el porqué.

Actualmente estoy estudiando de manera autodidacta xhtml-css-java script, y en breve empiezo con php y mysql, son muchos conocimientos de golpe y sin tener un tutor es complicado pues aunque busques algo en internet que siempre está, casi siempre acaba faltando una explicación más detallada, o un porque eso si, y esto no. Y lógicamente me encuentro muchas barreras a la hora de llevar las cosas a la práctica.

Así pues, mi intención es dedicar este post para exponer todos los problemas que vaya encontrando en una web que estoy haciendo donde practicar, lógicamente, esto es una web de prueba, no es nada serio.

El porqué de esto también es para no saturar el foro de nuevos temas cada vez que tenga un problema, así queda todo agrupado, y quizás también sirva a otros.



Bien pues, este es el esquema de lo que quiero hacer:

  • Rectangulo amarillo div contenedor de todos los demas.
  • Rectangulos azules, divs contenedores de zonas específicas.
  • Rectangulos grises div contenedor de apartados.
  • Rectangulos rojos, divs especificos de una funcion.




Y por ahora esto es lo que tengo:


De momento aun estoy liado con el div del header, cabecera o como se le llame. Mi intención es tener el menú centrado y debajo del logo, y a la derecha en el hueco poner el login.

Lo que aun no controlo para nada esto de poner divs encima de otros y pasa lo que se ve, que el menu de login se me va para abajo y el otro no se centra.

Dejo el código html y css.

Código HTML: 
Ver original
  1. <body>
  2.  
  3. <div id="container">
  4.  
  5. <div id="header">
  6.     
  7.     <div id="headerlogo">
  8.     <img  src="D:\Proyectos Páginas Web\Web proyecto\Proyecto logo.png" </img>
  9.     </div>     
  10.        
  11. <div id="menusupe">
  12.  
  13. <ul>
  14.   <li class="menusup"><a class="linkweb" href="D:/Proyectos%20P%E1ginas%20Web/Web%20proyecto/Web.html">Inicio</a></li>
  15.   <li class="menusup"><a class="linkweb" href="D:/Proyectos%20P%E1ginas%20Web/Web%20proyecto/Web.html">¿Quienes somos?</a></li>
  16.   <li class="menusup"><a class="linkweb" href="D:/Proyectos%20P%E1ginas%20Web/Web%20proyecto/Web.html">Nuestros productos</a></li>
  17.   <li class="menusup"><a class="linkweb" href="D:/Proyectos%20P%E1ginas%20Web/Web%20proyecto/Web.html">Contact</a></li>
  18. </ul>
  19. </div>
  20.  
  21. <div id="login">
  22.     <form action="formhandler.php" method:"post">
  23.     <fieldset>
  24.     <legend>Inicia sesión o <a class="linkweb" href="D:/Proyectos%20P%E1ginas%20Web/Web%20proyecto/Web.html">registrate</a></legend>
  25.    <p>Usuario:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input type="text" name="nicklogin" size="18" maxlength="16" /></p>
  26.    <p>Contraseña:<input type="password" name="passwordlogin" size="18" maxlength="16" />
  27.    </p></fieldset>
  28.    
  29.    
  30.    </form>
  31.   
  32.      </div>
  33.  
  34.     </div>

Código CSS: 
Ver original
  1. body{background:#08080F url(FondoCabecera3.jpg) center top no-repeat; color:#EEEEEE;font-family: Arial, Helvetica, Sans-serif;font-size: 13px;margin-top:20px;padding:0px;}
  2.  
  3. #container { padding:20px; background: rgba(255,255,255,0.2); margin-left:auto; margin-right:auto; width:960px; height:1024px; margin-top:290px; }
  4.  
  5. #header { text-align:center; background:#333333; width:960px; height:225px; margin-left:auto; margin-right:auto;}
  6.  
  7. #menusupe { width:500px; text-align:center;}
  8.  
  9. #headerlogo { text-align:center;}
  10.  
  11. #login { float:right; }
  12.  
  13. #menuizq{ float:left; width:260px; margin-top:109px; margin-left:auto; margin-right:auto; background:#333333;  height:500px; margin-left:auto; margin-right:auto;}
  14.  
  15.  
  16. li.menusup { display:inline;}
  17.  
  18. li::after{ padding:10px;
  19.   content: "|";
  20.   }
  21.  
  22. li:last-child::after {
  23.   content: none;}
  24.   
  25.  
  26. #presentacionventas { float:right; margin-left:auto; margin-right:auto; background:#333333; width:680px; height:500px; margin-left:auto; margin-right:auto;}
  27.  
  28.  
  29. .linkweb:link {color:#FF8000; text-decoration:none}
  30. .linkweb:visited {color:#FF8000;}
  31. .linkweb:hover { cursor:pointer; font-weight:bold; color:#FA0C12;}  
  32. .linkweb:active {color:Silver;}

Pues eso, no veo que está mal porque he cambiado tantoalgunas cosas que ya me he perdido en mi propio código y no le encuentro lógica a que por ejemplo, el menu que hay debajo del logo lo tengo con text-align:center y sin embargo se ve más a la derecha, no se queda centrado.

También quería preguntaros otra cosa. En la parte del formulario hay varias cosas que no tengo clara que función desempeñan.

En
Código HTML: 
Ver original
  1. <form action="formhandler.php"
que representa que es formhandler.php exactamente, porque en otro ejemplo vi que en lugar de este se utilizaba "agente" o "gestor".

Y en
Código HTML: 
Ver original
  1. <input type="text" name="nicklogin"
el "name" ¿que es?, yo supongo que será como un identificador para luego usarlo en php para la parte del servidor, pero no quiero caer en error por suponer demasiado.


Y bueno, por ahora esto todo. Gracias de antemano :D