Visualizzazione dei risultati da 1 a 8 su 8

Discussione: Allineamento menu

  1. #1

    Allineamento menu

    Ciao, come posso fare per allineare il menu a sx accanto al div content che si veda attaccato per bene a tutte le risoluzioni? Io ho messo i margini a 0 e il float left ma su un computer si vede tutto a sx e su un'altro sopra il content. Come faccio? Il sito è questo: www.webalice.it/fragola81 (è da finire).

    HTML

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
    <html xml:lang="it" xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"
    <title>.::PinkBetta::.</title>
    <link rel="stylesheet" type="text/css" href="style.css" media="screen">
    <script language="JavaScript" src="Contatore/conta.asp"></SCRIPT>

    </head>
    <body>

    <div id="container">
    <div id="header">
    </div>
    <div id="menu">
    1. Home
    2. Foto ritoccate
    3. Foto varie

    4. Acquario
    5. Video acquario
    6. Foto acquario
    7. Link

    </div>
    <div id="content">

    <h3>Ciao,</h3>


    mi chiamo Silvia e sono appassionata di computer, in modo particolare di
    grafica digitale, e di animali, soprattutto dei pesci tropicali
    d'acqua dolce sudamericani e asiatici (i miei beniamini sono gli appartenenti alle famiglie
    dei callittidi e degli anabantidi). Ho realizzato questo sito dove ho inserito
    le foto del mio acquario e varie foto che ho fatto in giro e a casa mia a luoghi, oggetti o
    animali che mi sembravano interessanti. Non sono una brava fotografa ma la mia
    intenzione è quella di avere un ricordo di ciò che trovo interessante. Altre mie passioni
    sono le conchiglie (di cui ho una collezione, le mie preferite sono le Xenophora sp.), la
    musica (se vi interessa ho realizzato questo sito quasi interamente con la musica
    di Renato Zero di sottofondo) e andare a giro, quando posso a manifestazioni
    ed eventi riguardanti pesci, computer e non solo.




    Per realizzare questo sito ho usato il codice HTML e mi sono servita dei CSS per l'aspetto
    grafico, in modo da realizzarlo senza l'uso di tabelle per l'impaginazione, ed ho
    ripreso sul web gli script per l'effetto LightBox2 sugli ingrandimenti delle
    immagini. Ho scritto quasi tutto il codice HTML e CSS senza l'uso di particolari programmi, ma usando per lo
    più un comunissimo editor di testo.</p>


    Vi lascio alla visita sul sito, ciao!</p>
    [img]varieimg/barra.gif[/img]


    </p>
    [img]varieimg/vasi.gif[/img]

    [img]varieimg/color.gif[/img]
    [img]varieimg/rosso.gif[/img]
    </div>
    </p>
    <div id="footer">
    </div>
    </div>
    </body>
    </html>


    CSS

    /*Css Document - Design by PinkBetta*/

    body {
    font-family:Times New Roman, Verdana;
    background-image:url(varieimg/muro5.jpg);
    background-position:center;
    margin-bottom:0px;
    margin-left:0px;
    margin-right:0px;
    margin-top:10px;
    text-align:center;
    }

    #container {
    margin:0px auto;
    text-align:left;
    background-image:url(varieimg/back.gif);
    background-position:center;
    background-repeat:repeat-y;
    }


    h3 {
    text-align:center;
    font-style:italic;

    }

    h4 {
    text-align:left;
    padding:0px 0px;
    font-size:15px;
    line-height:1px;
    font-style:italic;
    }


    p {
    text-align:left;

    }

    img {
    border: none;
    }


    #header {
    background-image:url(varieimg/header.jpg);
    width:800px;
    height:210px;
    background-repeat:no-repeat;
    background-position:center;
    margin:0px auto;
    }

    #menu {
    width:200px;
    height:auto;
    margin:0px auto;
    padding-top:30px;
    padding-bottom:20px;
    text-align:left;
    float:left;
    background-image:url(varieimg/backmenu.gif);
    background-repeat:no-repeat;
    background-position:center;

    }


    #menu ol{

    list-style-type:none;
    list-style positionutside;

    }

    #menu ol li a{

    text-decoration:none;
    font-size:16px;
    color:#FF0099;
    font-style:italic;
    font-weight:bold;
    letter-spacing:3px;

    }

    #menu a:hover {

    color:white;
    background-color:#f0bbff;
    }


    #menuacqua ul li {

    text-decoration:none;
    color:black;

    }


    #content {

    overflow:auto;
    width:600px;
    height:auto;
    margin:0px 0px 0px 0px;
    text-align:center;

    }

    #gallery {

    text-align:center;

    }


    #footer {

    background-image:url(varieimg/footer.jpg);
    background-position:right;
    background-repeat:no-repeat;
    width:700px;
    height:35px;
    clear:both;
    margin:0px auto;

    }

    Grazie!

  2. #2
    prova a mettere float:left;
    anche al div content, dovrebbe accodarsi al menu.

  3. #3
    Ho provato ma mi si sovrappone sempre al div content anche così, almeno qua su FF.

  4. #4
    Pensavo, non c'è un modo di fare tipo le tabelle che (mi sembra se mi ricordo bene) si faceva margin collapse?

  5. #5
    fare le tabelle sarebbe un passo indietro e sarebbe un peccato.
    prova a togliere la proprietà overflow a content e se ancora non funzionasse metti float:right,
    sempre al content naturalmente.
    cmq, io ho ff 3 e lo vedo bene.

  6. #6
    Macchè, io qua lo vedo sempre sovrapposto! Sull'altro computer invece lo vedo anche troppo spostato a sx. Ma te come lo vedi? Bello allineato o a sx?

    Intanto grazie dei consigli

  7. #7
    Temo di averti capito solo adesso..
    Io ti dicevo che li vedevo allineati ma intendevo i div, non i div con il background.
    Se è questo il problema dovresti diminuire la width del menu, prova 190px o giù di lì.

    Però avrai sempre problemi perchè ogni pc, o quasi è diverso. Per metterlo a posto bene dovresti ridisegnare un po tutto il layout purtroppo, iniziando a scegliere se dare al tutto dimensioni fisse o in percentuale. Non ci sono regole ma ad esempio farei il container generale largo 768(è una misura standard, meglio di 800px), con all'interno l'header largo 100% e l'immagine allineata a destra ma con i bordi come lo sfondo. sotto metti il menu (float a sx) e il content (float a dx). infine metti lo sfondo con il bordo dentro content. Probabilmente ho dimenticato qualcosa ma è tutto buttato lì al volo, vedrai poi tu.

    Semmai prova a dare al layout attuale border: 1px solid #f00; a menu, header, container e content prendi il lato in basso a destra della finestra del browser e prova a stringere e allargare a caso, vedrai i pezzi che volaranno liberi e penso capirai meglio cosa intendo. poi vedi tu.

  8. #8
    Forse mi ero spiegata male io, scusami.

    Adesso faccio un pò di prove, grazie!

Permessi di invio

  • Non puoi inserire discussioni
  • Non puoi inserire repliche
  • Non puoi inserire allegati
  • Non puoi modificare i tuoi messaggi
  •  
Powered by vBulletin® Version 4.2.1
Copyright © 2026 vBulletin Solutions, Inc. All rights reserved.