L'ho visto e fatto mille volte ma adesso non lo ricordo più.
Su questa pagina
potete vedere che dopo l'immagnine del braccio a sinistra il box centrale si sposta di una riga sotto.
Ho provato con float sull'img ma non va
Ho provato inserendo l'img all'interno del div del box ma non va.
Ho provato con il position relative e non va.
Ho provato con position absolute e non va...
cosa dimentico?
Lux
intanto non hai chiuso un div...e adesso guardo il resto...
ho chiuso il tag, non era quello, lo avevo cancellato a furia di tentativi empirici...
ho rifatto tutto perchè non ci capivo un granchè....se ti può essere d'aiuto....:
body{color:#000;margin:auto}
#all{font:1em arial;width:755px;margin:auto;text-align:center;;padding:0px}
#testata{width:755px;float:left;height:257px;text-align:left;background:#ffcc000;margin:0px;padding:-1px}
#contenuto{float:left;background:#ccffff}
#center{float:left;
background: #A9A9A9 url(./images/grigio_c.gif);
position: relative;
top: 0px;
border-bottom : Black 1px solid;
border-left : Black 1px solid;
border-right : Black 1px solid;
border-top : Black 0px solid;
/*margin: 0 0 0 105px; */
width : 498px;
/width : 500px;
w/idth : 498px;
min-height: 300px;
height: auto !important; /* hack for IE */
height: 300px;}
.imma{float:left;margin-top:47px;padding:0px}
.imma2{float:left;margin-top:0px;padding:0px}
Adesso ti posso chiedere io se vedi bene
www.paoloemax.it ? nel senso del testo.....
thanks
Il tuo sito si vede bene, tranne per la barra di scorrimento che esce fuori di qualche pixel.
Ma del css che hai postato non ci ho capito nulla.
Innanzi tutto usi delle dimensioni strane 755 invece di 747 per la larghezza e così via.
Poi non ha molto senso postare una cosa simile. Non si risolve il problema ma lo si aggira. (ipotizzando che questo css funzioni).
Ti ringrazzio comunque per l'attenzione e rilancio il problema
<!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>
<title>art machine </title>
<link rel='shortcut icon' href='http://www.artmachine.it/favicon.ico' />
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<meta http-equiv="expires" content="0" />
<meta http-equiv="reply-to" content="luciano@artmachine.it" />
<meta name="resource-type" content="document" />
<meta name="distribution" content="global" />
<meta name="author" content="luciano amodio" />
<meta name="copyright" content="copyright (c) 2003-2004 by luciano amodio" />
<meta name="keywords" content="book fotografici fotografico foto photo web design grafica graphic computer photoshop html php flash siti sito arte artisti artista art blog agenzia machine calendari" />
<meta name="description" content="light artists: photo book, calendar, advertising, web style & multimedia" />
<meta name="robots" content="index, follow" />
<meta name="revisit-after" content="7 days" />
<meta name="rating" content="general" />
<meta name="generator" content="copyright 2003-2004 by luciano amodio http://www.artmachine.it" />
<meta name="dc language" content="ita" scheme="rfc1766" />
<script type="text/javascript">
<!--
function intercetta() {
for (var i=0; i<document.links.length; i++)
if (document.links[i].classname=="blank") {
document.links[i].target="_blank";
}
}
window.onload = intercetta;
//-->
</script>
<style type='text/css'> @import url('style.css'); </style>
<script type='text/javascript'>
var bookmarkurl="http://www.artmachine.it"
var bookmarktitle="art machine"
function addbookmark(){
if (document.all)
window.external.addfavorite(bookmarkurl,bookmarkti tle)
}
</script>
</head>
<body onload="window.defaultstatus='art machine web site ---- oltre la rete';" id="art-machine">
<div id="all">
<div id="testata">[img]antonio.jpg[/img][img]template_01_02.jpg[/img]</div>
<div id="contenuto">[img]anto-braccio.jpg[/img]</div><div id="center">anto</div></div><map name="menu" id="menu">
<area shape="rect" coords="49,120,72,199" href="index2.php" alt="home" />
<area shape="rect" coords="85,172,124,190" href="pagina.php?name=team" alt="team" />
<area shape="rect" coords="148,168,198,186" href="pagina.php?name=gallery" alt="gallery" />
<area shape="rect" coords="212,160,257,178" href="pagina.php?name=servizi" alt="servizi" />
<area shape="rect" coords="279,152,321,174" href="http://www.artmachine.it/cgi-bin/forum/ikonboard.cgi" alt="forum" class="blank" />
<area shape="rect" coords="347,148,374,168" href="pagina.php?name=link" alt="link" />
</map></body></html>
e il css
body, td {
background: #999 url(grigio_s.gif);
color: #F5F5F5;
font-family: sans-serif;
margin: 0px auto 0px auto;
border: 0px;
padding: 0px;
text-align:center;
scrollbar-3dlight-color : #999;
scrollbar-arrow-color : #999;
scrollbar-base-color : #666;
scrollbar-darkshadow-color : Black;
scrollbar-face-color : #666;
scrollbar-highlight-color : #999;
scrollbar-shadow-color : #999;
scrollbar-track-color : #A9A9A9;
}
a:link, a:visited {
text-decoration: none;
color: #666;
}
a:hover, a:active {
text-decoration: none;
color: #F5F5F5;
}
#all {
border: 0px;
margin: 0px auto;
text-align : left;
width : 747px;
}
#testata {
border : 0px;
height : 257px;
margin : 0px;
padding: 0px;
vertical-align: baseline;
}
#contenuto {float:left;
margin : 0px;
padding: 0px;
vertical-align: top;
background: none url(lato.gif) no-repeat bottom left;
}
h1 #contenuto {
}
img #center {
float: left;
}
#center {
background: #A9A9A9 url(grigio_c.gif);
float:left;
top: 0px;
border-bottom : Black 1px solid;
border-left : Black 1px solid;
border-right : Black 1px solid;
border-top : Black 0px solid;
min-height: 300px;
height: auto !important; /* hack for IE */
height: 300px;
}
FUNZIONA!
ho cambiato qualcosina di qua e di là...mi spiace la tua sfiducia, vuol dire che non l'hai nemmeno guardato...ho cercato di levare meno cose possibile dal tuo originale. troverai i link al css e alle img diversi.
Un consiglio: il css oggi come oggi non è pronto al 100% per essere buttato nella mischia con tutta la sua potenza, quindi io costruirei i box nella maniera più semplice possibile.
non volevo essere sfiducioso...
il solo fatto che tu ti sia preso la briga di leggere quel papiello (alla napoletana) è ammirevole... solo che confrontandolo con quanto avevo fatto io mi sembrava quasi che tu ti riferissi ad altro..
adesso studierò quanto mi hai postato e ti farò sapere con precisione cosa manca...
molti dicono che si può fare tutto con i css, basta solo trovare il modo (accettando cmq le limitazioni dei vecchi browser per i quali metterò a punto una versione compatibile del css tramite include).
Ti ringrazio ancora perchè per due volte ti sei offerto con molti dati...
Lux
Sto studiando il tuo codice:
La prima differenza che salta all'occhio è che tu hai scritto ogni cosa con le lettere minuscole... non so perchè.
Poi le immagini non hanno il percorso completo ma stanno nella root, evidentemente le hai usate così per testare il sito. Poco male.
Differenza rilevante : il div 'contenuto' che nel mio codice contiene il div 'center', nel tuo è vuoto di altri div e il div 'center' lo posizioni al suo fianco.
Nel CSS vedo che aggiungi al #contenuto e a #center la proprietà float:left
Eliminando la mia posizione relativa da #center.
Elimini inoltre da #center tutta la questione legata all'incompatibilità di IE:
width : 498px;
/width : 500px;
w/idth : 498px;
Vediamo cosa succede con i tuoi cambiamenti:
L'allineamento è sfasato sia con IE6 che con Opera e Netscape 7.
Provo a reinserire la parte relativa a width :
width : 498px;
/width : 500px;
w/idth : 498px;
situazione migliorata in tutti e tre i browser, il box è però spostato sulla sinistra ove non c'è l'immagine...
(possibile soluzione : inserire una gif trasparente che simuli la jpg mancante per allineare anche il resto delle pagine).
Resta la sfasatura dovuta a IE.
Correggo l'hack di cui sopra (risultato inutile) e scrivo semplicemente:
width : 500px;
Testo e funziona.
Resta solo la questione della gif ... rimedio come già detto mettendo la gif vuota. Ma non mi piace come metodo... lo reputo un artificio .
Una cosa però che non capisco è che è scomparso il fiocchettino grigio scuro. Ossia:
#contenuto {
float: left;
margin : 0px;
padding: 0px;
vertical-align: top;
background: none url(./images/lato.gif) no-repeat bottom left;
}
come mai? i cambiamenti che agiscono su questa parte sono:
- div contenuto non più genitore del div center
- inserimento di float: left;
Devo ripristinare la gerarchia?
Ho provato a ricreare le gerarchie:
<div contenitore><div sinistro></div><div destro></div> </div>
ho messo come background a del primo div contenitore il fiocchetto, in basso a sinistra ma non si vede più...?
che succede?
dipenderà dal float?
No, ho provato a toglierlo e non esce fuori...
ho provato a lasciare solo il div contenuto escludendo gli altri due ma il prodotto non cambia...
Permessi di invio
Rispondi quotando