Css che non si devono muovere al ridimensionamento

[Crono88x]

Salve, premetto che non so nulla di css (e poco, anzi pochissimo di html), sto facendo una paginetta qui: http://www.lafigliadeldottore.com/
ed ho inserito i due tasti di facebook e myspace con dei css...il problema è che ridimensionando la finestra i due tasti si muovono mentre io vorrei che restassero esattamente al centro sotto la scritta "la figlia del dottore". Mi son letto le due pagine di html.it sul posizionamento...fixed, absolute etc etc...le ho provate tutte...ah, possibilmente anche con altre risoluzioni dovrebbero restare al posto loro..

la pagina è provvisoria, poi userò joomla dunque non vi preoccupate, non creerò altri mostri ahah...

aggiungerò anche doctype etc etc...

[ldetomi]

A parte l'abominio di avere usato il tag CENTER nel tuo codice..... (uno di quelli più deprecati in assoluto )

Il tuo problema è semplice e comune anche alla maggior parte delle discussioni degli ultimi giorni qui sul forum. Hai detto che hai letto gli articoli sui posizionamenti ma evidentemente ti è sfuggita forse la cosa più importante, ovvero "rispetto a cosa si posizionano gli elementi?"

Il position:absolute... non è proprio "absolute" è fatto tenendo come riferimento il più vicino elemento contenitore che abbia un posizionamento diverso da "static" che è il valore predefinito e implicito di qualunque oggetto! In assenza di un tale contenitore, il posizionamento avviene rispetto al BODY che ovviamente cambia di dimensioni quando fai lo zoom, visto che è sempre esteso a tutta pagina.

Quindi devi avere un contenitore che abbia almeno position:relative; che in assenza di spostamenti top e left non sposta effettivamente tale contenitore ma lo rende semplicemente in grado di contenere altri oggetti posizionati in maniera assoluta

[Crono88x]

si quindi devo creare un contenitore con un oggetto?posso posizionare i css relativamente allo sfondo?

ora ho cambiato tutto in relative e l'icona di myspace si sposta insieme a quella di facebook perchè è posizionata relativamente ad essa, vero?invece quella di facebook è ancora posizionata in base al body...?

inoltre vorrei che al cambiare delle risoluzioni non risulti tutto stramballato...ho letto di qua e di la ma non ho capito molto, in teoria si, ma non so applicare..fin'ora ho avuto solo a che fare con codice di blogger, wordpress..dove tutto è facilitato dagli strumenti automatici..


ps, cosa uso al posto di center?

so che le mie parole sono un insulto alla programmazione... perdonatemi!

[ldetomi]

Come dirtelo??? il tuo codice è pieno di errori o quantomeno è progettato piuttosto male.... Inoltre anche le tue domande contengono loro stesse errori concettuali o di principio. Che vuol dire "posso posizionare i css in mase all sfondo?" è una frase che purtroppo non ha senso......
Leggere "di qua e di là".... è sbagliato come principio!!! devi studiarti una guida o un tutorial organico che ti spiega dall'inizio alla fine, se sei un principiante... solo quando diventi un po' esperto puoi permetterti di leggere articoli specifici e mirati di approfondimento....

Oltre a questo, stai realizzando un layout semplicissimo complicandoti la vita oltre misura, come sparare a una mosca con un cannone!!!

Alcuni commenti (ma credimi, ti consiglio CALDAMENTE di leggerti l'articolo "Layout con i CSS" su html.it, almeno comprendi la filosofia di come si crea un layout):

1) L'attributo target=_blank nei links è ormai deprecato, perché costringi il visitatore ad aprire il link in una nuova finestra quando magari lui non vorrebbe (mettiti nei panni del visitatore, girerebbero le scatole anche a te se ogni link si aprisse in una nuova finestra)
2) Hai un BODY con la sola immagine di sfondo e poi 4 icone che sono i links e gli unici oggetti della pagina. Hai posizionato tutto in maniera relativa, partendo dal basso... ma come mai??? A parte che sarebbe più logico e intuitivo posizonare gli oggetti dall'alto (anche perché se aggiugi qualche altro oggetto sotto che ti alza il body, tutti gli allineamenti saltano), in ogni caso il posizionamento relativo sposta gli oggetti da dove vorrebbero naturalmente stare a dove li metti tu con top e left. Quindi in questo caso, al limite era più logico usare i position:absolute ma cmq ti ritrovi in ogni caso con il problema che ti ho descritto nel primo commento: posizioni tutto non rispetto a un contenitore con dimensione fissa, ma rispetto al BODY, la cui dimensione cambia con lo zoom e di conseguenza tutti gli allineamenti! In pratica non hai fatto ciò che ti ho descritto sopra.
3) Per centrare gli oggetti ci sono 2 tecniche distinte in css, una per il testo e una per gli oggetti di tipo blocco (div, immagini). Per il testo devi applicare la regola text-align:center; mentre per gli altri oggetti l'approccio è diverso, devi usare margin:0 auto; che in pratica dice di applicare un margine pari a 0 sopra e sotto l'oggetto e "automatico" ai lati, il che sposta al centro l'oggetto.
4) Semanticamente parlando, hai creato i tuoi 4 pulsanti come oggetti vuoti costituiti solo da un'immagine di sfondo ma a che serve? a dover forzare i link ad avere display:block; a dovergli forzare la dimensione??? Potevi usare direttamente il sempliccisimo tag IMG di html e inserire le immagini direttamente nel documento non come sfondo. L'uso di immagini di sfondo per i link ha senso solo se crei una regola per quando porti il mouse sopra al link (per esempio per creare un effetto roll over cambiando l'immagine di sfondo, ma non è il tuo caso)
5) La totale assenza di testo nel sito lo rende praticamente non indicizzabile da parte dei motori di ricerca che non hanno idea di che sito sia, e a che serve.

