Paragrafo oltre le dimensioni specificate

E' da un pò di tempo che ho iniziato ad utilizzare i css per strutturare il layout delle mie pagine web.

Utilizzando ho scoperto che è anche molto versatile in quanto si integra perfettamente con script php e quindi ho abbandonato la tradizionale strutturazione in tabelle.

Ho creato spesso container di 300px con dentro un paragrafo, ma utilizzavo sempre tag <br /> per tornare a capo.

Oggi invece mi è sorto per la prima volta un problema: il tag <p> prosegue se non spezzato in fase 'editor' con un <br />  :-\

quindi ho scritto un piccolo codice per verificare, ed ecco qui il risultato:

code html:

<html>
<head>
<link rel="stylesheet" href="style.css" type="text/css" />
</head>
<body>
<div id="container">
    <p>blablablablablablablablablablablablablablablablablablablablablablablabla
    blablablablablablablablablablablablablablablablablablablablablablablablablabla
    blablablablablablablablablablablablablablablablablablablablablablablablablabla</p>
</div>
</body>
</html>

code css:

#container{
   width:300px;   
   border: 1px solid red;
   margin:auto;
   padding:1px;
}
#container p{
   width:auto;
   margin:auto;
   border:1px solid green;
}

Come potrei risolvere il problema?

Grazie in anticipo!

P.s. specifico che ho provato già impostando la larghezza del width del selettore #container p a 300px ma non funge.

inviato 7 anni fa
Newbie
X 0 X

E' da un pò di tempo che ho iniziato ad utilizzare i css per strutturare il layout delle mie pagine web.

Utilizzando ho scoperto che è anche molto versatile in quanto si integra perfettamente con script php e quindi ho abbandonato la tradizionale strutturazione in tabelle.

Bravo!

Come potrei risolvere il problema?

Semplicemente aggiungendo nel css, nella parte del container, questo:

overflow: auto;

Che farà comparire le barre di scorrimento orizzontale/verticale a seconda della necessità.

risposto 7 anni fa
LonelyWolf
X 0 X

I css rivelano immense soddisfazioni, soprattutto quando la pagina non è più statica ma si evolve costantemente e rapidamente  :)

Ad ogni modo le barre volevo evitarle; cio' che io volevo era semplicemente che css si occupasse autonomamente della formattazione del testo, mentre io dovevo solo limitarmi a scriverlo.

Questo perchè uno script php dove magari ho eliminato presenze di <br /> potrebbe stamparmi il code html

su unica riga e di conseguenza css(nella formattazione del tutto simile all'esempio di sopra) mi sballerebbe il layout del blocco...

P.s. se ci fai caso poi, qui nella textarea dove si scrive il testo in smf, se vai oltre la larghezza stabilita dal bordo ti rimanda automaticamente a capo  :(

risposto 7 anni fa
Newbie
X 0 X

Ma è una textarea e non un div, sono cose completamente diverse.

Poi sarebbe meglio che il css lo correggi (mi era sfuggito prima):

p#container{
   width:auto;
   margin:auto;
   border:1px solid green;
}

e poi nella pagina dichiari così:

<p id='container'>

Normalmente il div fa quello che chiedi tu, probabilmente è la dichiarazione sbagliata che fa un po' di "casino" nella pagina!

[Personalmente preferisco le classi]

risposto 7 anni fa
LonelyWolf
X 0 X

Cioè nello stile dovrei scrivere solo questo?:

p#container{
   width:auto;
   margin:auto;
   border:1px solid green;
}

Provandoci comunque ha lo stesso problema, o meglio, se width è impostato su 'auto' regola perfettamente la larghezza, ma se la limito a '300'(larghezza che a me serve per non sballare il layout), il risultato è quello postato sopra nell'immagine  :-\

Se invece mantengo anche il div nello stile e modifico semplicemente cio' che mi hai consigliato di correggere, richiamando quindi nell'html il paragrafo con

<p id="container">

il risultato ancora non migliora  :(

Prima di postare qui ho fatto un'oretta e mezza di ricerche, ma ancora non ho trovato rimedio, eppure mi sembrava semplice guarda  :P

risposto 7 anni fa
Newbie
modificato 7 anni fa
X 0 X

non non solo quello, quello corregge la dichiarazione del p.

risposto 7 anni fa
LonelyWolf
X 0 X
non non solo quello, quello corregge la dichiarazione del p.

si, ho mantenuto l'impostazione iniziale del div correggendo cio' che mi hai detto, provato, ma nulla

risposto 7 anni fa
Newbie
X 0 X

Ora stacco dall'ufficio, cmq dovresti provare senza il <p> all'interno del div, sia nella pagina che nella dichiarazione del css.

risposto 7 anni fa
LonelyWolf
X 0 X

ok, ad ogni modo ho provato, ecco il risultato:

Codice html:

<html>
<head>
<link rel="stylesheet" href="style.css" type="text/css" />
</head>
<body>
<div id="container">blablablablablablablablablablablablablablablablablablablablablablablablabla
blablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablab
lablablablablablablablablablablablablablablablablabla
</div>
</body>
</html>

Codice CSS:

#container{
   width:300px;   
   border: 1px solid red;
   margin:auto;
   padding:1px;
}   

Grazie per l'aiuto in ogni caso,  ;)

attendo ulteriori consigli!

risposto 7 anni fa
Newbie
X 0 X

Mi stai facendo impazzire per una sciocchezza! :D

Le scritte vanno oltre semplicemente perchè sono più lunghe dei 300px che hai impostato ed il browser non spezza le parole, infatti se ci metti un po' di spazi tipo così:

<html>
<head>
<link rel="stylesheet" href="style.css" type="text/css" />
</head>
<body>
<div id="container">blablablablablabl ab ablabla blab lablabla blablablab lablablablabl ablablablabla
blablablablablablablablablablablablablab lablablab lablablablablablabl ablablab lablablablablablablablablab
lablabla blablablabla blablablab lablabla blablablablabla
</div>
</body>
</html>

Vedrai che tutto funziona come deve e potresti aggiungere un text-align:justify;

risposto 7 anni fa
LonelyWolf
X 0 X

Mi stai facendo impazzire per una sciocchezza! :D

Le scritte vanno oltre semplicemente perchè sono più lunghe dei 300px che hai impostato ed il browser non spezza le parole, infatti se ci metti un po' di spazi tipo così:

<html>
<head>
<link rel="stylesheet" href="style.css" type="text/css" />
</head>
<body>
<div id="container">blablablablablabl ab ablabla blab lablabla blablablab lablablablabl ablablablabla
blablablablablablablablablablablablablab lablablab lablablablablablabl ablablab lablablablablablablablablab
lablabla blablablabla blablablab lablabla blablablablabla
</div>
</body>
</html>

Vedrai che tutto funziona come deve e potresti aggiungere un text-align:justify;

e già, inconsapevolmente l'avevo fatto questa mattina, senza tuttavia conoscerne la spiegazione,  poi son partito per una giornata di mare  e non ho avuto il tempo di postare :P e così solo ora ho visto la tua risposta e mi permetto ancora una volta di ringraziarti per la disponibilità  ;)

A presto!  :bye:

risposto 7 anni fa
Newbie
X 0 X
Effettua l'accesso o registrati per rispondere a questa domanda