• L
    User •

    link affiancati

    Continuo ad avere problemi nell'affiancare i div... lo spazio c'è ma mi vanno inesorabilmente tutti a capo. in poche parole ho un div principale che deve contenere affiancati due a due altri div più piccoli che devono stare centrati a due a due. questi div più piccoli avranno uno sfondo ed al loro centro un collegamento... ma questi si mettono tutti uno sotto l'altro anche se hanno tutto lo spazio per stare... il codice è generato dinamicamente ma non riesco comunque a metterli belli in fila. lse metto immagini al posto dei div invece sono perfette ,in fila per 2. non sono un'esperto di html ma sta cosa proprio non la capisco.... mi sapete illuminare? il codice viene fuori così :

     
<div id="Foto" style="position:relative; margin-left:300px; width:700px; left: 0px; top: 0px;">
<p>Foto</p><br/>
<div><a href=FotoPage.aspx?aspalang=ita&fotopath=images%5cFoto%5cFulmini#albero>FULMINI</a></div>
<div><a href=FotoPage.aspx?aspalang=ita&fotopath=images%5cFoto%5cModellismo#albero>MODELLISMO</a></div><br/>
<div><a href=FotoPage.aspx?aspalang=ita&fotopath=images%5cFoto%5cMontagne#albero>MONTAGNE</a></div>
<div><a href=FotoPage.aspx?aspalang=ita&fotopath=images%5cFoto%5cMonumenti#albero>MONUMENTI</a></div><br/>
<div><a href=FotoPage.aspx?aspalang=ita&fotopath=images%5cFoto%5cNatura#albero>NATURA</a></div>
<div><a href=FotoPage.aspx?aspalang=ita&fotopath=images%5cFoto%5cTecnologia#albero>TECNOLOGIA</a></div><br/>

    i div contenuti hanno un width:300px come da file css... e li vedo effettivamente grandi giusti.

    Grazie

    0
  • shad
    Moderatore •

    I div sono contenitori molto simili ai paragrafi per quanto riguarda l'impaginazione quindi andranno sempre a capo ad ogni chiusura.

    La soluzione? Usa una tabella nascosta per impaginarli e vedrai che puoi affiancare quel che ti pare 😉

    0
  • L
    User •

    Funziona alla grandissima!!! Grazie 1000!!! Ma posso usare questo "trucco" al posto dei div come e quando voglio... o devo fare un'importante divisione logica che mi sfugge.... Grazie ancora

    0
  • shad
    Moderatore •

    Dipende da quello che devi fare. Potresti avere la necessità di tenere i div se usi i css e hai impaginazioni particolari per questi. Altrimenti puoi anche farli fuori e usare solo le tabelle ^^

    0
  • P
    Super User •

    Ciao, LiquidFly

    il consiglio delle tabelle serve poco (scusa Shad). Ricorda che un sito fatto con le tabelle per impaginare i testi non risulterà MAI accessibile.
    Con i DIV tutto è possibile. Per affiancare i DIV devi semplicemente impostarli con i "float".
    Qui, qui e in mille altri articoli facilmente reperibili su GOOGLE, ci sono tutte le spiegazioni del caso.
    Credimi, non è affatto difficile e così facendo avrai un sito iniziato con buoni propositi...

    :ciauz:

    P.S. se hai bisogno, siamo qui... chiedi pure.

    0
  • shad
    Moderatore •

    @Paola_mi said:

    (scusa Shad)
    Figurati, non ho tirato dentro i CSS perchè mi sembravano un pò troppo avanzati per il momento e non volevo incasinarlo con troppa roba da imparare.

    Per quanto riguarda l'usabilità di un sito fatto con le tabelle non sono d'accordo. Si possono avere ottimi risultati in termini di usabilità, basta sapersi muovere. Ovviamente con i CSS (o cmq con i fogli di stile combinati alle tabelle) si ottengono risultati migliori, ma anche solo con le care e vecchie tabelline non ci si può lamentare...in fin dei conti abbiamo tutti iniziato con le tabelline
    2 x 1 = 2
    2 x 2 = 4
    ...
    :lol:

    0
  • P
    Super User •

    @Shad said:

    Si possono avere ottimi risultati in termini di usabilità, basta sapersi muovere.

    E per chi non si sa muovere?
    Prova a scaricarti un lettore di codice per non vedenti e "ascolta" un sito zeppo di tabelle...
    Le tabelle nel web, come in tutto il resto, devono essere utilizzato per impaginare dati numerici, appunto.
    Per i testi esistono i DIV, perché utilizzare una cosa che non è stata creata allo scopo?

    0
  • shad
    Moderatore •

    Fermi tutti, sarà ignoranza mia ma parlavamo di usabilità, non di accessibilità.

    L'accessibilità di un sito è appunto, la capacità di essere letto dal maggior numero di utenti possibili, anche nel caso quest'ultimi abbiano qualche tipo di problema.

    L'usabilità è invece la capacità di far sentire l'utente supportato durante la navigazione, con un menu sempre presente in una determinata posizione, con un'impaginazione uguale per ogni pagina, ecc.
    Insomma l'obiettivo non diventa essere visibili a tutti, ma assicurarsi che quelli che accedono al sito non si perdano in esso, e sappiano sempre dove sono e dove possono arrivare con il minor numero di clic.

    Sul discorso dell'accessibilità sono d'accordo con te. Indubbiamente i DIV hanno effetti migliori delle tabelle, ma in una politica di apprendimento per gradi conviene imparare prima a fare siti ben impaginati, usando le tabelle dato che le puoi fisicamente vedere, e poi passare a strumenti più avanzati come i DIV+CSS.
    Lo dico per esperienza. Formo webmaster in vari tipi di corsi di formazione, e ti assicuro che se parto a spiegare le impaginazioni con i DIV gli incasino solo il cervello 😄
    Sarà una soluzione drastica ma ad un primo impatto, per l'imparare ad impaginare è meglio accantonare per un secondo i problemi che si possono avere con utenti non vedenti o daltonici, e affrontare il problema successivamente avendo ormai padronanza degli strumenti base. Poi magari sbaglierò, ma in questo modo di solito riesco a formare webmaster decenti, almeno spero...

    0
  • P
    Super User •

    Scusa...
    non so che genere di formazione dài... ma imparare per imparare trovo assurdo insegnare a qualcuno prima la maniera sbagliata e poi, col tempo, quella giusta.
    Dicevo, appunto, imparare per imparare è meglio imparare direttamente le cose giuste.
    Non è che quando vai a scuola ti insegnano a scrivere "squola" perché... boh? e poi, col tempo, ti insegneranno anche a scrivere "scuola" correttamente.
    Non capisco dove sia il problema di imparare DA SUBITO a lavorare in maniera corretta.

    :ciauz:

    P.S.: io ho parlato, sin dall'inizio, di accessibilità:

    il consiglio delle tabelle serve poco (scusa Shad). Ricorda che un sito fatto con le tabelle per impaginare i testi non risulterà MAI accessibile.

    0
  • shad
    Moderatore •

    Io non insegno, usando il tuo esempio, a scrivere sQuola per poi correggere il difetto. Bensì insegno prima come fare l'elevazione a potenza e poi la radice quadrata. Li porto per gradi insomma e, credimi, non sono tutti così intelligenti (con tutto il rispetto nel caso qualche mio discente legga queste righe). Molti hanno già grandissime difficoltà ad apprendere il semplice HTML, e non potrebbero mai capire anche i CSS in contemporanea.
    Considera che non tutti sono appassionati come noi, e che molti seguono un corso di formazione per webmaster "per capire come si fanno siti internet". Insomma tutto va contestualizzato. Ovvio che quando faccio un corso di webmaster di II o III liv spiego argomenti avanzati e presuppongo che il resto sia noto, ma all'inizio devo assicurarmi che siano capite le basi...e i CSS, per quanto a noi possono sembrare "di base", non riesci a farli rientrare in un corso di 80 ore dove spesso la gente ha difficoltà anche solo a capire l'HTML. Ci ho provato a mettere da subito i CSS e non è andata affatto bene.
    Molto più efficace è usare le tabelle per fargli disegnare l'impaginazione e fargli capire i concetti di base, avvisandoli che in realtà quelle impaginazioni si fanno con strumenti diversi e più avanzati ma che per ora è meglio far così in modo da rendersi conto di quello che si crea.
    Il tutto fermo restando che se ci sai fare anche solo con le tabelle puoi ottenere ottimi siti.

    Discorso accessibilità/usabilità: errore mio, nel primo post avevo letto usabilità al posto di accessibilità e poi ognuno parlava della sua cosa andando per fatti suoi. Sorry XD

    0
  • G
    User •

    Togli i tag
    [HTML]<br>[/HTML]
    sono quelli che fanno andare a capo...;)

    0
  • L
    User •

    Dunque... leggo solo ora tutto il putiferio scatenato... non voglio entrare in merito alla vostra discussione anche se anche io sono un'insegnate di software ma fortunatamente non di html... per quanto riguarda me ho scritto che il codice viene generato dinamicamente quindi non sono proprio all'inizio (credo) anche se non conosco ancora a fondo l'html. Effettivamente ho parecchie lacune come quelli che vogliono imparare da autodidatti cercando di fare cose difficili e non sanno le banalità (sono io!).
    Per quanto riguarda i div e css già li uso anche perchè non usarli in una pagina dinamica vuol dire scrivere una marea di codice. Credo che l'unica conoscenza che mi mancava sono questi "floaf" che dopo cena proverò a mettere in pratica...
    Con le tabelle effettivamente ho risolto con semplicità il mio problema ma era effettivamente mia prima intenzione usare i div come in tutto il resto del sito.
    Per quanto riguarda i </br> be... non li ho messi... 😉

    PS: Che dite... era meglio fare un corso di html prima di scrivere pagine dinamiche???

    0
  • L
    User •

    Ho provato con il float.... la parte gestita in precedenza dalla tabella funziona bene ,ma ora le foto che seguono fanno quel che vogliono.
    questa pagina sembra una coperta corta! Aggiusto di qui e va a pallino di la... aiuto!

    Ora... il mio codice è questo:

     <div id="Foto">
  <h1>Tecnologia</h1>
  <div id=sottocart>
   <div style=float:left;>
    <a href=FotoPage.aspx?aspalang=ita&fotopath=images%5cFoto%5cTecnologia%5cFuochi+d'artificio#albero>FUOCHI D'ARTIFICIO</a>
   </div>
  </div>
  <hr/>
  <div id=listafoto>
   <img src="..\images\Foto\Tecnologia\PICT0742.png"/>
   <img src="..\images\Foto\Tecnologia\PICT1287.png"/>
   <img src="..\images\Foto\Tecnologia\PICT1310.png"/>
   <img src="..\images\Foto\Tecnologia\PICT2642.png"/>
  </div>
 </div>

    ed il css dice questo:

     
