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>
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'm generating a barcode using this library and I do need to print the page including the barcode.
When I initiate the print dialog I can't find the barcode although it is taking up space.
$(document).ready(function() {
window.print();
});
#media print {
.barcode-container {
display: block !important;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="subpage">
<div class="barcode-container">
<div style="font-size:0;position:relative;width:422px;height:30px;">
<div style="background-color:black;width:4px;height:30px;position:absolute;left:0px;top:0px;"> </div>
<div style="background-color:black;width:2px;height:30px;position:absolute;left:6px;top:0px;"> </div>
<div style="background-color:black;width:2px;height:30px;position:absolute;left:16px;top:0px;"> </div>
<div style="background-color:black;width:4px;height:30px;position:absolute;left:22px;top:0px;"> </div>
<div style="background-color:black;width:2px;height:30px;position:absolute;left:28px;top:0px;"> </div>
<div style="background-color:black;width:2px;height:30px;position:absolute;left:36px;top:0px;"> </div>
<div style="background-color:black;width:2px;height:30px;position:absolute;left:44px;top:0px;"> </div>
<div style="background-color:black;width:4px;height:30px;position:absolute;left:50px;top:0px;"> </div>
<div style="background-color:black;width:6px;height:30px;position:absolute;left:56px;top:0px;"> </div>
<div style="background-color:black;width:2px;height:30px;position:absolute;left:66px;top:0px;"> </div>
<div style="background-color:black;width:2px;height:30px;position:absolute;left:74px;top:0px;"> </div>
<div style="background-color:black;width:4px;height:30px;position:absolute;left:82px;top:0px;"> </div>
<div style="background-color:black;width:2px;height:30px;position:absolute;left:88px;top:0px;"> </div>
<div style="background-color:black;width:4px;height:30px;position:absolute;left:94px;top:0px;"> </div>
<div style="background-color:black;width:6px;height:30px;position:absolute;left:100px;top:0px;"> </div>
<div style="background-color:black;width:2px;height:30px;position:absolute;left:110px;top:0px;"> </div>
<div style="background-color:black;width:6px;height:30px;position:absolute;left:116px;top:0px;"> </div>
<div style="background-color:black;width:4px;height:30px;position:absolute;left:124px;top:0px;"> </div>
<div style="background-color:black;width:2px;height:30px;position:absolute;left:132px;top:0px;"> </div>
<div style="background-color:black;width:6px;height:30px;position:absolute;left:138px;top:0px;"> </div>
<div style="background-color:black;width:4px;height:30px;position:absolute;left:146px;top:0px;"> </div>
<div style="background-color:black;width:2px;height:30px;position:absolute;left:154px;top:0px;"> </div>
<div style="background-color:black;width:6px;height:30px;position:absolute;left:160px;top:0px;"> </div>
<div style="background-color:black;width:4px;height:30px;position:absolute;left:168px;top:0px;"> </div>
<div style="background-color:black;width:2px;height:30px;position:absolute;left:176px;top:0px;"> </div>
<div style="background-color:black;width:6px;height:30px;position:absolute;left:182px;top:0px;"> </div>
<div style="background-color:black;width:4px;height:30px;position:absolute;left:190px;top:0px;"> </div>
<div style="background-color:black;width:2px;height:30px;position:absolute;left:198px;top:0px;"> </div>
<div style="background-color:black;width:6px;height:30px;position:absolute;left:204px;top:0px;"> </div>
<div style="background-color:black;width:4px;height:30px;position:absolute;left:212px;top:0px;"> </div>
<div style="background-color:black;width:2px;height:30px;position:absolute;left:220px;top:0px;"> </div>
<div style="background-color:black;width:6px;height:30px;position:absolute;left:226px;top:0px;"> </div>
<div style="background-color:black;width:4px;height:30px;position:absolute;left:234px;top:0px;"> </div>
<div style="background-color:black;width:2px;height:30px;position:absolute;left:242px;top:0px;"> </div>
<div style="background-color:black;width:6px;height:30px;position:absolute;left:248px;top:0px;"> </div>
<div style="background-color:black;width:4px;height:30px;position:absolute;left:256px;top:0px;"> </div>
<div style="background-color:black;width:4px;height:30px;position:absolute;left:264px;top:0px;"> </div>
<div style="background-color:black;width:6px;height:30px;position:absolute;left:272px;top:0px;"> </div>
<div style="background-color:black;width:2px;height:30px;position:absolute;left:280px;top:0px;"> </div>
<div style="background-color:black;width:2px;height:30px;position:absolute;left:286px;top:0px;"> </div>
<div style="background-color:black;width:6px;height:30px;position:absolute;left:292px;top:0px;"> </div>
<div style="background-color:black;width:4px;height:30px;position:absolute;left:300px;top:0px;"> </div>
<div style="background-color:black;width:2px;height:30px;position:absolute;left:308px;top:0px;"> </div>
<div style="background-color:black;width:6px;height:30px;position:absolute;left:314px;top:0px;"> </div>
<div style="background-color:black;width:4px;height:30px;position:absolute;left:324px;top:0px;"> </div>
<div style="background-color:black;width:2px;height:30px;position:absolute;left:330px;top:0px;"> </div>
<div style="background-color:black;width:6px;height:30px;position:absolute;left:336px;top:0px;"> </div>
<div style="background-color:black;width:4px;height:30px;position:absolute;left:344px;top:0px;"> </div>
<div style="background-color:black;width:4px;height:30px;position:absolute;left:352px;top:0px;"> </div>
<div style="background-color:black;width:6px;height:30px;position:absolute;left:358px;top:0px;"> </div>
<div style="background-color:black;width:2px;height:30px;position:absolute;left:368px;top:0px;"> </div>
<div style="background-color:black;width:2px;height:30px;position:absolute;left:374px;top:0px;"> </div>
<div style="background-color:black;width:2px;height:30px;position:absolute;left:382px;top:0px;"> </div>
<div style="background-color:black;width:4px;height:30px;position:absolute;left:390px;top:0px;"> </div>
<div style="background-color:black;width:4px;height:30px;position:absolute;left:396px;top:0px;"> </div>
<div style="background-color:black;width:6px;height:30px;position:absolute;left:406px;top:0px;"> </div>
<div style="background-color:black;width:2px;height:30px;position:absolute;left:414px;top:0px;"> </div>
<div style="background-color:black;width:4px;height:30px;position:absolute;left:418px;top:0px;"> </div>
<div style="background-color:black;width:0px;height:30px;position:absolute;left:422px;top:0px;"> </div>
<div style="background-color:black;width:0px;height:30px;position:absolute;left:422px;top:0px;"> </div>
</div>
</div>
<p class="bold">ID: 60105</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus luctus volutpat lorem a auctor. In lorem nisi, vulputate vel dapibus eu, tristique non lacus. Proin maximus nulla a imperdiet accumsan. Nullam diam tortor, hendrerit a libero vel, placerat
ullamcorper urna. Vivamus consequat placerat lectus, mattis porttitor felis feugiat non. Quisque non elementum est. Quisque semper tincidunt nunc quis condimentum. Morbi tristique ipsum quis velit accumsan tincidunt. Etiam et imperdiet ex, at posuere
enim. Curabitur vitae lacinia libero.</p>
</div>
I tried to do a display: block !important; to the barcode container but it still didn't print it. Any ideas?
Background colours don't print by default. They are set as transparent.
Try:
box-shadow: inset 0 0 0 10000px #000; /*Fake Bg*/
Alternatively the user can set:
Tick 'Print Background Colours and Images' from your browsers 'Page Setup'
You may also use:
-webkit-print-color-adjust: exact;
but this is only supported in Chrome (And other Webkit browsers).
The Chrome css property "-webkit-print-color-adjust: exact;" will make it work appropriately in chrome.
$(document).ready(function() {
window.print();
});
#media print {
.barcode-container>div{
display: block !important;
-webkit-print-color-adjust: exact;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="subpage">
<div class="barcode-container">
<div style="font-size:0;position:relative;width:422px;height:30px;">
<div style="background-color:black;width:4px;height:30px;position:absolute;left:0px;top:0px;"> </div>
<div style="background-color:black;width:2px;height:30px;position:absolute;left:6px;top:0px;"> </div>
<div style="background-color:black;width:2px;height:30px;position:absolute;left:16px;top:0px;"> </div>
<div style="background-color:black;width:4px;height:30px;position:absolute;left:22px;top:0px;"> </div>
<div style="background-color:black;width:2px;height:30px;position:absolute;left:28px;top:0px;"> </div>
<div style="background-color:black;width:2px;height:30px;position:absolute;left:36px;top:0px;"> </div>
<div style="background-color:black;width:2px;height:30px;position:absolute;left:44px;top:0px;"> </div>
<div style="background-color:black;width:4px;height:30px;position:absolute;left:50px;top:0px;"> </div>
<div style="background-color:black;width:6px;height:30px;position:absolute;left:56px;top:0px;"> </div>
<div style="background-color:black;width:2px;height:30px;position:absolute;left:66px;top:0px;"> </div>
<div style="background-color:black;width:2px;height:30px;position:absolute;left:74px;top:0px;"> </div>
<div style="background-color:black;width:4px;height:30px;position:absolute;left:82px;top:0px;"> </div>
<div style="background-color:black;width:2px;height:30px;position:absolute;left:88px;top:0px;"> </div>
<div style="background-color:black;width:4px;height:30px;position:absolute;left:94px;top:0px;"> </div>
<div style="background-color:black;width:6px;height:30px;position:absolute;left:100px;top:0px;"> </div>
<div style="background-color:black;width:2px;height:30px;position:absolute;left:110px;top:0px;"> </div>
<div style="background-color:black;width:6px;height:30px;position:absolute;left:116px;top:0px;"> </div>
<div style="background-color:black;width:4px;height:30px;position:absolute;left:124px;top:0px;"> </div>
<div style="background-color:black;width:2px;height:30px;position:absolute;left:132px;top:0px;"> </div>
<div style="background-color:black;width:6px;height:30px;position:absolute;left:138px;top:0px;"> </div>
<div style="background-color:black;width:4px;height:30px;position:absolute;left:146px;top:0px;"> </div>
<div style="background-color:black;width:2px;height:30px;position:absolute;left:154px;top:0px;"> </div>
<div style="background-color:black;width:6px;height:30px;position:absolute;left:160px;top:0px;"> </div>
<div style="background-color:black;width:4px;height:30px;position:absolute;left:168px;top:0px;"> </div>
<div style="background-color:black;width:2px;height:30px;position:absolute;left:176px;top:0px;"> </div>
<div style="background-color:black;width:6px;height:30px;position:absolute;left:182px;top:0px;"> </div>
<div style="background-color:black;width:4px;height:30px;position:absolute;left:190px;top:0px;"> </div>
<div style="background-color:black;width:2px;height:30px;position:absolute;left:198px;top:0px;"> </div>
<div style="background-color:black;width:6px;height:30px;position:absolute;left:204px;top:0px;"> </div>
<div style="background-color:black;width:4px;height:30px;position:absolute;left:212px;top:0px;"> </div>
<div style="background-color:black;width:2px;height:30px;position:absolute;left:220px;top:0px;"> </div>
<div style="background-color:black;width:6px;height:30px;position:absolute;left:226px;top:0px;"> </div>
<div style="background-color:black;width:4px;height:30px;position:absolute;left:234px;top:0px;"> </div>
<div style="background-color:black;width:2px;height:30px;position:absolute;left:242px;top:0px;"> </div>
<div style="background-color:black;width:6px;height:30px;position:absolute;left:248px;top:0px;"> </div>
<div style="background-color:black;width:4px;height:30px;position:absolute;left:256px;top:0px;"> </div>
<div style="background-color:black;width:4px;height:30px;position:absolute;left:264px;top:0px;"> </div>
<div style="background-color:black;width:6px;height:30px;position:absolute;left:272px;top:0px;"> </div>
<div style="background-color:black;width:2px;height:30px;position:absolute;left:280px;top:0px;"> </div>
<div style="background-color:black;width:2px;height:30px;position:absolute;left:286px;top:0px;"> </div>
<div style="background-color:black;width:6px;height:30px;position:absolute;left:292px;top:0px;"> </div>
<div style="background-color:black;width:4px;height:30px;position:absolute;left:300px;top:0px;"> </div>
<div style="background-color:black;width:2px;height:30px;position:absolute;left:308px;top:0px;"> </div>
<div style="background-color:black;width:6px;height:30px;position:absolute;left:314px;top:0px;"> </div>
<div style="background-color:black;width:4px;height:30px;position:absolute;left:324px;top:0px;"> </div>
<div style="background-color:black;width:2px;height:30px;position:absolute;left:330px;top:0px;"> </div>
<div style="background-color:black;width:6px;height:30px;position:absolute;left:336px;top:0px;"> </div>
<div style="background-color:black;width:4px;height:30px;position:absolute;left:344px;top:0px;"> </div>
<div style="background-color:black;width:4px;height:30px;position:absolute;left:352px;top:0px;"> </div>
<div style="background-color:black;width:6px;height:30px;position:absolute;left:358px;top:0px;"> </div>
<div style="background-color:black;width:2px;height:30px;position:absolute;left:368px;top:0px;"> </div>
<div style="background-color:black;width:2px;height:30px;position:absolute;left:374px;top:0px;"> </div>
<div style="background-color:black;width:2px;height:30px;position:absolute;left:382px;top:0px;"> </div>
<div style="background-color:black;width:4px;height:30px;position:absolute;left:390px;top:0px;"> </div>
<div style="background-color:black;width:4px;height:30px;position:absolute;left:396px;top:0px;"> </div>
<div style="background-color:black;width:6px;height:30px;position:absolute;left:406px;top:0px;"> </div>
<div style="background-color:black;width:2px;height:30px;position:absolute;left:414px;top:0px;"> </div>
<div style="background-color:black;width:4px;height:30px;position:absolute;left:418px;top:0px;"> </div>
<div style="background-color:black;width:0px;height:30px;position:absolute;left:422px;top:0px;"> </div>
<div style="background-color:black;width:0px;height:30px;position:absolute;left:422px;top:0px;"> </div>
</div>
</div>
<p class="bold">ID: 60105</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus luctus volutpat lorem a auctor. In lorem nisi, vulputate vel dapibus eu, tristique non lacus. Proin maximus nulla a imperdiet accumsan. Nullam diam tortor, hendrerit a libero vel, placerat
ullamcorper urna. Vivamus consequat placerat lectus, mattis porttitor felis feugiat non. Quisque non elementum est. Quisque semper tincidunt nunc quis condimentum. Morbi tristique ipsum quis velit accumsan tincidunt. Etiam et imperdiet ex, at posuere
enim. Curabitur vitae lacinia libero.</p>
</div>
You can use -webkit-print-color-adjust: exact; on Chrome and color-adjust: exact; on Firefox
$(document).ready(function() {
window.print();
});
#media print {
.barcode-container {
display: block !important;
-webkit-print-color-adjust: exact;
color-adjust: exact;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="subpage">
<div class="barcode-container">
<div style="font-size:0;position:relative;width:422px;height:30px;">
<div style="background-color:black;width:4px;height:30px;position:absolute;left:0px;top:0px;"> </div>
<div style="background-color:black;width:2px;height:30px;position:absolute;left:6px;top:0px;"> </div>
<div style="background-color:black;width:2px;height:30px;position:absolute;left:16px;top:0px;"> </div>
<div style="background-color:black;width:4px;height:30px;position:absolute;left:22px;top:0px;"> </div>
<div style="background-color:black;width:2px;height:30px;position:absolute;left:28px;top:0px;"> </div>
<div style="background-color:black;width:2px;height:30px;position:absolute;left:36px;top:0px;"> </div>
<div style="background-color:black;width:2px;height:30px;position:absolute;left:44px;top:0px;"> </div>
<div style="background-color:black;width:4px;height:30px;position:absolute;left:50px;top:0px;"> </div>
<div style="background-color:black;width:6px;height:30px;position:absolute;left:56px;top:0px;"> </div>
<div style="background-color:black;width:2px;height:30px;position:absolute;left:66px;top:0px;"> </div>
<div style="background-color:black;width:2px;height:30px;position:absolute;left:74px;top:0px;"> </div>
<div style="background-color:black;width:4px;height:30px;position:absolute;left:82px;top:0px;"> </div>
<div style="background-color:black;width:2px;height:30px;position:absolute;left:88px;top:0px;"> </div>
<div style="background-color:black;width:4px;height:30px;position:absolute;left:94px;top:0px;"> </div>
<div style="background-color:black;width:6px;height:30px;position:absolute;left:100px;top:0px;"> </div>
<div style="background-color:black;width:2px;height:30px;position:absolute;left:110px;top:0px;"> </div>
<div style="background-color:black;width:6px;height:30px;position:absolute;left:116px;top:0px;"> </div>
<div style="background-color:black;width:4px;height:30px;position:absolute;left:124px;top:0px;"> </div>
<div style="background-color:black;width:2px;height:30px;position:absolute;left:132px;top:0px;"> </div>
<div style="background-color:black;width:6px;height:30px;position:absolute;left:138px;top:0px;"> </div>
<div style="background-color:black;width:4px;height:30px;position:absolute;left:146px;top:0px;"> </div>
<div style="background-color:black;width:2px;height:30px;position:absolute;left:154px;top:0px;"> </div>
<div style="background-color:black;width:6px;height:30px;position:absolute;left:160px;top:0px;"> </div>
<div style="background-color:black;width:4px;height:30px;position:absolute;left:168px;top:0px;"> </div>
<div style="background-color:black;width:2px;height:30px;position:absolute;left:176px;top:0px;"> </div>
<div style="background-color:black;width:6px;height:30px;position:absolute;left:182px;top:0px;"> </div>
<div style="background-color:black;width:4px;height:30px;position:absolute;left:190px;top:0px;"> </div>
<div style="background-color:black;width:2px;height:30px;position:absolute;left:198px;top:0px;"> </div>
<div style="background-color:black;width:6px;height:30px;position:absolute;left:204px;top:0px;"> </div>
<div style="background-color:black;width:4px;height:30px;position:absolute;left:212px;top:0px;"> </div>
<div style="background-color:black;width:2px;height:30px;position:absolute;left:220px;top:0px;"> </div>
<div style="background-color:black;width:6px;height:30px;position:absolute;left:226px;top:0px;"> </div>
<div style="background-color:black;width:4px;height:30px;position:absolute;left:234px;top:0px;"> </div>
<div style="background-color:black;width:2px;height:30px;position:absolute;left:242px;top:0px;"> </div>
<div style="background-color:black;width:6px;height:30px;position:absolute;left:248px;top:0px;"> </div>
<div style="background-color:black;width:4px;height:30px;position:absolute;left:256px;top:0px;"> </div>
<div style="background-color:black;width:4px;height:30px;position:absolute;left:264px;top:0px;"> </div>
<div style="background-color:black;width:6px;height:30px;position:absolute;left:272px;top:0px;"> </div>
<div style="background-color:black;width:2px;height:30px;position:absolute;left:280px;top:0px;"> </div>
<div style="background-color:black;width:2px;height:30px;position:absolute;left:286px;top:0px;"> </div>
<div style="background-color:black;width:6px;height:30px;position:absolute;left:292px;top:0px;"> </div>
<div style="background-color:black;width:4px;height:30px;position:absolute;left:300px;top:0px;"> </div>
<div style="background-color:black;width:2px;height:30px;position:absolute;left:308px;top:0px;"> </div>
<div style="background-color:black;width:6px;height:30px;position:absolute;left:314px;top:0px;"> </div>
<div style="background-color:black;width:4px;height:30px;position:absolute;left:324px;top:0px;"> </div>
<div style="background-color:black;width:2px;height:30px;position:absolute;left:330px;top:0px;"> </div>
<div style="background-color:black;width:6px;height:30px;position:absolute;left:336px;top:0px;"> </div>
<div style="background-color:black;width:4px;height:30px;position:absolute;left:344px;top:0px;"> </div>
<div style="background-color:black;width:4px;height:30px;position:absolute;left:352px;top:0px;"> </div>
<div style="background-color:black;width:6px;height:30px;position:absolute;left:358px;top:0px;"> </div>
<div style="background-color:black;width:2px;height:30px;position:absolute;left:368px;top:0px;"> </div>
<div style="background-color:black;width:2px;height:30px;position:absolute;left:374px;top:0px;"> </div>
<div style="background-color:black;width:2px;height:30px;position:absolute;left:382px;top:0px;"> </div>
<div style="background-color:black;width:4px;height:30px;position:absolute;left:390px;top:0px;"> </div>
<div style="background-color:black;width:4px;height:30px;position:absolute;left:396px;top:0px;"> </div>
<div style="background-color:black;width:6px;height:30px;position:absolute;left:406px;top:0px;"> </div>
<div style="background-color:black;width:2px;height:30px;position:absolute;left:414px;top:0px;"> </div>
<div style="background-color:black;width:4px;height:30px;position:absolute;left:418px;top:0px;"> </div>
<div style="background-color:black;width:0px;height:30px;position:absolute;left:422px;top:0px;"> </div>
<div style="background-color:black;width:0px;height:30px;position:absolute;left:422px;top:0px;"> </div>
</div>
</div>
<p class="bold">ID: 60105</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus luctus volutpat lorem a auctor. In lorem nisi, vulputate vel dapibus eu, tristique non lacus. Proin maximus nulla a imperdiet accumsan. Nullam diam tortor, hendrerit a libero vel, placerat
ullamcorper urna. Vivamus consequat placerat lectus, mattis porttitor felis feugiat non. Quisque non elementum est. Quisque semper tincidunt nunc quis condimentum. Morbi tristique ipsum quis velit accumsan tincidunt. Etiam et imperdiet ex, at posuere
enim. Curabitur vitae lacinia libero.</p>
</div>
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');
});
Re: Bootstrap 3.3.5 in Wordpress
I have not seen this issue before. All I want to do is align 3 x .col-md-4 .wells inside a row, but they just won't align. The first div is always a bit higher; see screenshot.
This is the code:
<div class="row">
<div class="col-xs-12 col-sm-10 col-sm-offset-1 col-md-4 col-md-offset-0 col-lg-4 col-lg-offset-0 text-center">
<a class="page-scroll" href="#how-to"><div class="home-plans well">
<br/>
<h2>1.</h2>
<p class="lead text-left">Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo.p>
</div> <!-- /well --></a>
</div> <!-- /col-md-4 -->
<div class="col-xs-12 col-sm-10 col-sm-offset-1 col-md-4 col-md-offset-0 col-lg-4 col-lg-offset-0 text-center">
<div class="home-plans well">
<br />
<h2>2.</h2>
<p class="lead text-left">Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo.p>
</div> <!-- /well -->
</div> <!-- /col-md-4 -->
<div class="col-xs-12 col-sm-10 col-sm-offset-1 col-md-4 col-md-offset-0 col-lg-4 col-lg-offset-0 text-center">
<div class="home-plans well">
<br />
<h2>3.</h2>
<p class="lead text-left">Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo.</p>
</div> <!-- /well -->
</div> <!-- /col-md-4 -->
</div>
Using f12 tools in explorer, the issue seems to be the below CSS code styling the row:
/*media all*/
.btn-group-vertical > .btn-group::after, .btn-group-vertical > .btn-group::before, .btn-toolbar::after, .btn-toolbar::before, .clearfix::after, .clearfix::before, .container-fluid::after, .container-fluid::before, .container::after, .container::before, .dl-horizontal dd::after, .dl-horizontal dd::before, .form-horizontal .form-group::after, .form-horizontal .form-group::before, .modal-footer::after, .modal-footer::before, .nav::after, .nav::before, .navbar-collapse::after, .navbar-collapse::before, .navbar-header::after, .navbar-header::before, .navbar::after, .navbar::before, .pager::after, .pager::before, .panel-body::after, .panel-body::before, .row::after, .row::before {
display: table;
content: " ";
}
This page is in Wordpress. I have tried the same code in a normal HTML page and the .well .col-md-4s align OK.
To get the cols to align I can just remove the row, but I want to use rows.
This has been killing me for nearly one day now. I have done loads of research and tried using clearfix and clear: both all over without joy. Can anyone shed some light on this please?
Edit: I also note that the two rows in the footer section are causing the page footer to have a scroll bar? So, I have had to remove those rows too. It seems that I can't use rows in Wordpress with Bootstrap anymore for some reason.
Hmm, it's really tricky to say without seeing more of the CSS but have you tried reformatting your first div as follows:
<div class="col-xs-12 col-sm-10 col-sm-offset-1 col-md-4 col-md-offset-0 col-lg-4 col-lg-offset-0 text-center">
<div class="home-plans well">
<a class="page-scroll" href="#how-to">
<br/>
<h2>1.</h2>
<p class="lead text-left">Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo.p>
</a>
</div> <!-- /well -->
</div> <!-- /col-md-4 -->
Then styling the inner anchor element as follows:
CSS:
.well > a {
display: block;
}
I'd guess that it's something to do with the anchor element wrapping around the .well div?
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>