Aiuto posizionamento immagini

**Dany007** · 11-04-2010, 12:19

Buongiorno a tutti!

Sono nuovo del forum ma vi seguo ormai da tempo. Sono anche un nuovo user del linguaggio html in quanto sto cominciando da poco a creare le mie prime pagine web. E' da giorni che ho un problema:

Ho creato con photoshop un layout di pagina e fin qua tutto ok. Quando vado a posizionare delle piccole immagini/link nella pagina però c'è qualcosa che non va. Mi spiego: riesco ad allinearle, posizionarle e visualizzarle correttamente, proprio dove voglio, sul mio schermo e con l'anteprima di IE, solo che appena rimpicciolisco la finestra, oppure provo la pagina web su un altro computer con risoluzione diversa le immagini/link si spostano e vanno a finire in altre posizioni dello pagina. Ho cercato di ovviare a questo problema attraverso i CSS e impostando le posizioni in percentuale ma non cambia nulla: sul mio monitor la visualizzazione è perfetta, ma appena rimpicciolisco la finestra di IE oppure visualizzo la pagina su un altro pc le immagini/link si spostano e vanno dove vogliono loro.

Come posso risolvere questo problema e fare in modo che le immagini siano bloccate proprio nel punto dove voglio io?

Grazie mille a tutti!

Dani

ps: lavoro con Dreamweaver

**Myaku** · 11-04-2010, 12:27

a naso ti direi che:
1. o hai usato posizionamenti assoluti con la finestra del browser come sistema di riferimento per le coordinate
2. oppure stai cercando di realizzare un layout fisso ma senza utilizzare un div di larghezza dichiarata in cui "forzare" il layout.
3. (o una combinazione di entrambe)

in ogni caso, se non posti il codice (o un link alla pagina), si va per ipotesi.

**Dany007** · 11-04-2010, 12:40

Ok allora posto il codice perchè la pagina non è ancora online

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=utf-8" />
<title>danielepetrarolo.com - Hey! This is Dani</title>
<link href="Senzatitolo-2.css" rel="stylesheet" type="text/css" />
<link href="CSS-index.css" rel="stylesheet" type="text/css" />
<link href="*.css" rel="stylesheet" type="text/css" />
<style type="text/css">
<!--
#apDiv1 {
	position:absolute;
	width:200px;
	height:115px;
	z-index:1;
	left: 3px;
	top: 4px;
}
-->
</style>
</head>
<p align="center">[img]index.jpg[/img]</p>
<textarea  readonly="readonly" style="background-color:transparent" name="blog" rows="16" cols="45" id="blog">
BLA BLABLA BLABLA BLABLA BLABLA BLABLA BLABLA BLABLA BLABLA BLABLA BLABLA BLABLA BLABLA BLABLA BLABLA BLABLA BLABLA BLABLA BLABLA BLABLA BLABLA BLABLA BLABLA BLABLA BLABLA BLABLA BLABLA BLABLA BLABLA BLABLA BLABLA BLABLA BLABLA BLABLA BLABLA BLABLA BLABLA BLABLA BLABLA BLABLA BLABLA BLABLA BLABLA BLABLA BLABLA BLABLA BLABLA BLABLA BLABLA BLABLA BLABLA BLABLA BLABLA BLABLA BLABLA BLABLA BLABLA BLABLA BLABLA BLABLA BLABLA BLABLA BLABLA BLA 
</textarea>
<table width="200" border="0" id="copyright">
  <tr>
    <td> © Copyright 2010 - www.thisisdani.com</td>
</tr>
</table>
<a href="http://twitter.com/danipetrarolo" target="_blank">
[img]Immagini/Twitter_256x256.png[/img]
</a>

<a href="http://www.facebook.com/daniele.petrarolo" target="_blank">
[img]Immagini/facebook_f.png[/img]
</a>

<a href="http://heythisisdani.blogspot.com" target="_blank">
[img]Immagini/2508235397_8f06f6d705_o.png[/img]
</a>
</body>
</html>



CSS
@charset "utf-8";
/* CSS Document */
body{
	background-color:#000;
	background-repeat:no-repeat;
	background-position:100% 100%;
	background-attachment:scroll;
	
}
#sfondo{
	background-repeat:no-repeat;
	background-position:center;
	background-attachment:scroll;}
#blog{
	position:absolute;
	top:56%;
	left:33%;
	border:none;
	height: 360px;
	width: 301px;
	font-family:Verdana, Geneva, sans-serif;
	font-style:italic;
	
}

#copyright {
	position:absolute;
	top:732px;
	left:460px;
	border:none;
	height: 35px;
	width: 235px;
	font-family:Verdana, Geneva, sans-serif;
	font-style:italic;
	font-size:9px;
}

#twitter{	
	position:absolute;
	top:81.6%;
	left:67.5%;
	width: 33.5px;
	height: 29.5px;
	border:none
}

#fb{
	position:absolute;
	top:81.5%;
	left:64.4%;
	width: 33.5px;
	height: 29px;
	border:none
}
#blogger{
	position:absolute;
	top:81.5%;
	left:61.3%;
	width: 33.5px;
	height: 29.5px;
	border:none
}

In poche parole vorrei mettere le immaginette dei loghi di facebook, blogger e twitter in un punto determinato...tuttavia le posizioni mi variano in base alle dimensioni della finestra...come fare??

Grazie mille

**Vincent.Zeno** · 11-04-2010, 12:45

nota tecnica per Dany007

per postare codice HTML sei tenuto, come tutti, ad utilizzre il tag [CODE][/CODE]

verso fine pagina le istruzioni se ti servono,
http://forum.html.it/forum/misc.php?...bbcode#buttons
altrimenti usa il tasto # del form di compilazione del post

gli utenti ringraziano

buon lavoro

**Dany007** · 11-04-2010, 12:50

scusatemi non lo sapevo! grazie dell'informaizone

**Myaku** · 11-04-2010, 20:38

Originariamente inviato da Dany007
In poche parole vorrei mettere le immaginette dei loghi di facebook, blogger e twitter in un punto determinato...tuttavia le posizioni mi variano in base alle dimensioni della finestra...come fare??

intanto, sarebbe opportuno dargli una sistemata, a quel codice.

non vedo l'apertura di <body>, la tabella è utilizzata in maniera non semantica, i link con i loghi starebbero meglio in una lista che "liberi" dentro al body, gli attributi presentazionali andrebbero nel css anche se alcuni di questi possono essere ammessi dalla dtd in uso (vedi align, border e width)

hai impostato tutto il layout con i posizionamenti assoluti, e questo ti crea ovviamente dei problemi, visto che le coordinate di riferimento sono calcolate dalla finestra del browser (non vedo un padre posizionato), con misure percentuali.

a occhio, potresti limitare l'uso di posizionamenti assoluti, e strutturare il layout utilizzando i <div> per definire le varie "sezioni" della tua pagina.
se proprio non puoi fare a meno di utilizzare posizionamenti assoluti, dovresti avere un padre in posizionamento relativo e di dimensioni non fluide.

**Dany007** · 11-04-2010, 20:50

ho utilizzato i div e sn riuscito a sistemare il tutto!

grazie mille cmq!

Discussione: Aiuto posizionamento immagini

Strumenti discussione

Ricerca discussione

Visualizza

Aiuto posizionamento immagini

Permessi di invio