- Home
- Categorie
- Coding e Sistemistica
- HTML e CSS
- menu verticale e div affiancati
-
menu verticale e div affiancati
Ciao a tutti, ho creato una pagina per visualizzare delle cucciolate di un allevamento.
la struttura è la seguente:
-colonna sx, dove sono riportate le "generalità" della cucciolata (solo testo)- paginona centrale, con una galleria di foto
cliccando sulla colonna sx, si apre la gallery della cucciolata corrispondente, allo stesso tempo vengono evidenziati il box della cucciolata e quello della gallery con un colore più scuro.
E questo funziona.Adesso è così:
img262.imageshack.us/my.php?image=comhf3.jpgQuello che non mi convince è:
- lo stacco di colore: vorrei farli continui, come nella seconda immagine( img404.imageshack.us/my.php?image=comedeveessereew3.jpg )
- non riesco a separare le scritte dal bordo: vengono appiccicate e si leggono male. Ho giocato con i padding e i margin, ma si sposta anche il background colorato...
ah, ogni commento/suggerimento sulla resa grafica è ben accetto!
grazie mille!
Michele
-
Ciao Tykos
Puoi darci una fonte online compresa di codice html/css come appunto un link in modo da aiutarti al meglio?
Attualmente così rischiamo solo di sparare nel buio, i fattori potrebbero essere molteplici
SSciao!
-
@karedas said:
Puoi darci una fonte online compresa di codice html/css come appunto un link in modo da aiutarti al meglio?
[mammamia]
intanto sono un pirla, la gallery era flottante a destra. L'ho messa a sx e i colori sono uniti.
Pure i padding sono andati a posto, sempre perchè sono un pirla, intendiamoci.tanto per dare un senso a questo thread posto i codici che ho usato, chissà mai che servano a qualcuno...
non ho un link, perchè sto sviluppando in locale e portare tutto su un remoto provvisorio è una complicazione (anche perchè netsons non funziona con la versione di gallery2 che uso io...).
provo a spiegare il css:
Ho un contenitore generale, largo 90% della pagina.
All'interno del contenitore (tralasciando header, footer, razzi e mazzi) ho un div, chiamato dispcuccioli, che comprende tutta la colonna di sx e ha questo codice:.dispcuccioli{ width: 29%; float:left; padding: 1.3em 0 1.3em 1em; background:#f4ffe4; font: normal 1.1em/1.2em Verdana, Tahoma, Arial, SansSerif; } ```Ogni cucciolata ha un suo boxino, chiamato nomicucciolate e ordinato come una lista, con ul/li:
.nomicucciolate{
width: 99%;
float:left;
padding: 10px 50px;
background:#f4ffe4;
font: normal 1em/1.2em Verdana, Tahoma, Arial, SansSerif;
}.fotocucciolate{
width: 66%;
float:left;
background: #8cb85c;
}