posizionare 4 div

**dannos** · 27-09-2015, 14:32

Salve ragazzi devo posizionare 4 div 2 sopra e 2 sotto , sono alle prime armi e nn riesco a capire come fare vi posto il codice

codice HTML:

 [...]
         <div id="App1" class="App1"> app1 </div>
         <div id="App2" class="App2"> app2 </div>
         <div id="App3" class="App3"> app3 </div>
         <div id="App4" class="App4"> app4 </div>
[...]

codice:

.App1{
    
         border: thin solid;
      border-color: yellowgreen; 
      width: 15%;
      height:25%;
      margin-left: 5%;
      margin-right: :5%;
      margin-top: 6%; 
      float: left;     
      border-radius: 10px; auto; 
       
}




.App2{
       
       border: thin solid;
       border-color: bisque;
    
       width: 15%;
       height:25%; 
       margin-right: :5%;
       margin-left: 5%;
       margin-top: 6%; 
       float: left;
       border-radius: 10px; auto;
 
}

.App3{
       position: static;
       border: thin solid;
       border-color: beige;     
       width: 15%;
       height:25%;
       margin-right: 5%;
       margin-left: 5%;
       margin-top: 6%;  
       float: left;
       border-radius: 10px; auto;
}



.App4{
      
       border: thin solid;
       border-color: black;
 
       width: 15%;
       height:25%;
       margin-left: 5%;
       margin-top: 6%;  
       float: left;
       border-radius: 10px; auto;
       
}

cosi sono posizionati uno di seguito all'altro devo fare scendere app3 e app4 in questo modo:

app1 app2

app3 app4

spero di aver reso l'idea

**carlomarangoni** · 27-09-2015, 15:14

inanzitutto mai nomi di classi con lettere maiuscole!!
Se usi id nel css devi mettere "#" non "."

codice:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento senza titolo</title>
<style>
#app1{
    
         border: solid;
      border-color: yellowgreen; 
      width: 15%;
      height:25%;
      margin-left: 5%;
      margin-right: :5%;
      margin-top: 6%; 
      float: left;     
      border-radius: 10px; auto; 
       
}




#app2{
       
       border: solid;
       border-color: bisque;
    
       width: 15%;
       height:25%; 
       margin-right: :5%;
       margin-left: 5%;
       margin-top: 6%; 
       float: left;
       border-radius: 10px; auto;
 
}

#app3{
       border: solid;
       border-color: beige;     
       width: 15%;
       height:25%;
       margin-right: 5%;
       margin-left: 5%;
       margin-top: 6%;  
       float: left;
       border-radius: 10px; auto;
}



#app4{
      
       border: solid;
       border-color: black;
 
       width: 15%;
       height:25%;
       margin-left: 5%;
       margin-top: 6%;  
       float: left;
       border-radius: 10px; auto;
}
</style>
</head>

<body>
<div id="app1" class="App1"> app1 </div>
<div id="app2" class="App2"> app2 </div>
<div style="clear:both">&nbsp;</div>
<div id="app3" class="App3"> app3 </div>
<div id="app4" class="App4"> app4 </div>

</body>
</html>

**dannos** · 27-09-2015, 15:23

Ciao carlo grazie per la risposta nel div uso l'id perchè ci sta una funzione jquery che però nn ho postato e quindi vado a usare le classi per il css....

RISOLTO

**carlomarangoni** · 27-09-2015, 16:03

Se usi gli ID nei div devi usare gli id anche nel css. Non può funzionare se usi uno da una parte e un'altro dall'altra parte!
Hai risolto Come?

Discussione: posizionare 4 div

Strumenti discussione

Ricerca discussione

Visualizza

posizionare 4 div

Permessi di invio