0

I place this:

<div style="margin: 150px 0 0 -530px;">

Since I want to place the next picture under the first row. How to do that? Otherwise it will be all one row.

0

If you want only 3 pictures in a row, then you should give a max-width to the #container div so that it can hold only a maximum of 3 pictures in a row. This is a very basic principle of CSS.

Container in this demo has a max-width of 600px.
http://cssdeck.com/labs/full/auaaljix

Edited by gentlemedia

0

portfolio.php

<!DOCTYPE html>
<html>
<head>
<title>Portfolio</title>

<link rel="stylesheet" type="text/css" href="css/style.css">

 <style>
body {
  padding: 100px;
}
.button-group {
  margin: 5px;
}
.item {
  width: 150px;
  height: 150px;
  margin: 5px;
  padding: 10px;
  color: black;  
}
.item > * {
  margin: 0;
  padding: 0;
}
#container {
    width: 400px;
} 
</style>

</head>


<body>

<?php include('nav.php'); ?>


<center><h2>Our Portfolio</h2></center>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim
</p>


<div id="sorts" class="button-group">
  <button data-sort-by="original-order">original order</button>
  <button data-sort-by="name">name</button>
  <button data-sort-by="symbol">symbol</button>
  <button data-sort-by="number">number</button>
  <button data-sort-by="weight">weight</button>
  <button data-sort-by="category">category</button>
</div>
<div id="container">
  <div class="item transition metal" data-category="transition">
    <p class="name"><img src="Images/Portfolio/portfolio1.jpg" width="170px"></p>    
  </div>
  <div class="item metalloid" data-category="metalloid">
    <p class="name"><img src="Images/Portfolio/portfolio2.jpg" width="170px"></p>   
  </div>
  <div class="item transition metalloid2" data-category="metalloid2">
    <p class="name"><img src="Images/Portfolio/portfolio3.jpg" width="170px"></p>   
  </div>
  <div class="item transition metalloid3" data-category="metalloid3">    
    <p class="name"><img src="Images/Portfolio/portfolio4.jpg" width="170px"></p></div>   
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery.isotope/2.2.0/isotope.pkgd.min.js"></script>
<script>
$(function(){
  var $container = $('#container').isotope({
    getSortData: {
      name: '.name',
      symbol: '.symbol',
      number: '.number parseInt',
      category: '[data-category]',
      weight: function( itemElem ) {
        var weight = $( itemElem ).find('.weight').text();
        return parseFloat( weight.replace( /[\(\)]/g, '') );
      }
    }
  });
  // sort items on button click
  $('#sorts').on( 'click', 'button', function() {
    var sortByValue = $(this).attr('data-sort-by');
    $container.isotope({ sortBy: sortByValue });
  });
});
</script>



<img src="Images/Portfolio/button1.jpg">
<img src="Images/Portfolio/button2.jpg">
<img src="Images/Portfolio/button3.jpg">

<br><br><br>
<img src="Images/Portfolio/portfolio1.jpg">
<img src="Images/Portfolio/portfolio2.jpg">
<img src="Images/Portfolio/portfolio3.jpg">
<img src="Images/Portfolio/portfolio4.jpg">
<img src="Images/Portfolio/portfolio5.jpg">
<img src="Images/Portfolio/portfolio6.jpg">

<br><br><br><br>
<img src="Images/Portfolio/clients.jpg">
<br><br><br><br>

<center>
Lorem ipsum dolor sit amet, consectetuer adipiscing <br>elit, sed diam nonummy nibh euismod <br>tincidunt ut laoreet dolore magna aliquam<br> erat volutpat.<br>
<b>dolore magna aliquam</b><br><br>
</center>



<?php include('footer.php'); ?>



</body>
</html> 
0

Hello, this is my code. I wonder why my portfolio container does not able to make the the picture gallery shift to the next row?

portfolio.php

<!DOCTYPE html>
<html>
<head>
<title>Portfolio</title>

<link rel="stylesheet" type="text/css" href="css/style.css">

 <style>
body {
  padding: 100px;
}
.button-group {
  margin: 5px;
}
.item {
  width: 150px;
  height: 150px;
  margin: 5px;
  padding: 10px;
  color: black;  
}
.item > * {
  margin: 0;
  padding: 0;
}
#container {
    width: 400px;
} 
</style>

