Hello everyone i am a student that this year got into programmng in the university and i am trying to do something in php.
Want i wan to do here is simply remove the margin from all the right divs. I thought since i have 3 of them i can do tha with just if($i%3==0) but that didnt help me. I will share the code with you and i would really me gratefull to any answers. Thank a ton in advantage! --The code----
<!DOCTYPE html>
<html>
<head>
<style>
.wrapper { width: 960px; margin: 0 auto; background-color:black; padding:20px;}
.box{width:300px; height:30px; background-color: #ff0000; color:#fff; font-size: 20px; float: left; padding: 10px;text-align:center; margin-right: 10px; margin-bottom: 10px;}
.clear {clear:both;}
.box1{margin-right:0px;}
</style>
</head>
<body>
<div class="wrapper">
<?php
for ($i=1; $i<=100; $i++)
echo '<div class="box">'.$i.'</div>';
if($i%3==0){
echo '<div class="box box1">'.$i.'</div>';
}else {
echo '<div class="box">'.$i.'</div>';
}
?>
<div class="clear"> </div>
</div>
</body>
</html>
You can use the nth-child pseudo-selector in CSS so you don't have to do all the work in PHP. For example:
.box {
margin-right: 10px;
/* ... */
}
.box:nth-child(3n+3) {
margin-right: 0;
}
Thanks everyone for you helping me. I finally solved my problem and you guys helped me a lot with your ideas. Here is what i finally have done
<!DOCTYPE html>
<html>
<head>
<style>
.wrapper { width: 920px; margin: 0 auto; background-color:black; padding:20px;}
.box{width:300px; height:30px; background-color: #ff0000; color:#fff; font-size: 20px; float: left;text-align:center; margin-right: 10px; margin-bottom: 10px;}
.clear {clear:both;}
.box1{float:right;margin-right: 0px;}
</style>
</head>
<body>
<div class="wrapper">
<?php
for ($i=1; $i<=100; $i++)
if($i % 3 == 0){
echo '<div class="box box1">'.$i.'</div>';
}else{
echo '<div class="box">'.$i.'</div>';
}
?>
<div class="clear"> </div>
</div>
</body>
</html>