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
Printable View
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
Qui un esempio in modo tale che chiunque possa capire:
http://pkspritesearch.altervista.org...imgprends.html
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?
È anche peggioCitazione:
Originalmente inviato da quellidelcucuzzolo
Non saprei come fare (non capisco nemmeno il significato di quello che hai scritto)Citazione:
Originalmente inviato da quellidelcucuzzolo
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?
Mi piace apprendere nozioni base.Citazione:
Originalmente inviato da karl94
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?
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);}
Ma non visualizzo nulla :(Codice HTML:<div id="logo"></div>
Manca l'unità di misura.
Codice:height:417px;
width:573px;
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.
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 :
come potrai vedere ho creato due aree una per la foto(immagine) una per la ricercaCodice:<!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>
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.
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>
Citazione:
Originalmente inviato da NLSweb
Grazie perfetto *O*
Quale lente di ingrandimento... Notare secondo esempio :)Citazione:
Originalmente inviato da NLSweb
Proprio non so rispondere :/Citazione:
Originalmente inviato da karl94