Barre affiancate.

**laugher** · 21-11-2013, 11:36

Nella mia home page ho questo pezzo di codice:

codice:

<div role="main">           
<?php dynamic_sidebar( 'benvenuto' ); ?>
<?php dynamic_sidebar( 'benvenuto' ); ?>
</div>

Nello style.css c'è ovviamente il codice del main e della sidebar:

codice:

#main {
  width: 590px;
  position: relative;
  float: left;
  margin-right: 5px;
  margin-left: 0px;
}

#benvenuto {
  background: #FFFFE0;
  border: 2px solid #E60855;
  padding: 10px;
  width: 590px;
}

Le barre vanno bene ma compaiono una sotto l'altra. Le vorrei affiancare.

Grazie mille.

**Santino83_02** · 21-11-2013, 12:01

chiedi ai CSSisti

**frenkytribe** · 21-11-2013, 12:07

aggiungi a benvenuto (che ti consiglio di far diventare classe e non id) 'float: left;'
Comunque sì, hai sbagliato sezione.

**laugher** · 21-11-2013, 12:23

Ok. Risolta la prima parte, c'è il continuo.

codice:

<div role="main">
<div class="benvenuto" style="float:left">           
<?php dynamic_sidebar( 'benvenuto' ); ?>
</div>
<div class="benvenuto" style="float:left">
<?php dynamic_sidebar( 'benvenuto' ); ?>
</div>
<!-- Fine Content -->       

<body>

<?php echo do_shortcode('[fullcalendar]' ); ?>

</body>

Non riesco a capire perchè la prima barra del calendario mi compare a fianco alla barra di benvenuto e non sotto.

**ac_socmel** · 21-11-2013, 12:26

a parte che in questa sezione del forum bisogna mostrare il codice inviato al browser e non quello server-side
a parte che avere due elementi con lo stesso id è un errore
#main è largo 590
#benvenuto è largo 590
quindi devi cambiare le misure

**frenkytribe** · 21-11-2013, 12:33

Allora, innanzitutto dato che hai messo la classe benvenuto non ha senso scrivere ogni volta style="float:left;", metti nel css
.benvenuto{
float: left;
}
Poi non puoi (o quanto meno non dovresti) mettere dei div fuori dal body. Poi ha ragione ac_socmel per il fatto delle dimensioni, infine come ti dicevo io non puoi assegnare 2 id a 2 elementi differenti.
Mi sa che dovresti ridare un'occhiatina a quello che stai facendo.

**frenkytribe** · 21-11-2013, 12:34

Originariamente inviata da ac_socmel

a parte che in questa sezione del forum bisogna mostrare il codice inviato al browser e non quello server-side

Per questo non è colpa sua, lo hanno spostato.

Allora, innanzitutto dato che hai messo la classe benvenuto non ha senso scrivere ogni volta style="float:left;", metti nel css
.benvenuto{
float: left;
}
Poi non puoi (o quanto meno non dovresti) mettere dei div fuori dal body. Poi ha ragione ac_socmel per il fatto delle dimensioni, infine come ti dicevo io non puoi assegnare 2 id a 2 elementi differenti.
Mi sa che dovresti ridare un'occhiatina a quello che stai facendo.

----Errore, scusate dovevo editare ma sono andato indietro con la pagine e ho combinato un macello

**laugher** · 21-11-2013, 12:57

Allora ho fatto così. Questa è la parte css:

codice:

#main {
  width: 1180px;
  position: relative;
  float: left;
  margin-right: 5px;
  margin-left: 0px;
}

#principale {
  width: 1180px;
  position: relative;
  float: left;
  margin-right: 5px;
  margin-left: 0px;
}

#benvenuto {
  background: #FFFFE0;
  border: 2px solid #E60855;
  padding: 10px;
  width: 590px;
  float: left;
}

e questa è invece la parte index

codice:

<div role="principale">
<div class="benvenuto" >           
<?php dynamic_sidebar( 'benvenuto' ); ?>
</div>
<div class="benvenuto" >
<?php dynamic_sidebar( 'benvenuto' ); ?>
<!-- Fine Content -->
</div>    

</ br>

<div role="main">   
<?php echo do_shortcode('[fullcalendar]' ); ?>
</div>

Ancora non va, nel senso che compare la barra a fianco alla barra di benvenuto invece che sotto come si può vedere in www.laugher.it (quella cosa con scritto "oggi" che continua a fianco deve apparire sotto le barre).

**frenkytribe** · 21-11-2013, 13:12

Inzia da qeusto e fai le tue prove

codice:

<div >
<div style="float:left;">benvenuto1</div>
<div >benvenuto2</div>
</div>

<div >
<div >calendario</div>
</div>

**laugher** · 21-11-2013, 13:16

Originariamente inviata da frenkytribe

Inzia da qeusto e fai le tue prove

codice:

<div >
<div style="float:left;">benvenuto1</div>
<div >benvenuto2</div>
</div>

<div >
<div >calendario</div>
</div>

Molto simile al codice che ho messo sopra mi pare.

Ho provato a mettere il float=left alla barra del calendario, ma mi fa flottare tutti gli elementi della barra a sinistra e non va bene.

Discussione: Barre affiancate.

Strumenti discussione

Ricerca discussione

Visualizza

Barre affiancate.

Permessi di invio