</head>


<body>

<?php include('nav.php'); ?>


<center><h2>Our Portfolio</h2></center>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim
</p>


<div id="sorts" class="button-group">
  <button data-sort-by="original-order">original order</button>
  <button data-sort-by="name">name</button>
  <button data-sort-by="symbol">symbol</button>
  <button data-sort-by="number">number</button>
  <button data-sort-by="weight">weight</button>
  <button data-sort-by="category">category</button>
</div>
<div id="container">
  <div class="item transition metal" data-category="transition">
    <p class="name"><img src="Images/Portfolio/portfolio1.jpg" width="170px"></p>    
  </div>
  <div class="item metalloid" data-category="metalloid">
    <p class="name"><img src="Images/Portfolio/portfolio2.jpg" width="170px"></p>   
  </div>
  <div class="item transition metalloid2" data-category="metalloid2">
    <p class="name"><img src="Images/Portfolio/portfolio3.jpg" width="170px"></p>   
  </div>
  <div class="item transition metalloid3" data-category="metalloid3">    
    <p class="name"><img src="Images/Portfolio/portfolio4.jpg" width="170px"></p></div>   
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery.isotope/2.2.0/isotope.pkgd.min.js"></script>
<script>
$(function(){
  var $container = $('#container').isotope({
    getSortData: {
      name: '.name',
      symbol: '.symbol',
      number: '.number parseInt',
      category: '[data-category]',
      weight: function( itemElem ) {
        var weight = $( itemElem ).find('.weight').text();
        return parseFloat( weight.replace( /[\(\)]/g, '') );
      }
    }
  });
  // sort items on button click
  $('#sorts').on( 'click', 'button', function() {
    var sortByValue = $(this).attr('data-sort-by');
    $container.isotope({ sortBy: sortByValue });
  });
});
</script>



<img src="Images/Portfolio/button1.jpg">
<img src="Images/Portfolio/button2.jpg">
<img src="Images/Portfolio/button3.jpg">

<br><br><br>
<img src="Images/Portfolio/portfolio1.jpg">
<img src="Images/Portfolio/portfolio2.jpg">
<img src="Images/Portfolio/portfolio3.jpg">
<img src="Images/Portfolio/portfolio4.jpg">
<img src="Images/Portfolio/portfolio5.jpg">
<img src="Images/Portfolio/portfolio6.jpg">

<br><br><br><br>
<img src="Images/Portfolio/clients.jpg">
<br><br><br><br>

<center>
Lorem ipsum dolor sit amet, consectetuer adipiscing <br>elit, sed diam nonummy nibh euismod <br>tincidunt ut laoreet dolore magna aliquam<br> erat volutpat.<br>
<b>dolore magna aliquam</b><br><br>
</center>



<?php include('footer.php'); ?>



</body>
</html> 

Edited by davy_yg

0

Hello,

I am trying to make these buttons work well.

<button data-sort-by="original-order">Photography</button>
<button data-sort-by="branding">Branding</button>
<button data-sort-by="symbol">Web Design</button>
<button data-sort-by="number">number</button>
<button data-sort-by="weight">weight</button>
<button data-sort-by="category">category</button>

I wonder why only original-order and category that works well? The rest cannot do anything.

portfolio.php

<!DOCTYPE html>
<html>
<head>
<title>Portfolio</title>

<link rel="stylesheet" type="text/css" href="css/style.css">

<style>
body {
  padding: 100px;
}
.button-group {
  margin: 5px;
}
.item {
  width: 150px;
  height: 150px;
  margin: 5px 0 0 110px;
  padding: 10px;
  color: black;  
}
.item > * {
  margin: 0;
  padding: 0;
}
#box {
    width: 800px; 
    margin: 0 0 0 -100px;
}
</style>

</head>


<body>

<?php include('nav.php'); ?>

<br><br><br>

<center><h2><b>Our Portfolio</b></h2></center>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim
</p>

<div id="sorts" class="button-group">
  <button data-sort-by="original-order">Photography</button>
  <button data-sort-by="branding">Branding</button>
  <button data-sort-by="symbol">Web Design</button>
  <button data-sort-by="number">number</button>
  <button data-sort-by="weight">weight</button>
  <button data-sort-by="category">category</button>
