Dynamic menu with php php and mysql

HTML & CSS
1

Hello i developed a dynamic menu with php and mysql, but the text of the menu overlaps or duplicate.

Here’s the css code:

body{ margin-top:0px; top:0px; background-image:url(fondo.png); margin-left:200px; height:200px; background-repeat:no-repeat}
	#principal{ width:800px; height:200px; }
	#header{ width:800px; height:360px; float:left}
	#main{ width:1000px; height:250px; float:left}
	#menu{ width:200px; height:400px; ; float:left; padding-top:4px   }
	.boton{ width:150px; height:25px; color:#FFFFFF; ; float:left; padding-top:5px;     font-size: 1.0em;}
	.url{ color:#FFFFFF; text-decoration:none;  }
	#contenido{ width:720px; height:300px; float:left; margin-left:-20px  }
	#ima_budin{  width:300px; height:250px; float:left}

////////////

Here’s the php code:

<?php
require_once("conexion.php");
if(isset($_GET["id"]) ){
	
$sql="select texto from contenido where id_menu=". $_GET["id"] ." ";
} else
{
 $sql="select texto from contenido where id_menu=1 ";  	
}
$res = mysql_query($sql, $con);
if ($reg=mysql_fetch_array($res))
{
   $contenido = $reg["texto"];	
}


?>
<html>
<head>

<title>Untitled Document</title>

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

<body>
<div id="principal"><div id="header">
</div>
<div id="main">
<div id="menu">
<?php
$sql = "select * from menu";
$res = mysql_query($sql,$con);
while ($reg = mysql_fetch_array($res))
{
   ?>
   <div class="boton"><a href="delibery.php?id=<?php echo $reg["id_menu"];?>" class="url"><?php echo $reg["texto"]; ?></a></div>

   <?php	
}
?>



</div>

<div align="center" id="contenido">

<?php echo $contenido; ?></div>
g
</div>

</div>
</body>
</html>

and here’s the php site:

http://argentvision2.zapto.org/carlos/delibery.php?id=1

What do i have to do so that the menu stops overlaping

Thanks
Mariano Alippi.

2

Hi alp3d. Welcome to the forums. :slight_smile:

Off Topic:

For future reference, don’t bother to post PHP code in the CSS forum, as it’s not relevant. What we need to see is what reaches the browser, after PHP has been processed. :slight_smile:

The problem is just that you’ve placed an image of the whole page as a background on the body element:

body {
margin-top: 0px;
top: 0px;
[COLOR="#FF0000"]background-image: url(fondo.png);[/COLOR]
margin-left: 200px;
height: 200px;
background-repeat: no-repeat;
}

You can’t realistically build a web page like that. Those items like the header and other backgrounds should be built with HTML and CSS. Trying to get text and other elements to position nicely over an image is next to impossible over the various devices, and breaks easily if font sizes change etc.

3

With regard to your php, please be aware that the mysql_* extension is now deprecated as of the current version of PHP and will very likely be removed from the next 5.x version and will likely not be in PHP 6.x (when it eventually is released). You should migrate over to either the mysqli_* extension or to PDO. PDO is a better choice as it doesn’t tie you down so much to a particular database server software.

Once you have migrated you should use Prepared Statements to prevent SQL Injection attacks. Have a read of this article from the PHP manual, it shows how to use prepared statements with PDO and also explains the principle.

4

Thank you for your answer, the thing is i’m too junior yet.

So you say that without a big background image surelly the text of the menu will stop overlaping or duplicating.
In internet explorer the text of the menu get completely overlaped or duplicate,
Thank you a lot i’ll make those changes in the site.
For the PHP i’ll try to use the info you gave me so as not having deprecated issues in the near future.

5