Valutazione 4.87/ 5 (100.00%) 5838 voti

Condividi:        

Come scrivere due parole ai lati opposti in css?

Problemi di HTML? Di PHP, ASP, .NET, JSP, Perl, SQL, JavaScript, Visual Basic..?
Vuoi realizzare programmi in C, C++, Java, Ruby o Smalltalk, e non sai da che parte cominciare?
Entra qui e troverai le risposte!

Moderatori: Triumph Of Steel, archimede

Come scrivere due parole ai lati opposti in css?

Postdi ghisirds » 12/01/08 12:52

Salve,
ho un facile problema che presenta molte possibili soluzioni e volevo valutare qual'era la più indicata.

Il problema è mettere in una stessa riga di testo due parole, per esempio possiamo immaginare avanti e indietro.

Indietro deve stare sulla sinistra della riga con un margine sinistro di 50 e avanti deve invece stare a destra con un margine destro di 50.

L'una deve essere indipendente dall'altra, cioè se io cancello la parola indietro, la parola avanti non deve subire variazioni.

Immagino ci siano diverse possibilità per fare questo, fra DIV, span e tabelle... ma qual'è la soluzione più semplice e leggera, magari preferendo il css e che sia compatibile con tutti i browser?

Grazie a tutti.
Ultima modifica di Triumph Of Steel su 03/02/08 22:54, modificato 1 volte in totale.
Motivazione: Links eliminati.
ghisirds
Utente Junior
 
Post: 34
Iscritto il: 07/04/07 13:13

Sponsor
 

Re: Come scrivere due parole ai lati opposti in css?

Postdi pjfry » 12/01/08 14:48

mi sono trovato ad affrontare il problema poco tempo fà e ho usato una tabella con 2 td, uno con align left e l'altro right, che dovrebbe funzionare su tutti i browser, almeno spero :lol:
il margine poi lo controlli via css (è padding, giusto? :undecided: )

in realtà la tabella non è consigliata per dare una struttura alla pagina, ma con i div non ci sono riuscito :aaah
Avatar utente
pjfry
Moderatore
 
Post: 8240
Iscritto il: 19/11/02 17:52
Località: terni

Re: Come scrivere due parole ai lati opposti in css?

Postdi archimede » 12/01/08 15:08

Innanzitutto non posizioni le parole, bensì i contenitori (box) della pagina che possono o meno contenere del testo.

Poi molto dipende da come è fatta la pagina (e il relativo CSS), comunque puoi iniziare con questo:
Codice: Seleziona tutto
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  <head>
    <title>Esempio footer</title>
    <style type="text/css">
    <!--
      html, body {
        height: 100%;
      }
      body {
        margin: 0;
        padding: 0;
        font: 12px/1.5 verdana, arial, helvetica, sans-serif;
      }
      #container {
        position: relative;
        min-height: 100%;
        height: 100%;
        voice-family: "\"}\"";
        voice-family: inherit;
        height: auto;
      }
      html>body #container {
        height: auto;
      }
      #content {
        padding: 10px;
        background-color: #a6c;
        padding-bottom: 48px;
      }
      #footerl {
        position: absolute;
        left:0px;
        bottom: 0;
        padding: 10px;
        background-color: #410;
      }
      #footerl h1 {
        color: #fef;
        padding-bottom: 0;
      }
      #footerr {
        position: absolute;
        right:0px;
        bottom: 0;
        padding: 10px;
        background-color: #150;
      }
      #footerr h1 {
        color: #fff;
        padding-bottom: 0;
      }
      h1, p {
        margin: 0;
        padding-bottom: 1em;
      }
      h1 {
        font-size: 12px;
        line-height: 1.5em;
      }
    -->
    </style>
  </head>
  <body>
    <div id="container">
      <div id="content">
        <h1>Contenuto</h1>
        <p>Questo esempio dovrebbe adattarsi alla lunghezza della pagina in QUASI tutti i browsers.</p>
      </div>
      <div id="footerl">
        <h1>Indietro</h1>
      </div>
      <div id="footerr">
        <h1>Avanti</h1>
      </div>
    </div>
  </body>
</html>
HTH.

Alessandro
archimede
Moderatore
 
Post: 2755
Iscritto il: 07/11/02 12:41
Località: Genova

Re: Come scrivere due parole ai lati opposti in css?

Postdi ghisirds » 12/01/08 17:51

Grazie a tutti, ma alla fine ho trovato questa soluzione:

Questo l'html:

Codice: Seleziona tutto
<div id="indietro">indietro</div>
<div id="avanti">avanti</div>
E qui il css:

Codice: Seleziona tutto
#indietro {
    float: left;
    margin-left: 50px;
}

#avanti {
    float: right;
    margin-right: 50px;
}
Semplice e funzionale.
Grazie e ciao
ghisirds
Utente Junior
 
Post: 34
Iscritto il: 07/04/07 13:13


Torna a Programmazione


Topic correlati a "Come scrivere due parole ai lati opposti in css?":


Chi c’è in linea

Visitano il forum: Nessuno e 6 ospiti