Immagine sopra input text impedisce di scrivere

**pkspritesearch** · 23-05-2014, 07.08.36

Osservare la mia home (http://gg.gg/sprite) c'è un'immagine sopra ad un input text che impedisce la scrittura nella parte più a sinistra.

Non cerco opzioni drastiche come z-index. Qualcosa che la renda "trasparente" al click.

Grazie
Sneffel

**pkspritesearch** · 23-05-2014, 14.39.13

Qui un esempio in modo tale che chiunque possa capire:

http://pkspritesearch.altervista.org...imgprends.html

**quellidelcucuzzolo** · 23-05-2014, 17.57.02

Aspettando risposte alla tua richiesta, ti pongo alcune domande:

perché drastiche?
hai provato a visualizzare la tua Home Page a 1024px di risoluzione?
non puoi/vuoi mettere un'immagine come sfondo al div?

**pkspritesearch** · 23-05-2014, 18.20.30

Originalmente inviato da quellidelcucuzzolo

Aspettando risposte alla tua richiesta, ti pongo alcune domande:
hai provato a visualizzare la tua Home Page a 1024px di risoluzione?

È anche peggio

Originalmente inviato da quellidelcucuzzolo

Aspettando risposte alla tua richiesta, ti pongo alcune domande:
non puoi/vuoi mettere un'immagine come sfondo al div?

Non saprei come fare (non capisco nemmeno il significato di quello che hai scritto)

**karl94** · 23-05-2014, 20.12.14

Posizionare elementi in maniera assoluta può essere utile, ma per altri scopi. Non deve essere l'unico strumento usato per posizionare gli elementi nella pagina per molteplici ragioni. La prima ad esempio è che le pagine non sono statiche, non sono visualizzate sempre con lo stesso spazio disponibile: la finestra del browser si può ridimensionare e i vari dispositivi degli utenti che visitano il tuo sito hanno risoluzioni differenti.
Le immagini sopratutto se non fanno parte del contenuto (come delle foto ad esempio), ma servono solo come decorazione, è bene inserirle mediante il foglio di stile come immagini di sfondo, come già suggerito da quellidelcucuzzolo.
Quindi, per capire qual'è la migliore strategia di posizionamento dell'immagine è bene capire come tu hai pensato di inserirla nella pagina. Ad esempio, io ho visualizzato la pagina in questione con un monitor abbastanza largo, e l'immagine è in alto a sinistra e non si sovrappone a nulla. Quindi, come vuoi che sia posizionata? Sempre in alto a sinistra, indipendentemente da quanto possa essere largo lo spazio a disposizione? Sopra o sotto (a livello di profondità, non di posizionamento verticale) a cosa esattamente?

**pkspritesearch** · 23-05-2014, 20.30.01

Originalmente inviato da karl94

[cut]

Mi piace apprendere nozioni base.

Vorrei che si sovrapponesse giusto un po' (30% della superficie).
Metterlo come sfondo non mi va bene in quanto deve essere tutto ben visibile.

Che metodo devo utilizzare per rendere tutto standard per ogni risoluzione?
Position:relative?

**pkspritesearch** · 24-05-2014, 08.41.27

Ho cercato di risolvere così:

Codice:

#logo{position:absolute;top:0px;left:0px;height:417;width:573;background-image: url(images/ho_title_lol.png);}

Codice HTML:

<div id="logo"></div>

Ma non visualizzo nulla :(

**quellidelcucuzzolo** · 24-05-2014, 12.20.26

Manca l'unità di misura.

Codice:

height:417px;
width:573px;

**karl94** · 24-05-2014, 15.34.54

Ma hai provato a ridimensionare la finestra del browser per vedere come cambia la visualizzazione? Hai provato ad esempio a restringerla fino a 1024px? Con questa larghezza (molto comune) ad esempio non c'è spazio per l'immagine e va inevitabilmente a coprire il campo di testo. Come dovrebbe essere visualizzato quindi in questo caso?
Ad ogni modo, non va bene né usare solo il posizionamento assoluto né solo quello relativo, per creare un buon layout serve usare tutto ciò che il CSS mette a disposizione.

**NLSweb** · 24-05-2014, 15.50.02

Ciao, se ho ben capito vuoi che una immagine rimanga visibile e a lato dell'area di ricerca , con una parte in sovraposizione alla form cerca
e che quando entri nel form cerca per digitare , l'immagine diventi semi-trasparente e ti lasci scrivere liberamente.

ho scrtto queste linee di codice :

Codice:

<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
 $("#areacerca").animate({"opacity":"0.5"},0);
 $("#cerca").animate({"opacity":"0.5"},0);
 $("#submit").animate({"opacity":"0.7"},0);
 $("#areacerca").mouseover(function(){
    $("#areacerca").animate({"opacity":"1"},500);
    $("#cerca").animate({"opacity":"0.9"},500);
    $("#submit").animate({"opacity":"0.9"},500);
 });
 $("#areacerca").mouseleave(function(){
    $("#areacerca").animate({"opacity":"0.5"},500);
    $("#cerca").animate({"opacity":"0.5"},500);
    $("#submit").animate({"opacity":"0.7"},500);
 });
});
</script>
<style>
#areafoto{
 width:250px;height:250px;
 position:relative;
 margin:auto;
 background-image:url("http://pkspritesearch.altervista.org/images/ho_title_lol.png");
 background-repeat:no-repeat;
 background-size:250px 250px;
}
#areacerca{
 width:250px;height:250px;
 position:relative;
 margin:auto;
 border-radius:50px;
 top:-250px;left:0px;
 background:rgba(0,0,0,0.7);
}
#cerca{
 position:relative;
 left:50px;
 top:50px;
}
#submit{
 position:relative;
 left:-20px;
 top:100px;
}
</style>
</head>
<body>
<div id="areafoto"></div>
<div id="areacerca">
<form action="risultato.php" method="POST">
<input name="search" type="text" id="cerca">
<input id="submit" value="Cerca" type="submit">
</form>
</div>
</body>
</html>

