sto iniziando con i css...aiutatemi problema con immagine.

**kevin0101** · 04-02-2007, 13:10

ciao a tutti.
ho deciso di imparare il linguaggio dei css...
ho alcune domande da farvi:

questa è la mia pagina principale in html:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 STRICT//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml-strict.dtd">

<html>

<body>

<head>

<link rel="stylesheet" href="foglio_di_stile.css" type="text/css" />

</head>

<body>

[img]spikeintestazione.jpg[/img]

</p>

</body>

</html>

*******************alla quale ho collegato il foglio di stile seguente:

body {
font:100% Arial, Helvetica, sans-serif;
background: #FFF;
color: #000;
}
img#imgINperc {
display:block;
background-position : center top;
margin: 0 0 0.5em 0;
width:100%;
}

*
vorrei inserire l'immagine al centro della pagina (quale codice devo inserire, ho provato con background-position : center top; ma no è cambiato nulla.
dove sbaglio?
inotre per il codice che ho scirtto l'immagine occupa il 100%della pag, creando su schermi con risoluz bassa un immagine pulita ma su schermi con ris.alta un'immagine sfuocata.
pensavo di mettere allora 60%+ immagine centrata

**
ovviamente dopo voglio inserire altre cose nella pag html tipo menui testi etc...
per gestire la formattazione di questi elementi basta che aggiungo il codice css nel foglio di stile sopra indicato, giusto?

il foglio di stile va bene come l ho fatto o manca qlc...parlo a livello generale, tipo per la pag html dobbiamo mettere i tag <html> head title body e chiuderli...per la css???

grazie

**Shores** · 04-02-2007, 13:45

Allora, prima di tutto nel css non c'è bisogno di preamboli, quindi va bene (come hai fatto) inserire direttamente le regola che vuoi.

Detto questo, è meglio che tu parta ragionando per bene su ciò che vuoi ottenere: le misure in percentuale, infatti, in css indicano una percentuale della dimensione interna del contenitore; ovvero, nel tuo esempio, una percentuale della dimensione interna del tag P che contiene il tag IMG.

La clausola background-position non ha NIENTE a che vedere con l'immagine che hai messo nel tag IMG; se vuoi dare una immagine di background ad un elemento, devi usare la clausola background-image:url(immagine.jpg); e solo allora potrai usare background-position per posizionarla.

Poi, dare display:block ad un tag IMG è rischioso: gli elementi di tipo block hanno la caratteristica di diventare larghi come il loro contenitore, il che significa che l'immagine diventa larga come il paragrafo che la contiene, e spinge sotto di se qualsiasi altra cosa, ANCHE se poi la restringi con width:60%. In più, questo non ha per nulla l'effetto che speravi di allinearla al centro, visto che hai impostato dei margini a zero...

Per centrare l'immagine, sempre che tu sia sicuro di volere che lei mandi tutto sotto di se, usa invece:

{
display:block;
margin-left:auto;
margin-right:auto;
}

Quanto al fatto di poter aggiungere altri elementi alla pagina aggiungendo semplicemente clausole al css, SCORDATELO!

Ovvero, certo che si può, ma l'unico modo per fare si di non impazzire è aver PENSATO PRIMA lo schema generale del layout e occuparsi poi di ogni songolo blocco solo DOPO che il blocco è già ben sistemato nel layout.

Per intenderci: prima devi pensare a dove vorrai mettere il menu, i testi, gli altri contenuti, e con questo in mente creare un layout fatto solo di div vuote (con i bordini colorati per riconoscerle) che posizionerai correttamente, e che andrai poi a riempire con i relativi contenuti.

Il mio consiglio spassionato è di leggersi attentamente il manuale ufficiale dei css

http://www.w3.org/TR/CSS21/

e mettersi a provare ogni singola cosa che viene descritta in Firefox, così da capire esattamente come funziona; purtroppo, molte cose dei css che sembrano intuitive, funzionano invece proprio al contrario di come ti aspetteresti....

**kevin0101** · 04-02-2007, 16:15

ciao.grazie per la tua risposta.
in effetti avrei già in mente il layout grafico della pagina.
te la descrivo brevemente:

vorrei mettere un immagine(orizzontale) come intestazione, sotto di lei un menu principale.
poi sul lato sx della pagina fare ddue box con angoli stondati e mettere altri link per navigare il sito e al centro della pag mettere i vari contenuti (che di volta in volta da pag a pag ovviamente cambiano) lasciando invariato il resto, cioè menu e immagine.

che ne dici?
come mi conviene fare?
l'immagine (diciamo di intestazione) come la devo considerare?

volendo posso cmq ad esempio fare il menu utilizzando css ed il resto della pag con semplice html...?

Discussione: sto iniziando con i css...aiutatemi problema con immagine.

Strumenti discussione

Ricerca discussione

Visualizza

sto iniziando con i css...aiutatemi problema con immagine.

Permessi di invio