Home.php(file in controller)
<?php
class Home extends CI_Controller {
public function index() {
$this->load->helper('url');
//display home page
$this->load->view('home.html');
}
}
?>
home.html(file in view page)
<!DOCTYPE html>
<html lang="en">
<head>
<title>PortFolio Website</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
/* Remove the navbar's default margin-bottom and rounded borders */
.navbar {
margin-bottom: 0;
border-radius: 0;
}
body, html {
height: 100%;
margin: 0;
}
/* First Container */
.bg {
/* The image used */
background-image: url("1.jpg");
/* Full height */
height: 60%;
/* Center and scale the image nicely */
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
#media (max-width: 800px) {
.bg {
height:80%;
}
}
/* Second container */
.bg1 {
background-color: #f77a55;
height:45%;
}
#media (max-width: 800px) {
.bg1 {
height:70%;
}
}
/* Third container */
.bg2 {
height:40%;
}
#media (max-width: 800px) {
.bg2 {
height:100%;
}
}
/* Fourth container */
.bg3 {
background-color: #404040;
height:60%;
}
#media (max-width: 800px) {
.bg3 {
height:190%;
}
}
/* Add a gray background color and some padding to the footer */
footer {
background-color: #404040;
padding: 25px;
}
</style>
</head>
<body>
<!--Navigation Bar-->
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Full-stack Developer</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav navbar-right">
<!--li class="active">Home</li-->
<li>About Me</li>
<li>Services</li>
<li>Portfolio</li>
<li>Contact</li>
<li>Register</li>
<li><span class="glyphicon glyphicon-log-in"></span> Login</li>
</ul>
</div>
</div>
</nav>
<!--First Container-->
<div class="bg">
<div class="container text-center">
<br><br><br><br><br><br>
<h1 style="color:White"><strong>Ready For? Engaging Website||</strong></h1>
<h2 style="color:White">Inventive Web design, Development & Android Application!</h2>
</div>
</div>
<!--Second Container-->
<div id="AboutMe" class="bg1">
<div class="container text-center">
<br><br><br>
<h1 style="color:White"><strong>About Me</strong></h1>
<br>
<p style="color:White; font-size: 15px"><b>I'm a Full stack developer providing complete Web solutions to the clients. I have a deep technical knowledge combined with the broad digital media work, website designing and development experience means I can provide you with honest suggestions on what can be delivered with your available resource. My aim is to out perform expectations at every possible chance.</b></p>
</div>
</div>
<!--Third Container-->
<div id="Services" class="bg2">
<div class="container text-center">
<br><br><br>
<h1 style="color:#f77a55"><strong>Services</strong></h1>
</div><br><br><br>
<div class="container">
<div class="row">
<div class="col-lg-3 col-md-6 col-xs-12 col-sm-12 text-center">
<i class="fa fa-4x fa-desktop text-primary mb-3 sr-icons"></i>
<h4 class="mb-3">Responsive Web App Development</h4>
</div>
<div class="col-lg-3 col-md-6 col-xs-12 col-sm-12 text-center">
<i class="fa fa-4x fa-tablet text-primary mb-3 sr-icons"></i>
<h4 class="mb-3">Mobile App Development</h4>
</div>
<div class="col-lg-3 col-md-6 col-xs-12 col-sm-12 text-center">
<i class="fa fa-4x fa-television text-primary mb-3 sr-icons"></i>
<h4 class="mb-3">UI/UX Development</h4>
</div>
<div class="col-lg-3 col-md-6 col-xs-12 col-sm-12 text-center">
<i class="fa fa-4x fa-cloud text-primary mb-3 sr-icons"></i>
<h4 class="mb-3">Hosting & Support service</h4>
</div>
</div>
</div>
</div><br><br><br>
<!--Fourth Container-->
<div id="Portfolio" class="bg3">
<div class="container text-center">
<br><br>
<h1 style="color:#f77a55"><strong>Portfolio</strong></h1>
</div><br><br>
<div class="container">
<div class="row">
<div class="col-lg-3 col-md-6 col-xs-12 col-sm-12 text-center">
<img src="<?php echo base_url('image/5.jpg'); ?>" class="img-responsive img-rounded" alt="image" >
<h4 class="mb-3" style="color:orange">Blue Star Power</h4>
<p style="color:white">Blue Star Power Solutions Private Limited are specialists in Diesel Generator Sales and Service, Annual Maintenance.</p>
</div>
<div class="col-lg-3 col-md-6 col-xs-12 col-sm-12 text-center">
<img src="6.jpg" class="img-responsive img-rounded" alt="image" >
<h4 class="mb-3" style="color:orange">Cavotec Inspired Engineering</h4>
<p style="color:white">Global-Airport Solutions is the global industry’s number one meeting place for Airport Operators/Owners,Managers.</p>
</div>
<div class="col-lg-3 col-md-6 col-xs-12 col-sm-12 text-center">
<img src="10.jpg" class="img-responsive img-rounded" alt="image" >
<h4 class="mb-3" style="color:orange">Gemalto Security Free</h4>
<p style="color:white">You will find our identity authentication and data protection technologies at the heart of modern life, Annual Maintenance.</p>
</div>
<div class="col-lg-3 col-md-6 col-xs-12 col-sm-12 text-center">
<img src="11.jpg" class="img-responsive img-rounded" alt="image" >
<h4 class="mb-3" style="color:orange">Singularity University</h4>
<p style="color:white">Our programs and events equip you with the mindset, tools, and resources to successfully journey to the future. </p>
</div>
</div>
</div>
</div><br><br><br>
<!--fiveth container-->
<div id="Contact" class="container">
<h2 class="container text-center" style="color:orange"><b>Let's Get In Touch!</b></h2>
<p class="container text-center" style="color:orange"><span style="font-size: 18px;">Submit the form and we will get back to you as soon as possible!</span></p><br><br>
<form class="form-horizontal" action="">
<div class="form-group">
<label class="control-label col-sm-2" style="color:red">Name:</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="name" placeholder="Enter Name" name="name">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2" style="color:red">Email:</label>
<div class="col-sm-10">
<input type="email" class="form-control" id="email" placeholder="Enter Email" name="email">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2" style="color:red">Contact Number:</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="contact_number" placeholder="Enter Contact Number" name="contact_number">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2" style="color:red">Subject:</label>
<div class="col-sm-10">
<textarea rows="5" class="form-control" id="subject" placeholder="Enter Reason For Contacting..." name="subject"></textarea>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-success">Submit</button>
</div>
</div>
</form>
</div><br>
<!--Footer-->
<footer class="container-fluid text-center">
<h4 style="color:white">2018 # Full-Stack Developer</h4>
<p style="color:white">All Rights Reserved</p>
</footer>
</body>
</html>
I have done a simple design with bootstrap, which is working fine in local host but when i try to enter it in my codeignitor folder its not working, i mean to say the images
which are their in the page are not getting displayed when i tried it to open via codeignitor, i have saved all my images in view folder itself, i know this is really
a stupid question.
i tried with this but its not working
<img src="<?php echo base_url('image/5.jpg'); ?>" class="img-responsive img-rounded" alt="image" >
you can't use .html file, because in html file you can't write php code.
helper 'url' must be loaded in autoload.php, either in view page you have to load again helper url.
You should not store images in view folder.
You should check some following step-
1) first fix your project base_url which is set in application/config/config.php
2) create a folder(e.g: image) on application location for save all images. then you can
save any img(e.g:5.jpg) in this folder which you are want.
3) on final step where you want to display image use code like this-
<img src="<?php echo base_url();?>/image/5.jpg">
If your images are in public/images directory and your
Base URL is
(you can check/set your base URL in /application/config/config.php
$config['base_url'] = 'enter your base path here';
)
if your basepath is
www.yoururl.com/
then use path
<img src="<?php echo base_url();?>public/image/5.jpg">
Related
For the vaccine ticket, I created an HTML page. When you download a PDF, the layout changes. How to solve this issue
ticket.php
<div class="container" style=" text-align: left;">
<div class="form-group">
<div class="row mt-4">
<div class="col-md-4">
<span><i class="fa fa-registered" style="font-size:16px;color: #666363;"></i></span>
<span>Reg No</span>
</div>
<div class="col-md-8" style="float: right;">
12546546
</div>
</div>
</div>
HTML output:
PDF output:
I want to show the number of players in the server instead of that UNKNOWN thing, I haven't enabled the API yet, can I get help that, I want to integrate the progress bar to the total players in game like
if players are 50/100
= 50% of the bar will be filled.
Like the bar should work as the api updates.
<div class="is-clearfix"></div>
<section class="section dark-grey has-text-centered">
<div class="container">
<div class="heading">
<h1 class="title">Our Servers</h1>
<br>
</div>
<div class="columns is-gapless">
<div class="column">
<div class="card card-server">
<div class="card-image">
<figure class="image is-2by1">
<img src="./OutBreak Gaming_files/sfcnr_card1.png">
</figure></div> <div class="card-content">
<div class="title" style="font-size: 1.25em; color: rgb(119, 119, 119); margin-top: 0.5em;">87.98.241.207:7775</div>
<div class="players is-marginless">
<div class="content playersOnline">
Unknown PLAYERS ONLINE
</div>
<progress value="0" max="100" class="progress is-success"></progress>
<br></div> <a class="button is-info is-medium is-fullwidth">Play Now</a>
</div>
</div>
</div>
</div>
</div>
</section>
</div>
Just use the SACNR monitor API, and
<div class="columns is-gapless">
<div class="column"><div class="card card-server">
<div class="card-image">
<figure class="image is-2by1">
<img src="./OutBreak Gaming_files/sfcnr_card1.png"></figure></div>
<div class="card-content">
<div class="title" style="font-size: 1.25em; color: rgb(119, 119, 119); margin-top: 0.5em;">87.98.241.207:7775</div> Hostname:
<div class="hosting"></div>Gamemode:
<div class="game-mode"></div>Map:
<div class="language"></div> Players:
<div class="players is-marginless"><div class="content playersOnline">
FETCHING PLAYERS ONLINE
</div>
<progress value="0" max="100" class="progress is-success"></progress><br></div>
<a class="button is-info is-medium is-fullwidth">Play Now</a></div></div></div></div></div></section></div>
Where We fetch from API the following things
<?php
require_once("sampsvr.php");
$monitor = new SACNR\Monitor;
//$obj = $monitor->get_info_by_id(1790345);
$obj = $monitor->get_info_by_ip('87.98.241.207','7775');
$players = $obj->Players;
$hostName = $obj->Hostname;
$Gamemode = $obj->Gamemode;
$Mapname = $obj ->Language;
?>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('.progress').val(<?php echo $players;?>);
$('.playersOnline').html(<?php echo $players;?> +' PLAYERS ONLINE' );
$('.hosting').html("<?php echo $hostName;?>");
$('.game-mode').html("<?php echo $Gamemode;?>");
$('.language').html("<?php echo $Mapname;?>");
});
</script>
You may find the API at http://monitor.sacnr.com/api.html
Currently I have three col-md-4 columns displaying an image in each. If a user only has say 1 or 2 images uploaded it will float the content left as normal but leave the third with wasted space.
Is it possible with CSS to centre the 1-2 columns until a 3rd has been added?
<div class="container>
<div class="row">
<div class="col-md-4 image-1">
<img>
</div>
<div class="col-md-4 image-2">
<img>
</div>
<div class="col-md-4 image-3">
<img>
</div>
</div>
</div>
I think you should not mix left-aligned items (when 3 or more) with center aligned items. What happens when a group of 2 items follows a group of 4 or 5?
If you want them all centered, just add a custom class (.centerRows in my case) to the container and use the CSS below:
.centerRows>.row {
text-align: center;
}
.centerRows>.row>[class^="col-"] {
text-align: initial;
float: none;
margin: 0 auto;
display: inline-block;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<div class="container centerRows">
<div class="row">
<div class="col-md-4 image-1">
<img src="http://placehold.it/350x150">
</div>
<div class="col-md-4 image-2">
<img src="http://placehold.it/350x150">
</div>
</div>
<div class="row">
<div class="col-md-4 image-1">
<img src="http://placehold.it/350x150">
</div>
<div class="col-md-4 image-2">
<img src="http://placehold.it/350x150">
</div>
<div class="col-md-4 image-3">
<img src="http://placehold.it/350x150">
</div>
</div>
<div class="row">
<div class="col-md-4 image-1">
<img src="http://placehold.it/350x150">
</div>
<div class="col-md-4 image-1">
<img src="http://placehold.it/350x150">
</div>
<div class="col-md-4 image-2">
<img src="http://placehold.it/350x150">
</div>
<div class="col-md-4 image-3">
<img src="http://placehold.it/350x150">
</div>
</div>
<div class="row">
<div class="col-md-4 image-1">
<img src="http://placehold.it/350x150">
</div>
<div class="col-md-4 image-2">
<img src="http://placehold.it/350x150">
</div>
</div>
</div>
If you only want to center the rows with 2 or less children, add a custom class to the rows you want centered, after counting their children via js. Proof of concept:
$('.container>.row').each(function(){
if($(this).children().size() < 3) $(this).addClass('centerMe');
})
.centerMe {
text-align: center;
}
.centerMe>[class^="col-"] {
text-align: initial;
float: none;
margin: 0 auto;
display: inline-block;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="row">
<div class="col-md-4 image-1">
<img src="http://placehold.it/350x150">
</div>
<div class="col-md-4 image-2">
<img src="http://placehold.it/350x150">
</div>
</div>
<div class="row">
<div class="col-md-4 image-1">
<img src="http://placehold.it/350x150">
</div>
<div class="col-md-4 image-2">
<img src="http://placehold.it/350x150">
</div>
<div class="col-md-4 image-3">
<img src="http://placehold.it/350x150">
</div>
</div>
<div class="row">
<div class="col-md-4 image-1">
<img src="http://placehold.it/350x150">
</div>
<div class="col-md-4 image-1">
<img src="http://placehold.it/350x150">
</div>
<div class="col-md-4 image-2">
<img src="http://placehold.it/350x150">
</div>
<div class="col-md-4 image-3">
<img src="http://placehold.it/350x150">
</div>
</div>
<div class="row">
<div class="col-md-4 image-1">
<img src="http://placehold.it/350x150">
</div>
<div class="col-md-4 image-2">
<img src="http://placehold.it/350x150">
</div>
</div>
</div>
IMHO you can't do this with css. It can be done
using JS. Something like this:
if($('.image-3').length === 0){
$('.row').find('div').RemoveClass('col-md-4');
$('.row').find('div').AddClass('col-md-6');
}
But if you'll add more statement to the algorithm, i mean
"if it will be only one div, or only 4(with one on next row)"
you'll have to get more complicated code.
I just started learning php and my first project was to make a working contact form. I have typed up what I could, but for some reason there appears to be some sort of errors that php is not telling me. I have looked for solutions to the issue on another web forum like phpacademy, and to no avail. I finally came to try out stack overflow, since I have heard great things about this forum. Any help is appreciated, and thanks in advance.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Contact</title>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="css/styles.css"/>
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't websites if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<?php
if ($_POST['submit']){
if(!$_POST['firstname']){
$error='<br /> Please Enter your first name';
}
if(!$_POST['lastname']){
$error='<br /> Please Enter your last name';
}
if(!$_POST['email']){
$error='<br /> Please Enter your email address';
}
if(!$_POST['phone']){
$error='<br /> Please Enter your phone number';
}
if(!$_POST['message']){
$error='<br /> Please Enter your message you would like to send';
}
if($_POST['email']!="" and !filter_var($_POST['email'],
FILTER_VALIDATE_EMAIL)){
$error.='<br /> Please enter a valid email address';
}
if($error){
$result='<div class="alert alert-danger"><strong>One or more errors has occurred</strong>'.$error.'</div>';
}
else {
if (mail("casey#caseywoelfle.com", "Potential Client!", "FirstName: " .
$_POST['firstname'] . "
LastName ".$_POST['lastname'] ."
Email: " .$_POST['email'] . "
Phone: ".$_POST['phone'] . "
Comment: ".$_POST['comment'])) {
$result = '<div class="alert alert-success"><strong>Thank you!</strong>I\'ll be in touch within 2 business days.</div>';
} else {
$result = '<div class="alert alert-danger"> Sorry, there was an error sending your message. Please try again later.</div>';
}
}
}
?>
<nav class="navbar">
<div class="container-full">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand honey-sb" href="#">CW</a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li><a class="nLink" href="index.html">Home</a></li>
<li><a class="nLink" href="about.html">About</a></li>
<li><a class="nLink" href="portfolio.html">Portfolio</a></li>
<li><a class="nLink" href="contact.php">Contact</a></li>
</ul>
</div>
</div>
</nav>
<div class="container-fluid">
<div class="row contact-sec">
<div class="col-md-12">
<form class="form-horizontal" method="post">
<div class="well">
<h1 class="text-center header">Contact Me</h1>
<h3 class="text-center">
Do you have a project you would like me to take a look at or maybe you have an idea?<br/>Either
way don’t hesitate to send me an email using the contact form or give me a call.
</h3>
</div>
<div class="form-group">
<span class="col-md-1 col-md-offset-2 text-center"><i class="glyphicon glyphicon-user"></i></span>
<div class="col-md-6">
<input id="InputFirstName" name="firstname" type="text" placeholder="First Name" class="form-control">
</div>
</div>
<div class="form-group">
<span class="col-md-1 col-md-offset-2 text-center"><i class="glyphicon glyphicon-user"></i></span>
<div class="col-md-6">
<input id="InputLastName" name="lastname" type="text" placeholder="Last Name" class="form-control">
</div>
</div>
<div class="form-group">
<span class="col-md-1 col-md-offset-2 text-center"><i class="glyphicon glyphicon-envelope"></i></span>
<div class="col-md-6">
<input id="InputEmail" name="email" type="text" placeholder="Email Address" class="form-control">
</div>
</div>
<div class="form-group">
<span class="col-md-1 col-md-offset-2 text-center"><i class="glyphicon glyphicon-earphone"></i></span>
<div class="col-md-6">
<input id="InputPhone" name="phone" type="text" placeholder="Phone" class="form-control">
</div>
</div>
<div class="form-group">
<span class="col-md-1 col-md-offset-2 text-center"><i class="glyphicon glyphicon-pencil"></i></span>
<div class="col-md-6">
<textarea class="form-control" id="InputMessage" name="message" placeholder="Enter your massage for us here. We will get back to you within 2 business days." rows="7"></textarea>
</div>
</div>
<div class="well">
<div class="form-group">
<div class="col-sm-4 col-sm-offset-4 text-center">
<button type="submit" id="submit" name="submit" class="btn btn-primary btn-lg">Submit</button>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
<footer>
<div class="container-fluid">
<div class="row" id="f-nav">
<div class="col-xs-6 col-sm-3 text-center" id="f-contact">
<h2 class="footerbolder">Contact</h2>
<img src="images/ph.png" class="img-responsive" alt=""/>
</div>
<div class="col-xs-6 col-sm-3 text-center" id="f-about">
<h2 class="footerbolder">About Us</h2>
<img src="images/ph.png" class="img-responsive" alt=""/>
</div>
<div class="col-xs-6 col-sm-3 text-center" id="f-services">
<h2 class="footerbolder">Services</h2>
<img src="images/ph.png" class="img-responsive" alt=""/>
</div>
<div class="col-xs-6 col-sm-3 text-center" id="f-follow">
<h2 class="footerbolder">Follow Me</h2>
<img src="images/ph.png" class="img-responsive" alt=""/>
</div>
</div>
<div class="row">
<div class="hidden-xs col-sm-12" id="pp-tos">
<div class="center-block text-center">
<a class="" href="#">Terms of Service</a>
<a>|</a>
<a class="" href="#">Privacy Policy</a>
</div>
</div>
</div>
</div>
</footer>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
<script src="js/Fittext/jquery.fittext.js"></script>
</body>
</html>
#B-and-P is right, if all your error checking validates, then your error variable is undefined by the time you reach your
if($error)
statement. To fix this, simply declare your error variable at the top to be null like
$error = NULL;
that way when you check for it, it is defined and if there is no errors, your script will send your mail.
There is no action attribute in your form tag. Example:
<form class="form-horizontal" method="post" action="send_form_email.php">
cut the PHP script from your code and put it in a separate file. Save as send_form_email.php
http://askguyson.com/simple-form-to-email-php-contact-form/
<div class="parent">
<div class="child">
</div>
<div class="child">
</div>
<div class="child">
</div>
<div class="child">
</div>
<div class="child">
</div>
</div>
The height of the child class is 20% and the width 200px.
What I'm wondering is how to make it so that when I have, for example, 20 parent divs it is set up so that they are all displayed horizontally, beyond the width of the page, so that I have to scroll left or right to view the data. At the moment it fills the width of the page and starts the next parent div underneath the first one so that I have to scroll vertically and I can't fathom how to rectify this problem.
Thanks in advance.
To do this you need to create a parent container, and then assign a overflow-x: scroll css rule to it. You will also need to assign a display: inline-block rule to your parent class. You also need to apply white-space: nowrap;.
DEMO http://jsfiddle.net/qujyunn4/
.wrapper {
overflow-x: scroll;
white-space: nowrap;
}
.parent {
display: inline-block;
width: 200px;
height: 300px;
border: red solid thin;
margin-right: 5px;
white-space: nowrap;
}
<div class="wrapper">
<div class="parent">
<div class="child">
</div>
<div class="child">
</div>
<div class="child">
</div>
<div class="child">
</div>
<div class="child">
</div>
</div>
<div class="parent">
<div class="child">
</div>
<div class="child">
</div>
<div class="child">
</div>
<div class="child">
</div>
<div class="child">
</div>
</div>
<div class="parent">
<div class="child">
</div>
<div class="child">
</div>
<div class="child">
</div>
<div class="child">
</div>
<div class="child">
</div>
</div>
<div class="parent">
<div class="child">
</div>
<div class="child">
</div>
<div class="child">
</div>
<div class="child">
</div>
<div class="child">
</div>
</div>
</div>