Posizionare un motore di ricerca..

[Dax87]

Ciao ragazzi, Premessa sono nuovo nel sito e quanto prima scriverò il post di benvenuto nell'area adatta ...

Nel frattempo volevo chiedere un aiuto sicuramente semplicissimo ma a me complicato che ho scoperto.

Provo a spiegarmi:

Vorrei rendere il mio motore di ricerca posizionato in alto a destra del sito in modo credo si dica "assoluto" ovvero che qualsiasi dimensione dello schermo tu utilizzi il posizionamento di essa sia sempre la medesima.

Il problema l'ho trovato con chi utilizza schermi apple o di grossa dimensione avendo una risoluzione diversa dal classico 1024 x 768 ... Infatti succede che chi ha schermi troppo piccoli o troppo grossi e non con una risoluzione di almeno 1024 x 768 il motore di ricerca mi vada a scavalcare il logo del sito ... dato che per il posizionamento ho usato un Div ...

il link del sito non lo inserisco perche' non so se violo delle regole di spam... pero' potrei mettere delle immagini per far capire meglio...
in ogni caso il codice e' questo:

Html:

<div id="apDiv2"> <div> <form id="searchform"> <div> <input type="text" size="30" value="" onkeyup="lookup(this.value);" /> <span class="Stile2">Ricerca</span> </div> <div id="suggestions"></div> </form> </div></div>

Css:

<style type="text/css">  </style>

Img corretta:


Errore (in altri risoluzioni mi si accavalla):


Grazie in anticipo..

[Dax87]

nessuno sa aiutarmi ? ..

[Mich_]

Il discorso "posizionamento assoluto" e` stato affrontato molte volte in questo forum.
Tutti concordano che da tale posizionamento derivano molti problemi, tra cui lo spostamento non voluto dei blocchi e la loro sovrapposizione.

Quindi la soluzione caldeggiata e` eliminare il posizionamento, ed usare invece i float.

Se hai ancora problemi, posta il link al sito (controlla prima il regolamento per verificare che il tuo sito non sia tra quelli il cui link e` vietato - pornografia o pura pubblicita`).

[Dax87]

Originariamente inviato da Mich_
Il discorso "posizionamento assoluto" e` stato affrontato molte volte in questo forum.
Tutti concordano che da tale posizionamento derivano molti problemi, tra cui lo spostamento non voluto dei blocchi e la loro sovrapposizione.

Quindi la soluzione caldeggiata e` eliminare il posizionamento, ed usare invece i float.

Se hai ancora problemi, posta il link al sito (controlla prima il regolamento per verificare che il tuo sito non sia tra quelli il cui link e` vietato - pornografia o pura pubblicita`).

Grazie Mich ...
Sai dirmi dove posso trovare direttamente qualcosa riguardo i float o mi faccio una ricerca su google !?
mentre per il sito direi che forse è l'unico assente da pubblicità... quindi potrei pubblicarlo:

e questo:
http://www.mondodc.it/dr.house/

Infatti si nota che zoom lo schermo con i + e il - o con la rotellina per chi lo ha nel mouse ... si nota proprio la sovrapposizione di quest'ultimo..
faccio ancora un tentativo usando le percentuali nei css ... ma non credo di risolvere..

o meglio avevo risolto utilizzando il sistema pagepeel o warp ma con un form di ricerca mi da problemi.

ps trovato questo:
http://css.html.it/guide/lezione/492...enere-i-float/

ho provato con i float ma cambia nulla mi sa..

[Mich_]

Non e` che puoi prendere una pagina fatta con i posizionamenti, applicare i float e convertirla in pochi minuti.
E` chiaro che non va: non hai l'esperienza sufficiente per poterlo fare.