</div>
<div id="box">
  <div class="item transition metal" data-category="transition">
    <p class="name"><img src="Images/Portfolio/portfolio1.jpg" width="270px"></p>    
  </div>
  <div class="item metalloid" data-category="metalloid">
    <p class="name"><img src="Images/Portfolio/portfolio2.jpg" width="270px"></p>   
  </div>
  <div class="item transition metalloid2" data-category="metalloid2">
    <p class="name"><img src="Images/Portfolio/portfolio3.jpg" width="270px"></p>   
  </div>
  <div class="item transition metalloid3" data-category="metalloid3">    
    <p class="name"><img src="Images/Portfolio/portfolio4.jpg" width="270px"></p></div>   

  <div class="item transition metalloid4" data-category="metalloid4">
    <p class="name"><img src="Images/Portfolio/portfolio5.jpg" width="270px"></p>   
  </div>
  <div class="item transition metalloid5" data-category="metalloid5">    
    <p class="name"><img src="Images/Portfolio/portfolio6.jpg" width="270px"></p></div>   
</div> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery.isotope/2.2.0/isotope.pkgd.min.js"></script>
<script>
$(function(){
  var $container = $('#box').isotope({
    getSortData: {
      name: '.name',
      symbol: '.symbol',
      number: '.number parseInt',
      category: '[data-category]',
      weight: function( itemElem ) {
        var weight = $( itemElem ).find('.weight').text();
        return parseFloat( weight.replace( /[\(\)]/g, '') );
      }
    }
  });
  // sort items on button click
  $('#sorts').on( 'click', 'button', function() {
    var sortByValue = $(this).attr('data-sort-by');
    $container.isotope({ sortBy: sortByValue });
  });
});
</script>

<br><br><br>

<img src="Images/Portfolio/button1.jpg">
<img src="Images/Portfolio/button2.jpg">
<img src="Images/Portfolio/button3.jpg">

<br><br><br>
<img src="Images/Portfolio/portfolio1.jpg">
<img src="Images/Portfolio/portfolio2.jpg">
<img src="Images/Portfolio/portfolio3.jpg">
<img src="Images/Portfolio/portfolio4.jpg">
<img src="Images/Portfolio/portfolio5.jpg">
<img src="Images/Portfolio/portfolio6.jpg">

<br><br><br><br>
<img src="Images/Portfolio/clients.jpg">
<br><br><br><br>


<center>
Lorem ipsum dolor sit amet, consectetuer adipiscing <br>elit, sed diam nonummy nibh euismod <br>tincidunt ut laoreet dolore magna aliquam<br> erat volutpat.<br>
<b>dolore magna aliquam</b><br><br>
</center>



<?php include('footer.php'); ?>



</body>
</html> 
0

Hello,

Can you check these buttons? I wonder why none of these works well. Except for original-order and category.

<div id="sorts" class="button-group">
<button data-sort-by="original-order">Photography</button>
<button data-sort-by="branding">Branding</button>
<button data-sort-by="symbol">Web Design</button>
<button data-sort-by="number">number</button>
<button data-sort-by="weight">weight</button>
<button data-sort-by="category">category</button>
</div>

portfolio.php

<!DOCTYPE html>
<html>
<head>
<title>Portfolio</title>

<link rel="stylesheet" type="text/css" href="css/style.css">

<style>
body {
  padding: 100px;
}
.button-group {
  margin: 5px;
}
.item {
  width: 150px;
  height: 150px;
  margin: 5px 0 0 110px;
  padding: 10px;
  color: black;  
}
.item > * {
  margin: 0;
  padding: 0;
}
#box {
    width: 800px; 
    margin: 0 0 0 -100px;
}
</style>

</head>


<body>

<?php include('nav.php'); ?>

<br><br><br>

<center><h2><b>Our Portfolio</b></h2></center>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim
</p>

<div id="sorts" class="button-group">
  <button data-sort-by="original-order">Photography</button>
  <button data-sort-by="branding">Branding</button>
  <button data-sort-by="symbol">Web Design</button>
  <button data-sort-by="number">number</button>
  <button data-sort-by="weight">weight</button>
  <button data-sort-by="category">category</button>
