Delimitatore per l'allineamento del testo

[zappaterreno87]

Salve a tutti,

da spiegare è difficile, ma l'immagine rende:


Come faccio ad allineare il testo in base al tasto rosso?
Se il testo supera una certa lunghezza, con css si può spostare verso sinistra dinamicamente senza superare il tasto rosso?

[Mich_]

In qualche caso e` possibile, ma ci sono varie opzioni e non so quale vuoi:

Se il testo non ci sta, deve succedere:
- il blocco si allarga in modo da farcelo stare
- la scritta viene limitata in larghezza (viene tagliata la parte a destra)
- la scritta viene limitata in larghezza (viene tagliata la parte a sinistra)
- la scritta si spezza su piu` righe (ma deve esserci uno spazio o un carattere speciale da qualche parte)

Quasi tutte le soluzioni presuppongono modifiche alla marcatura: se vuoi aiuto ulteriore devi postare il codice usato (HTML+CSS)

[zappaterreno87]

Ciao e grazie per la risposta,

in attesa di mandare il codice, vorrei che la stringa non si tagliasse e si spostasse verso sinistra se il testo diventasse troppo lungo (quindi il blocco si allarga)...

[Mich_]

Non riesco a capire ...
O meglio la tua spiegazione avrebbe senso se la grafica si sviluppasse da destra a sinistra, cosa possibile ma inusuale.

E per poterti aiutare e` necessario conoscere cosa sono gli oggetti in gioco: cosa e` il bollo rosso (e` un link? e` uno sfondo?, ...) e come e` realizzata la scritta

[zappaterreno87]

Codice:

<span id="slogan">Username: stringa.che.potrebbe.allungars</span> 
<a href="../modules/logoutManager.php">
[img]../immagini/exit.png[/img]</a> 

Immagine associata:

[Mich_]

Non hai postato il codice HTML dell'oggetto che contiene il tutto.
E non hai postato il CSS che usi per realizzare quella grafica.

Inoltre nella seconda immagine postata il testo va su due righe, mentre nella prima non ci andava.
Quale e` il comportamento che vuoi?

[zappaterreno87]

Ciao e grazie ancora per il tuo supporto.

Vorrei che rimanesse sempre su una riga, che il tasto rosso rimanesse sempre bloccato e che si spostasse solo il testo bianco da destra verso sinistra.

Ecco il codice completo:

HTML:

<div id="header">
<span id="slogan">Username: andrea.meschino</span>
<div id="logout"><a href="ogoutManager.php">[img]../immagini/exit.png[/img]
</a></div>

CSS testo:

#header span#slogan {
z-index: 3;
position: absolute;
left: 700px;
margin-top: 25px;
font-family: Verdana,Arial,Tahoma,Sans-serif;
font-style: normal;
font-variant: normal;
font-weight: bold;
font-size: 1.2em;
line-height: normal;
font-size-adjust: none;
font-stretch: normal;
-x-system-font: none;
color: #ffffff;
}

CSS immagine

#logout img.logout{
 border: 1px solid red;
 z-index: 3;
position: absolute;
border: none;
margin-left: 920px;
margin-top: 25px;
}

[Mich_]

Forse c'e` un modo migliore di realizzare quel blocco.

Anzitutto dimentica i posizionamenti: ti complicano la vita di molto.
E se voi usare i CSS in modo semplice, occorre usare una marcatura semanticamente corretta:

<div id="header">
  

Username: andrea.meschino</p>
  [img]../immagini/exit.png[/img]
</div>

Ricorda che un id deve essere unico nella pagina, per cui forse al posto di id="header" dovresti usare class="header"
Comunque ho tolto tutti gli oggetti inutili.

A questo punto si puo` sistemare il CSS:

#header {   /* se diventa una classe qui (e sotto) andra` scritto .header */
  min-width: ...;   /* conviene definirlo, ma non e` obbligatorio */
  height: ....;
}
#header p {
  float: left;
}
#header a {
  float: right;
}
#header img {
  width: 20px;
  height: 20px;
}

Probabilmente servono altri attributi, ma ho usato solo quelli necessari per sistemare il bollo dopo la scritta.

[zappaterreno87]

Gentilissimo! Funziona a meraviglia!