Problema con div

**giananto** · 30-10-2007, 12:14

Ciao a tutti, sono nuovo nell'utilizzare i css, stavo provando a realizzare una pag prova per un sito , ho creato diversi div:
div container
---div header
---div menu
---div contenuto
------div testo
------div img
---div footer

il problema che mi visualizza sta nel fatto che il div img, che deve essere posizionato alla stessa altezza del div contenuto, praticamente mi sta sotto, in questo modo:

-------------------------
- -
- -
-------------------------
------------------------
- -
- -
------------------------

scusate ma è il modo migliore per farmi capire senza postare img.
il secondo rettangolo in pratica viene spostato alla fine del primo quadrato...
sapreste aiutarmi?
spero di essere stato abbastanza chiaro
grazie a tutti

**salasir** · 30-10-2007, 12:38

E' meglio che posti anche il codice css e html del pezzo che ti interessa. Altrimenti risulta difficile tirare a indovinare...

Ah, già che ci sei, indica anche il doctype che utilizzi.

**giananto** · 30-10-2007, 12:43

questo è il codice css che utilizzo:

#container{
border-style:solid;
border-color:black;
border-width:1px;
width:700px;
height:560px;
margin-left:auto;
margin-right:auto;
}
#header{
background-image:url(header.gif);
height:200px;
}
#header li{
display:inline;
}
#controlli{
background-color:#000000;
height:40px;
}
#contenuto{
background-color

range;
height:280px;
clear:both;
}
#testo{
background-color:#00CC66;
width:370px;
height:240px;
margin-top:20px;
margin-bottom:20px;
margin-left:20px;
margin-right:300px;
float:left;
}
#partedestra{
background-color:#00CC66;
width:250px;
height:240px;
margin-top:20px;
margin-right:20px;
margin-left:430px;
float:right;
}
#footer{
background-color:#000000;
height:40px;
}

questo invece è il codice html:

<!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=iso-8859-1" />
<title>M-Shirt</title>
<link href="stile.css" rel="stylesheet" type="text/css" >
</head>

<body>
<div id="container">
<div id="header"></div>
<div id="controlli">
<li class="bottone"> Home
<li class="bottone"> Prodotti
<li class="bottone"> Chi siamo
<li class="bottone"> Contatti
</div>
<div id="contenuto">
<div id="testo">
<ul>
<li class="normale"> ciao a tutti questo è una prova,speriamo di riuscire a fare qualcosa
<li class="normale"> ciao a tutti questo è una prova,speriamo di riuscire a fare qualcosa
[/list]
</div>
</div>
<div id="partedestra">
</div>
<div id="footer">
<li class="normale">copyright 2007 M-Shirt
<li class="normale">sito realizzato in css da giancarlo pilla
</div>
</div>
</body>
</html>

Forse devo utilizzare un clear ma non saprei dove metterlo...

**salasir** · 30-10-2007, 12:55

Secondo me:

codice:

<div id="contenuto">
<div id="testo"> 
<ul>
<li class="normale"> ciao a tutti questo è una prova,speriamo di riuscire a fare qualcosa
<li class="normale"> ciao a tutti questo è una prova,speriamo di riuscire a fare qualcosa[/list]
</div>       <== spostare 
</div>
<div id="partedestra">
</div>
</div>                        <== qui

Poi elimineri i margin- left/right da 300 e 430 px nei due box "testo" e "partedestra".

**giananto** · 30-10-2007, 13:10

Grandissimo...adess mi ha allineato i due div...
come mai bisognava spostare la chiusura del div sotto?

**salasir** · 30-10-2007, 13:57

Perchè quando hai una pagina formata da più div flottati, quando ne devi allineare due devi "circondarli" con un contenitore unico.

**Sgro** · 30-10-2007, 16:34

Ricordiamoci però che adattare l'html alle esigenze di impaginazione è un errore concettuale molto grave. Non dovresti MAI ritoccare l'html per semplificarti l'impaginazione tramite CSS (tranne aggiungere id e class dove occorre).

Se non riesci a impaginare con gli elementi esistente, cambia tecnica di impaginazione. Ma non toccare l'html. Ti garantisco che si riesce sempre ad arrivare al risultato voluto.

Ciao

**salasir** · 30-10-2007, 16:39

Non sono del tutto d'accordo. Sicuramente molto spesso non è necessario appesantire il codice per "far fare al browser quello che voglio ma non ci riesco".

Ma a volte è necessario annidare i div per ottenere alcuni risultati.
Vedi: Web design con le griglie

**Sgro** · 30-10-2007, 17:06

Originariamente inviato da salasir
Non sono del tutto d'accordo. Sicuramente molto spesso non è necessario appesantire il codice per "far fare al browser quello che voglio ma non ci riesco".

Ma a volte è necessario annidare i div per ottenere alcuni risultati.
Vedi: Web design con le griglie

Ti assicuro, salasir, che si può evitare, con una conoscenza più approfondita dei css. Ti manderò qualche esempio.

**salasir** · 30-10-2007, 17:10

Sono molto curioso ...

Discussione: Problema con div

Strumenti discussione

Ricerca discussione

Visualizza

Problema con div

Permessi di invio