</div>
<div id="box">
  <div class="item transition metal" data-category="transition">
    <p class="name"><img src="Images/Portfolio/portfolio1.jpg" width="270px"></p>    
  </div>
  <div class="item metalloid" data-category="metalloid">
    <p class="name"><img src="Images/Portfolio/portfolio2.jpg" width="270px"></p>   
  </div>
  <div class="item transition metalloid2" data-category="metalloid2">
    <p class="name"><img src="Images/Portfolio/portfolio3.jpg" width="270px"></p>   
  </div>
  <div class="item transition metalloid3" data-category="metalloid3">    
    <p class="name"><img src="Images/Portfolio/portfolio4.jpg" width="270px"></p></div>   

  <div class="item transition metalloid4" data-category="metalloid4">
    <p class="name"><img src="Images/Portfolio/portfolio5.jpg" width="270px"></p>   
  </div>
  <div class="item transition metalloid5" data-category="metalloid5">    
    <p class="name"><img src="Images/Portfolio/portfolio6.jpg" width="270px"></p></div>   
</div> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery.isotope/2.2.0/isotope.pkgd.min.js"></script>
<script>
$(function(){
  var $container = $('#box').isotope({
    getSortData: {
      name: '.name',
      symbol: '.symbol',
      number: '.number parseInt',
      category: '[data-category]',
      weight: function( itemElem ) {
        var weight = $( itemElem ).find('.weight').text();
        return parseFloat( weight.replace( /[\(\)]/g, '') );
      }
    }
  });
  // sort items on button click
  $('#sorts').on( 'click', 'button', function() {
    var sortByValue = $(this).attr('data-sort-by');
    $container.isotope({ sortBy: sortByValue });
  });
});
</script>

<br><br><br>

<img src="Images/Portfolio/button1.jpg">
<img src="Images/Portfolio/button2.jpg">
<img src="Images/Portfolio/button3.jpg">

<br><br><br>
<img src="Images/Portfolio/portfolio1.jpg">
<img src="Images/Portfolio/portfolio2.jpg">
<img src="Images/Portfolio/portfolio3.jpg">
<img src="Images/Portfolio/portfolio4.jpg">
<img src="Images/Portfolio/portfolio5.jpg">
<img src="Images/Portfolio/portfolio6.jpg">

<br><br><br><br>
<img src="Images/Portfolio/clients.jpg">
<br><br><br><br>


<center>
Lorem ipsum dolor sit amet, consectetuer adipiscing <br>elit, sed diam nonummy nibh euismod <br>tincidunt ut laoreet dolore magna aliquam<br> erat volutpat.<br>
<b>dolore magna aliquam</b><br><br>
</center>



<?php include('footer.php'); ?>



</body>
</html> 
0

I wonder why none of these works well

Probably because you've only defined data-category and none of the others (e.g. data-branding).

0

It's pretty much copy/paste what you have to do and fill it with your content/items and try to understand what you copy/paste, so you learn from it.

It might be also a good idea to start with integrating simple jQuery plugins first before you dive into plugins such as Isotope. I get the idea it's way over your head all this. A good understanding of the basic principles of HTML & CSS is a must too.

0

I know how to integrate simple jQuery plugins and also already have the basic understand of HTML & CSS. Can you not just give me the code so that I can study from it later on?

4

I know how to integrate simple jQuery plugins and also already have the basic understand of HTML & CSS

C'mon davy - you do not have a basic understanding of HTML and CSS - that's the major issue. You've consistently ignored advice on these. Look at the mess you posted that's supposed to be markup:

