Problema con il posizionamento

**BartoFactory** · 30-07-2010, 12:21

Salve ragazzi,
da un pò di tempo sto diventando matto perchè il position: relative sembra non funzionare in certi div...sono sicur oche sbaglio io perchè magari non conosco approfonditamente il css.
Vi posto di seguito il codice:

codice:

<?xml version="1.0" encoding="iso-8859-1"?>
<html>
<head>
<title>Associazione San Martino</title>
<link rel="stylesheet" type="text/css" href="css/style.css" />
<!--[if IE]>
<link rel="stylesheet" type="text/CSS" href="css/style_ie_fix.css">
<![endif]-->
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.cycle.all.2.74.js"></script>
<script type="text/javascript">
$(document).ready(function() {
// inizio effetto galleria
    $('.slideshow').cycle({
	
		fx: 'cover',
		speed: 800, 
		timeout:  10000 
	});
//Fine effetto galleria
});
</script>

</head>
<body>
<center>
<div class="container">
<div class="menu">
[img]img/logo1.png[/img]
<table cellpadding="0" cellspacing="0" border="0" id="table_menu" height="20"><tr><td>
<ul class="nav">
	[*]<span>HOME</span>
	[*]<span>ATTIVITA'</span>
	[*]<span>CHI SIAMO</span>
	[*]<span>NOI</span>[/list]
</td></tr></table>

</div>
<div class="ie">
<div class="slideshow">
		[img]images/03.jpg[/img]
		[img]images/04.jpg[/img]
		[img]images/05.jpg[/img]
		[img]images/06.jpg[/img]
		[img]images/07.jpg[/img]
</div>

[img]img/top_slide.png[/img]

<div class="content">
<table border="0" cellspacing="0" cellpadding="0" width="960">
<tr>
<td align="center">
[img]img/1_tab.png[/img]
</td>
<td align="center">
[img]img/2_tab.png[/img]
</td>
</tr>
</table>




<table border="0" cellpadding="0" cellspacing="0" width="400" class="table_tab">
<tr>
<td>
[img]img/1_picc.png[/img]
</td>
<td>
[img]img/2_picc.png[/img]
</td>
</tr>
<tr>
<td>
[img]img/3_picc.png[/img]
</td>
<td>
[img]img/4_picc.png[/img]
</td>
</tr>
</table>
<div class="box_news">
<span class="notizie">NOTIZIE</span>

<div class="news">
<span class="title">xxxxxxxxxxxxxxxxxxx</span>

<span class="descrizione">yyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyy</span>



<span class="title">xxxxxxxxxxxxxxxxxxx</span>

<span class="descrizione">yyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyy</span>
</div>
</div>
</div>
</div>
</div>
</center>
</body>
</html>

e di seguito ecco il css:

codice:

body{
	background-color: #ffffff;
	margin:0px;
}

.container{
	background: #ffffff url('../img/back.png') repeat-y;
	width: 960px;
	height: auto;
	display: block;
}

.menu{
	display: block;
	position:relative;
	top: 0px;
	background: url('../img/back_menu.png') no-repeat;
	height: 117px;
	width: 900px;
	z-index: 1000;
}

.slideshow{
	position: relative;
	top: -117px;
	z-index: 900;
}

.bottom{
	z-index: 1000;
	position: relative;
	top: -145px;
	width: 940px;
	height: 28px;
}

.logo{
	position:relative;
	width: 150px;
	height: 150px;
	left: -350px;
	margin-Top: -25px;
	z-index: 1100;
}

// Inizio Menù

#table_menu{
	margin-top: -20px;
	z-index: 1000;
}

.nav {
	position: relative;
	top: -53px;	
	margin-left: -440px;
list-style: none;
}

.nav ul{
	list-style: none;
}

.nav li{
	float: left;
	background: url('../img/back_nav_right.png') right top no-repeat;
	margin: -8;
	padding: 0;
}

.nav a{
	display: block;
	background: url('../img/back_nav_left.png') left top no-repeat;
	padding: 0px 8px;

	font-family: Helvetica, Arial, sans-serif;
	font-size: 13px;
	font-style: normal;
	font-weight: bold;
	text-transform: uppercase;
	letter-spacing: normal;
	line-height: 0.85em;
	text-decoration: none;
	color: #515151;
}

.nav a span{
	display: block;
	background: url('../img/back_nav.png') repeat-x;
	padding: 4 18 5 13;
}

//Fine Menù

//Vorrei cambiare la proprietà top
.content{
	position:relative;
	top: -130px;
}

.table_tab{
	position:relative;
	left:-230px;
}

.box_news{
	display: block;
	background: url(../img/back_news.png) no-repeat;
	width: 400px;
	height: 250px;
	position:relative;
	top: -160px;
	left: 240px;
}

.notizie{
	font-family: Helvetica, Arial, sans-serif;
	font-size: 25px;
	font-style: normal;
	font-weight: bold;
	text-transform: normal;
	line-height: 1.2em;
	text-align:left;
	position: relative;
	left: -125px;
	top: 20px;
}

.news{
	display: block;
	width: 350px;
	height: 350px;
	padding-top: 40px;
	text-align:left;
}

.title{
	font-family: Georgia, serif;
	font-size: 10px;
	font-style: normal;
	font-weight: normal;
	text-transform: uppercase;
	letter-spacing: 1px;
	line-height: 2em;
	text-align: left;	
}

.descrizione{
	font-family: Cambria, serif;
	font-size: 14px;
	font-style: italic;
	font-weight: normal;
	text-transform: normal;
	letter-spacing: normal;
	text-align: left;
	line-height: 0.85em;	
}

in pratica vorrei alzare il div content, sapreste aiutarmi o almeno indirizzarmi verso una soluzione?
Grazie a priori.

**psycho54h** · 31-07-2010, 17:29

Guarda, così a occhio è croce dovresti usare il margin-top e non il top

Ma sarebbe meglio che tu lo uppassi da qualche parte in modo da poterlo guardare al completo di immagini e tutto.

Discussione: Problema con il posizionamento

Strumenti discussione

Ricerca discussione

Visualizza

Problema con il posizionamento

Permessi di invio