Div con Immagini

lunedì 08 dicembre 2008 - 19.41

Elenco Threads

Stanze Forum

Aggiungi ai Preferiti

Cerca nel forum

gae58 Profilo | Senior Member

467 messaggi | Data Invio: lun 8 dic 2008 - 19:41

salve,

in una pagina web, voglio inserire 2 immagini in div diversi. il codice è questo:
<div style="float: left; background-color: #3399cc; text-align: center; vertical-align: middle; ">
<asp:ImageButton ID="ImageButton1" runat="server" ImageUrl="~/Img/Banner.gif" />
</div>
<div style="float: none; background-color: #3399cc; vertical-align: middle; text-align: center; ">
<asp:ImageButton ID="ImageButton4" runat="server" ImageUrl="~/Img/logo-graphic.gif" />
</div>

Ho vari dubbi:
1) Pensavo d'inserire i 2 div all'interno di un altro div in cui specificavo il background-color, il text-align: center ed il vertical-align. Ma ho notato che non vengono ereditati. Probabilmente sbaglio io qualcosa in quanto ho letto che l'ereditarità esiste.

2) All'interno di ogni div le immagini sono di altezza differente, e non ho capito come fare per avere i 2 div di altezza uguale.

3) Forzando l'altezza dei 2 div ad un'altezza fissa, nel secondo div, quello ocn l'immagine + piccola la stessa non la riesco a posizionare al centro.

Qualche consiglio?

grazie

Gaetano

R3GM4ST3R Profilo | Junior Member

196 messaggi | Data Invio: mer 10 dic 2008 - 12:46

Ciao,
hai provato usando i css, nello specifico

  background-image : url("IMAGEURL");
  background-position : center center;
  background-repeat : no-repeat;

Questo imposta uno sfondo centrato al DIV...per impostare delle dimensioni fisse al DIV aggiungi height e width però così facendo se l'immagine all'interno del DIV è più grande, non la streccia ma la taglia...
non so se volevi fare questo...

Fammi sapere
ciao!

Tutti sanno che una cosa è impossibile da realizzare, finché arriva uno sprovveduto che non lo sa e la inventa. (Albert Einstein)

gae58 Profilo | Senior Member

467 messaggi | Data Invio: mer 10 dic 2008 - 18:45

ti ringrazio per la risposta, la questione è che ho 2 immagini di misura diversa.

La prima sta in un div e la seconda in un altro div affinaco al precedente.

Siccome la 2° è più piccola. l'ho messa centrata e vorrei avere l'altezza dei 2 div uguale all'altezza dell'immagine più grande.

Inizialmnete avevo provato a mettere un div padre ed all'interno di questo i 2 div, in modo da definire le proprietà nel div padre e farle erditare dai figli. Ma non funziona.

Qualche consiglio?

> background-image : url("IMAGEURL");
con questa proprietà mi allarga l'immagine per tutta la grandezz del div?

grazie

Gaetano

R3GM4ST3R Profilo | Junior Member

196 messaggi | Data Invio: gio 11 dic 2008 - 09:27

Ciao, di nulla ;)

> background-image : url("IMAGEURL");
No con questa proprietà l'immagine rimane immacolata, nel senso, se imposti solo questo nel css di default il browser ne fa il repeat in x ed in y, quindi ottieni un mosaico della stessa immagine, se invece imposti anche

> background-position : center center;
> background-repeat : no-repeat;

in questo modo dici al browser di posizionarla al centro del div e di non ripeterla, in modo che se hai una immagine da 200px per 200px la centra all'interno del div di 400px per 400px...

Esempio io ho un'immagine di 400px per 400px ed una di 300px per 300px
decido di metterle in due div diversi,
quindi creo due div di altezza e larghezza pari a 400px (l'immagine più grande)
imposto i background-image con i parametri sopra riportati e le immagini saranno centrate all'interno del div...

Per quanto riguarda l'ereditarietà non saprei proprio...nel senso che un oggetto eredita i parametri dal padre, ma se vengono reimpostati al figlio chiaramente prevalgono quelli del figlio...

Tutti sanno che una cosa è impossibile da realizzare, finché arriva uno sprovveduto che non lo sa e la inventa. (Albert Einstein)

gae58 Profilo | Senior Member

467 messaggi | Data Invio: gio 11 dic 2008 - 11:46

ciao, ho provato il tuto suggerimento, ma ho notato una cosa.

All'interno del div setto le proprietà text.align: center e vertical-align:middle, poi inserisco un imageButton con l'url.

Ho notatao che funziona solo la proprietà text-align:center e non vertical-align: middle.
Sai perché?

Gaetano

gae58 Profilo | Senior Member

467 messaggi | Data Invio: gio 11 dic 2008 - 12:22

ciao, per capire come funziona, ho scritto queste poche righe di codice.
Ho noattao ch l'immagine non me la da' proprio.
e su queta proprietà:
background-image:url("~/Img/LogoMio.gif");
mi da' il sottolineato, indicandomi che le virgolette non ci devono essere.

qualche consiglio?

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Pagina senza titolo</title>
</head>
<body>
<form id="form1" runat="server">
<div style="background-position: center; background-image:url("~/Img/LogoMio.gif"); background-position : center center; background-repeat: no-repeat;">
</div>
</form>
</body>
</html>

Gaetano

R3GM4ST3R Profilo | Junior Member

196 messaggi | Data Invio: gio 11 dic 2008 - 12:40

Ciao Gaetano, fai questa prova :
Copia questo codice in una nuova pagina html che metterai dentro alla tua directory dove tieni l'immagine di prima

<html>
<style>
body{
        margin : 0px 0px 0px 0px;
  background-color : #C0C0C0;
}
#MainPage{
  position : fixed;
  left : 0px;
  top : 300px;
  width : 100%;
  height : 300px;
  background-color : #FF0000;
  background-image : url("LogoMio.gif");
  background-position : center center;
  background-repeat : no-repeat;
}
#Header{
  position : fixed;
  left : 0px;
  top : 0px;
  right : 0px;
  height : 300px;
  width : auto;
  background-color : #FFFF00;
  background-image : url("LogoMio.gif");
  background-position : center center;
  background-repeat : no-repeat;
}
</style>
<body>
   <div id="MainPage">
      <div id="Header">
