è possibile un layout del genere con div e css senza usare il posizionamento assoluto?
ci sbatto da giorni, ma i miei tentativi non danno frutti!
è possibile un layout del genere con div e css senza usare il posizionamento assoluto?
ci sbatto da giorni, ma i miei tentativi non danno frutti!
*j*
quello che non funziona è la corretta sovrapposizione dei div, esiste un settaggio sul selettore che mi consenta di realizzare il layout che voglio?
*j*
Ti ascoltiamo, ... come vedi ho cambiato il titolo al thread.
Solo che non ho abbastanza esperienza per risponderti.
Pero` non allarmarti se non ricevi risposte: le persone veramente competenti non sono sempre in ascolto. Se entro domattina non ricevi risposte, fai un "up" al tuo messaggio.
Nuova politica di maggiore severita` sui titoli delle discussioni: (ri)leggete il regolamento
No domande tecniche in messaggi privati
<!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 name="generator" content="http://www.inknoise.com/experimental/layoutomatic.php" />
<style type="text/css">
#container {
width: 760px;
\width: 780px;
w\idth: 760px;
margin: 0px auto;
padding: 0px;
background-image: url(fondo1.gif);
border: 1px solid #00FFFF;
}
#navi {
list-style-type: none;
}
#centra {
width: 86px;
padding: 2px;
top:0px;
left:90px;
height: 18px;
}
#bar1 {
width: 86px;
padding: 2px;
margin-bottom: 0px;
top:24px;
left:290px;
font: 900 11px Geneva, Arial, Helvetica, sans-serif;
text-align: center;
z-index:3;
color: #D3C08D;
height: 18px;
vertical-align: text-bottom;
}
#bar1 a:link{
color: #007bc6; text-decoration:none;
}
#bar1 a:visited{
color: #007bc6; text-decoration:none;
}
#bar1 a:hover{
color: #0091E8; text-decoration:underline;
}
#bar1 a:active{
color: #66CCFF; text-decoration:underline;
}
#logo {
float:left;
padding: 0px;
margin-bottom: 0px;
z-index:2
}
#top {
width: 470px;
height: 12px;
padding: 0px;
margin-bottom: 0px;
background-color: #fe8611;
}
#topimg {
top:0px;
left:-180px;
padding: 0px;
height: 220px;
z-index: 1;
border: 1;
border-color: #003366;
}
#titolo {
padding: 0px;
margin-bottom: 0px;
top:200px; left:170px;
z-index:5
}
#bar2 {
width: 130px;
padding: 2px;
margin-bottom: 0px;
top:90px;
left:10px;
font: 900 11px/18px Geneva, Arial, Helvetica, sans-serif;
color: #d3c08d;
text-align: right;
list-style-type: none;
list-style-image: none;
}
#bar2 a:link{
color: #d3c08d;
text-decoration:none;
}
#bar2 a:visited{
color: #d3c08d;
text-decoration:none;
}
#bar2 a:hover{
color: #e9e1c9;
text-decoration:underline;
}
#bar2 a:active{
color: #e9e1c9;
text-decoration:underline;
}
#bar3 {
width: 170px;
padding: 2px;
margin-bottom: 0px;
top:222px;
left:590px;
font: 900 11px/18px Geneva, Arial, Helvetica, sans-serif;
color: #d3c08d;
text-align: left;
list-style-type: none;
list-style-image: none;
}
#bar3 a:link{
color: #007bc6;
text-decoration:none;
}
#bar3 a:visited{
color: #007bc6;
text-decoration:none;
}
#bar3 a:hover{
color: #005883;
text-decoration:underline;
}
#bar3 a:active{
color: #005883;
text-decoration:underline;
}
#banner {
padding: 0px;
margin-bottom: 0px;
background-color: rgb(213, 219, 225);
}
#content {
padding: 5px;
width: 410px;
margin: 0px;
left: 170px;
top: 220px;
}
body {
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
background-color: #829299;
}
body,td,th {
font-family: Arial, Helvetica, sans-serif;
font-size: small;
}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"></head>
<body>
<div id="container">
<div id="logo">[img]logotopsx.gif[/img]</div>
<div id="topimg"><div id="top"></div>
[img]imgtop.jpg[/img][img]titolo.gif[/img]</div>
<div id="bar1">clienti<div id="centra">agenti</div></div>
<div id="bar2">
<ul id="navi"> [*]Azienda [*]Settori di Attività [*]Innovazione [*]Notiziario [*]Lavora con Noi [*]Contatti [*]_ [*]_ [*]ricerca soluzione [*]<input name="cercaprodotto" type="text" size="16" /> [*]vai [/list]
</div>
<div id="bar3">
<ul id="navi"> [*]Meccanica [*]Carpenteria [*]Lavorazione legno [*]Trattamento acque [*]Automotive [*]Ristorazione [*]Collettività [*]Carrozzeria [*]Nautica [*]Industria alimentare [*]Edilizia [*]Tessile [*] [/list]
</div>
<div id="content">
<h1>TITOLO</h1>
nonumyeiusmod tempor inciduntut laore et dolore magna liquam erat volupat Utenim adminim veniam, quisnostrud esxercitation ulamcorpor suscipitlaborisnisiutaliquip exea commodo consequat. Duisautem vel eum estirure dolor in reprehenderit volumptate velitesse mosetaie consequat, velillum dolore eu fugiat nulapariatur. Atvero eos et accusam et iusto odogiodignissum qui blanditpaesent luptatum delenitaigue duoue nihilestimpeditdomingid quod maxim religuard cupiditat, qwuasnulla praid om umdant. Improb paryminuit, lospotiusinflammad ut coercend magistetdodecendensse videantur.</p>
</div>
</div>
</body>
</html>
*j*
ok...grazie Mich_ !
è da poco tempo che mi confronto con i css e devo dire che il passaggio non è privo di insidie. la cosa più difficile è riuscire a garantire i tempi di sviluppo. occorre ragionare in modo molto diverso anche per concepire il layout.
*j*
hem....come si fa a fare un "up"?
*j*
cacchio, ho perso 12 diottrie per guardare l'immagine... :lol:
comunque... mia idea: non si può.
almeno z1 andrebbe posizionato in maniera assoluta.
il problema è il blu che sale fino ad affiancarsi al rosso...
però magari qualcun altro ha qualche idea....
Chicco Ravaglia per sempre con noi!
la cosa più impressionante è che con dreamweaver in modalità grafica non cè alcuna rispondenza con ciò che si vede nei browsers.
qualcuno ha avuto la stessa esperienza?
*j*
bisognerebbe capire cosa ci va dentro quei contenitori in alto.
se si trata di semplici abbellimenti grafici, puoi suddividere il contenitore in alto dx in ulteriori 2 div.
facci vedere il risultato finale di come deve essere quel template per capire meglio.
secondo me si può fare.
l'unico prob è fare allungare il blu di sinistra senza che si allunghi il div rosso.
Ma penso si possa fare.
Certo non è un lavoretto, richiede un bel po di tempo.
Appena lo trovo ci provo
ciao paolo
ps . lo vuoi liquido o bloccato ?
Non so se Dio esiste ma se non esiste ci fa una figura migliore!
- S. Benni -
Permessi di invio
Rispondi quotando