<!DOCTYPE html> <html> <head> <title>Portfolio</title> <link rel="stylesheet" type="text/css" href="css/style.css"> <style> body { padding: 100px; } .button-group { margin: 5px; } .item { width: 150px; height: 150px; margin: 5px 0 0 110px; padding: 10px; color: black; } .item > * { margin: 0; padding: 0; } #box { width: 800px; margin: 0 0 0 -100px; } </style> </head> <body> <?php include('nav.php'); ?> <br><br><br> <center><h2><b>Our Portfolio</b></h2></center> <p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim </p> <div id="sorts" class="button-group"> <button data-sort-by="original-order">Photography</button> <button data-sort-by="branding">Branding</button> <button data-sort-by="symbol">Web Design</button> <button data-sort-by="number">number</button> <button data-sort-by="weight">weight</button> <button data-sort-by="category">category</button> </div> <div id="box"> <div class="item transition metal" data-category="transition"> <p class="name"><img src="Images/Portfolio/portfolio1.jpg" width="270px"></p> </div> <div class="item metalloid" data-category="metalloid"> <p class="name"><img src="Images/Portfolio/portfolio2.jpg" width="270px"></p> </div> <div class="item transition metalloid2" data-category="metalloid2"> <p class="name"><img src="Images/Portfolio/portfolio3.jpg" width="270px"></p> </div> <div class="item transition metalloid3" data-category="metalloid3"> <p class="name"><img src="Images/Portfolio/portfolio4.jpg" width="270px"></p></div> <div class="item transition metalloid4" data-category="metalloid4"> <p class="name"><img src="Images/Portfolio/portfolio5.jpg" width="270px"></p> </div> <div class="item transition metalloid5" data-category="metalloid5"> <p class="name"><img src="Images/Portfolio/portfolio6.jpg" width="270px"></p></div> </div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

WTF? You're asking somebody to wade through that nonsense. You don't even have the good grace to format it properly by indenting.

<EDIT context="Elucidation" date-time="2015-06-09 10:17">

If you're wondering what all that drivel about indenting is all about - the blame for the perceived lack of formatting by davy_yg was with the site parser. davy actual did post formatted HTML, just that the parsing routine stripped newlines from certain tags with links in them. It now seems to be sorted and 'mangled' markup seems to be 'unmangled', leading some statements on this thread a little moot. Apologies to davy.

</EDIT>

In addition you insist on using deprecated tags like <center>, even though we've told you a million times about it. The term, 'Goldfish' springs to mind. Although it's no crime, you're mixing css files and style tags. I'm just really amazed you've got no inline style attributes for your tags.

It's been years since you started posting questions on web design and dev, but your threads still run into the 40+ posts. Usually because you don't listen to the advice given. This is very frustrating. You pepper the forum front page, usually with 3 threads at a time and we find many questions that are basically re-runs of previous ones.

Some advice:

  1. Take the time to learn HTML5 properly
  2. Take the time to learn CSS3 properly
  3. DO NOT touch js, php, mysql etc until you've done 1 and 2, for the sanity of us all.

Edited by diafol

Votes + Comments
I'll drink to that
amen to that :)
0

I made a little revision in here. I do not know how to replace <center> that have the same meaning.

portfolio.php

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Portfolio</title>

<!--[if lt IE 9]>
  <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

<link rel="stylesheet" type="text/css" href="css/style.css">

<style>
body {
  padding: 100px;
}
.button-group {
  margin: 5px;
}
.item {
  width: 150px;
  height: 150px;
  margin: 5px 0 0 110px;
  padding: 10px;
  color: black;  
}
.item > * {
  margin: 0;
  padding: 0;
}
#box {
    width: 800px; 
    margin: 0 0 0 -100px;
}
</style>

</head>


<body>

<?php include('nav.php'); ?>

<br><br><br>

<center><h2><b>Our Portfolio</b></h2></center>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim
</p>

<div id="sorts" class="button-group">
  <button data-sort-by="original-order">Photography</button>
  <button data-sort-by="branding">Branding</button>
  <button data-sort-by="symbol">Web Design</button>
  <button data-sort-by="number">number</button>
  <button data-sort-by="weight">weight</button>
  <button data-sort-by="category">category</button>
</div>
<div id="box">
  <div class="item transition metal" data-category="transition">
    <p class="name"><img src="Images/Portfolio/portfolio1.jpg" width="270px"></p>    
  </div>
  <div class="item metalloid" data-category="metalloid">
    <p class="name"><img src="Images/Portfolio/portfolio2.jpg" width="270px"></p>   
  </div>
  <div class="item transition metalloid2" data-category="metalloid2">
    <p class="name"><img src="Images/Portfolio/portfolio3.jpg" width="270px"></p>   
  </div>
  <div class="item transition metalloid3" data-category="metalloid3">    
    <p class="name"><img src="Images/Portfolio/portfolio4.jpg" width="270px"></p></div>   

  <div class="item transition metalloid4" data-category="metalloid4">
    <p class="name"><img src="Images/Portfolio/portfolio5.jpg" width="270px"></p>   
  </div>
  <div class="item transition metalloid5" data-category="metalloid5">    
    <p class="name"><img src="Images/Portfolio/portfolio6.jpg" width="270px"></p></div>   
