[CSS] posizionare pulsanti nel menù

**Giovanni Pili** · 27-05-2012, 17:43

Salve, ho un problema nel posizionare dei pulsanti all'interno di un box, alto esattamente quanto le immagini che fungono da pulsanti (50px). Questi sono i CSS del box menu e dei pulsanti:

codice:

div.menu
{
	position:absolute;
	background-color:#000;
	color:#FFF;
	margin-top:30px;
	margin-left:0px;
	padding-top:0px;
	width:1280px;
	height:50px;	
}

div.pulsanteEditor {
	 position:absolute;
     background:url('../immagini/editor_default.png');
	 background-repeat:no-repeat;
	 margin-left:200px;
	 width:151px;
	 height:50px;
    }

div.pulsanteEditor:hover {
	position:absolute;
    background: url('../immagini/editor_hover.png');
	background-repeat:no-repeat;
	margin-left:200px;
	width:151px;
	height:50px;
    }

div.pulsanteLogout {
	 position:absolute;
     background:url('../immagini/logout_default.png');
	 background-repeat:no-repeat;
	 margin-left:351px;
	 width:151px;
	 height:50px;
    }

div.pulsanteLogout:hover {
	position:absolute;
    background: url('../immagini/logout_hover.png');
	background-repeat:no-repeat;
	margin-left:351px;
	width:151px;
	height:50px;
    }

Questo invece è il listato della index:

codice:

<!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>Home</title>
<link rel="stylesheet" href="CSS/style.css" type="text/css">
</head>

<body>
<h1>Home page</h1>

<div class="menu">
<?php
include('blog/func.php');

if(isset($_SESSION['utente'])){
	
	$utente=$_SESSION['utente'];
	
	if(@session_is_registered('amministratore')){
	$admin=('<div class="pulsanteEditor"></div>');
	
}else{
	
	$admin='';
}

	echo('<h2>Benvenuto</h2> | '.$utente . $admin.'<div class="pulsanteLogout"></div>');
	
}else{
	echo('<h2>Benvenuto</h2> | Registrati | Loggati');
}
?>
</div>
</body>
</html>

Vorrei che comparissero come in questo fotomontaggio che ho fatto per farvi capire:

Al contrario di quanto succede nel fotomontaggio i pulsanti mi compaiono sotto la barra nera.

Mi spiegate come devo fare, per favore?

**Giovanni Pili** · 27-05-2012, 18:44

HO RISOLTO NEL SEGUENTE MODO:

codice:

div.menu
{
	position:absolute;
	background-color:#000;
	color:#FFF;
	margin-top:30px;
	margin-left:0px;
	padding-top:0px;
	width:1280px;
	height:50px;	
}

div.benvenuto{
	 position:relative;
	 float:left;
}

div.pulsanteEditor {
	 position:relative;
	 float:left;
     background:url('../immagini/editor_default.png');
	 background-repeat:no-repeat;
	 width:151px;
	 height:50px;
    }

div.pulsanteEditor:hover {
	position:relative;
	float:left;
    background: url('../immagini/editor_hover.png');
	background-repeat:no-repeat;
	width:151px;
	height:50px;
    }

div.pulsanteLogout {
	 position:relative;
	 float:left;
     background:url('../immagini/logout_default.png');
	 background-repeat:no-repeat;
	 width:151px;
	 height:50px;
    }

div.pulsanteLogout:hover {
	position:relative;
	float:left;
    background: url('../immagini/logout_hover.png');
	background-repeat:no-repeat;
	width:151px;
	height:50px;
    }

codice:

<!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>Home</title>
<link rel="stylesheet" href="CSS/style.css" type="text/css">
</head>

<body>
<h1>Home page</h1>

<div class="menu">
<?php
include('blog/func.php');

if(isset($_SESSION['utente'])){
	
	$utente=$_SESSION['utente'];
	
	if(@session_is_registered('amministratore')){
	$admin=('<div class="pulsanteEditor"></div>');
	
}else{
	
	$admin='';
}

	echo('<div class="benvenuto"><h2>Benvenuto</h2> '.$utente.'</div> '.$admin.'<div class="pulsanteLogout"></div>');
	
}else{
	echo('<h2>Benvenuto</h2> | Registrati | Loggati');
}
?>
</div>
</body>
</html>

Discussione: [CSS] posizionare pulsanti nel menù

Strumenti discussione

Ricerca discussione

Visualizza

[CSS] posizionare pulsanti nel menù

Permessi di invio