Infine, il consiglio su come mettere quei 4 link.
1) Crei un DIV che li contiene tutti e 4 (magari temporaneamente mettigli un bordo colorato così vedi quali sono le sue dimensioni, poi a layout finito togli i bordi e lo rendi quindi invisible).
2) Inserisci i link come immagini affiancate, puoi farlo in tanti modi, anche con i posizionamenti assoluti se vuoi ma allora, per quanto detto prima, il div che hai creato al punto precedente deve avere position:relative, altrimenti sei sempre punto e a capo!!!

Ma, ascolta il suggerimento, leggiti un paio di articoli, in particolare quello consigliato, su html.it... l'approccio che stai seguendo serve solo a complicarti la vita e una semplice risposta di un forum non ti può chiarire tutti i problemi, anzi... se prendi un'accozzaglia di consigli qua e là per specifici problemi e non capisci tutto il concetto in modo organico, non ne vieni più fuori......

[Crono88x]

ciao, innanzitutto ti ringrazio tantissimo per il tempo che hai impiegato per me.
Ho iniziato a leggere la guida dei css ma comunque ho eliminato i file css e sono riuscito a fare tutto in maniera molto più semplice, l'unico problema è che non riesco a centrare lo sfondo nonostante abbia usato il

margin:0 auto;

, forse l'ho fatto in maniera sbagliata...

ho letto anche gli altri suggerimenti che ho cercato di seguire; sono consapevole che così la pagina non viene indicizzata, ci sarà del testo successivamente, è solo una "pagina in costruzione"

[ldetomi]

Se mi cambi il contenuto del link per sto per risponderti... non posso fare prove!!!! (ho aperto il link in 2 momenti differenti e ho trovato cose diverse )

[Crono88x]

ahaha ...provavo! vai ora


ho visto che potrei usare

body {

background: url(immagine.jpg);
background-repeat: no-repeat;
background-position: Center;
}

ma poi non riesco a far sovrapporre le 4 immagini

[ldetomi]

Credo che il layout che tu vorresti sia quello che avevi messo online qualche giorno fa e che aveva i problemi di zoom, vero??? ovvero tutto al centro dello schermo, sia sfondo che icone, giusto??? Adesso però le icone sono spostate sulla destra e il sito è tutto a sinistra... vuoi risolvere questa questione?

[Crono88x]

si, le icone io le visualizzo centrali, tu no?
lo sfondo è a sinistra, ne ho provate diverse ma la mia imbranataggine non mi ha aiutato fin'ora

[ldetomi]

Ricorda che ci sono schermi di tante dimensioni, io un full HD. Se non forzi i posizionamenti in qualche modo, anche in percentuale, diverse risoluzioni ti mostreranno gli oggetti in posizioni diverse!

Cmq la soluzione è semplice, ho modificato il tuo codice così:

<div style="border:solid 1px red; margin:0 auto; background: url(backround.jpg) top center no-repeat; height: 1024px; width: 1280px;">

Come vedi ho attivato bordino rosso, come ti ho consigliato prima, così vedi gli oggetti dove stanno e che dimensioni hanno (poi lo puoi ovviamente togliere ma è comodissimo da usare).
Il margin:0 auto ha effettivamente portato al centro l'oggetto, la dichiarazione top center allo sfondo l'ha posizionato in alto al centro! Ecco fatto!!! Cambia pure lo zoom ora!!!!