jack jack - 2 months ago 6
CSS Question

HTML why does margin-top not work?

Hello I have a web page using css, html and php. Look at this code for a minute please:

<?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="[&nbsp;&nbsp;Go&nbsp;&nbsp;]" />
<a class="Post" href="post" >
[&nbsp;&nbsp;Post&nbsp;&nbsp;]
</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 above code is all on the same page it should display some search results. I want to be able to move the
<a>
tag with the id of
'resultheader'
up and down. For some reason margin left works but margin top does not. I have tried using
display:inline-block
because that was the number one solution according to web articles i read. Can someone please tell me why it doesn't work? Heres my css code:

#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 what I get I want the header of each result to be inline with the top of the image

enter image description here

Answer

<a> (anchor tags) are by default display:inline-block and

inline-block elements does not accept margin top

Many solutions exists to this:

1) Use display: table. It has the content-fitting properties of inline-block but also supports negative margins.

#resultheader {
    margin-left: 60px; //adjust to your likes
    color: black;
    font-size: 15px;
    margin-top: -30px; //adjust to your likes
    display: table;
}

2) Use vertical-align property

#resultheader {
    margin-left: 10px;
    color: black;
    font-size: 15px;
    vertical-align: 10px; //adjust
}

3) Use position: relative & top properties

#resultheader{
    margin-left:10px;
    color:black;
    font-size: 15px;
    position: relative;
    top: -6px;
}

Pick your choice.