CSS Consiglio per il codice (html&css)

Dinux98 · 25 Luglio 2016

ragazzi, ho appena scritto queste righe di codice :

CSS:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">

  <title>prova flex</title>
  <style type="text/css">
    
      *{margin:0px;padding:0px;background-color:#fff}
    
      header{display:flex;flex-direction:row;flex-wrap:wrap;width:80%;height:200px;margin:auto;background-color:#f2f2f2;}
    
      nav{display:flex;flex-direction:row;flex-wrap:wrap;width:80%;height:80px;margin:auto;background-color:#111;}
    
      .cont_aside{display:flex;flex-direction:row;flex-wrap:wrap;justify-content:stretch;width:80%;height:250px;margin:auto;}
      #aside1{background-color:#e62e00;flex-grow:1;order:1;}
      #aside1:hover{background-color:rgba(255,92,51,0.9);}
      #aside2{background-color:#262626;flex-grow:1;order:2;}
      #aside2:hover{background-color:#333;}
      #aside3{background-color:#005ce6;flex-grow:1;order:3;}
      #aside3:hover{background-color:rgba(77,166,255,0.9);}
      #aside4{background-color:#262626;flex-grow:1;order:4;}
      #aside4:hover{background-color:#333;}

    
    
      section{display:flex;flex-direction:row;flex-wrap:wrap;width:80%;height:700px;margin:auto;background-color:#f2f2f2;}
    
      footer{display:flex;flex-direction:row;flex-wrap:wrap;width:80%;height:80px;margin:auto;background-color:#222;}
    
      @media (max-width:728px){}
    
    
</style>

</head>

<body>
  
    <header></header>
    <nav></nav>
    <div class="cont_aside">
    <aside id="aside1"></aside>
    <aside id="aside2"></aside>
    <aside id="aside3"></aside>
    <aside id="aside4"></aside>
    </div>
    <section></section>
    <footer></footer>
</body>

</html>

ora vorrei far andare a capo l'aside 3 e l'aside 4 quando lo schermo diventa troppo piccolo ma non saprei come fare, usando @media (max-width:1025px){} non ho idea di come farlo, potete darmi una mano ???

Alexsims · 26 Luglio 2016

<BR> il più semplice; interrompe la linea, andando a capo comunque e senza saltare linee.
<P>...</P> definisce inizio e fine di un paragrafo; tra un paragrafo e l'altro salta due righe eseguendo quindi un a capo doppio; il paragrafo potrà essere allineato a destra, sinistra o giustificato secondo il parametro opzionale ALIGN; p.es. <P ALIGN=Left> allinea a sinistra; soluzione ancor migliore è quella di usare gli stili e i fogli di stile (vedi oltre).
<DIV>...</DIV> definisce inizio e fine di una divisione di testo; l'unica differenza apprezzabile con il precedente sta nel fatto che tra una divisione e la successiva viene eseguito un solo a capo. Questo tag serve comunque principalmente in unione con i fogli di stile (vedi oltre). Il suo uso è in genere da preferirsi a quello del semplice <BR>

Utile poi per separare due parti di testo è il tag <HR> (horizontal rule) che traccia una riga orizzontale che copre tutta la pagina.

In alternativa si può usare il tag PRE che consente di inserire testo già formattato (con a capo, tabulazioni ...) in una pagina HTML.

Dinux98 · 26 Luglio 2016

grazie per averci provato, comunque non importa, ho spremuto le meningi e ho capito come fare....

CSS:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">

  <title>prova flex</title>
  <style type="text/css">
     
      *{margin:0px;padding:0px;background-color:#fff}
     
      header{width:80%;height:200px;margin:auto;background-color:#f2f2f2;}
     
      nav{display:flex;flex-direction:row;flex-wrap:wrap;width:80%;height:80px;margin:auto;background-color:#111;}
     
      .cont_aside{display:flex;flex-direction:row;flex-wrap:wrap;justify-content:stretch;width:40%;height:250px;margin:auto;float:left;margin-left:10%;}
      .cont_aside1{display:flex;flex-direction:row;flex-wrap:wrap;justify-content:stretch;width:40%;height:250px;margin:auto;float:left;min-width:300px;}
      #aside1{background-color:#e62e00;flex-grow:1;order:1;}
      #aside1:hover{background-color:rgba(255,92,51,0.9);}
      #aside2{background-color:#262626;flex-grow:1;order:2;}
      #aside2:hover{background-color:#333;}
      #aside3{background-color:#005ce6;flex-grow:1;order:3;}
      #aside3:hover{background-color:rgba(77,166,255,0.9);}
      #aside4{background-color:#262626;flex-grow:1;order:4;}
      #aside4:hover{background-color:#333;}

     
     
      section{display:flex;flex-direction:row;flex-wrap:wrap;width:80%;height:700px;margin:auto;background-color:#f2f2f2;}
     
      footer{display:flex;flex-direction:row;flex-wrap:wrap;width:80%;height:80px;margin:auto;background-color:#222;}
     
      @media (max-width:1025px){
          body{background-color:red;} /*da eliminare*/
          .cont_aside{display:flex;flex-direction:row;flex-wrap:wrap;justify-content:stretch;width:80%;height:250px;margin:auto;float:left;margin-left:10%;}
          .cont_aside1{display:flex;flex-direction:row;flex-wrap:wrap;justify-content:stretch;width:80%;height:250px;margin:auto;float:left;min-width:300px;margin-left:10%;}
          #aside3{background-color:#005ce6;flex-grow:1;order:4;}
          #aside3:hover{background-color:rgba(77,166,255,0.9);}
          #aside4{background-color:#262626;flex-grow:1;order:3;}
          #aside4:hover{background-color:#333;}

      }
     
     
</style>
 
</head>

<body>
   
    <header></header>
    <nav></nav>
    <div class="cont_aside">
        <aside id="aside1"></aside>
        <aside id="aside2"></aside>
    </div>
    <div class="cont_aside1">
        <aside id="aside3"></aside>
        <aside id="aside4"></aside>
    </div>
   
   
   
    <section></section>
    <footer></footer>
</body>

</html>

( la discussione può anche essere chiusa )

Cerca

CSS Consiglio per il codice (html&css)

Dinux98

Alexsims

Dinux98

DISCUSSIONI SIMILI