Affiancare varie immagini

**macuapo89** · 07-02-2011, 19:50

Perdonate la generalizzazione del titolo, ma a scriverlo tutto coprivo l'intera pagina delle discussioni :jacko:
Il mio problema è il seguente: devo creare un sito con la seguente impostazione:

Fino ad ora sono arrivato a questo risultato:

Come posso fare per ottenere il risultato di cui sopra? Posto qui il mio codice html ed il css:

codice:

<html>
	<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>Blue Car</title>
    <link href="Style.css" type="text/css" rel="stylesheet">
    <div class="nomeclasse"></div>
	   </head>

<body bgcolor="181818">
	<div align="center"class="mother">
	    
	  <div align="justify">[img]Images/Banner.png[/img]</div>
	  
	  <div class="sotto">
	      <div align="justify">[img]Images/Sinistra.png[/img][img]Images/Centro.png[/img]
				      </div>
	</div>
</body>    
</html>

Ed ecco il css:

codice:

@charset "utf-8";
/* CSS Document */




body
	{font-family:Arial, Helvetica, sans-serif;
	 font-size:20px;
	 background-image:url(Images/Sfondo.png);}
	
#banner
	{position:absolute;}

#mother
	{width:948px;
	padding:0px;}

**Myaku** · 07-02-2011, 20:12

se queste: Images/Sinistra.png e Images/Centro.png sono i quadrotti azzurri, secondo me stai sbagliando approccio.
Intanto questi sarebbero da mettere come sfondi (e si potrebbero pure ottimizzare non inserendo i quadroni per intero ma usando il repeat, ma per il momento facciamo che non ti sto a complicare la vita).
Lascia perdere i posizionamenti assoluti.

Lasciando perdere l'header, ti serve: un div contenitore a cui dai

codice:

{overflow: hidden; height: auto;}

tre div che fluttuerai: la colonna sinistra, quella di destra e l'area centrale.

Per l'area centrale, dovrai fare il clearing pure lì poiché utilizzerai i float sui due boxini affiancati

in maniera molto grezza (è giusto per darti un punto di partenza)

codice:

<div id="content">
   <div id="servizi"></div>
   <div id="contenuti">
      <div id="inner"></div>
      <div id="autisti"></div>
      <div id="boxform"></div>
   </div>
   <div id="peraziende"></div>
</div>

attenzione che la dtd va messa come prima riga di codice

**macuapo89** · 08-02-2011, 16:23

Ciao, innanzitutto grazie per l'esauriente risposta

Putroppo non sono, come è visibile, un professionista né uno dell'ambiente.
Ho seguito un breve corso e basta, che non mi ha dato i risultati sperati.

In breve. volevo solo chiederti delle delucidazioni sui termini da te usati:

- l'Overflow
- Lascia perdere i posizionamenti assoluti.
- il float. Ho cercato anche sul sito del forum ma hanno una concezione un pò complessa O.o
- Per l'area centrale, dovrai fare il clearing
- come posso rendere le immagini uno sfondo e immettervi sopra il testo?

Scusami ma piu cerco di capire meno mi ci trovo

**Myaku** · 08-02-2011, 17:25

Originariamente inviato da macuapo89
- l'Overflow
- il float. Ho cercato anche sul sito del forum ma hanno una concezione un pò complessa O.o

qui trovi una definizione di overflow

nel caso specifico, però, viene usato per poter effettuare il clearing. Ovvero la "tecnica" (ve ne sono diverse, però) mediante il quale si riportano elementi fluttuati nel normale flusso del documento (i float, infatti, li rimuovono). Cosa significa in pratica ciò: ti faccio il caso classico di elementi con float senza clearing. Se provi a dare uno sfondo ad un contenitore (es. un div) e a metterci dentro un elemento (es. un altro div) con float, vedrai che il contenitore non si espande ad inglobare il suo "figlio". Applicaci il clearing e vedrai che a quel punto il div fluttuato starà correttamente dentro al suo contenitore

- Lascia perdere i posizionamenti assoluti.

perché sono più difficili da gestire rispetto ad altri tipi di posizionamento, e se non li sai adoperare bene ti ritrovi con il tipico caso del sito che sul tuo pc si vede bene e su quello degli altri viene fuori un macello.

- Per l'area centrale, dovrai fare il clearing

vedi prima parte della risposta, dove usi dei float dovrai applicare anche il clear.

- come posso rendere le immagini uno sfondo e immettervi sopra il testo?

inserendo l'immagine come "background" da css
link

Discussione: Affiancare varie immagini

Strumenti discussione

Ricerca discussione

Visualizza

Affiancare varie immagini

Permessi di invio