#Foto {
position:relative; 
margin-left:300px; 
width:700px; 
left: 0px; 
top: 0px;
} img {
border-style:outset; 
border-width:thick; 
border-color:white ;
margin:15px;
} h1 {
color:White;
font: tahoma;
font-size:34px;
text-align:center;
text-decoration:underline;
text-transform:uppercase;
} p {
color:White;
font: Arial;
font-size:20px;
text-align:center;
text-decoration:none;
color:#FF9900;
text-transform:uppercase;
} a {
color: rgb(255,255,255);
font-family: tahoma;
font-size:24px;
text-align:center;
vertical-align:middle;
}
#sottocart div {
width:300px;
height:50px;
text-align:center;
vertical-align:middle;
background-image: url(images/SfondoSottocart.png);
background-repeat:repeat;
margin:15px;
border-style:solid;
border-color:White;
border-width:1px;
}
#listafoto {
position:relative; 
margin-left:300px; 
width:700px; 
clear:both;
}

    in tutta onesta mi aspettavo questa disposizione...

     
     A1     A2
     A3     A4
     A5
    ----------
    IMG1   IMG2
    IMG3   IMG4

    invece mi ritrovo questo...

     
     A1     A2
     A3     A4
     A5  -----
          IMG1   IMG2
          IMG3   IMG4

    oppure se i link sono numero pari...

     
     A1     A2
     A3 -- A4
         IMG1   IMG2
         IMG3   IMG4

    Proprio non capisco... (sono sicuro che mi manca l'ennesima nozione basilare!)

    Atro problema ,gli <A> non sono centrati verticalmente nei div con l'immagine di sfondo... ma questo è il meno.

    Perdonate la mia noiosa ignoranza.

    PS:La pagina è sempre creata dinamicamente...

    Grazie

    0
Effettua l'accesso per rispondere