posizionamento

**Bregovic** · 16-02-2004, 13:32

Mmmh,
non so vado sul browser gli dico visualizza html e ve lo copio incolllo???

E' questo su explorer pc che mi da problemi:

<!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>Layout a due colonne liquido</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">

body {
margin:0px;
padding:0px;
font-family:verdana, arial, helvetica, sans-serif;
color:#333;
background-color:white;
height: 100%;
width: 100%;
}

a:link{color: #ff9900; font-size: 10px; font-family: Verdana; text-decoration: none}
a:active{color: #000000; font-size: 10px; font-family: Verdana; text-decoration: none}
a:hover {color: #FF9900; font-size: 10px; font-family: Verdana; text-decoration: none}
a:visited{color: #666666; font-size: 10px; font-family: Verdana; text-decoration: none}

h1 {
margin:10px 10px 15px 10px;
padding:0px;
font-size:28px;
line-height:28px;
font-weight:900;
color:#000066;
}

p {
font:10px verdana, arial, helvetica, sans-serif;
margin:10px 10px 16px 10px;
padding:0px;
color:#000000;
}

#testata {
position:absolute;
margin:0px;
top:0;
left:0;
height:81px;
width:100%;
background-color:#000000;
}

#menu {
position:absolute;
top:80px;
left:0px;
width:100px;
background-color:#000000;
height: 100%;
}

#contenuto {
margin-top:100px;
margin-left:150px;
background-color: #FFFFFF;
widht: 800px;
height:400px;
}

.colonna {
width: 33%;
float: left;
}

.piede {
position:absolute;
margin-top: 500px;
margin-left: 100px;

}

</style>
</head>

<body>

<div id="testata">
<object classid="clsid

27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" width="602" height="80" widht="760">
<param name="movie" value="menu_alto.swf">
<param name="quality" value="high">
<embed src="menu_alto.swf" width="602" height="80" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="apllication/x-shockwave-flash" widht="760"></embed></object>
</div>
<div id="menu">

<a href =Untitled-2.php?categoria=2003&min_foto=1>2003</a></p>

<a href =Untitled-2.php?categoria=2002&min_foto=1>2002</a></p>

<a href =Untitled-2.php?categoria=2001&min_foto=1>2001</a></p>

<a href =Untitled-2.php?categoria=2000&min_foto=1>2000</a></p>

<a href =Untitled-2.php?categoria=1999&min_foto=1>1999</a></p>

<a href =Untitled-2.php?categoria=1998&min_foto=1>1998</a></p>

<a href =Untitled-2.php?categoria=1996&min_foto=1>1996</a></p>

<a href =Untitled-2.php?categoria=1995&min_foto=1>1995</a></p>

<a href =Untitled-2.php?categoria=1994&min_foto=1>1994</a></p>

<a href =Untitled-2.php?categoria=1993&min_foto=1>1993</a></p>

<a href =Untitled-2.php?categoria=1992&min_foto=1>1992</a></p>

<a href =Untitled-2.php?categoria=1991&min_foto=1>1991</a></p>

<a href =Untitled-2.php?categoria=1990&min_foto=1>1990</a></p>

<a href =Untitled-2.php?categoria=1989&min_foto=1>1989</a></p>

<a href =Untitled-2.php?categoria=1988&min_foto=1>1988</a></p>

<a href =Untitled-2.php?categoria=1987&min_foto=1>1987</a></p><form action="Untitled-2.php?categoria=method=GET input type="a href =value=&min_foto=1></form>
</div>
<div id="contenuto">

<div class="colonna">

<a href'' onClick='window.open("page.php?id=1","","width=500 ,height=524"); return false;'><img src=uploads/small_1051-01.jpg></a>
Loop rosso Iveco
2003
Acciaio zincato, cuscinetti e vernice rossa

<valign=top></div><div class="colonna">

<a href'' onClick='window.open("page.php?id=2","","width=500 ,height=571"); return false;'><img src=uploads/small_1049-20.jpg></a>
Fremito creativo IV
2003
Legno di rovere e motori elettrici

<valign=top></div><div class="colonna">

<a href'' onClick='window.open("page.php?id=3","","width=500 ,height=575"); return false;'><img src=uploads/small_1047-01.jpg></a>
Fremito creativo II
2003
Gomma nera e motore elettrico

<valign=top></div><div class="colonna">

<a href'' onClick='window.open("page.php?id=4","","width=500 ,height=674"); return false;'><img src=uploads/small_1045-01.jpg></a>
Solitario
2003
Seggiolone in legno 1930 e motovibratore elettrico

<valign=top></div><div class="colonna">

<a href'' onClick='window.open("page.php?id=5","","width=500 ,height=575"); return false;'><img src=uploads/small_1042-01.jpg></a>
Solitario travi
2003
Travi e parti in legno delle capriate del ex teatro di Castiglione

<valign=top></div><div class="colonna">

<a href'' onClick='window.open("page.php?id=40","","width=50 0,height=537"); return false;'><img src=uploads/small_1052-07.jpg></a>
Superfetazione a camme II
2003

<valign=top></div><div class='piede'> 2<a href=Untitled-2.php?categoria=2003&min_foto=13&max_foto=18>3</a></div> </div>
</body>
</html>

**Bregovic** · 16-02-2004, 16:36

Ehm se devo postare in codice in un'altra maniera dimmelo...non so...io ho fatto copia incolla da visualizza html di explorer....però mi sa sa che non è molto chiaro...

:quipy:

**Jerry Masslo** · 16-02-2004, 18:00

Originariamente inviato da Bregovic
Ehm se devo postare in codice in un'altra maniera dimmelo...non so...io ho fatto copia incolla da visualizza html di explorer....però mi sa sa che non è molto chiaro...

:quipy:

in effetti non è che sia chiarissimo comunque già sto vedendo qualcosa, vedo che ci sono un bel po' di tag p lasciati aperti, poi vedo che è xhtml ma il codice non mi pare tanto xhtml, tolgo da me tutta la roba non essenziale e ti faccio sapere.
Ti preannuncio che nel div contenuto avevi usato widht al posto di width, chiaramente questo influisce una cifra.

**Bregovic** · 16-02-2004, 18:04

Ok, sscusami ma io sono del tutto principiante...
Nemmeno sapevo xtml...
Boh

Se riesci a farmi sapere qualcosa te ne sono grata,...altrimenti tornerò alle mie tabelle

(che in qualche modo mi erano riuscite!)

grazie per l'aiuto!

Ciao

**Jerry Masslo** · 16-02-2004, 18:29

prova questo e dimmi cosa va non va e come lo vorresti che ho perso di vista quello di partenza, guarda che stai usando i caratteri in pixel, devo dirtelo, non ti posso fare sconti, sono sconsigliatissimi perché ie non consente il loro ridimensionamento e certi protrebbero avere difficoltà a leggerli, che altro.. non mi ricordo più, va be' prova. Ah io ho messo una mia immagine che non ho le tue, tu dovresti sostituire a Marte.jpg, le tue, per le prove va bene anche la stessa e ti sbrighi col cerca e sostituisci

<html>
<head>
<title>Layout a due colonne liquido</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">

body {
margin:0px;
padding:0px;
font-family:verdana, arial, helvetica, sans-serif;
color:#333;
background-color:white;
height: 100%;
width: 100%;
}
a {font-size: 10px; font-family: verdana,sans-serif;text-decoration:none}
a:link{color: #ff9900}
a:visited{color: #666666}
a:hover {color: #FF9900}
a:active{color: #000000}

h1 {
margin:10px 10px 15px 10px;
padding:0px;
font-size:28px;
line-height:28px;
font-weight:900;
color:#000066;
}

p {
font:10px verdana, arial, helvetica, sans-serif;
margin:10px 10px 16px 10px;
padding:0px;
color:#000000;
}

#testata {
/*position:absolute; */
margin:0px;
top:0;
left:0;
height:81px;
width:100%;
background-color:#000000;
}

#menu {
position:absolute;
top:80px;
left:0px;
width:100px;
background-color:#000000;
height: 100%;
}

#contenuto {
/*margin-top:100px; */
margin-left:150px;
background-color: #FFFFFF;
width: 800px;
height:400px;
}

.colonna {
width: 33%;
float: left;
}

.piede { background:silver;
clear:both;
padding:10px;
/*position:absolute;
margin-top: 500px;
margin-left: 100px; */
}

</style>
</head>

<body>

<div id="testata">
pappardella flash
</div>
<div id="menu">

pappardella menù</p>
</div>
<div id="contenuto">

<div class="colonna">

[img]Marte.jpg[/img]
Loop rosso Iveco
2003
Acciaio zincato, cuscinetti e vernice rossa</p></div>
<div class="colonna">

[img]Marte.jpg[/img]
Fremito creativo IV
2003
Legno di rovere e motori elettrici</p></div>
<div class="colonna">

[img]Marte.jpg[/img]
Fremito creativo II
2003
Gomma nera e motore elettrico</p></div>
<div class="colonna">

[img]Marte.jpg[/img]
Solitario
2003
Seggiolone in legno 1930 e motovibratore elettrico</p></div>
<div class="colonna">

[img]Marte.jpg[/img]
Solitario travi
2003
Travi e parti in legno delle capriate del ex teatro di Castiglione</p></div>
<div class="colonna">

[img]Marte.jpg[/img]
Superfetazione a camme II
2003</p></div>

<div class="piede"> 1 2 3 </div>
</div>
</body>
</html>

**Bregovic** · 16-02-2004, 18:44

mmhh
controllo le differenze col mio...forse tu apri e chiudi il div ogni volta...
<Boh devo guardarci bene...

Lo provo e ti faccio sapere come va!

Grazie mille!

**Bregovic** · 17-02-2004, 11:50

Dunque,
non ho usato proprio il tuo codice, ma ho iniziato a sistemare widht scrivendolo bene :adhone: e ho chiuso i tag

...

Ora mi sembra sia andato a posto...

Unica domanda per ora, non voglio cantar vittoria troppo presto..

In alcuni casi, quando forse la descrizione è troppo lunga mi mette le immagini sotto spostate in basso lasciand una riga vuota.
Ma lo fa ad esempio solo con le prime due...

Immagino quindi di dover spaziare un pò di più le righe...

Come?

Ehm...spero di essere stata abb chiara???

**Jerry Masslo** · 17-02-2004, 15:12

ho capito si e no, mi sa che tu per righe intendi l'equivalente delle righe delle tabelle, ma li non ci sono righe, se c'è testo in più quello che sta sotto si deve spostare altimenti si azzuffano. Non mi viene molto in mente per risolvere se non dare dei
in più dove c'è poco testo.

**Bregovic** · 17-02-2004, 15:21

Si scusami se non so usare termini tecnici!
E' come hai detto tu!
Ma non esiste tipo padding o cose simili percui si lascia un tot di spazio tra un elemento e l'altro?

Cmq per ora sono a posto!

Grazie

**Jerry Masslo** · 17-02-2004, 17:53

scusa dormivo, puoi dare un height, ti calcoli l'altezza che ti serve, considerato lo spazio preso dal testo più lungo, per i div e gliela imponi.

.colonna {width:33%;float:left;height:300px}

c'è sia il padding che il margin ma per quello che serve a te non ci fai niente.

Discussione: posizionamento

Strumenti discussione

Ricerca discussione

Visualizza

Permessi di invio