La pagina va ristudiata/riformattata da zero, partendo eventualmente da un layout pronto (ce ne sono alcuni tra i "link utili").
Il mio consiglio e` pertanto di farti un giro tra le raccotle di layout, trovarne uno che assomiglia al tuo, testarlo nelle varie risoluzioni/ingrandimenti e poi analizzare come tale layout e` stato realizzato (prima analizza l'HTML e poi il CSS).

[Dax87]

Allora ieri ho dato un occhiata ...
In realtà il problema non esiste mi spiego meglio facendoti vedere praticamente il codice che è corretto ...
Allora quando studiai il motore di ricerca originale usai un sistema classico per affidarmi poi al motore di ricerca google ... e il codice e' simile a questo

<div class="search"> <form id="form1" name="form1" method="post" action=""> <span> <input name="q" type="text" class="keywords" id="textfield" maxlength="50" value="Search..." /> </span> <input name="b" type="image" src="images/search.gif" class="button" /> </form> </div>

utilizzando come css nello style.css questo codice corretto:

/* search */ .search { padding:41px 0 0 0; margin:0 auto; width:215px; float:right; } .search form { padding:0; margin:0 auto;} .search span { display:block; float:left; background: url(images/search_bg.gif) left top no-repeat; width:146px; padding:0 5px; height:27px;} .search form .keywords { width:146px; line-height:13px; height:13px; float:left; background:none; border:0; padding:7px 0; margin:0; font:normal 11px Arial, Helvetica, sans-serif; color:#acacac;} .search form .button { float:left; margin:0; padding:0;}

Il problema è stato quando decisi di utilizzare un sistema database fatto in suggest... dovendo trasformare il codice per la ricerca cosi:

<div class="search"> <form id="searchform"> <div> <input type="text" size="30" value="" onkeyup="lookup(this.value);" /> <span class="Stile2">Ricerca</span> </div> <div id="suggestions"></div> </form>

probabilmente c'e l'incompatibilita' tra il suggest e il classico form di ricerca e i css che erano adatti per quel tipo di form ...

Ora ricontrollo ancora quando mi misi a studiare il suggest per il sito alcune cose che avevo trovato e fatto... per vedere se magari il problema e davanti agli occhi o no...

Altrimenti le soluzioni sono due.. o lascio cosi sperando che 80% degli utenti abbia una risoluzione da 1024x768 oppure chiedere a uno che lo fa per lavoro e non per passione come me...

[Mich_]

I tuoi codici non sono formattati in maniera umana, e quindi e` difficile capire.

Comunque da qualche parte ho visto codice lato server, che non so come viene convertito quando viene inviato al browser.
Ti consiglio pertanto di cercare nel browser il codice corrispondente a quello che hai postato e vedere come e` fatto.
Poi si puo` cercare di formattarlo in modo opportuno.


PS: se posti il codice usa una formattazione umana: usando gli acapo e le indentazioni corrette, altrimenti e` difficile capire e ragionarci.

[Dax87]

i codici sono giusti solo che non so come postarli qui in modo corretto io sto usando i CODE /CODE per inserirli.. devo usare forse un altro modo !?

ecco il codice del suggest ho provato a modificare ma cambia sempre posizione questo è il css completo guarda se ora la formattazione per la pubblicazione e' corretta:

/* HTML ELEMENTS */
body { font-family:"Lucida Grande","Lucida Sans Unicode",Arial,Verdana,sans-serif; }

/* COMMON CLASSES */
.break { clear:both; }

/* SEARCH FORM */
#search { display:block; padding:41px 0 0 0; margin:0 auto; width:215px; float:right; }
#searchform { padding:0; margin:0 auto; display:block;}
#searchform div { color:#eeeeee; }
#searchform div input { font-size:12px; padding:0px; width:145px; }
#suggestions{ position: relative; left:-170px; width:280px; display:none; }

/* SEARCHRESULTS */
#searchresults { border-width:1px; border-color:#919191; border-style:solid; width:320px; background-color:#262525; font-size:10px; line-height:14px; }
#searchresults a { display:block; background-color:#a5a5a5; clear:left; height:56px; text-decoration:none; }
#searchresults a:hover { background-color:#b7b7b7; color:#cccccc; }
#searchresults a img { float:left; padding:5px 10px; }
#searchresults a span.searchheading { display:block; font-weight:bold; padding-top:5px; color:#191919; }
#searchresults a:hover span.searchheading { color:#797979; }
#searchresults a span { color:#ebebeb; }
#searchresults a:hover span { color:#f1f1f1; }
#searchresults span.category { font-size:11px; margin:5px; display:block; color:#cccccc; }
#searchresults span.seperator { float:right; padding-right:15px; margin-right:5px;
			background-image:url(http://www.mondodc.it/dr.house/sugge...cuts_arrow.gif); background-repeat:no-repeat; background-position:right; }
#searchresults span.seperator a { background-color:transparent; display:block; margin:5px; height:auto; color:#cccccc; }

[Dax87]

Ricapitolando originariamente la ricerca era cosi studiata: E TUTTO FUNZIONAVA non avevo il problema del posizionamento ....

html

<div class="search">
        <form id="form1" name="form1" method="post" action="">
          <span>
          <input name="q" type="text" class="keywords" id="textfield" maxlength="50" value="Search..." />
          </span>
          <input name="b" type="image" src="images/search.gif" class="button" />
        </form>
</div>

CSS del search

/* search */
.search { padding:41px 0 0 0; margin:0 auto; width:200px; float:right; }
.search form { padding:0; margin:0 auto;}
.search span { display:block; float:left; background: url(images/search_bg.gif) left top no-repeat; width:146px; padding:0 5px; height:27px;}
.search form .keywords { width:146px; line-height:13px; height:13px; float:left; background:none; border:0; padding:7px 0; margin:0; font:normal 11px Arial, Helvetica, sans-serif; color:#acacac;}
.search form .button { float:left; margin:0; padding:0;}

Mentre ora la ricerca e con il sistema suggest e questi sono i codici che ho sostituito a quelli vecchi sulla parte della ricerca

html originale con questo:

<div class="search">
      <form id="searchform">
	    <input type="text" onkeyup="lookup(this.value);" />
	    <div id="suggestions"></div>
      </form>
</div>

ed il css quello pubblicato prima lo riscrivo qui cosi ho ricompilato il post corretto e completo

/* HTML ELEMENTS */
body { font-family:"Lucida Grande","Lucida Sans Unicode",Arial,Verdana,sans-serif; }

/* COMMON CLASSES */
.break { clear:both; }

/* SEARCH FORM */
#search { display:block; padding:41px 0 0 0; margin:0 auto; width:215px; float:right; }
#searchform { padding:0; margin:0 auto; display:block;}
#searchform div { color:#eeeeee; }
#searchform div input { font-size:12px; padding:0px; width:145px; }
#suggestions{ position: relative; left:-170px; width:280px; display:none; }

/* SEARCHRESULTS */
#searchresults { border-width:1px; border-color:#919191; border-style:solid; width:320px; background-color:#262525; font-size:10px; line-height:14px; }
#searchresults a { display:block; background-color:#a5a5a5; clear:left; height:56px; text-decoration:none; }
#searchresults a:hover { background-color:#b7b7b7; color:#cccccc; }
#searchresults a img { float:left; padding:5px 10px; }
#searchresults a span.searchheading { display:block; font-weight:bold; padding-top:5px; color:#191919; }
#searchresults a:hover span.searchheading { color:#797979; }
#searchresults a span { color:#ebebeb; }
#searchresults a:hover span { color:#f1f1f1; }
#searchresults span.category { font-size:11px; margin:5px; display:block; color:#cccccc; }
#searchresults span.seperator { float:right; padding-right:15px; margin-right:5px;
			background-image:url(http://www.mondodc.it/dr.house/sugge...cuts_arrow.gif); background-repeat:no-repeat; background-position:right; }
#searchresults span.seperator a { background-color:transparent; display:block; margin:5px; height:auto; color:#cccccc; }

Il primo il posizionamento non dava problemi.
Invece con questo nuovo si.
Avro dimenticato qualche float o qualche absolute !?

[Mich_]

Nel secondo caso hai una funzione JS, che pero` non si sa cosa faccia.

La funzione potrebbe fare una chiamata al server, e potrebbe inserire dei blocchi HTML costruiti tramite il JS stesso (innerHTML o costruttore di oggetti).

Ma questo noi non lo sappiamo.
Se e` questo il caso occorre vedere cosa sono i blocchi inseriti e come vengono formattati.


PS: noto ora che ci sono errori tra i nomi di classi e id nel secondo blocco: devi prima risolvere quelli, altrimenti nonha senso parlare del resto