ciao
ti faccio notare anche se tu avessi del testo senza li andrebbe a capo
se scrivi
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa con idden si nasconde
se invece scrivi
aaaaaa aaaaaaaa aaaaa aaaaa aaaaaa aaaaaaa aaaaa aaaaa aaaaa con idden va a capo
ti faccio notare anche se tu avessi del testo senza li andrebbe a capo
se scrivi
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa con idden si nasconde
se invece scrivi
aaaaaa aaaaaaaa aaaaa aaaaa aaaaaa aaaaaaa aaaaa aaaaa aaaaa con idden va a capo
ciao
solo con i css non saprei.
se dovessi farlo io con php taglerei il testo al numero di caratteri che mi servono per non farlo sbordare
solo con i css non saprei.
se dovessi farlo io con php taglerei il testo al numero di caratteri che mi servono per non farlo sbordare
ciao
dai un occhio a questo (anche se è un po' un casino)
dai un occhio a questo (anche se è un po' un casino)
HTML:
<style type="text/css">
#dav {
width:200px;
background-color:#CCCCCC;
overflow-x: auto;
}
li, p{width:600px; }/*larghezza da valutare in funzione del testo più lungo*/
</style>
<div id="dav">
<p>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</p>
<p>di camin di nostra vita mi ritrovai per una selva oscura che la diritta via era smarrita</p>
<ul>
<li>nel mezzo</li>
<li>di camin di nostra vita mi ritrovai per una selva oscura che la diritta via era smarrita</li>
<li>pape satan pape satan aleppe gridò pluto con la voce chioccia</li>
</ul>
</div>Perfetto, ci siamo. Ho modificato secondo le mie esigenze.
Cosi esiste un menu orizzontale infinito
Cosi esiste un menu orizzontale infinito
HTML:
<html>
<head>
<style type="text/css">
#dav {
width:600px;
background-color:#CCCCCC;
overflow-x: auto;
overflow:hidden;
}
ul {list-style-type:none;width:500000px;};
li{width:100px; }/*larghezza da valutare in funzione del testo più lungo*/
ul li{
float:left;
display: inline;
}
</style>
</head>
<body>
<div id="dav">
<ul>
<li>nel mezzo</li>
<li>di camin di checamin di nostra vita mi ritrovai per una selva oscura checamin di nostra vita mi ritrovai per una selva oscura che la diritta via era smarrita</li>
<li>pape satan pape satan aleppe gridò pluto con la voce chioccia</li>
</ul>
</div>
</body>
</html>
Ultima modifica di un moderatore:
Cosa serve mettere due overflow, quando il secondo elimina l'effetto del primo?
Poi se qualcuno mi spegasse cosa serve avere del testo che non va a capo quando finisce il div, gliene sarei veramente grato! Un giorno potrebbe servire anche a me e io ora proprio non lo capisco!
Volevo farvi notare un'altro utilizzo della proprietà overflow impostata ad hidden
Se usate Firefox o Chrome provate a toglierla e vedrete il contenitore sparire
Internet Explorer probabilmente tratta i contenitori in modo diverso
Ho perso un sacco di tempo all'inizio per riuscire a trovare questa soluzione per i miei primi template
I colori non sono mai stati il mio forte
A voi i commenti
HTML:
<html>
<head>
<title>Esempio</title>
<style type="text/css">
html body {
text-align: center;
}
#contenitore {
margin:auto;
width: 800px;
background-color:#990000;
/* senza questa proprieta il div contenitore praticamente è inesistente su FF e CHROME*/
overflow: hidden;
}
#menu {
float: left;
width:200px;
background-color:#AAAAAA;
}
#corpo {
float: left;
width:400px;
background-color:#CCCCCC;
}
</style>
</head>
<body>
<div id="contenitore">
<div id="menu">
<br/>menu
<br/>menu
<br/>menu
<br/>menu
<br/>menu
<br/>menu
<br/>menu
<br/>menu
<br/>menu
</div>
<div id="corpo">
<br/>corpo
<br/>corpo
<br/>corpo
<br/>corpo
</div>
</div>
</body>
</html>Internet Explorer probabilmente tratta i contenitori in modo diverso
Ho perso un sacco di tempo all'inizio per riuscire a trovare questa soluzione per i miei primi template
I colori non sono mai stati il mio forte
A voi i commenti
) puoi dargliForse cosi rende meglio l'idea :
HTML:
<html>
<head>
<title>Esempio</title>
<style type="text/css">
html body {
text-align: center;
}
#contenitore {
margin:auto;
width: 800px;
background-color:#BBBBBB;
/* senza questa proprieta il div contenitore praticamente è inesistente su FF e CHROME*/
overflow: hidden;
}
#header {
width:100%;
height:90px;
background-color: #E4E4E4;
}
#menu {
float: left;
width:200px;
background-color:#AAAAAA;
}
#corpo {
float: left;
width:400px;
background-color:#CCCCCC;
}
#footer {
width:100%;
height:90px;
background-color: #E4E4E4;
clear:both;
}
</style>
</head>
<body>
<div id="contenitore">
<div id="header"><br/>Header</div>
<div id="menu">
<br/>menu<br/>menu<br/>menu<br/>menu<br/>menu<br/>menu<br/>menu<br/>menu<br/>menu
</div>
<div id="corpo">
<br/>corpo<br/>corpo<br/>corpo<br/>corpo<br/>corpo<br/>corpo<br/>corpo<br/>corpo
<br/>corpo<br/>corpo<br/>corpo<br/>corpo<br/>corpo<br/>corpo<br/>corpo<br/>corpo
<br/>corpo<br/>corpo<br/>corpo<br/>corpo<br/>corpo<br/>corpo<br/>corpo<br/>corpo
</div>
<div id="footer"><br/>©Footer</div>
</div>
</body>
</html>
Io ho avuto quasi lo stesso problema... Ho creato un blog a mano in php e volevo fare in modo che nella pagina principale mi uscissero soltanto 4 righe (nel tuo caso soltanto una).
Questo è il codice php utilizzato:
In pratica decidi quanti caratteri vengono presentati (nel mio caso 450, ma per te dovrebbero essere molti meno) e decidere per quali stringhe applicare questa limitazione (nel mio caso $array[2]).
Poi per il resto puoi intuire facilmente il funzionamento!
Questo è il codice php utilizzato:
PHP:
$numero_caratteri = 450;
$stringa_in_input = $array[2];
if(strlen(trim($stringa_in_input))>$numero_caratteri)
{
$testo = substr($stringa_in_input,0,strpos($stringa_in_input,' ',$numero_caratteri)).'...';
} else
{$testo = $stringa_in_input; }
echo "$testo";In pratica decidi quanti caratteri vengono presentati (nel mio caso 450, ma per te dovrebbero essere molti meno) e decidere per quali stringhe applicare questa limitazione (nel mio caso $array[2]).
Poi per il resto puoi intuire facilmente il funzionamento!
Discussioni simili
