can anyone pls explain the different instances in which css won't load properly in an express application? I know that for example, using relative paths css/style.cssinstead of absolute paths /css/style.css can cause the css to not render properly in my webpages; but I was wondering if there's something else that I don't know of that could also cause such a problem?
here's the html code:
<!DOCTYPE html>
<html lang="en-us">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>View Property</title>
<!-- Load fonts -->
<link href="https://fonts.googleapis.com/css?family=Abel|Alegreya|Amatic+SC|Architects+Daughter|Barrio|Cabin|Dancing+Script|Dosis|Exo+2|Gloria+Hallelujah|Inconsolata|Josefin+Sans|Karla|Source+Code+Pro|Yanone+Kaffeesatz" rel="stylesheet" type='text/css'>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" type="text/css" href="/css/normalize.css" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="/css/font-awesome.css" />
<link rel="shortcut icon" href="/../favicon.ico">
<link rel="stylesheet" href="/css/viewProperty.css">
<link rel="stylesheet" href="/css/search.css">
<link rel="stylesheet" type="text/css" href="/css/component.css" />
<!--style -->
<script src="/js/modernizr.js"></script> <!-- Modernizr -->
</head>
<body>
<header class="main-header">
<i class="fa fa-bars"></i>
<!-- Offsite navigation -->
<nav class="menu">
<i class="fa fa-close"></i>
<h3> spacelist </h3>
<h5><a data-scroll data-toggle="modal" data-target="#myModa3" class="btn button two">Add Property</a></h5>
<ul class="nav">
<li class="cl-effect-1"><a data-scroll href="contactus.html">Contact us</a></li>
<li class="cl-effect-1"><a data-scroll data-toggle="modal" data-target="#myModa4">About</a></li>
<li class="cl-effect-1"><a data-scroll href="#portfolio">Safety</a></li>
<li class="cl-effect-1"><a data-scroll href="#terms">Terms</a></li>
<li class="cl-effect-1"><a data-scroll href="#privacy">Privacy</a></li>
</ul>
</nav>
<form class="form-group">
<div class="search">
<input type="text" id="searchBox" class="search__input search-field" placeholder="Search" autocomplete="off"/>
<button class="fa fa-search search__button"></button>
<ul id="searchResults" class="term-list hidden"></ul>
</div>
</form>
<div class="profile">
<img src="images/opeyemi.jpg" alt="photograph of odedeyi opeyemi" class="profile-photo">
Opeyemi Odedeyi
</div>
</header><!--/.main-header-->
<section class="viewww">
<h1>View Your Property</h1>
</section>
<section class="body content">
<div class="container">
<div class="layout" style="background-image: url(images/test.jpg);"></div>
<h6>Joy 4 Fame Hostel</h6>
<div class="price">
<p>GH₵ 1,000 <span>per Month</span></p>
</div>
<div class="lorem">
<p>Donec sollicitudin molestie malesuada. Curabitur aliquet quam id dui posuere blandit. Nulla quis lorem ut libero malesuada feugiat. Curabitur non nulla sit amet nisl tempus convallis quis ac lectus. Sed porttitor lectus nibh. Praesent sapien massa, convallis a pellentesque nec, egestas non nisi. Proin eget tortor risus. Proin eget tortor risus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec velit neque, auctor sit amet aliquam vel, ullamcorper sit amet ligula. Vivamus suscipit tortor eget felis porttitor volutpat.</p>
</div>
<div class="buttons">
<a class="btn lass edit">Edit</a> <a class="btn lass view">Details</a>
</div>
</div>
</section>
<!-- Footer start -->
<footer class="main-footer">
<!-- <div class="foot">
<span>Icon made by Freepik from www.flaticon.com</span>
</div> -->
<div class="foot2">
<span>© spacelist 2017</span>
</div>
</footer>
<!-- Footer end -->
<!-- Contact section start -->
<script src="https://code.jquery.com/jquery-3.1.1.min.js" integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"></script>
<script type="text/javascript" src="/js/autoSuggest.js"></script>
<script src="/js/custom-file-input.js"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<script type="text/javascript" src="/js/smooth-scroll.js"></script>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
<!-- Load custom js for theme -->
<script type="text/javascript" src="/js/app.js"></script>
</body>
</html>
also back end js code
router.get('/viewProperty/:id', AccessControl.ensureAuthenticated,
function(req, res, next) {
User.findOne({_id: req.params.id})
.populate('properties')
.then(user => {
let model = {
properties: user.properties
};
console.log(user);
res.render('viewProperty', model);
});
});
//was trying test the issue on different routes below
router.get('/test', (req, res, next) => {
res.render('viewProperty');
});
Related
My box shadow added to this div element is appearing weirdly below the element for some reason. Below I have linked a codepen.io file in which my source is located. I'm having trouble using the UiKit slider while also retaining a box shadow around the elements
<!DOCTYPE html>
<html>
<head>
<title>Title</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- UIkit CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-rc.21/css/uikit.min.css" />
<!-- UIkit JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-rc.21/js/uikit.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-rc.21/js/uikit-icons.min.js"></script>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous">
</head>
<body>
<div class="uk-hidden#s uk-padding uk-padding-remove-vertical uk-slider" data-uk-slider="center: true; autoplay: true;">
<div class="uk-position-relative">
<div class="uk-slider-container">
<ul class="uk-slider-items uk-child-width-1-1 uk-grid" style="transform: translateX(0px);">
<li class="" style="order: 1;">
<div class="uk-card uk-box-shadow-medium uk-box-shadow-hover-large hvr-icon-forward example-card-poppin-orange example-border-1">
<div class="uk-card-media-top"><img class="" data-src="https://44u8552epjw3rivfs1yfikr1-wpengine.netdna-ssl.com/wp-content/uploads/2017/11/young-man-2939344_1280.jpg" alt="" data-uk-img="true" src="http://example-react-frontend-staging.herokuapp.com/3dffbae1ff8fe1724b31625be32c5810.jpg"
width="uk-width-1-1" height=""></div>
<div class="uk-card-body undefined">
<h3 class="uk-card-title">School</h3>
<p>Fusce placerat sem rutrum nisl gravida feugiat. Sed lacinia efficitur leo sed vestibulum. Maecenas scelerisque, nulla eget bibendum fermentum, velit ante consectetur ante, tempus egestas lacus urna quis mauris.</p>
</div>
<div class="uk-card-footer uk-text-center example-text-white example-background-accent-blue uk-text-uppercase example-letter-spacing-5-10">
<div class="uk-flex uk-flex-middle uk-flex-center">Read More <span class="fas fa-chevron-right hvr-icon uk-margin-small-left"></span></div>
</div>
</div>
</li>
<li class="" style="order: 1;">
<div class="uk-card uk-box-shadow-medium uk-box-shadow-hover-large hvr-icon-forward example-card-poppin-orange example-border-1">
<div class="uk-card-media-top"><img class="" data-src="https://edit.co.uk/uploads/2016/12/Image-2-Alternatives-to-stock-photography-Thinkstock.jpg" alt="" data-uk-img="true" src="http://example-react-frontend-staging.herokuapp.com/8d33aa933fda49caa52009cb16c128cd.jpg"
width="uk-width-1-1" height=""></div>
<div class="uk-card-body undefined">
<h3 class="uk-card-title">Hospital</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
<div class="uk-card-footer uk-text-center example-text-white example-background-accent-blue uk-text-uppercase example-letter-spacing-5-10">
<div class="uk-flex uk-flex-middle uk-flex-center">Read More <span class="fas fa-chevron-right hvr-icon uk-margin-small-left"></span></div>
</div>
</div>
</li>
<li class="uk-active">
<div class="uk-card uk-box-shadow-medium uk-box-shadow-hover-large hvr-icon-forward example-card-poppin-orange example-border-1">
<div class="uk-card-media-top"><img class="" data-src="http://www.apimages.com/Images/Ap_Creative_Stock_Header.jpg" alt="" data-uk-img="true" src="http://example-react-frontend-staging.herokuapp.com/bce5341a66f87afdb5120b52b0e6c0ab.jpeg" width="uk-width-1-1" height=""></div>
<div
class="uk-card-body undefined">
<h3 class="uk-card-title">Community</h3>
<p>Aliquam facilisis lectus nec ipsum finibus luctus. Praesent in facilisis felis. Ut varius malesuada accumsan. Nullam consectetur rhoncus metus eu rhoncus. Etiam lacinia pharetra urna, non volutpat ex suscipit
in. Nunc eu porta ex. </p>
</div>
<div class="uk-card-footer uk-text-center example-text-white example-background-accent-blue uk-text-uppercase example-letter-spacing-5-10">
<div class="uk-flex uk-flex-middle uk-flex-center">Read More <span class="fas fa-chevron-right hvr-icon uk-margin-small-left"></span></div>
</div>
</div>
</li>
</ul>
</div><span class="uk-position-center-left-out example-text-black uk-icon" data-uk-slider-item="previous" data-uk-icon="icon: chevron-left; ratio: 2;"><svg width="40" height="40" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"> <polyline fill="none" stroke="#000" stroke-width="1.03" points="13 16 7 10 13 4"></polyline></svg></span>
<span
class="uk-position-center-right-out example-text-black uk-icon" data-uk-slider-item="next" data-uk-icon="icon: chevron-right; ratio: 2;"><svg width="40" height="40" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"> <polyline fill="none" stroke="#000" stroke-width="1.03" points="7 4 13 10 7 16"></polyline></svg></span>
</div>
</div>
</body>
</html>
https://codepen.io/kadenlnelson/pen/GwZENQ
I think I got it, you need to add the box shadow classes to the button div, not the father div, for example
<!-- Delete .uk-box-shadow-medium .uk-box-shadow-hover-large from here -->
<div class="uk-card uk-box-shadow-medium uk-box-shadow-hover-large hvr-icon-forward example-card-poppin-orange example-border-1">
and paste it here, in the button div
<div class="uk-flex uk-flex-middle uk-flex-center uk-box-shadow-medium uk-box-shadow-hover-large ">Read More <span class="fas fa-chevron-right hvr-icon uk-margin-small-left"></span></div>
that should do the trick, let me know if that help you!
I have got following code snippet, where the widths of columns should be working, but somehow its not happening and both divs with column class are coming in next row.
<html>
<head>
<link href="https://cdnjs.cloudflare.com/ajax/libs/foundation/5.5.2/css/foundation.min.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/foundation/5.5.2/js/foundation.min.js"></script>
</head>
<body>
<div class="row">
<div class="large-8 columns"> Hello </div>
<div class="large-4 columns">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent pellentesque metus vitae felis bibendum.
</div>
</body>
</html>
Your foundation.min.css link needs to have a rel="stylesheet" property to specify it is a stylesheet relationship. Otherwise it wont be used as one.
You are also missing a closing </div> on your large-8 columns line.
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/foundation/5.5.2/css/foundation.min.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/foundation/5.5.2/js/foundation.min.js"></script>
</head>
<body>
<div class="row">
<div class="small-2 columns"> Hello </div>
<div class="small-10 columns">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent pellentesque metus vitae felis bibendum.</div>
</div>
</body>
</html>`
I am using a CSS Slider that utilises two sub tabs in each slide.
The slider's sub tabs use Bootstrap's 'Active' Class on the li that then changes the inactive li's class to active when the inactive tab's navigation arrow (< or >) is clicked.
The sub tabs work correctly on the first slide but do not work on the second slide, or any slide thereafter.
My JS Fiddle
JS Fiddle
The Problematic Code
<div class="profile-thumbnail">
<div class="profile-image">
<div class="overlay-profile"></div>
</div>
<!-- Sub Tabs -->
<ul class="nav nav-tabs" id="myTab">
<li class="active"><a class="hvr-border-fade" href="#tab1" data-toggle="tab"><</a></li>
<li><a class="hvr-border-fade" href="#tab2" data-toggle="tab">></a></li>
</ul>
</div>
<!-- END Player Profile Thumbnail-->
Refer to the below link (the MEET THE TEAM section) for a more accurate idea as the pasted code doesn't seem work as well.
Your tab's href's location need to be unique. Right now you are repeating the same href="tab1", href="tab2" for each slider. You can change it to:
href="tab1-a", href="tab2-a" for gallery 1.
href="tab1-b", href="tab2-b" for gallery 2.
Also, make sure you follow the same process for the id's. I cannot paste full code here due to character limits.
See JsFiddle
<!------------ Sean Peens ------------>
<article>
<!-- Player Profile Thumbnail-->
<div class="profile-thumbnail">
<div class="profile-image">
<div class="overlay-profile"></div>
</div>
<!-- Sub Tabs -->
<ul class="nav nav-tabs" id="myTab">
<li class="active">
<a class="hvr-border-fade" href="#tab1-a" data-toggle="tab"><</a>
</li>
<li><a class="hvr-border-fade" href="#tab2-a" data-toggle="tab">></a>
</li>
</ul>
</div>
<!-- END Player Profile Thumbnail-->
<!-- Start Player's Profile -->
<div class="player-profile">
<!-- First Tab -->
<div class="tab-pane fade in active" id="tab1-a">
<div class="player-profile-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas neque diam, luctus at laoreet in, auctor ut tellus. Etiam enim lacus, ornare et tempor, rhoncus rhoncus sem. Aliquam volutpat arcu et nibh mollis eleifend pharetra lorem scelerisque.
Donec vel enim purus, id viverra neque. Cras in velit ante, eget pellentesque sem. Duis tincidunt erat quam. Etiam placerat sapien elit.
</div>
</div>
<!-- Second Tab -->
<div class="tab-pane fade in" id="tab2-a">
<div class="gun-profile">
<img src="http://roxyprinsloo.co.za/tst/_include/img/profile-guns/richard-gun.png">
</div>
<div class="gun-profile-text"><span class="gun-title">KWA SR5</span>
<br>NC STAR Red Dot
<br>Underslung Grenade Launcher
<br>Extended Barrel
<br>Mock Suppressor
</div>
</div>
</div>
<!-- END Start Player's Profile -->
<!-- Start Player's Title -->
<div class="player-details">
<h3>Sean Peens</h3>
<ul>
<li><span class="aka">AKA 'SNOWMAN'</span>
<br>Team Captain
</li>
</ul>
</div>
<!-- END Start Player's Title -->
</article>
<!------------ END Sean Peens ------------>
<!------------ Richard Bradley ------------>
<article>
<!-- Player Profile Thumbnail-->
<div class="profile-thumbnail">
<div class="profile-image">
<div class="overlay-profile"></div>
<!-- Thumb Image -->
<img src="http://roxyprinsloo.co.za/tst/_include/img/work/thumbs/image-01.jpg">
</div>
<!-- Sub Tabs -->
<ul class="nav nav-tabs" id="myTab">
<li class="active">
<a class="hvr-border-fade" href="#tab1-b" data-toggle="tab"><</a>
</li>
<li><a class="hvr-border-fade" href="#tab2-b" data-toggle="tab">></a>
</li>
</ul>
</div>
<!-- END Player Profile Thumbnail-->
<!-- Start Player's Profile -->
<div class="player-profile">
<!-- First Tab -->
<div class="tab-pane fade in active" id="tab1-b">
<div class="player-profile-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas neque diam, luctus at laoreet in, auctor ut tellus. Etiam enim lacus, ornare et tempor, rhoncus rhoncus sem. Aliquam volutpat arcu et nibh mollis eleifend pharetra lorem scelerisque.
Donec vel enim purus, id viverra neque. Cras in velit ante, eget pellentesque sem. Duis tincidunt erat quam. Etiam placerat sapien elit.
</div>
</div>
<!-- Second Tab -->
<div class="tab-pane fade in" id="tab2-b">
<div class="gun-profile">
<img src="http://roxyprinsloo.co.za/tst/_include/img/profile-guns/richard-gun.png">
</div>
<div class="gun-profile-text"><span class="gun-title">KWA SR10</span>
<br>NC STAR Red Dot
<br>PEQ Box
<br>Magpul Furniture
<br>Noveske KX3 Flash Enhancer
</div>
</div>
</div>
<!-- END Start Player's Profile -->
<!-- Start Player's Title -->
<div class="player-details">
<h3>Richard Bradley</h3>
<ul>
<li><span class="aka">AKA 'DEADLEE'</span>
<br>Team Co-Captain
</li>
</ul>
</div>
<!-- END Start Player's Title -->
</article>
So I have currently used basic html and css coding to create a website for a client. The template uploads to the extension manager but when I go to preview it, the page looks nothing like it's supposed to. None of the styles from my css stylesheet are showing up. I'm new to Joomla so some help for this newbie would be greatly appreciated. If you need any more information I will be glad to give it. Unfortunately I am unable to provide a link since the site isn't live yet but will give you guys links to some screen shots.
EDIT:
<?php
defined('_JEXEC') or die;
?>
<!Doctype html>
<html>
<head>
<meta charset="utf-8">
<title> Deda's Couture</title>
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/main.css">
<link rel="stylesheet" href="css/responsive.css">
<link rel="stylesheet" href="css/component.css">
<meta="viewport" content="width=device-width, initial-scale=1.0">
<jdoc:include type="head" />
<!--[if lt IE 9]>
<script src="<?php echo $this->baseurl ?>/media/jui/js/html5.js"></script>
<![endif]-->
</head>
<body class="content">
<header>
<div id="topbar">
<img width="40" height="30" src="images/drupal.svg" alt="" id="drupal">
<img width="40" height="30" src="images/facebook-square.svg" alt="" id="facebook">
<img width="40" height="30" src="images/instagram.svg" alt="" id="instagram">
<img width="40" height="30" src="images/twitter.svg" alt="" id="twitter">
<p>1-800-555-5252</p>
</div>
<input type="checkbox" id="menuToggle">
<label for="menuToggle" class="menu-icon">☰</label>
<center><img src="images/logo.jpg"></center>
<div id="nav">
<div id="nav_wrapper">
<!-- <ul>
<li>HOME</li>
<li>NEW ARRIVALS</li><li>
APPAREL<img src="images/dropdownarrow.jpg">
<ul>
<li>MENS</li>
<li>WOMENS</li>
<li>CHILDREN</li>
</ul></li>
<li>ACCESSORIES</li>
<li>SHOES</li>
<li>SPECIALS</li>
<li>CONTACT US</li>
</ul> -->
<jdoc:include type="modules" name="mainnav" style="html5" />
</div>
</div>
<nav class="cbp-spmenu cbp-spmenu-vertical cbp-spmenu-right menu">
<h3 class="cbp-spmenu-open">Menu</h3>
<!-- HOME
NEW ARRIVALS
APPAREL
ACCESSORIES
SHOES
SPECIALS
CONTACT US -->
<jdoc:include type="modules" name="mobilenav" style="html5" />
</nav>
<!-- <button id="showLeftPush">Show/Hide Left Push Menu</button><img id="menu-icon" src="images/menu-icon.svg"></button>
-->
<!-- <img src="images/topbanner.jpg" width="100%"> -->
<section class="banner">
<jdoc:include type="modules" name="banner" style="html5" /></section>
</header>
<div id="wrapper">
<section>
<p class="locate"><!-- HOME // APPAREL // WOMEN'S APPAREL -->
<jdoc:include type="modules" name="breadcrumbs" style="html5"</p>
<!-- <ul id="gallery">
<li>
<img src="images/productbox.jpg">
<p> LOREM IPSA DIPA </p>
<p>179.00</p></li>
<li>
<img src="images/productbox.jpg">
<p> LOREM IPSA DIPA </p>
<p>179.00</p></li>
<li>
<img src="images/productbox.jpg">
<p> LOREM IPSA DIPA </p>
<p>179.00</p></li>
<li>
<img src="images/productbox.jpg">
<p> LOREM IPSA DIPA </p>
<p>179.00</p></li>
</ul> -->
<jdoc:include type="modules" name="gallery" style="html5" />
<!-- <h2>HEADLINE</h2>
<p class="primarycontent">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin laoreet faucibus commodo. Cras consectetur ligula et leo rutrum, ac porttitor ipsum lacinia. Nulla volutpat nisl ante, id consequat diam faucibus efficitur. Duis quis placerat tortor. Aenean pharetra maximus bibendum. Donec posuere mauris at est efficitur hendrerit. In sodales nisi nec lorem sollicitudin aliquam.
Suspendisse vel blandit nulla. Vivamus fringilla tortor condimentum convallis vehicula. Suspendisse potenti. Aliquam tempor quam sit amet auctor interdum. Vivamus condimentum mauris a odio scelerisque elementum. Etiam fermentum lorem id commodo placerat. Ut scelerisque nibh eu feugiat euismod.</p> -->
<jdoc:include type="message" />
<jdoc:include type="component" />
</section>
</div>
<footer>
<!-- <div id="bottom-nav">
<nav>
HOME
NEW ARRIVALS
APPAREL
ACCESSORIES
SHOES
SPECIALS
CONTACT US
</nav> -->
<jdoc:include type="modules" name="submenu" style="html5" />
<img src="images/bottomlogo.jpg" alt="">
</div>
<p><span class="copyright">COPYRIGHT © 2015 DEDA'S COUTURE BY 3 | ALL RIGHTS RESERVED</span> <span class="credits">
RESPONSIVE WEBSITE DESIGNED BY FREEDOM CREATIVE SOLUTIONS</span><p>
</footer>
<script>
var menuLeft = document.getElementById( 'cbp-spmenu-s1' ),
menuRight = document.getElementById( 'cbp-spmenu-s2' ),
menuTop = document.getElementById( 'cbp-spmenu-s3' ),
menuBottom = document.getElementById( 'cbp-spmenu-s4' ),
showLeft = document.getElementById( 'showLeft' ),
showRight = document.getElementById( 'showRight' ),
showTop = document.getElementById( 'showTop' ),
showBottom = document.getElementById( 'showBottom' ),
showLeftPush = document.getElementById( 'showLeftPush' ),
showRightPush = document.getElementById( 'showRightPush' ),
body = document.body;
showLeft.onclick = function() {
classie.toggle( this, 'active' );
classie.toggle( menuLeft, 'cbp-spmenu-open' );
disableOther( 'showLeft' );
};
function disableOther( button ) {
if( button !== 'showLeft' ) {
classie.toggle( showLeft, 'disabled' );
}
</script>
</body>
</html>
I am fairly new with bootstrap, however I am trying to create a basic website. I have the below code in my index:
<!DOCTYPE html>
<html lang="en"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<link rel="shortcut icon" href="http://getbootstrap.com/assets/ico/favicon.png">
<title>BoonRadio: Playing the latest hits for you!</title>
<!-- Bootstrap core CSS -->
<link href="../bootstrap/css/bootstrap.css" rel="stylesheet">
<!-- Bootstrap theme -->
<link href="../bootstrap/css/bootstrap-theme.min.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="http://../bootstrap/css/theme.css" rel="stylesheet">
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="../../assets/js/html5shiv.js"></script>
<script src="../../assets/js/respond.min.js"></script>
<![endif]-->
<style type="text/css"></style><style id="holderjs-style" type="text/css">.holderjs-fluid {font-size:16px;font-weight:bold;text-align:center;font-family:sans-serif;margin:0}</style><style type="text/css"></style></head>
<script type="text/javascript">
var bustcachevar=1 //bust potential caching of external pages after initial request? (1=yes, 0=no)
var loadedobjects=""
var rootdomain="http://"+window.location.hostname
var bustcacheparameter=""
function ajaxpage(url, containerid){
var page_request = false
if (window.XMLHttpRequest) // if Mozilla, Safari etc
page_request = new XMLHttpRequest()
else if (window.ActiveXObject){ // if IE
try {
page_request = new ActiveXObject("Msxml2.XMLHTTP")
}
catch (e){
try{
page_request = new ActiveXObject("Microsoft.XMLHTTP")
}
catch (e){}
}
}
else
return false
page_request.onreadystatechange=function(){
loadpage(page_request, containerid)
}
if (bustcachevar) //if bust caching of external page
bustcacheparameter=(url.indexOf("?")!=-1)? "&"+new Date().getTime() : "?"+new Date().getTime()
page_request.open('GET', url+bustcacheparameter, true)
page_request.send(null)
}
function loadpage(page_request, containerid){
if (page_request.readyState == 4 && (page_request.status==200 || window.location.href.indexOf("http")==-1))
document.getElementById(containerid).innerHTML=page_request.responseText
}
function loadobjs(){
if (!document.getElementById)
return
for (i=0; i<arguments.length; i++){
var file=arguments[i]
var fileref=""
if (loadedobjects.indexOf(file)==-1){ //Check to see if this object has not already been added to page before proceeding
if (file.indexOf(".js")!=-1){ //If object is a js file
fileref=document.createElement('script')
fileref.setAttribute("type","text/javascript");
fileref.setAttribute("src", file);
}
else if (file.indexOf(".css")!=-1){ //If object is a css file
fileref=document.createElement("link")
fileref.setAttribute("rel", "stylesheet");
fileref.setAttribute("type", "text/css");
fileref.setAttribute("href", file);
}
}
if (fileref!=""){
document.getElementsByTagName("head").item(0).appendChild(fileref)
loadedobjects+=file+" " //Remember this object as being already added to page
}
}
}
</script>
<body style="">
<!-- Fixed navbar -->
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="index.php">BoonRadio</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>Our DJ's</li>
<li>Apply for DJ</li>
<li>Timetable</li>
<li>About</li>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>Sign In</li>
</ul>
</div><!--/.nav-collapse -->
</div>
</div>
<div class="container">
<img src="../img/banner.png" />
<div class="page-header"></div>
<div class="row">
<div class="col-sm-8" style="float: left;">
<div class="panel panel-info">
<div class="panel-heading">
<h3 class="panel-title">Panel title</h3>
</div>
<div class="panel-body">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam iaculis tincidunt nunc eu iaculis. Curabitur aliquam, purus volutpat tincidunt fermentum, augue erat
scelerisque dui, at aliquet leo lectus quis dui. Nulla congue elit in lacus porttitor, ultricies ultrices ligula porttitor. Praesent faucibus ullamcorper ligula ut
cursus. Vivamus condimentum augue vel dapibus feugiat. Proin vulputate massa at tortor iaculis, in sodales nulla suscipit. Pellentesque commodo venenatis mauris,
vitae feugiat tortor cursus non. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nunc quam nisi, semper non tortor vel, tincidunt eleifend dui.
Curabitur pellentesque, nulla eu blandit condimentum, augue ante posuere nunc, at laoreet velit est ac ipsum. Vivamus neque elit, pellentesque eu justo a,
iaculis lacinia leo. Sed pulvinar dapibus diam et vulputate. In porta sem id lorem vestibulum pulvinar. Suspendisse luctus lorem sit amet condimentum volutpat.
Nullam id pharetra tortor.
<br /><br />
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-4" style="float: right;">
<div class="panel panel-info">
<div class="panel-heading">
<h3 class="panel-title">Radio Statistics</h3>
</div>
<div class="panel-body">
Statics code here.
</div>
</div>
<div class="panel panel-info">
<div class="panel-heading">
<h3 class="panel-title">Quick Requests</h3>
</div>
<div class="panel-body">
Request line code here.
</div>
</div>
<div class="panel panel-info">
<div class="panel-heading">
<h3 class="panel-title">Facebook</h3>
</div>
<div class="panel-body">
Facebook code here.
</div>
</div>
</div><!-- /.col-sm-4 -->
</div>
<!-- <script type="text/javascript">
ajaxpage('#', 'contentarea')
</script>
<div id="contentarea"></div> -->
<div class="page-header"></div>
<div class="footer">© BoonRadio 2013</div>
</div>
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="../bootstrap/js/jquery.js"></script>
<script src="../bootstrap/js/bootstrap.min.js"></script>
<script src="../bootstrap/js/holder.js"></script>
</body></html>
Don't mind the hidden ajax code. Anyways, my divs are doing this:
http://i.imgur.com/HdjKFfS.png
The more I add in the main content box, the further down the 3 divs on the right go down. I am wanting them to stay in place so when I add more content, they don't move down. Even adding margin-top to the col-sm-4 div, they still move down.
http://i.imgur.com/aSs1GqP.png
It might be simple and I'm just not thinking properly, but would someone assist me?
You're misunderstanding how Bootstrap's grid system works. Get rid of the float styles on your column divs and it should work; Bootstrap already provides the correct float styles as part of the grid system. Also you have a stray </li> in your nav header. Also, get your indenting sorted out, it's super inconsistent right now, which makes it harder to read and harder to figure out.
I corrected your indenting. There were some closing </div> tags that were unnecessary. As Nathan said, the floating css is not needed with Bootstrap.
<div class="container">
<img src="../img/banner.png" />
<div class="page-header"></div>
<div class="row">
<div class="col-sm-8">
<div class="panel panel-info">
<div class="panel-heading">
<h3 class="panel-title">Panel title</h3>
</div>
<div class="panel-body">
Lorem ipsum ...
</div>
</div>
<div class="col-sm-4">
<div class="panel panel-info">
<div class="panel-heading">
<h3 class="panel-title">Radio Statistics</h3>
</div>
<div class="panel-body">
Statics code here.
</div>
</div>
<div class="panel panel-info">
<div class="panel-heading">
<h3 class="panel-title">Quick Requests</h3>
</div>
<div class="panel-body">
Request line code here.
</div>
</div>
<div class="panel panel-info">
<div class="panel-heading">
<h3 class="panel-title">Facebook</h3>
</div>
<div class="panel-body">
Facebook code here.
</div>
</div>
</div><!-- /.col-sm-4 -->
</div>
<!-- <script type="text/javascript">
ajaxpage('#', 'contentarea')
</script>
<div id="contentarea"></div> -->
<div class="page-header"></div>
<div class="footer">© BoonRadio 2013</div>
</div>