Dreamweaver: aiutino con i div

**Tristal** · 02-03-2012, 18:21

ciao a tutti

Sto creando una parte del sito con i div..

spiego meglio al centro della mia pagina voglio FOTO, subito dopo la foto, una colonna a sx per NEWS e nello spazio che rimane un TESTO.

come esempio:

http://www.ebol.it/test/prova2/default.html

Come potete vedere è decentrato ed è proprio questo il problema...se ridimensiono la finestra broswer la posizione dei div cambia, non restano fissi al centro...

Ora spiego cosa ho fatto:

1.
Ho creato una tabella 1riga 3colonne 100% - la colonna centrale portata a 800px, colorato l'interno e dato spazio xchè è li' dentro che voglio il mio sito!

2.
Posizionata all'interno della colonna centrale, -> Lyout -> Inserisci tag Div

una volta inseriti i 3 div per FOTO - NEWS - TESTO ho creato lo stile

-> nuova regola CSS -> e per ogni campo ho modificato la POSIZIONE

FOTO:
Posizione: ASSOLUTA
Larghezza: 800
Altezza: 350
Posizione:
In Alto:16px
Destro:
Inferiore:
Sinistra:295

e cosi' anche per NEWS e TESTO.

Nella pagina Dreamweaver è tutto perfetto...se lo vedo dal browser è sballato...

C'e' qualche dato che devo inserire?

**Tristal** · 02-03-2012, 18:30

ehm...ora che ho controllato meglio, quello che si sposta è proprio quel fondo grigio chiaro...in pratica la tabella che ho creato!! Quei 3 div restano al loro posto...!!

Io pero' ho creato quella tabella e inserito i Div perchè volevo un fondo diverso al centro del sito... quale potrebbe essere una soluzione?

**Prill** · 02-03-2012, 18:53

Se usi una tabella non hai bisogno di posizionamenti assoluti. In realtà è bene non usare una tabella. Anche i posizionamenti assoluti sarebbero da evitare e al loro posto per affiancare i div avere dei float. Esempio:

codice:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento senza titolo</title>

<style  type="text/css">
#container {
	width: 800px;
	margin:0 auto;
	background-color:#ccc;
}
#header {
	height: 350px;
}

#news {
	width: 200px;
	height: 500px;
	float:left;
}

#testo {
	width: 550px;
	height: 300px;
	float:right;
}
</style>
</head>

<body>
<div id="container">
  <div id="header">[img]foto.jpg[/img]</div>
  <div id="content">
    <div id="news">[img]news.jpg[/img]</div>
    <div id="testo">[img]testo.jpg[/img]</div>
  </div>
  <div style="clear:both"></div>
</div>

</body>
</html>

se vuoi usare i posizionamenti assoluti, dai al div content un position:relative e poi ripristina il position:absolute sui due div interni specificando la posizione da sinistra in base al div content

**Tristal** · 02-03-2012, 19:19

mmmh capito... è un po' un casino lo so

ho inserito il tuo suggerimento ed è ok, solo che, come puoi vedere nell'esempio (link sopra) la barra CORSI e allineata a sx della foto e sovrapposta... è possibile?

**Prill** · 02-03-2012, 19:30

al link su vedo sempre la tabella, i posizionamenti assoluti e nessuna barra corsi

**Tristal** · 02-03-2012, 19:41

e ora?

Volevo dire la barra news non corsi!

mi serve posizionarla allineata alla foto a sx e sovrapposta...

**Prill** · 02-03-2012, 19:54

Se dobbiamo sovrapporre :

codice:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento senza titolo</title>

<style  type="text/css">
#container {
	width: 800px;
        height:800px;;
	margin:0 auto;
	background-color:#ccc;
        position:relative;
}
#header {
        position:absolute;
        left:0;
        top: 0;
	width: 800px;
	height: 350px;
        z-index:1;
}

#news {
	width: 200px;
	height: 500px;
        position:absolute;
        left:0;
        top: 300px;
        z-index:2;
}

#testo {
	width: 550px;
	height: 300px;
        position:absolute;
        right:0;
        top: 350px;
}
</style>
</head>

<body>
<div id="container">
  <div id="header">[img]foto.jpg[/img]</div>
  <div id="news">[img]news.jpg[/img]</div>
  <div id="testo">[img]testo.jpg[/img]</div>
</div>

</body>
</html>

da assegnare l'altezza al container in base a quella degli altri div, da modificare i valori di top e left in base alle tue esigenze

**Tristal** · 06-03-2012, 10:13

è praticamente perfetto!!! Grazie mille!!!

**Tristal** · 06-03-2012, 10:43

Rieccomi

adattavo il tutto al mio sito, se non volessi chiamare delle immagini dentro ogni div, ma vorrei colorare il fondo e scriverci dentro... è possibile?

**Tristal** · 06-03-2012, 10:45

rettifico, ci sono riuscita...

a volte mi perdo in un bicchier d'acqua!!!!!

Discussione: Dreamweaver: aiutino con i div

Strumenti discussione

Ricerca discussione

Visualizza

Dreamweaver: aiutino con i div

Permessi di invio