&nbsp
      </div>
   <div>
</body>

</html>

trascurando i colori osceni, dovresti avere due div con all'interno un'immagine centrata.

> <div style="background-position: center; background-image:url("~/Img/LogoMio.gif"); background-position : center center; background-repeat:no-repeat;">

Questa riga ti da errore perchè hai aperto i doppi apici all'inizio dello style=" e successivamente hai dato un path di una immagine utilizzando il carattere " (che per il browser e l'ambiente di sviluppo diventano il carattere di chiusura dello style, quindi per rendere funzionante la riga basta che sostituisci una delle due coppie con l'apicetto singolo in questo modo

><div style="background-position: center; background-image:url('~/Img/LogoMio.gif'); background-position : center center; background-repeat: no-repeat;">

Ciao, fammi sapere!

Tutti sanno che una cosa è impossibile da realizzare, finché arriva uno sprovveduto che non lo sa e la inventa. (Albert Einstein)

gae58 Profilo | Senior Member

467 messaggi | Data Invio: dom 14 dic 2008 - 18:34

ti ringrazio per la pazienza.
A me non riusciva, in quanto utilizzavo il codice all'interno dell'html con <div style=" ect" >...

Inserendolo in un css va tutto bene. Non ho capito perchè

Se non ti dispiace ho un'altra curiosità. Siccome ho la necessità di usare di usare per 3 o 4 righe di seguito due div uno a sx ed uno a dx, non c'è la possibilità di definire i due div con delle parti generiche e poi personalizzarli nell'html?

grazie

Gaetano

R3GM4ST3R Profilo | Junior Member

196 messaggi | Data Invio: mar 16 dic 2008 - 21:24

Ciao Gaetano!
Mi dispiace ma non ho capito bene cosa vorresti fare...
cmq provo ad interpretare...

-----------------DIV CONTENITORE--------------------
| DIV LEFT | | DIV RIGHT |
----------------------------------------------------------

e ripetere questa cosa N volte?
abbi pazienza per l'indentazione inesistente

<html>
<style>
#Contenitore{
  position : absolute;
  left : 10px;
  top : 10px;
  width : 200px;
  height : 50px;
  background-color : #C0C0C0;
}

.Left{
  position : absolute;
  top : 0px;
  left : 0px;
  height : 100%;
  bottom : 0px;
  width : 30px;
  background-color : #FF0000;
}

.Right{
  position : absolute;
  top : 0px;
  right : 0px;
  height : 100%;
  bottom : 0px;
  width : 30px;
  background-color : #FF0000;
}

</style>
<body>
<div id="Contenitore">
<div id="1" class="Left"></div>
<div id="1" class="Right"></div>
</div>
</body>
</html>

Ciao!
Fammi sapere!

Tutti sanno che una cosa è impossibile da realizzare, finché arriva uno sprovveduto che non lo sa e la inventa. (Albert Einstein)

gae58 Profilo | Senior Member

467 messaggi | Data Invio: gio 18 dic 2008 - 10:26

ti ringrazio, per l'esempio. Quello che vorrei fare una volta defiinti i 2 div left e right è utilizzarli all'interno dell'html (faccio un esempio cambiando il colore di sfondo, o cambiando il width)

Scusa la domanda, perchè hai creato un contenitore e poi le classi all'interno?

Io ho creato direttamente le classi.

Gaetano

R3GM4ST3R Profilo | Junior Member

196 messaggi | Data Invio: gio 18 dic 2008 - 11:08

Ciao, ho creato un contenitore perchè pensavo dovevi creare dei bottoni arrotondati, se dovevi fare una cosa del genere era comodo così...

Ciao!

Tutti sanno che una cosa è impossibile da realizzare, finché arriva uno sprovveduto che non lo sa e la inventa. (Albert Einstein)

Torna su

Stanze Forum

Elenco Threads

Partecipa anche tu! Registrati!

Hai bisogno di aiuto ?
Perchè non ti registri subito?

Dopo esserti registrato potrai chiedere
aiuto sul nostro Forum oppure aiutare gli altri

Consulta le Stanze disponibili.

Registrati ora !