[CSS] Posizionamento box rubriche

**Giovanni Pili** · 14-08-2012, 07:31

Salve,
vi metto innanzitutto lo screenshot della mia index:

I box delle rubriche compaiono tutti in verticale uno sotto l'altro. Son due giorni che provo in tutti i modi a posizionarli sempre in verticale ma appaiati; due rubriche per volta: non li voglio così:
[uno]
[due]
[tre]
[ecc.]

ma voglio che si posizionino automaticamente così:

[uno][due]
[tre][alfa]
[beta][delta]

all'interno del box che li contiene "#content".

Questo è il listato della index:

Codice PHP:


<!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" />

<meta name="keywords" content="metapolitica,news,misteri,cultura,controinformazione"/>

<meta name="description" content="rivista metapolitica, bimestrale online"/>

<title>il Petardo</title>

<link href="css/style.css" rel="stylesheet" type="text/css"/>

</head>

<body>

[url="#"]<div id="header"></div>[/url]

<div id="menu">

<ul id="button">[*][url="#"]home[/url][*][url="#"]info[/url][*][url="#"]disclaimer[/url][/list]

</div>

<div id="conteiner">

<div id="leftbar"></div>

<div id="content">

<div id="lastpost">

<?php

include('blog/func.php');

$query="SELECT*FROM articoli ORDER BY data DESC";

$result=$result=mysql_query($query,$conn->conn);

echo'<table width="500px;" cellspacing="0" cellpadding="0">';

while($assoc=mysql_fetch_assoc($result)){

    echo'<tr><td>[url=""]'.$assoc["autore"].'[/url]</td><td>'.$assoc["data"].'</td></tr>';

    echo'<tr><td colspan=2>[url=""]<h1>'.$assoc["titolo"].'</h1>[/url]</td></tr>';

    echo'<tr><td colspan=2>'.substr($assoc["testo"],0,400).'</td></tr>';

    break;

}

echo'</table>';

?>

</div>

<div id="rubriche">

<?php

$query="SELECT*FROM indice ORDER BY rubriche";

$result=$result=mysql_query($query,$conn->conn);

while($assoc=mysql_fetch_assoc($result)){

    echo'<div id="rubriche">

    <h2>'.$assoc["rubriche"].'</h2>

    </div>';

}

?>

</div>

</div>

<div id="rightbar"></div>

</div>

<div id="clear"></div>

<div id="footer"></div>

</body>

</html>

Questi sono i CSS:

codice:

@charset "utf-8";
/* CSS Document */

@import url("reset.css");
@import url("type.css");

body{
	font:lem Calibri,Verdana,Arial,sans-serif;
	background-color:#666;
}

#header{
	margin:0 auto;
	width:900px;
	height:181px;
	background-image:url("../img/testata.png");
}

#menu{
	margin:0 auto;
	width:900px;
	height:30px;
	background-color:#FFF;
	border-top:dotted;
	border-bottom:dotted;
}

ul#button{
	list-style-type:none;
}

#button li{
	float:left;
	text-align:center;
	color:#fff;
	font-size:1.1em;
	text-decoration:none;
	background-color:#000;
	padding-left:2px;
	height:30px;
	line-height:30px;
	margin-right:1px;
}

#button li a:hover{
	float:left;
	text-align:center;
	color:#000;
	font-size:1.1em;
	text-decoration:none;
	background-color:#999;
	padding-left:2px;
	height:30px;
	line-height:30px;
	margin-right:1px;
}

#conteiner{
	margin:0 auto;
	width:900px;
}

#leftbar{
	float:left;
	width:200px;
	height:500px;
	background-color:#FFF;	
}

#content{
	float:left;
	width:500px;
	background-color:#FFF;
}

#lastpost{
	float:left;
	width:500px;
	height:200px;
}

#rubriche{
	float:left;
	width:250px;
	height:250px;
	background-color:#FFF;
}

#rightbar{
	float:left;
	width:200px;
	height:500px;
	background-color:#FFF;	
}

Ho provato anche modificando i CSS in questo modo, ma il risultato non cambia:

codice:

#leftbar{
	position:absolute;
	margin-left:350px;
	width:200px;
	height:500px;
	background-color:#FFF;	
}

#content{
	position:absolute;
	margin-left:550px;
	width:500px;
	background-color:#FFF;
}

#lastpost{
	position:relative;
	float:left;
	width:500px;
}

#rubriche{
	position:relative;
	float:left;
	width:250px;
	height:250px;
	background-color:#FFF;
}

#rightbar{
	position:absolute;
	margin-left:1050px;
	width:200px;
	height:500px;
	background-color:#FFF;	
}

Qualcuno sa spiegarmi come devo fare? grazie.

**Giovanni Pili** · 14-08-2012, 09:11

Ho risolto così:

codice:

.content{
	position:absolute;
	margin-left:550px;
	width:500px;
	background-color:#FFF;
}

.lastpost{
	position:relative;
	float:left;
	width:500px;
}

.rubriche{
	position:relative;
	float:left;
	width:250px;
	height:250px;
	background-color:#FFF;
}

Di conseguenza al posto degli "id" nell'index ho sostituito con le classi. Avevo dimenticato che i parametri degli id sono "univoci".

Discussione: [CSS] Posizionamento box rubriche

Strumenti discussione

Ricerca discussione

Visualizza

[CSS] Posizionamento box rubriche

Permessi di invio