CODEWITHSUNDEEP
htmlcss
jack
jack

Reputation: 21

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

Upvotes: 0

Views: 213

Answers (1)

Nikhil Nanjappa
Nikhil Nanjappa

Reputation: 6632

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

'inline' type elements do not accept negative 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.

Upvotes: 3

Related Questions