contenitore div troppo piccolo

**MoUsE_** · 03-11-2016, 11:29

Ciao ragazzi
ho letto diverse discussioni e ho risolto molti problemi e vi ringrazio
ora ho questo gruccio da risolvere e non ho idea di come fare
ho una tabella con molte colonne e l'ho messa in un div "contenitore" per aver i bordi arrotondati
ma il risultato non è quello sperato ovvero su pc che ho monitor grande vedo bene su pc con monitor piccoli o dal smartphone la tabella esce dal contenitore
allego un esempio di come appare
ora non pretendo la pappa pronta ma se potreste almeno darmi la giusta direzione poi faccio tutte le prove del caso, sono nuovo per l'utilizzo dei css questa è la prima volta.

sul file html ho scritto

codice:

<div id=contenitore90>
  <table>
    <tr> 
      <td>
      </td>
    </tr>
  </table>
</div>

e ho creato un css con il contenitore

codice:

#contenitore90 {
background-image: linear-gradient(to right, #707070 0%, #A6A6A6 20%, #C0C0C0 40%, #EEEEEE 100%);
width:90%;
color:#000000;
font-size:12px;
padding:8px;
border-radius: 30px 30px 12px 60px;
-moz-border-radius: 30px 30px 12px 60px;
-webkit-border-radius: 30px 30px 12px 60px;
border: 8px groove #707070;
-webkit-box-shadow: 10px 10px 17px 3px rgba(0,0,0,0.75);
-moz-box-shadow: 10px 10px 17px 3px rgba(0,0,0,0.75);
box-shadow: 10px 10px 17px 3px rgba(0,0,0,0.75);
margin-bottom: 15px;
}

trasbordo.png

**stoneweb** · 03-11-2016, 15:46

Probabilmente è un problema di contenuto.
Potresti mettere l'immagine più grande? Perché così non si capisce molto bene.

**MoUsE_** · 03-11-2016, 17:22

Certo le metto qui così non ci sono limiti di dimensione
come si vede su monitor grandi

come si vede su monitor piccoli o smartphone

Ho provato anche con
overflow-x: auto;
che seppur in modo poco elegante aggira il problema ma non su smartphone, ma non mi piace il risultato, preferisco esca verso destra piuttosto.

**KillerWorm** · 03-11-2016, 20:51

Ciao e benvenuto.

Potresti risolvere impostando il div come inline-block, vedi qui:
http://stackoverflow.com/questions/4...n-its-contents

Nel tuo caso dovresti però eliminare quel width:90%; .. quindi il div si ridurrebbe in base al contenuto. Vedi se per te può comunque andare bene.

[Mod]
Quando posti dei blocchi di codice sul forum è opportuno utilizzare gli appositi tag di formattazione (vedi indicazioni in fondo al regolamento di sezione). Grazie.
Per questa volta ho provveduto io

EDIT:
puoi risolvere anche con display:table sul div (vedi sempre su quel link) e in questo caso dovrebbe essere possibile anche definire width

**MoUsE_** · 04-11-2016, 12:12

Grazie KillerWorm
ora la tabella viene sempre contenuta nel div
però ho questo nuovo problema
non potendo dare una grandezza ad esempio 90% che poi io con un banale <center> lascaiavo sempre dello spazio a sinistra
spazi che viene occupato dal menu come si vede nelle immagini
ora però la tabella occupa tutt ala pagina e il div con lei finendo sotto al menu di sinistra che è "bloccato" anche nello scroll
come posso obbligare al div di stare lontano dal bordo sinistro ad esempio di 20px?
purtroppo i comandi

codice:

top: 10px;
   right: 0px;
   bottom: auto;
   left: 20px;

non mi sposta a destra nulla
potrebbe essere per i contenuti troppo larghi?

**KillerWorm** · 05-11-2016, 02:04

non potendo dare una grandezza ad esempio 90%

Vedi l'edit sul mio precedente post. Con display:table sul div, puoi anche impostargli una larghezza. Puoi quindi definire una larghezza del 90%, come hai fatto inizialmente e lasciare il rimanente 10% sul margine sinistro. Oppure Con qualche accorgimento puoi definire il margine con un tot esatto di px.

Qui un esempio completo:

codice:

<!DOCTYPE HTML>
<html>
  <head>
    <title>Esempio</title>
    <meta charset="utf-8">
    <style type="text/css">
      html,body{
        margin: 0;
        padding: 0;
      }
      #contenitore90 {
        display:table;
        width: calc(100% - 20px);
        margin: 10px 0 0 20px;
        padding: 8px;
        box-sizing: border-box;
        border-radius: 30px 30px 12px 60px;
        border: 8px groove #707070;
      }
    </style>
  </head>
  <body>
    <div id="contenitore90">
      <table>
        <tr>
          <td>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
            <br>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
            <br>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
            <br>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
          </td>
        </tr>
      </table>
    </div>
  </body>
</html>

In particolare vedi l'uso della funzione calc() sulla proprietà width, dove dal 100% ho tolto 20px. Quei 20px sono quindi impostati sul margine sinistro, nella riga sotto.

Se poi vuoi lasciare la larghezza automatica e centrare il div, è un altro discorso.

Se devi usare le proprietà top, bottom, right, left, ti servirà definire anche la proprietà position.

Ad ogni modo, per approfondire lo studio su tali argomenti, ti invito a dare uno sguardo tra i link utili CSS. Al capitolo 2 trovi nozioni sul posizionamento degli elementi; al cpitolo 8 l'uso della funzione calc(); .. se poi vuoi dare uno sguardo anche al resto, sicuramente non fai male

**MoUsE_** · 16-11-2016, 15:42

Non sono ancora riuscito ad ottenere il risultato voluto,
tuttavia conquest'ultimo metodo almeno il testo non finisce sotto il "menu"
devo studiare e provare ancora un bel po'.
Grazie

Discussione: contenitore div troppo piccolo

Strumenti discussione

Ricerca discussione

Visualizza

contenitore div troppo piccolo

Permessi di invio