Greetings! I have a website created using css, html, and php. Take a moment to review this code:
<?php
session_start();
include_once "mysql_connect.php";
$log = null;
if(isset($_SESSION["ID"])){
$log = $_SESSION["ID"];
}else{
$log=null;
}
$_SESSION["prevpage"] = "home";
$terms = $_POST["search"];
if($terms == null){
header("location:home");
}
?>
<html>
<head>
<title><?php echo $terms;?></title>
<link rel="icon" type="image/png" href="favicon-32x32.png" sizes="32x32" />
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/text.css">
<link rel="stylesheet" href="css/960_24_col.css">
<link rel="stylesheet" href="css/style.css">
<META NAME="ROBOTS" CONTENT="INDEX, FOLLOW">
<meta name="description" CONTENT="Find everything and anything on Omicrome">
<META NAME="ROBOTS" CONTENT="INDEX, FOLLOW">
</head>
<body>
<div class = "container_24">
<header>
<div id = "rectban">
<h1>Omicrome</h1>
<nav>
<ul>
<li><a href="home">Home</a></li>
<li><a href="articles">Articles</a></li>
<li><a href="about">About</a></li>
<?php if($log != null){?>
<li id = "myprofilebanner"><a href="MyProfile">My Profile</a></li>
<?php }else{ ?>
<li id = "myprofilebanner"><a href="createAccount">Create Account</a> </li>
<?php } ?>
<li id = "loginbanner"><a href= <?php if($log != null){?>"logout.php"<?php }else{?>"login"<?php }?>><?php if($log != null){?>Log Out<?php }else{?>Log In <?php }?></a></li>
</ul>
</nav>
</div>
<div id = "Postban">
<form action="searchresults.php" method="post" enctype="multipart/form-data">
<input class="searchbar" type="text" name="search" size="30" maxlength = "500" placeholder="Search"/>
<input type="submit" class = "searchbtn" value="[ Go ]" />
<a class="Post" href="post" >
[ Post ]
</a>
</form>
</div>
</header>
<div class = "main clearfix">
<div id = "rectsearchresults">
<?php
$fetchlast = mysql_query("SELECT * FROM posts WHERE id=(SELECT MAX(id) FROM posts)");
$lastrow = mysql_fetch_row($fetchlast);
$lastid = $lastrow[6];
for ($i=1; $i <= $lastid; $i++) {
$currentname = mysql_query("SELECT * FROM posts WHERE id=$i");
while ($row = mysql_fetch_array($currentname)) {
$title = $row[0];
$desc = $row[1];
$ID = $row[6];
$title2 = rtrim($title);
$donetitle = str_replace(" ", "-", $title2);
$url = "articles/".$ID."/".$donetitle."";
echo "<div id=\"result\"><img src=\"img/tempsmall.png\" alt = \"icon\" >
<a id=\"resultheader\" href=\"$url\">$title</a><br>
</div>";
}
}
?>
</div>
</div>
</div>
</div>
</body>
</html>
The code above is all on one page and is meant to display search results. I am trying to adjust the positioning of the <a> tag with the id 'resultheader'. While margin left works fine, I am having trouble with margin top. I attempted using display:inline-block as suggested by online resources, but it's not working. Can someone please help me understand why? Here is the CSS code I have:
#rectsearchresults{
position: relative;
margin-top: -10px;
margin-left: -0px;
background: #ffffff;
padding-left: 20px;
padding-right: 20px;
padding-bottom: 20px;
padding-top: 20px;
width:916px;
}
#result{
margin-bottom: 20px;
}
#resultheader{
margin-left:10px;
color:black;
font-size: 15px;
margin-top: -20px;
}
Here is the current output I am getting. I would like the header of each result to align with the top of the image.