Visualizzazione dei risultati da 1 a 5 su 5

Discussione: allineamento

  1. #1

    allineamento

    salve a tutti, purtroppo è sempre un argomento che mi da filo da torcere: l'allineamento.
    dunque, io ho una foto dentro un boxmodel, praticamente voglio la foto allineata ad un testo alla stessa altezza, invece a me me lo da sotto la foto rispettando i margini che gli do, ma lui mi parte da sotto la foto. Incollo il codice css cosi capiamo meglio tutti:

    codice:
    body {
    background-image: url(http://alessandroleoni.altervista.org/nero_linee.jpg);
    font-family: Trebuchet ms;
    font-size: 11px;
    margin-top: 50px
    }
    
    ul {
    list-style-image: url(../images/point2-li.gif)
    }
    
    #headerlogo {
    background-color: #BBBBBB;
    width: 950px;
    height: 75px;
    border: 1px solid #FFFFFF;
    background-image: url(http://alessandroleoni.altervista.org/header.png);
    margin-top: 20px;
    background-repeat: no-repeat;
    background-position: 99% 14px;
    }
    
    #headerlogotext {
    color: #000000;
    font-family: arial black;
    font-size: 12px;
    margin-top: 25px;
    margin-bottom: 15px;
    margin-left: 10px;
    margin-right: 40px;
    margin-top: 14px;
    text-align: left
    }
    
    #generalcontainer {
    color: #FFFFFF;
    width: 950px;
    border: 1px solid #FFFFFF;
    background-color: #333333;
    }
    
    #generalcontainertext {
    color: #FFFFFF;
    font-family: trebuchet ms;
    font-size: 11px;
    margin-top: 10px;
    margin-bottom: 10px;
    margin-left: 10px;
    margin-right: 10px;
    text-align: justify
    }
    
    #copyright {
    background-color: #BBBBBB;
    width: 950px;
    height: 75px;
    border: 1px solid #FFFFFF
    }
    
    #copyrighttext {
    font-family: trebuchet ms;
    font-size: 10px;
    font-style: italic;
    margin-top: 10px;
    margin-bottom: 10px;
    margin-left: 10px;
    margin-right: 10px;
    text-align: justify
    }
    
    #footer {
    background-color: transparent;
    color: #FFFFFF;
    font-family: courier new;
    font-size: 11px;
    font-weight: bold;
    margin-left: 150px;
    margin-right: 150px;
    }
    
    
    #backgroundmusic {
    background-color:transparent;
    border: 1px solid transparent
    width: 950px
    }
    
    #backgroundmusictext {
    margin-top: 10px;
    margin-bottom: 10px;
    margin-left: 10px;
    margin-right: 10px;
    }
    
    #buttons {
    text-align:left;
    margin-left: 10px;
    margin-top:15px;
    margin-bottom:10px;
    }
    
    #icons {
    margin-left: 154px;
    margin-right: 300px;
    }
    
    #textpresentazione {
    margin-top:10px;
    margin-left:320px;
    margin-bottom:10px;
    margin-right:10px;
    text-align:justify
    }
    
    a.primo:link {
    background: transparent;
    color: #0066FF;
    text-decoration: none
    }
    
    a.primo:visited {
    background: transparent;
    color: #0066FF;
    text-decoration: none
    }
    
    a.primo:hover {
    background: transparent;
    color: #FF5B01;
    text-decoration: underline;
    }
    
    a.primo:active {
    background: transparent;
    color: 0066FF;
    text-decoration: none
    }
    
    a.secondo:link {
    background: transparent;
    color: #0066FF;
    text-decoration:underline
    }
    
    a.secondo:visited {
    background: transparent;
    color: #0066FF;
    text-decoration:underline
    }
    
    a.secondo:hover {
    background: transparent;
    color: #FF5B01;
    text-decoration:underline;
    }
    
    a.secondo:active {
    background: transparent;
    color: #0066FF;
    text-decoration:underline
    }
    facendo partire questo codice noterete l'errore che dico io... grazie a tutti per la collaborazione...

  2. #2
    Manca il codice HTML...
    Comunque prova così:
    - se vuoi l'immagine a sinistra e il testo a destra, inserisci l'immagine prima del testo e assegnale float:left;
    - se vuoi l'immagine a destra e il testo a sinistra, inserisci l'immagine prima del testo e assegnale float:right.
    CODENCODE \ Branding \ Design \ Marketing
    www.codencode.it

  3. #3
    il codice html è questo:

    codice:
    <body>
    <div id="icons">
    <a class="secondo" href="http://www.facebook.com/home.php?#!/profile.php?v=info&ref=profile&id=100000582447036">
    </a> <embed src="http://alessandroleoni.altervista.org/songs/3 -New Age - Tribale Etnica Musica Indiana - Relaxation - Native American - Sioux Indian Flute - Mesa(1).mp3" autostart="true" loop="infinite" height="18px" /> 
    </div>
    <div align="center">
    <div id="headerlogo">
    <div id="buttons">
    <object type="application/x-shockwave-flash" data="http://alessandroleoni.altervista.org/menu.swf" width="700" height="50">
    <param name="movie" value="http://http://alessandroleoni.altervista.org/menu.swf"/>
    </object>
    </div></div></div>
    
    
    <div align="center">
    <div id="generalcontainer"><p id="generalcontainertext">
    
    
    <div id="textpresentazione">
    <font color="#669900"><u><font face="lucida sans unicode">Nome:</font></u></font> Alessandro
    
    <font color="#669900"><u><font face="lucida sans unicode">Cognome:</font></u></font> Leoni
    
    <font color="#669900"><u><font face="lucida sans unicode">Nato:</font></u></font> Roma (RM) il 15 Maggio del 1990
    
    <font color="#669900"><u><font face="lucida sans unicode">Residente:</font></u></font> Roma (RM)
    
    <font color="#669900"><u><font face="lucida sans unicode">Occupazione:</font></u></font> Studente
    
    <font color="#669900"><u><font face="lucida sans unicode">Interessi & Hobby:</font></u></font> Calcio, Fitness, Corsa, fare passeggiate immerso nella natura per osservare gli strani movimenti della fauna con un Ipod ed ascoltare musiche lievi e rilassanti. I miei interessi particolari sono la Programmazione Web e la tecnologia in genere come IPhone, BlackBarry, Ipod, PSP, Wii, Ecc.
    
    <font color="#669900"><u><font face="lucida sans unicode">E-mail Google:</font></u></font> Aless4ndro.Leoni@Gmail.Com
    
    
    </div><div id="normaltext">
    Come avrete notato è un sito web molto semplice, senza grandi integrazioni di linguaggi e/o script particolari. Questa mia idea nasce per ospitare i miei interessi,
    i miei hobby, i miei progetti ma soprattutto la grande passione per la Programmazione Web.
    
    Sono sempre stato un grande appassionato dell'Informatica, sin da piccolo chiedevo ai miei genitori un nuovo PC. Solamente prendendo un po' di dimestichezza e 
    iniziando a capire i meccanismi di questa magnifica tecnologia, riuscì finalmente a scoprire il fantastico e infinito mondo di Internet. Come tutte le passioni, per potersi acculturare il piu' possibile si cerca di dedicargli piu' tempo possibile, ma come dire... tutti lavoriamo e non tutti abbiamo la possibilità di iscriversi a corsi particolari e ad essi dedicati, anche se sarebbe il top per ampliare le nostre capacità. Nel mio caso ho fatto tutto da solo, partendo da 0 e man mano ampliando sempre piu' la mia passione.
    
    Sono un accanito della Programmazione Web, mi piace molto lavorare sugli applicativi Adobe (anche se ormai è il leader dei software per il web, dopo aver inglobato
    la Macromedia), realizzare menu particolari con Fireworks, divertirmi a disegnare layout con Photoshop e altro ancora.
    
    L'immagine in alto è il mio avatar. Lo utilizzo nelle Community, Portali, Msn Messenger, Ecc.
    
    L'ho realizzata io stesso partendo da 0, utilizzando il magico e potentissimo Adobe Photoshop CS4, sovrapponendo 2 immagini differenti, applicando e regolando vari filtri. 
    
    Spero che il sito, anche se piuttosto semplice, sia di vostro gradimento e veniate in molti a trovarmi. Ciao !!!</div></div></div>
    
    <div align="center"><div id="copyright"><p id="copyrighttext">
    Copyright ©2010 - Il materiale contenuto in questo sito è protetto da copyright (siano essi marchi, testi, immagini, file, video,
    musica, o qualsiasi altra cosa inerente al sito) e tutto il codice software, sono di proprietà esclusiva del sito web o dei
    rispettivi proprietari. Non è permesso a terzi di copiare, modificare, ripubblicare o comunque sfruttare qualsivoglia contentuo
    del sito senza un autorizzazione scritta di Alessandro Leoni.
    </p></div></div></div></div></div></div>
    
    <div align="center"><div id="footer">Il layout, il background, il logo, i pulsanti e tutto il codice sorgente è stato realizzato da Alessandro Leoni | Sito web ottimizzato per Mozilla Firefox | Leggi le norme sulla Privacy</div></div>
    </body>
    </html>
    Non conosco quei due comandi css che mi hai detto sopra... mi spiegheresti le loro funzioni ?

  4. #4
    Aggiungi nel foglio di stile l'istruzione
    codice:
    p#generalcontainertext img { 
            float: left; 
    }
    In pratica dice al browser: posiziona a sinistra l'immagine contenuta nel paragrafo #generalcontainertext e fa scrorrere il testo sulla destra.
    CODENCODE \ Branding \ Design \ Marketing
    www.codencode.it

  5. #5
    funziona!!! grazie mille

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.