Allineare un gruppo di "<a href....

[zioigna]

Buon giorno a tutti.
Vengo subito al punto.
Ho un sito con una testata con allineamnto a sinistra con testo e ora/data:
<h1>
<div style="text-align: left;">
<div class="style2" style="background-color: #669900; margin: 0 auto; width: 1062px; text-align: left;" >
Bed and Breakfast Una Stanza in Famiglia -

<script type="text/javascript" src="JS-Data_e_ora/Data_e_ora-IT.js"></script>

</div>
</div>
Adesso devo inserire le bandiarine per il linguaggio:
[img]Images/it.png[/img] |
[img]Images/UK.png[/img] |
[img]Images/fr.png[/img] |
[img]Images/de.png[/img] |
[img]Images/es.png[/img]
ma queste vorrei allienearle sulla stessa riga ma a destra.
Ho gia fatto vari tentativi ma non sono riuscit, o non facva nulla (cioè rimanevano a sinistra dopo l' ora/data, oppure andavo a destra ma capo (<p alling="right">).
Chissa se qualcuno mi da una dritta?
Vi ringrazio

[powertoglory]

forse ti potrebbe aiutare l'elemento float.

comunque, potresti fare così:

<div id="barra">
<div class="left">Metti ciò che vuoi</div>
<div class="right">Metti ciò che vuoi</div>
</div>

CSS:

#barra {
width: 100%; /* O come preferisci */
height: 50px; /* meglio specificarlo, ma decidi tu */
background: black;
color: white;
}

.left {
background: orange;
width: 300px;
height: 100%;
float: left;
}

.right {
background: blue;
width: 300px;
height: 100%;
float: right;
}

Ovviamente sarai tu a decidere la grandezza etc. Ma da quello che ho capito, forse è questo che vuoi.

Se poi vuoi che dentro .right o left ci sia un altro div, (esempio le bandiere) potrai farlo aggiungendo sempre la regola float: right o left, scegli tu.


esempio:

<style type="text/css">
#barra {
width: 100%; /* O come preferisci */
height: 50px; /* meglio specificarlo, ma decidi tu */
background: black;
color: white;
}

.left {
background: orange;
width: 300px;
height: 100%;
float: left;
}

.right {
background: blue;
width: 300px;
height: 100%;
float: right;
}

.ciao {
float: right;
background: pink;
width: 100px;
height: 100%
}
</style>

<div id="barra">
<div class="left">Metti ciò che vuoi</div>
<div class="right">Metti ciò che vuoi <div class="ciao">CIAOOOO</div> </div>
</div>

[zioigna]

Ti ringrazio!!
Funziona come volevo.
Posso ancora disturbarti per chiederti come faccio a centrare la barra?
Prima il tutto era centrato nella pagina, adesso la barra e allineata a sinistra.
Cosa devo mettere nel CSS #barra per centrala?
Ri-grazie.

[powertoglory]

Originariamente inviato da zioigna
Ti ringrazio!!
Funziona come volevo.
Posso ancora disturbarti per chiederti come faccio a centrare la barra?
Prima il tutto era centrato nella pagina, adesso la barra e allineata a sinistra.
Cosa devo mettere nel CSS #barra per centrala?
Ri-grazie.

Prego!

Per allineare qualsiasi div, a, p, etc. si usa l'elemento margin:

margin: 0 auto;

ovviamente, con il codice sopra questo non funziona. Perché il width di #barra, è impostato a 100%. Per poter notare l'effetto centrato dovrai modificare e quindi impostare il width con un valore in PX. Come:

#barra {
width: 700px; /* valore in PX se lo si vuole centrato */
height: 50px; /* meglio specificarlo, ma decidi tu */
background: black;
color: white;
margin: 0 auto; /* eccolo */
}

Inoltre, per qualsiasi documento è consigliabile usare un CSS di reset. In rete se ne trovano tanti e diversi ma alcuni non tanto buoni. Se vuoi puoi usare quelle che uso io (non è mio :P):

html, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-size: 100%;
    vertical-align: baseline;
    background: transparent;
}
body {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-size: 100%;
    vertical-align: baseline;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}
 
:focus {
    outline: 0;
}
 
ins {
    text-decoration: none;
}
del {
    text-decoration: line-through;
}
 
table {
    border-collapse: collapse;
    border-spacing: 0;
}

puoi inserirlo in un file a se (es. reset.css)

Ciao!

[zioigna]

Grazie, funziona!
Salvo quello che hai scritto, e provo.