Problema allineamento di div

**Clyky** · 16-11-2014, 15:27

premetto che ho cercato in lungo e in largo ma continuo a non saltarci fuori.
allora, io devo realizzare una pagina con un menù orizzontale utilizzando i div, inserendo anche un contenuto a piacere (in questo caso ho usato un lorem ipsum).
per il menù nessun problema, ma il blocco del contenuto non riesco a staccarlo dal menù, mi viene un div sopra l'altro in poche parole.
codice html:

codice:

<!DOCTYPE html><html>
    <head>
        <title> Menu orizzontale </title>
        <link
            rel = "stylesheet"
            type = "text/css"
            href = "style.css"
        />
    </head>
    
    <body>
        <div
            id = "container"
        >
            <div class = "cella"> Prima Voce </div>
            <div class = "cella"> Seconda Voce </div>
            <div class = "cella"> Terza Voce </div>
            <div class = "cella"> Quarta Voce </div>
            <div class = "cella"> Quinta Voce </div>
        </div>
        <div
            id = "content"
        >
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce vel lorem in nisl sodales vehicula. Aliquam eleifend accumsan lectus sit amet lobortis. Duis iaculis tortor sed metus interdum dignissim. Maecenas ultrices 
            scelerisque dignissim. Cras nulla dui, finibus sit amet lorem ac, fermentum consequat neque. Aenean eget laoreet urna. Proin ac tincidunt turpis. Integer dignissim turpis augue, non faucibus elit molestie quis. 
            Suspendisse posuere magna non lorem finibus, vitae sagittis dolor feugiat. Proin malesuada mi velit, sed viverra justo consequat a. Duis dignissim venenatis sapien ac molestie.
        </div>
    </body>
</html>

css:

codice:

html{
    width: 100%;
    height: 100%;
    position: absolute;
    border: 3px solid red;
}


div#container
{
    border-top: 1px solid black;
    border-bottom: 1px solid black;
    position: absolute;
    max-width: 100%;
    top: 0;
    left: 0;
    right: 0;
    padding-left: 35%;
}


div.cella
{
    float: left;
    margin: 10px;
    text-decoration: underline;
    font-weight: bold;
}


div#content
{
    display: block;
    border: 4px solid green;
}

p.s.: non posso distanziare tramite misure in px (ad esempio non posso fare position: absolute e top: 200px per staccarli).

**Tyrianad** · 19-11-2014, 12:52

Non mi è chiarissimo l'utilizzo del posizionamento assoluto. Personalmente per ottenere quanto indichi, e basandomi su una modifica veloce del tuo codice userei questo (stile e html sono tutti nella stessa pagina):

codice:

<!DOCTYPE html><html>
<head>
  <title> Menu orizzontale </title>
  <style>
    html{
      width: 100%;
      height: 100%;
      border: 3px solid red;
    }


    div#container
    {
      border-top: 1px solid black;
      border-bottom: 1px solid black;
      width:100%;
    }

    #menu{
      float:right;
    }
    div.cella
    {
      float:left;
      margin: 10px;
      text-decoration: underline;
      font-weight: bold;

    }


    div#content
    {
      clear:both;
      width:100%;
      border: 4px solid green;
    }
  </style>
</head>

<body>
  <div
       id = "container"
       >
    <div id="menu">
      <div class = "cella"> Prima Voce </div>
      <div class = "cella"> Seconda Voce </div>
      <div class = "cella"> Terza Voce </div>
      <div class = "cella"> Quarta Voce </div>
      <div class = "cella"> Quinta Voce </div>
    </div>
  </div>
  <div
       id = "content"
       >
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce vel lorem in nisl sodales vehicula. Aliquam eleifend accumsan lectus sit amet lobortis. Duis iaculis tortor sed metus interdum dignissim. Maecenas ultrices 
    scelerisque dignissim. Cras nulla dui, finibus sit amet lorem ac, fermentum consequat neque. Aenean eget laoreet urna. Proin ac tincidunt turpis. Integer dignissim turpis augue, non faucibus elit molestie quis. 
    Suspendisse posuere magna non lorem finibus, vitae sagittis dolor feugiat. Proin malesuada mi velit, sed viverra justo consequat a. Duis dignissim venenatis sapien ac molestie.
  </div>
</body>
</html>

È corretta la mia interpretazione del tuo problema?

Discussione: Problema allineamento di div

Strumenti discussione

Ricerca discussione

Visualizza

Problema allineamento di div

Permessi di invio