come potrai vedere ho creato due aree una per la foto(immagine) una per la ricerca
in prima fase l'immagine è in rilievo e la ricerca in semi-trasparenza
quando passi sopra , in seconda fase , la ricerca torna ad essere completamente visibile ed utilizzabile

ho impostato che nell'area della ricerca ci sia un fondo nero semi-trasparente arrotondato (simile alla pagina da te indicata come esempio) ; chiaramente sia il fondo, che l'immagine, che il comportamento di ogni elemento può essere variata a tuo piacimento.

per quanto riguarda il posizionamento , nessun elemento ha una position:absolute sono tutte relative e centrate alla pagina.

**NLSweb** · 24-05-2014, 16.50.05

Se invece ti interessa solo la lente di ingrandimento all'interno del form cerca e che stia sotto il testo e che non impedisca la scrittura..
allora ho scritto questo codice che non usa script ma solo css

Codice:

<!DOCTYPE html>
<html>
<head>
<style>
#areacerca{
 width:250px;height:250px;
 position:relative;
 margin:auto;
 border-radius:50px;
 background:rgba(0,0,0,1);
}
#cerca{
 position:relative;
 left:50px;
 top:50px;
 background-image:url("http://pkspritesearch.altervista.org/pagine/images/cerca.png");
 background-size:20px 20px;
 background-repeat:no-repeat;
}
#submit{
 position:relative;
 left:-20px;
 top:100px;
}
</style>
</head>
<body>
<div id="areacerca">
<form action="risultato.php" method="POST">
<input name="search" type="text" id="cerca">
<input id="submit" value="Cerca" type="submit">
</form>
</div>
</body>
</html>

**pkspritesearch** · 24-05-2014, 20.08.53

Originalmente inviato da NLSweb

Ciao, se ho ben capito vuoi che una immagine rimanga visibile e a lato dell'area di ricerca , con una parte in sovraposizione alla form cerca
e che quando entri nel form cerca per digitare , l'immagine diventi semi-trasparente e ti lasci scrivere liberamente.

ho scrtto queste linee di codice :

Codice:

<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
 $("#areacerca").animate({"opacity":"0.5"},0);
 $("#cerca").animate({"opacity":"0.5"},0);
 $("#submit").animate({"opacity":"0.7"},0);
 $("#areacerca").mouseover(function(){
    $("#areacerca").animate({"opacity":"1"},500);
    $("#cerca").animate({"opacity":"0.9"},500);
    $("#submit").animate({"opacity":"0.9"},500);
 });
 $("#areacerca").mouseleave(function(){
    $("#areacerca").animate({"opacity":"0.5"},500);
    $("#cerca").animate({"opacity":"0.5"},500);
    $("#submit").animate({"opacity":"0.7"},500);
 });
});
</script>
<style>
#areafoto{
 width:250px;height:250px;
 position:relative;
 margin:auto;
 background-image:url("http://pkspritesearch.altervista.org/images/ho_title_lol.png");
 background-repeat:no-repeat;
 background-size:250px 250px;
}
#areacerca{
 width:250px;height:250px;
 position:relative;
 margin:auto;
 border-radius:50px;
 top:-250px;left:0px;
 background:rgba(0,0,0,0.7);
}
#cerca{
 position:relative;
 left:50px;
 top:50px;
}
#submit{
 position:relative;
 left:-20px;
 top:100px;
}
</style>
</head>
<body>
<div id="areafoto"></div>
<div id="areacerca">
<form action="risultato.php" method="POST">
<input name="search" type="text" id="cerca">
<input id="submit" value="Cerca" type="submit">
</form>
</div>
</body>
</html>

come potrai vedere ho creato due aree una per la foto(immagine) una per la ricerca
in prima fase l'immagine è in rilievo e la ricerca in semi-trasparenza
quando passi sopra , in seconda fase , la ricerca torna ad essere completamente visibile ed utilizzabile

ho impostato che nell'area della ricerca ci sia un fondo nero semi-trasparente arrotondato (simile alla pagina da te indicata come esempio) ; chiaramente sia il fondo, che l'immagine, che il comportamento di ogni elemento può essere variata a tuo piacimento.

per quanto riguarda il posizionamento , nessun elemento ha una position:absolute sono tutte relative e centrate alla pagina.

Grazie perfetto *O*

Originalmente inviato da NLSweb

Se invece ti interessa solo la lente di ingrandimento all'interno del form cerca e che stia sotto il testo e che non impedisca la scrittura..
[...]

Quale lente di ingrandimento... Notare secondo esempio :)

Originalmente inviato da karl94

Ma hai provato a ridimensionare la finestra del browser per vedere come cambia la visualizzazione? Hai provato ad esempio a restringerla fino a 1024px? Con questa larghezza (molto comune) ad esempio non c'è spazio per l'immagine e va inevitabilmente a coprire il campo di testo. Come dovrebbe essere visualizzato quindi in questo caso?
Ad ogni modo, non va bene né usare solo il posizionamento assoluto né solo quello relativo, per creare un buon layout serve usare tutto ciò che il CSS mette a disposizione.

Proprio non so rispondere :/

Discussione: Immagine sopra input text impedisce di scrivere

LinkBack

Strumenti discussione

Display

Immagine sopra input text impedisce di scrivere

Regole di scrittura