Foro de elhacker.net

Programación => Desarrollo Web => Mensaje iniciado por: Panic0 en 15 Febrero 2022, 01:26 am


Título: Como puedo DIVidir una pagina?
Publicado por: Panic0 en 15 Febrero 2022, 01:26 am
Hola a todos, como estan?

Estoy practicando html y css, y queria tratar de dividir una pagina web.

O sea, poner, about us, contact, projects y cosas asi todo en una misma pagina.

Tengo esto, pero no creo que este bien.

HTML
Código:
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="css/style.css">
    <script src="js/javascript.js"></script>
    <title>Document</title>
</head>

<body>
    <div class="wrapper">
        <div class="test1">
            <h3>about us</h3>
        </div>
    </div>
    <div class="wrapper-2">
        <div class="test1">
            <h3>contact</h3>
        </div>
    </div>

</body>

</html>

CSS
Código:

body{
    padding: 0;
    margin: 0;
}

.wrapper{
    display: flex;
    background-color: red;
    height: 1000px;

}

.wrapper-2{
    display: flex;
    background-color: rgb(25, 0, 255);
    height: 1000px;

}

Título: Re: Como puedo DIVidir una pagina?
Publicado por: @XSStringManolo en 15 Febrero 2022, 04:50 am
El código javascript normalmente ponlo justo antes del cierre del body, no en el head. Si no, es posible que no puedas acceder a elementos porque aún no se han creado por parte del navegador.

Utiliza ids para nombres únicos y clases para nombres que se vayan a repetir. Por ejemplo, no vas a tener 2 class=wrapper, mejor usa un id ahí. En cambio en los test1 está bien usas clases porque tienes 2 elemenos con la clase.
Tampoco es necesario que añadas ids o clases única y exclusivamente para estilar cuando la estructura es simple, tienes un montón de selectores disponibles. Yo prefiero dejar las clases para relacionar con estilos concretos, mas que para identificar el tipo de elemento con lo que tengo en la cabeza.

Yo prefiero utilizar html léxico sobre usar divs para todo, es mas recomendado.

index.html
Código
  1. <!DOCTYPE html>
  2. <html lang="en">
  4.   <meta charset="UTF-8">
  5.   <!-- Avoid GET request to favicon.ico -->
  6.   <link rel="icon" href="data:;base64,iVBORw0KGgo=">
  7.   <title>index</title>
  8.   <link rel="stylesheet" href="./css/index.css" media="all">
  9.   <meta name="theme-color" content="#fffafa">
  10. </head>
  12.  
  13.   <nav id="topBar">
  14.     <a href="#aboutUs">About Us</a>
  15.     <a href="#contact">Contact</a>
  16.     <a href="#projects">Projects</a>
  17.   </nav>
  18.   <section>
  19.     <article id="aboutUs">
  20.       <h3>About US</h3>
  21.       <p>
  22.         Dolor amet laudantium necessitatibus adipisci illo? Exercitationem consectetur fuga facere aliquam labore? Nam quis itaque dolor expedita tempora. Asperiores ipsam obcaecati dolores delectus quam Amet provident corporis doloribus veniam iure Nam ea error eaque ex odit debitis aliquid, perferendis accusamus sapiente. Tenetur nobis neque ex id incidunt. Cum eius porro
  23.       </p>
  24.     </article>
  25.  
  26.     <article id="contact">
  27.       <h3>Contact</h3>
  28.       <p>
  29.         Adipisicing fugiat repellat voluptas voluptas quo perspiciatis nemo laudantium! Molestiae libero in doloribus modi aspernatur! Maxime et pariatur quod et aperiam, nostrum. Deleniti omnis accusamus blanditiis architecto non? Quibusdam ratione ex minima aliquam inventore tempore voluptate. Non odio architecto laborum facere ea? Corrupti accusamus temporibus error temporibus eaque similique. Veniam
  30.       </p>
  31.  
  32.     </article>
  33.  
  34.     <article id="projects">
  35.       <h3>Projects</h3>
  36.       <p>
  37.         Ipsum aliquid dolor impedit libero placeat! Ea quo aliquam ipsum ab earum mollitia officiis! A aliquam molestiae quis molestias eum Iste quisquam aut neque eos corrupti Nulla iste officia eligendi voluptatibus hic? Excepturi impedit voluptas illum doloremque ratione fugit Facilis cum voluptatem quas non corrupti, laborum qui unde? Beatae optio
  38.       </p>
  39.     </article>
  40.   </section>
  41.  
  42.   <script src="./js/main.js"></script>
  43. </body>
  44. </html>


index.css
Código
  1. :root {
  2.   /* How to define variables in css example */
  3.   --color1: #34568b;
  4.   --color2: #e9e9e9;
  5.   --color3: #cb8b5d;
  6.   --fontColor: #333;
  7. }
  8.  
  9. html {
  10.   /* Animate the scroll instead of suddent jump */
  11.   scroll-behaviour: smooth;
  12.   /* Do not scroll all the way down */
  13.   scroll-padding-top: 1.5rem;
  14. }
  15.  
  16. /* When scrolling to article: */
  17. article:target {
  18.   outline: 1px dotted blue;
  19.   background-color: #fffbfb; /* Clearer than snow color */
  20.   color: #000; /* Darker than #333 */
  21. }
  22.  
  23.  
  24. body {
  25.   margin: 0;
  26.   width: 100%;
  27.   height: 100%;
  28.   text-align: middle;
  29.   text-size-adjust: none; /* Fix Android Big Text */
  30.   text-rendering: optimizeLegibility; /* Improve text */
  31.   margin-bottom: 14px; /* Some Android screens cover bottom viewport */
  32.   font-size: 2vw;
  33.   color: var(--fontColor);
  34.   font-family: sans-serif;
  35. }
  36.  
  37. #topBar {
  38.   display: flex;
  39.   justify-content: space-around;
  40.   position: fixed;
  41.   top: 0.5rem;
  42.   right: 0.5rem;
  43.   text-align: middle;
  44.   width: 30vw;
  45.   background-color: lightgray;
  46.   padding: 0.5rem;
  47.   border-radius: 1337px;
  48.   text-decoration: none;
  49.   opacity: 0.95;
  50. }
  51.  
  52. #topBar > a {
  53.   text-decoration: none;
  54. }
  55.  
  56. body > section { /* Sections that are a direct childs of body */
  57.   display: flex;
  58.   flex-direction: column; /* Default is row */
  59.   align-items: center; /* Align everything horizontally */
  60.   width: 100vw; /* Set width size, to make align efective */
  61.   background-color: snow;
  62. }
  63.  
  64. body > section > article { /* articles direct childs of sections that are direct childs of body */
  65.   padding: 1rem;
  66. }


Para el generar etiquetas, texto de ejemplo y demás, usé el plugin de emmet para vim (mi editor de texto). Por ejemplo, escribir al escribir el texto p>lorem50,,  se me generaron los <p>50 palabras aleatorias</p>

No utilicé javascript pero te dejé el script de ejemplo.


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