Clever Geek Handbook

How to output html output using CSS

I am using PHP to loop through an array and return results, each result is displayed along with some html code. Right now, to achieve the indentation, I use the DIV tag and set it like this:

For pin 1:

<div style='height: 20px;margin-left: 60px;'>

For pin 2:

<div style='height: 20px;margin-left: 110px;'>

enter image description here

The problem with this method of setting the margin for each pin is that it always matches the criteria, but sometimes the criteria don't match and the padding is destroyed.

So, basically, is there any other way to use CSS, or some other way to increase the indentation for each output rather than specifying a fixed one?

I apologize if I am not clear enough, but I hope you understand what I am asking, otherwise let me know and I will try to clarify something else.

Here's some sample code:

foreach ($data[0] as $data) {
    if ($data == a) {
        echo "<div style='margin-left: 0px; '><img src='img/server_s.png' style='float: left;'></div>";
    } elseif ($data == b) {
        echo "<div style='margin-left: 60px;'><img src='img/link.png' style='clear: left;'></div>";
    } elseif ($data == c) {
        echo "<div style='margin-left: 110px;'><img src='img/link.png' style='clear: left;'></div>";
    }
}
+3


source to share


2 answers


hope this work for you



$a=0;    
foreach ($data[0] as $data) {

          if ($data == a) {
    echo "<div style='margin-left: ".$a."px; '><img src='img/server_s.png' style='float: left;'></div>";
} elseif ($data == b) {
    echo "<div style='margin-left: ".$a."px;'><img src='img/link.png' style='clear: left;'></div>";
} elseif ($data == c) {
    echo "<div style='margin-left: ".$a."px;'><img src='img/link.png' style='clear: left;'></div>";
}


$a=$a+60;    
}
+1


source


You can achieve this through simple HTML list tags.

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
ul li {
   list-style: none;
   margin: 15px 0px;
}
span {
   border: 1px solid #000;
   padding: 5px;
}
</style>
</head>
<body>

<h2>A Nested List</h2>

<ul>
  <li><span>Milk</span>
    <ul>
    <li><span>Tea</span></li>
        <ul>
            <li><span>Black Tea</span></li>
        </ul>
    </ul>
  </li>
</ul>

</body>
</html>


Sample link: http://www.w3schools.com/Html/tryit.asp?filename=tryhtml_lists_nested Thanks and Regards,

Vivec

+2


source






More articles:


All Articles