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.
davy_yg
2
Posting Whiz
gentlemedia
803
Master Poster
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
davy_yg
2
Posting Whiz
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>
davy_yg
2
Posting Whiz
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>
gentlemedia
803
Master Poster
I explained and showed you already how.
davy_yg
2
Posting Whiz
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>
davy_yg
2
Posting Whiz
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>
pritaeas
2,194
¯\_(ツ)_/¯
Moderator
Featured Poster
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).
gentlemedia
803
Master Poster
And it's more likely you want to filter the portfolio items with Isotope instead of to sort them.
davy_yg
2
Posting Whiz
How to do data-branding and filter the portfolio items instead of sorting them? I already read the manual and still does not understand how to code it.
gentlemedia
803
Master Poster
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.
davy_yg
2
Posting Whiz
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?
diafol
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:
- Take the time to learn HTML5 properly
- Take the time to learn CSS3 properly
- DO NOT touch js, php, mysql etc until you've done 1 and 2, for the sanity of us all.
gentlemedia
commented:
amen to that :)
+4
pixelsoul
commented:
I'll drink to that
+9
davy_yg
2
Posting Whiz
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>
diafol
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>?
diafol
THe indenting issue seems to be with the editor not davy. Apologies davy, my bad.
davy_yg
2
Posting Whiz
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.
diafol
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.
davy_yg
2
Posting Whiz
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?
diafol
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.
gentlemedia
803
Master Poster
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/
davy_yg
2
Posting Whiz
Is this how it works:
replacing <br> with a define br.
<div id="br"></div>
style.css
br { margin-top: 10px;}
diafol
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.
davy_yg
2
Posting Whiz
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?
diafol
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.
davy_yg
2
Posting Whiz
Scroll up cek portfolio.php. It still the same codes.
diafol
So you've not attempted to get this to work yourself since? At all?
Ok, well here's the link everybody: https://www.daniweb.com/web-development/javascript-dhtml-ajax/threads/495011/jquery-gallery/3#post2172315
davy_yg
2
Posting Whiz
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).
diafol
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).
davy_yg
2
Posting Whiz
Okay,
I still do not understand how to code the gallery so that it works fine.
http://www.innovation.web.id/One/portfolio.php
My gallery only have two buttons that works - on the most left and most right.
I already studied HTML5 & CSS3.
The code still remains the same:
Any advice or real code help?
Be a part of the DaniWeb community
We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.