</div> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery.isotope/2.2.0/isotope.pkgd.min.js"></script>
<script>
$(function(){
  var $container = $('#box').isotope({
    getSortData: {
      name: '.name',
      symbol: '.symbol',
      number: '.number parseInt',
      category: '[data-category]',
      weight: function( itemElem ) {
        var weight = $( itemElem ).find('.weight').text();
        return parseFloat( weight.replace( /[\(\)]/g, '') );
      }
    }
  });
  // sort items on button click
  $('#sorts').on( 'click', 'button', function() {
    var sortByValue = $(this).attr('data-sort-by');
    $container.isotope({ sortBy: sortByValue });
  });
});
</script>

<br><br><br>

<img src="Images/Portfolio/button1.jpg">
<img src="Images/Portfolio/button2.jpg">
<img src="Images/Portfolio/button3.jpg">

<br><br><br>
<img src="Images/Portfolio/portfolio1.jpg">
<img src="Images/Portfolio/portfolio2.jpg">
<img src="Images/Portfolio/portfolio3.jpg">
<img src="Images/Portfolio/portfolio4.jpg">
<img src="Images/Portfolio/portfolio5.jpg">
<img src="Images/Portfolio/portfolio6.jpg">

<br><br><br><br>
<img src="Images/Portfolio/clients.jpg">
<br><br><br><br>


<center>
Lorem ipsum dolor sit amet, consectetuer adipiscing <br>elit, sed diam nonummy nibh euismod <br>tincidunt ut laoreet dolore magna aliquam<br> erat volutpat.<br>
<b>dolore magna aliquam</b><br><br>
</center>



<?php include('footer.php'); ?>



</body>
</html> 
1

This is what I meant by indenting:

        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
        <script src="//cdnjs.cloudflare.com/ajax/libs/jquery.isotope/2.2.0/isotope.pkgd.min.js"></script>
        <script>
            $(function(){
                var $container = $('#box').isotope({
                    getSortData: {
                        name: '.name',
                        symbol: '.symbol',
                        number: '.number parseInt',
                        category: '[data-category]',
                        weight: function( itemElem ) {
                            var weight = $( itemElem ).find('.weight').text();
                            return parseFloat( weight.replace( /[\(\)]/g, '') );
                        }
                    }
                });
                // sort items on button click
                $('#sorts').on( 'click', 'button', function() {
                    var sortByValue = $(this).attr('data-sort-by');
                    $container.isotope({ sortBy: sortByValue });
                });
            });
        </script>
        <br><br><br>
        <img src="Images/Portfolio/button1.jpg">
        <img src="Images/Portfolio/button2.jpg">
        <img src="Images/Portfolio/button3.jpg">
        <br><br><br>
        <img src="Images/Portfolio/portfolio1.jpg">
        <img src="Images/Portfolio/portfolio2.jpg">
        <img src="Images/Portfolio/portfolio3.jpg">
        <img src="Images/Portfolio/portfolio4.jpg">
        <img src="Images/Portfolio/portfolio5.jpg">
        <img src="Images/Portfolio/portfolio6.jpg">
        <br><br><br><br>
        <img src="Images/Portfolio/clients.jpg">
        <br><br><br><br>
        <center>
            Lorem ipsum dolor sit amet, consectetuer adipiscing <br>elit, sed diam nonummy nibh euismod <br>tincidunt ut laoreet
            dolore magna aliquam<br> erat volutpat.<br>
            <b>dolore magna aliquam</b><br><br>
        </center>
    <?php include('footer.php'); ?>
    </body>
    </html>

How difficult was that to do?

I do not know how to replace <center> that have the same meaning.

You have been shown several times in different threads. This is my point about you not paying any attention.

Multiple <br> too. Also discussed that.

Any reason why scripts in middle of page instead of in head or at bottom before </body>?

