Immagini bordi arrotondati e layout

[Cesar]

Salve a tutti.
Comincio dicendo che sono un po’ a digiuno di CSS.

Allora, io ho il seguente layout e lo vorrei trasformare in css.


Il layout non ha un altezza fissa e può variare. Come posso fare per impaginare al meglio?

Vi ringrazio.

[Francis87]

<div>
 <div id="header" style="height: 100px;"> </div>
 <div id="content">IL CONTENUTO QUA</div>
 <div id="footer" style="height: 100px;"> </div>
</div>

[Cesar]

Originariamente inviato da Francis87

<div>
 <div id="header" style="height: 100px;"> </div>
 <div id="content">IL CONTENUTO QUA</div>
 <div id="footer" style="height: 100px;"> </div>
</div>

cioè, dici di tagliare l'immagine in tre ?

[Another-Life]

No,quella era la struttura per impaginare,difatti non ha senso attribuire alla sezione Content un immagine in quanto sarebbe davvero complesso gestire poi il contenuto,quindi puoi assegnare lo stesso colore alla sezione Content tramite il comando Background-color.Poi non ho capito una cosa: hai intenzione di usare come sfondo sia per l'header che per il footer un background simile come mostrato dall'immagine??

[Cesar]

allora, nella parte in rosso vorrei scrivere. questa parte ovviamente non è fissa, ma dipende dalla lunghezza del testo.

la parte blu dipende dalla lunghezza del testo.

[Another-Life]

La parte blu dipende dalla lunghezza del testo,ma cos'è??....Menu di navigazione?

[rebelia]

Originariamente inviato da Cesar

Il layout non ha un altezza fissa e può variare. Come posso fare per impaginare al meglio?

html:

<div id="esterno">
   <div id="interno">
      <div id="contenuto"></div>
   </div>
</div>

css:

#esterno {width: 500px; background: url(verde.gif) repeat-y top left;}
#interno {background: url(celeste.gif) no-repeat top left;}
#contenuto {background: url(rosso.gif) no-repeat bottom left;}

[Another-Life]

In genere la parte azzura è l'Header,la parte verde il Contenuto e la parte rossa è il Footer...quindi per prima cosa dovresti modificare l'id "#" che hai assegnato alle tre sezioni.Seconda cosa,dovresti pensare per bene alla disposizione del contenuto che avrai nel sito,grazie magari a qualche schizzo su carta.


p.s: Per iniziare potresti posizionare l'header del sito,inanzitutto ritagliando la sezione in alto dell'immagine da te postata.Poi dai uno sguardo al css di Html o ad altri siti per imparare a posizionarlo,altrimenti leggiti le guide su Html^^

[rebelia]

Originariamente inviato da Another-Life
In genere la parte azzura è l'Header,la parte verde il Contenuto e la parte rossa è il Footer...quindi per prima cosa dovresti modificare l'id "#" che hai assegnato alle tre sezioni.Seconda cosa,dovresti pensare per bene alla disposizione del contenuto che avrai nel sito,grazie magari a qualche schizzo su carta.


p.s: Per iniziare potresti posizionare l'header del sito,inanzitutto ritagliando la sezione in alto dell'immagine da te postata.Poi dai uno sguardo al css di Html o ad altri siti per imparare a posizionarlo,altrimenti leggiti le guide su Html^^

credo che quella sia la parte centrale della pagina e i div annidati gli servono per renderne l'elasticita'

per gli id non mi risulta ci siano dei nomi obbligatori: uno li puo' anche chiamare #pippo #pluto e #paperino

[Cesar]

Originariamente inviato da rebelia
html:

<div id="esterno">
   <div id="interno">
      <div id="contenuto"></div>
   </div>
</div>

css:

#esterno {width: 500px; background: url(verde.gif) repeat-y top left;}
#interno {background: url(celeste.gif) no-repeat top left;}
#contenuto {background: url(rosso.gif) no-repeat bottom left;}

Ti ringrazio. Esattamente quello che volevo.