Im new to web development. I want to use this index page layout in every other page. So I make this code. Now in when index page open I get the perfect layout with that table included in php. But when I click on old book It redirected to the "1.php" but layout remains same and that table didnt replace. I have attached screenshot now I want that that book displaying section should replace in every other redirected page but Im not getting by this code please suggest me edit in this code
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="cz">
<head>
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #ff3333;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover {
background-color: #ff8080;
}
</style>
<style>
body
{
background-image: url("back.jpg");
background-position:0px 0px;
background-size: cover;
background-repeat: repeat;
}
</style>
<style>
.center {
margin: auto;
width: 60%;
padding: 100px;
}
</style>
</head>
<body>
<style>
table{
border-spacing:15px;
}
td{
padding:30px;
}
body
{
background-image: url(back.jpg);
background-position:0px 0px;
background-attachment:fixed;
background-size: cover;
background-repeat: repeat;
}
</style>
<div class="center">
<ul>
<li><a class="active" href="?page=home">NewBooks</a></li>
<li>OldBooks</li>
<li>Rent a book</li>
<li>Feedback</li>
</ul>
<div id="RightPart">
<?php
$con;
require "connect.php";
$sql="select * from nbook";
$row = $conn->query($sql);
$n=0;
echo"<form method='post'><table border='0' align='center'><tr>";
while($arr = $row->fetch_assoc())
{
$i=$arr['BookId'];
if($n%3==0)
{
echo "<tr>";
}
echo "
<td height='280' width='240' align='center'><img src='data:image/jpg;base64,".base64_encode( $arr['BookImage'] )."'height='250' width='200'><br/>
<b>BOOKNAME:</b>".$arr['BOOKNAME']."
<br><b>Author:</b>".$arr['Author']."
<br><b>Publication:</b> ".$arr['PublicatonHouse']."
<br><b>Discount:</b>".$arr['Discount']."%
<br><br><a href='buy.php?con=11& itemno=$i'><img src='images/MetalPlakDa5new.gif' width='70' height='20'/></a>
<a href='index.php?con=11'><img src='images/view7.jpg' width='70' height='20'/></a>
</td>";
$n++;
}
echo "</tr></table>
</form>";
if($_REQUEST['con']==1)
{
include("1.php");
}
error_reporting(1);
include("index1.php");
?>
<div class="cleaner"></div>
</div>
<div id="Bottom">
<p class="down"><b>Copyright © VJTI BOOK SHOP by:VJTI</b></p>
</div>
</div>
</div>
</body>
</html>
Better, You write separate header.php, sidebar.php and footer.php.
Then include them in each of your pages in the order below :
<?php
include("header.php");
include("sidebar.php");
?>
.............
.............
Here goes individual page's HTML content followed by
..............
..............
<?php
include("footer.php");
?>
To have a well-formed pages it is better to spend a little to learn simple and modern PHP template engines like Twig and start your career like a Hero :)
Related
I have a navbar which is dynamic. I want to display the data on same page when user click on link. I am using $_REQUEST. Code is working fine but when I run the script it gives an error that 'undefined index val'... but when user click on a link it works fine. I want to remove that error.
<html>
<head>
<style>
body {
background: #212121;
font-size:22px;
line-height: 32px;
color: #ffffff;
word-wrap:break-word !important;
font-family: 'Quicksand', sans-serif;
margin: 0;
padding: 0;
}
h1 {
font-size: 60px;
text-align: center;
color: #FFF;
margin-top: 150px;
font-family: 'Russo One', sans-serif;
}
h1 span {
color: #FF4649;
}
#container {
margin: 0 auto;
}
nav {
margin: 35px 0;
background-color: #FF4649;
}
nav ul {
padding: 0;
margin: 0;
list-style: none;
position: relative;
}
nav ul li {
display:inline-block;
background-color: #FF4649;
}
nav a {
display:block;
padding:0 10px;
color:#FFF;
font-size:20px;
line-height: 60px;
text-decoration:none;
}
nav a:hover {
background-color: #333;
}
nav ul ul {
display: none;
position: absolute;
top: 60px;
}
nav ul li:hover > ul {
display:inherit;
}
nav ul ul li {
width:230px;
float:none;
display:list-item;
position: relative;
}
nav ul ul ul li {
position: relative;
top:-60px;
left:230px;
}
nav ul ul li {
border: 1px solid white;
}
//li > a:after { content: ' ▼'; }
//li > a:only-child:after { content: ''; }
</style>
</head>
<body>
<html>
<head>
<meta charset="UTF-8">
<title>Pure CSS DropDown Menu</title>
<link href="https://fonts.googleapis.com/css?family=Quicksand|Russo+One&display=swap" rel="stylesheet">
<link rel="stylesheet" href="style.css">
</head>
<body>
<?php
$con=mysqli_connect("localhost","root","","links");
if(!$con){
echo "error occured";
}
$query="SELECT * FROM cat";
$result=mysqli_query($con,$query);
?>
<div id="container">
<nav>
<ul>
<?php
while($row=mysqli_fetch_array($result)){
$fn_id=$row['id'];
$sub_query="SELECT * FROM subcat WHERE catid=".$fn_id;
$sub_result=mysqli_query($con,$sub_query);
?>
<li><?php echo $row['name'];?>
<ul>
<?php
while($sub_row=mysqli_fetch_array($sub_result)){
?>
<li> <?php echo $sub_row['anme'];?></li>
<?php
}
?>
</ul>
<?php
}
?>
</li>
</ul>
</nav>
<h1>Simple <span>CSS</span> DropDown Menu</h1>
</div>
<?php
$query='SELECT * FROM data WHERE subcat='.$_REQUEST['val'];
$result=mysqli_query($con,$query);
while($row=mysqli_fetch_array($result)){
?>
<p><?php echo $row['Name'];?></p>
<?php
}
?>
</body>
</html>
</body>
</html>
Change
$query='SELECT * FROM data WHERE subcat='.$_REQUEST['val'];
Into
$query='SELECT * FROM data WHERE subcat='.!empty($_REQUEST['val']) ? $_REQUEST['val'] : '');
I've tried everything I know to make the height of the black part change according to the "samples" in the picture above. Whenever I add new "sample" that will go down the black part does not follow. Is there something wrong in my code, if there is please let understand how to fix it cause Im new at this.
Here is my code:
body,
html,
.yourteachers,
.fullpage
{
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}
.fullpage
{
background-color: black;
}
.leftForm
{
background-color: #2c384a;
width: 204px;
height: 100%;
float: left;
font-family: calibri;
color: white;
text-align: center;
}
.yourteachers
{
text-align: center;
}
.announcementSlider
{
background-color: #323f4f;
color: white;
font-size: 24px;
height: 280px;
width: 200px;
margin: 20px;
display: inline-block;
}
<html>
<head>
<link rel="stylesheet" type="text/css" href="css/teachers.css">
</head>
<body>
<header>
<nav>
<div class="nav-wrapper blue">
<div class="container">
Teachers
<i class="material-icons">menu</i>
<ul class="hide-on-med-and-down right">
<li><a id="dashb">Home</a></li>
<li><a id="logout">Log Out</a></li>
</ul>
</div>
</div>
</nav>
</header>
<div class="fullpage">
<div class="leftForm hide-on-med-and-down">
<img src="pictures/default-avatar-250x250.png">
<p class="name">
<?php echo $name; ?>
</p>
<p class="section">
<?php echo $grade; ?>-
<?php echo $section; ?>
</p>
</div>
<div class="leftForm sidenav blue center" id="slide_out">
<img src="pictures/default-avatar-250x250.png">
<p class="name">
<?php echo $name; ?>
</p>
<p class="section">
<?php echo $grade; ?>-
<?php echo $section; ?>
</p>
</div>
<div class="yourteachers">
<?php
while ($row = mysqli_fetch_array($query)) {
echo '<a class="announcementSlider" href="teacherinfo.php?id=' . $row['IDNum'] . '">
<img src="pictures/blank photo.png" class="teacherpic"><br>
<span>'.$row['LastName'].'</span><br>
<span>'.$row['Grade'].' - </span>
<span>'.$row['Section'].'</span>
</a>';
}
?>
</div>
</div>
<script type="text/javascript">
var a = document.getElementsByClassName("announcementSlider");
for (i = 0; i < a.length; i++) {
a[i].onclick = function() {
location.href = "teacherinfo.php";
};
}
</script>
<script src="js/teachers.js"></script>
<script src="sameFunctions.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<script type="text/javascript">
const slide_menu = document.querySelectorAll(".sidenav");
M.Sidenav.init(slide_menu, {});
</script>
<footer>
<div class="foot">
<div class="socialMed">
</div>
</div>
</footer>
</body>
</html>
It's because your .fullpage needs to follow .yourteachers 's height. And your .leftForm has float: left but it's parent (.fullpage) still doesn't know the exact height of it's children. To fix it, you need to add clear: both by using div with additional .clearboth class or css :before or :after pseudo-selector.
see my fiddle here
In my approach above, I'm using fixed sidebar and add margin-left on .yourteachers to fix sidebar height issue. For better implementation, I recommend you to use flex box so you keep your sidebar not using fixed position.
<!-- language-all: lang-css -->
body, html, .yourteachers, .fullpage {
margin: 0;
padding: 0;
}
body, html {
width: 100%;
height: 100%;
background: black;
}
.fullpage {
overflow: hidden
}
.leftForm{
background-color: #2c384a;
width: 204px;
height: 100%;
float: left;
font-family: calibri;
color: white;
text-align: center;
}
.yourteachers{
text-align: center;
}
.announcementSlider{
background-color: #323f4f;
color: white;
font-size: 24px;
height: 280px;
width: 200px;
margin: 20px;
display: inline-block;
}
Have u tried height: 100vh? Height is automatically adjusting, so just height: 100% means 100% height of parent.
How would I be able to load all my login/profile.php files into one specific div without affecting or reloading the rest of my website? I have thought of using $_GET variables to keep the parent url the same and I have used this same tactic for my navigation menu where all my pages load in my #back_drop div.
Below I put together a very basic version of what my site looks like and as you can see the #side_panel is where I would like all my login/profile files to load into while the nav, content, and footer is unaffected by what the #side_panel does. I want to be able to login, logout, get errors, reset password, etc inside this div without it reloading the main portion of my site.
I have an index.php file which is my main index with includes for my header, aside, content, and footer and then I have an entire folder for my php files relating to my login form and other files that will load into my main content page. I didn't want to separate each include so I have them below with comments before each include noting that they are separate so you can see what I am working with.
I am currently loading my login files using an iframe because it is the simplest way to get what I am looking for but have found it very irritating at times especially when I logout and pages requiring to be logged in are still present unless the page is refreshed which seems to be a major security issue.
I have tried to use an include function into my #side_panel but if I attempt to login in, it either won't connect or will end up logging in through the parent url depending on how I edit my login.php file. I am thinking of using $_GET variables but am not sure if that would be a security issue if the variables are in the url but cannot think of any other way
index.php <-- My main index page
<?php
$page = $_GET['page'];
if (!$page) {
$page = 'Home';
}
include('includes/header.php');
echo "<div id='back_drop'><div id='content'>";
include('php/'.strtolower($page).'.php');
echo "</div></div>";
include('includes/footer.php');
?>
aside.php <-- where my login/profile files are included from
<iframe src="php/index.php" height="500px" width="100%" style="position: relative; border:none;"></iframe>
$(document).ready(function(){
$("#show_login").click(function(){
$("#side_panel").toggle("slide");
$("#side_panel").toggleClass("slide");
$(this).find('img').toggle();
if ($("#side_panel").hasClass("slide")) {
$("#back_drop").animate({'padding-left': '0'}, 300);
} else {
$("#back_drop").animate({'padding-left': '230px'}, 300);
}
});
});
* {
margin: 0;
padding: 0;
}
a {
outline: 0;
}
body {
width: 100%;
-webkit-box-pack: center;
background-color: #CCC;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
header, nav, section, aside, footer, article {
display: block;
}
#big_wrapper {
text-align: left;
width: 100%;
display: -webkit-box;
display: -moz-box;
-webkit-box-orient: vertical;
-webkit-box-flex: 1;
}
#top_header {
position: fixed;
width: 100%;
text-align: left;
padding-top: 4px;
padding-bottom: 2px;
padding-left: 4px;
border-bottom: 2px solid #262626;
border-radius: 3px 3px 0 0;
background-color: #404040;
box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.2), 2px 0 2px 2px rgba(0, 0, 0, 0.19);
z-index: 9999;
}
#back_drop {
background-color: #CCC;
padding-top: 10px;
padding-left: 230px;
max-width: 100%;
}
#content {
border: 5px solid red;
height: 500px;
}
#show_login {
float: left;
width: 24px;
padding-top: 12px;
padding-left: 5px;
height: auto;
cursor: pointer;
-webkit-user-drag: none;
-webkit-touch-callout: none;
-webkit-user-select: none;
}
#show_login:active {
width: 23px;
padding-top: 13px;
padding-right: 1px;
}
#side_panel {
position: fixed;
background-color: #a19b9b;
color: #000;
margin-top: 54.491px;
width: 230px;
height: 100%;
word-wrap: break-word;
z-index: 9999;
transform: translateX(0);
}
.slide {
transform: translateX(0);
}
#main_section {
clear: right;
text-align: center;
margin-right: auto;
}
#bottom_footer {
clear: both;
text-align: center;
padding: 20px;
background-color: #404040;
}
<!-- header.php -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<head>
</head>
<body>
<div id='big_wrapper'>
<header id='top_header'>
<nav id="navigation">
<div id="show_login">
<button>Show</button>
</div>
<div id="main_menu">
<!--Navigation header menu
<?php
$sections = array('Home','nav1','nav2','nav3','nav4','nav5');
foreach($sections as $row) {
echo "<li id='menu_list'><a href='index.php?page=$row'&login='$login'";
if ($row==$page) {
echo "class='active'";
}
echo ">$row</a>";
}
?>-->
</div>
</nav>
</header>
</div>
<div id='side_panel'>
<div id='login_contain'>
<!-- aside.php -->
#side_panel<br>
Where my login/profile pages load in
</div>
</div
<!-- This is what is actually in my code. Commented to show in snippet
<?php
echo "<div id='side_panel'><div id='login_contain'>";
include('includes/aside.php');
echo "</div></div>";
?>
-->
<div id='back_drop'>
<div id='content'>
#back_drop<br>
All my navigation links load only in this div by using href='index.php?page=(($_GET['page']))' and if I could do the same thing maybe for my #side_panel to include all my login/profile pages
</div>
</div>
<!--footer.php -->
<div class="footer_nav">
<!--Navigation footer menu
<?php
$sections = array('Home','nav1','nav2','nav3','nav4','nav5');
foreach($sections as $row) {
echo "<li><a href='index.php?page=$row'>$row</a></li>\n";
}
?>
-->
</div>
<footer id='bottom_footer'>
</footer>
</body>
</html>
Couple things here:
You will want to use AJAX for this, an iFrame is not suitable for your needs
Not sure how much of your dynamic page system is represented in your sample script but you should check on your page call on the $_GET, that method can be dangerous if someone tests your $_GET and includes a page that shouldn't.
/index.php
<?php
# Create an allow array (or have these in a database)
$public = array(
'home',
'about'
'contact'
);
# Check that it's not empty. If not empty, make sure it's allowed. Use home as default
$page = (!empty($_GET['page']) && in_array(strtolower($_GET['page']), $public))? $_GET['page'] : 'home';
# Include normally
include('includes/header.php') ?>
<div id='back_drop'>
<ul>
<li>Home</li>
<li>Contact</li>
<li>About</li>
</ul>
<div id='content'>
<?php include('php/'.$page.'.php') ?>
</div>
</div>
<!-- add jquery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(function(){
// On clicking the menu link
$('li > a').on('click',function(e){
// Stop the link from reloading page
e.preventDefault();
// Create ajax
$.ajax({
// Send request as GET
'type': 'get',
// Send to the index page
'url': '/index.php',
// equivalent of ?page={pagename}
'data': {
'page': $(this).attr('href')
},
// When request comes back, find the content and place just the content
// into this page's content
success: function(response) {
// "response" is what is coming back from the ajax all
// Find the content from the returned html
var getContent = $(response).find('#content').html();
// Place it into this page's content id
$('#content').html(getContent);
}
});
});
});
</script>
<?php include('includes/footer.php') ?>
I'm having some problems with my login feature using php with multiple users, I'm not using a database as this is a school assignment.
So the assignment is as follows "create an associative array with usernames as keys and encrypted passwords using password_hash. Once the user has logged in it shall print out the users name." We got a template that we should use, I will paste all the necessary code. So the problem I am having is, that when I try to log in as a user it keeps redirecting me so that I get the "too many redirects" error.
login.php
<?php
session_start();
if(isset($_POST['password'],$_POST['username'])){
include("pwd.php");
include("user.php");
$key = $_POST['username'];
if(isset($user[$key])){
$_SESSION['inloggad'] = true; // Användaren har anget rätt uppgifter.
$_SESSION['user'] = $_POST['username'];
}
}
if(isset($_SESSION['inloggad'])){
header("Location: index.php");
}
else{
echo "<h1>Vänligen logga in!</h1>";
}
?>
login.html
<!DOCTYPE html>
<html lang="sv">
<head>
<meta charset="utf-8" >
<title>Sessioner</title>
</head>
<body>
<form method="post" action="login.php">
Username: <input type="username" name="username" size="20" /><br />
<br>
Password: <input type="password" name="password" size="20" /><br />
<input type="submit" value="Logga in" name="login"/>
</form>
</body>
</html>
user.php
<?php
$user['admin'] = '$2y$10$9NyoNcqG9sh0KOrVnUXLr.KscgDy0L1S0klYXK67oxVBVsElbbGja';
$user['hank'] = '$2y$10$tQNcTINMIcotw0IczQ1nTuOVRIpbuqh5M/k.mLpz7ZiZl8q2WA0Cy';
$user['elias'] = '$2y$10$tQNcTINMIcotw0IczQ1nTuOVRIpbuqh5M/k.mLpz7ZiZl8q2WA0Cy';
?>
start.php
<h1>Välkommen</h1>
<?php
include("login.php");
if(isset($_POST['password'],$_POST['username'])){
echo '<h1>' . $_POST['username'] . '</h1>';
}
?>
index.php
<?php session_start(); ?>
<!doctype html>
<html lang="sv">
<head>
<meta charset="UTF-8">
<title>Länka in med PHP</title>
<link href="css/styleSheet.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="wrapper">
<header>
<?php include("header.php"); ?>
</header><!-- header -->
<section id="leftColumn">
<nav>
<?php
if(isset($_SESSION['inloggad'])){
include("meny.php");
}else{
include("login.html");
}
?>
</nav>
<aside>
<?php include("aside.php"); ?>
</aside>
</section><!-- End leftColumn -->
<main>
<section>
<!-- Lägg in innehållet här -->
<?php
$page = "start";
if(isset($_GET['page']))
$page = $_GET['page'];
switch($page){
case 'blogg': include('blogg.php');
break;
case 'bilder': include('bilder.php');
break;
case 'kontakt': include('kontakt.php');
break;
case 'klotter': include('klotter.php');
break;
default: include('start.php');
}
?>
</section>
</main><!-- End main -->
<footer>
<?php include('footer.php'); ?>
</footer><!-- End footer -->
</div><!-- End wrapper -->
</body>
</html>
styleSheet.css
#CHARSET "UTF-8";
* {
margin:0;
padding:0;
font-family:Verdana, Geneva, sans-serif;
}
body{
font-size: 100%;
}
p {
font-size: 0.8em;
margin-bottom: 10px;
margin-top: 5px;
margin-right: 10px;
text-align: justify;
}
/* Wrapper */
#wrapper {
width: 800px;
margin-left: auto;
margin-right:auto;
margin-top:10px;
border: 2px solid rgba(0,0,0,0.8);
}
/* End wrapper */
/* Header */
header {
text-align:center;
height: 60px;
background-image: url("../bilder/bgImg.png");
color: white;
}
header h1{
font-family: Arial;
font-size: 1.9em;
padding-top: 0.25em;
}
header time{
float: right;
margin-right: 2em;
font-size: 0.8em;
}
/* End header */
nav{
border-radius: 5px; /* CSS3 */
border: 1px solid #999;
padding: 4px;
margin-bottom:5px;
}
nav ul {
list-style:none;
}
nav li{
margin-top: 5px;
border: 1px solid #000;
}
nav li a{
display:block;
font-size: 0.8em;
text-decoration: none;
color: #aa0000;
padding-left: 15px;
background-color:#FFC;
}
nav li a:hover, #leftColumn li a:active, #leftColumn li a:focus{
background-color: gray;
color: #ffffff;
}
aside {
-moz-border-radius: 5px; /* Ger rundade hörn i Firefox */
border-radius: 5px; /* CSS3 */
border: 1px solid #999;
padding: 4px;
margin-bottom:5px;
}
aside p {
font-size: 0.8em;
}
/* leftColumn */
#leftColumn {
float: left;
width: 180px;
margin: 8px;
}
#leftColumn h1 {
font-family:Arial, Helvetica, sans-serif;
font-size: 0.9em;
}
/* End leftColumn */
/* Main */
main {
margin-top: 8px;
margin-left:200px;
}
main h1{
font-family: Arial, Helvetica, sans-serif;
font-size: 1.4em;
}
main h2{
font-family: Arial, Helvetica, sans-serif;
font-size: 1.1em;
}
main section{
float:right;
width: 99%;
}
form label,a{
font-size: 0.8em;
}
/* End content */
/* Footer */
footer {
height: 30px;
background-image: url("../bilder/bgImg.png");
color: white;
font-size: 0.75em;
clear:both;
}
footer #footerRight{
float:right;
padding: 5px;
}
footer #footerLeft{
float:left;
padding: 5px;
}
/* End footer */
the rest of the template is not really necessary for me to paste as it's just html code for the website, I just linked the css code if you want to check what the page looks like yourself. If you need any more information that I might have forgotten to write please notify me.
I know there's a problem with me using include("login.php") in the start.php, I just don't know how to solve it as I need the information submitted in the login form. The page controller is stating that start.php is the default page the template uses in the section.
EDIT: sorry I was not clear about this part. it only happens once I enter the correct details, for example, admin:12345.
EDIT 2:
new start.php code
<?php
include("login.php");
if(isset($_SESSION['user'])){
echo '<h1>Välkommen</h1>' . '<h1>' . $_SESSION['user'] . '</h1>';
}
?>
Full login.php I'm using:
<?php
session_start();
if (isset($_POST['password'], $_POST['username'])) {
include("pwd.php");
include("user.php");
$key = $_POST['username'];
if (isset($user[$key])) {
$_SESSION['inloggad'] = true; // Användaren har anget rätt uppgifter.
$_SESSION['user'] = $_POST['username'];
}
if (isset($_SESSION['inloggad']) && ($_SESSION['inloggad'] === TRUE)) {
header("Location: index.php");
} else {
echo "<h1>Vänligen logga in!</h1>";
}
}
In the index.php file there is a line default: include('start.php'); that can cause this page to redirect to itself because file start.php includes file login.php which has header("Location: index.php"). The same problem would apply in case any other included file on this page lead to inclusion of header("Location: index.php")
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>