Edited by diafol

0

THe indenting issue seems to be with the editor not davy. Apologies davy, my bad.

0

ok, I revise the <center> with this:

<div align="center">

but sorry I totally forget about the <br>
in HTML5 and how to replace that. I already try to google and still cannot find the answer.

0

Use CSS to centre. This is layout/format, so you shouldn't 'hard-code' it into HTML.

One way would be to <div class="container">

.container{
    text-align: center;
}

If you want to centre text. This way, you do not limit your markup. You can change the look and feel with CSS and apply different layouts, e.g. responsive. You can't do that very well with html attributes and properties.

<br> should not be used for vertical spacing, although it can be a convenient quick fix. Again if you need layout/formatting, use margin/padding (usually) in CSS.

0

Will <br> be absolute? if I am using css to replace <br> it will too many css to write just for different vertical spacing distant.

Is that the only option?

What about vertical spacing between paragraphy. Wouldn't it be funny if I have use css?

Edited by davy_yg

0

If you have a natural division like a bank of buttons then enclose them in a div. if this div is unique you can give it an id, if not and you are going to have a number of divisions with the same or similar formats then give it a classname. Then apply padding and/or margin to the class or id in CSS.

Similarly with paragraphs. Give them all the same properties in css. Use classes to modify or extend the general p.

Edited by diafol

0

What about vertical spacing between paragraphy. Wouldn't it be funny if I have use css?

Pargraph tags and all the other HTML tags and elements as well has by default already some CSS applied (source: http://www.w3.org/TR/CSS2/sample.html). The paragraph tag has by default a top & bottom margins, but if yoou use quite an aggressive CSS reset like the one from Eric Meyer, and you do as I've seen in another thread of yours, then those margins are set to '0' in the CSS reset.

So if you want spacing between all your paragraphs, you will have to set some margins again in your own styles on the p tag.

But.. it's better to look into normalize.css instead of Eric Meyer's CSS reset. Some CSS defaults are usefull and some are just a pain in the arse or are inconsistent between the different browsers. Normalize.css takes care of only the latter.
http://necolas.github.io/normalize.css/

Edited by gentlemedia

0

Is this how it works:

replacing <br> with a define br.

<div id="br"></div>

style.css

br { margin-top: 10px;}
0

No. An ID must be preceeded by a '#' in CSS. http://www.cssbasics.com/css-ids/

#br { margin-top: 10px;}

So that would work. But being picky, I wouldn't use 'br' as an id as it may be confusing. Maybe call it 'button-bank' or something.

I usually have general 'step-down' that gives me a 2rem margin.

.step-down{
    margin-top: 2rem;
}

I make this a 'class' not an 'id' so I can add it to any element I want. If it was an 'id', I wouldn't be able to re-use it.

0

okay,

So I should replace "all" <br> with :

style.css

.step-down{
    margin-top: 2rem;
}


about.php

<p>Hallo</p>  
<div class="step-down">
<p>Hallo</p>
</div>


What should I do next in order to make the picture gallery works?
0

No. No need for a separate element - that's the whole point. You can add this class to almost any block element:

<p>Hallo</p>  
<p class="step-down">Hallo</p>

Your gallery still doesn't work after another 2 days? Show you're latest version I guess, so that people who may want to help you have the vaguest idea of where you are.

Edited by diafol

0

No, I've tried to fix it. but do not quite understand how to do it and how to code it even after reading the manual.

Like if I want to shift from one articles to another articles then I probably need several :

<div class="step-down">
<div class="step-down">
<div class="step-down">
<div class="step-down">

right?

(Supposing I want a big distant).

1

If you want this for your articles, then I can't see why you don't just have an article class and provide the margin for that:

<div class="article">...content...</div>
<div class="article">...content...</div>
<div class="article">...content...</div>
<div class="article">...content...</div>

DO NOT use empty <div class="step-down"></div>. That's really not the point. If you do that, then you may as well use <br />. If you want to apply a big margin below an article you could do something like:

<div class="article gap-below">...content...</div>
<div class="article">...content...</div>

for...

.gap-below
{
    margin-bottom: 3rem;
}

That way you separate the occasional styling (big gap below) from the normal styling (article).

This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.