I have been searching the internet trying to solve a problem, and have found a lot of solutions which non have worked which leads me to believe that non of the solutions were a fit to my unique situation.
I am building a page with Bootstrap and at the bottom of the HTML there is a call for a jquery script "js/jquery-1.11.3.min.js" and this controls things like the Bootstrap navbar drop-downs. And I have another jquery call in the head, and this controls a photo gallery. If I delete the call for "js/jquery-1.11.3.min.js" the photo gallery works great, but my navbar drop-downs stop working, and if I leave the call for "js/jquery-1.11.3.min.js" then the navbar works but the photo gallery stops working..
I tried just using one call but unfortunately the photo gallery will only work with it's call and the navbar will not work with the photo gallery's jquery version.
Here is the code for the page! Any help would be great!
<%#LANGUAGE="VBSCRIPT" CODEPAGE="65001"%>
<%
Set objWPC = Server.CreateObject("RealtySearch.RSPublic")
Call objWPC.ListingIsValid(Request.QueryString("LI"))
Set objWPC = Nothing
%>
<!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">
<%
Set objMeta = Server.CreateObject("RealtySearch.RSPublic")
' Process Request Arguments: Command, Template, PageSize, LogoId, AgencyId, CityId, ListingId, FeatureId
strUCCmd = UCase(Request.QueryString("CMD"))
If strUCCmd = "RESDETAIL" Or strUCCmd = "COMDETAIL" Then
Call objMeta.ProcessRequest("ListingMeta")
End If
Set objMeta = Nothing
%>
<!-- Bootstrap -->
<link href="css/bootstrap.css" rel="stylesheet">
<link href="css/ILPStyles.css" rel="stylesheet" type="text/css">
<link href="css/RealtySearch.css" rel="stylesheet" type="text/css">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work 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]-->
<style type="text/css">
.container{
width:100%;
margin: auto;
margin-top: none;
position: relative;
}
#media (max-width: 768px) {
.inner-text {
font-size: 10px;
}
.container{
width:100%;
}
}
</style>
<link rel="stylesheet" type="text/css" href="wt-gallery.css"/>
<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="js/jquery.wt-gallery.js"></script>
<script type="text/javascript">
$(document).ready(
function() {
$(".container").wtGallery({
num_display:3,
screen_height:360,
padding:10,
thumb_width:75,
thumb_height:56,
thumb_margin:5,
thumbnails_align:"bottom",
text_align:"top",
caption_align:"bottom",
auto_rotate:false,
delay:5000,
rotate_once:false,
auto_center:true,
cont_imgnav:true,
cont_thumbnav:true,
display_play:false,
display_imgnav:true,
display_imgnum:false,
display_timer:false,
display_thumbnav:true,
display_indexes:true,
display_thumbnum:false,
display_tooltip:false,
display_arrow:true,
mouseover_pause:false,
mouseover_text:false,
mouseover_info:true,
mouseover_caption:true,
mouseover_buttons:true,
transition:"fade",
transition_speed:800,
scroll_speed:600,
vert_size:45,
horz_size:45,
vstripe_delay:100,
hstripe_delay:100,
move_one:false,
shuffle:false,
mousewheel_scroll:true
});
}
);
</script>
</head>
<body>
<div class="container-fluid">
<div class="row" id="topbrownbar"> </div>
<div class="row" id="bigpictcont-pages" style="position: relative; min-height: 23em; max-height: 350px; background-image: url(images/pages-header.jpg); background-size: cover;">
<div style="position: absolute; top: -20px; right: 30px; z-index: 4000; color: whitesmoke;">
<div style="float: left; margin-top: 25px; margin-right: 30px;"><span class="glyphicon glyphicon-home" aria-hidden="true"></span></div>
<div style="float: left; margin-top: 25px; margin-right: 30px;"><span class="glyphicon glyphicon-envelope" aria-hidden="true"></span></div>
<div style="float: right"><h3> 208-217-1776</h3></div>
</div>
<div id="topblackbar"> </div>
<div style="position: absolute; bottom: 10%; z-index: 3000; width: 100%;"><img style="margin: 0 auto;" src="images/ILP-logo.png" class="img-responsive" alt="Placeholder image"></div>
</div>
<div class="row" id="buttoncont">
<div class="col-lg-offset-1 col-lg-12">
<nav class="navbar navbar-default">
<div class="container-fluid">
<!-- 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="#defaultNavbar1" aria-expanded="false"><span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="defaultNavbar1">
<ul class="nav navbar-nav">
<li>Home</li>
<li>Buck's<br><span style="font-size: 0.7em;">Listings</span></li>
<li class="dropdown">Property<br><span style="font-size: 0.7em;">Search</span><span class="caret"></span>
<ul class="dropdown-menu">
<li>Waterfront Lifestyle</li>
<li>Schweitzer Lifestyle</li>
<li>Ranch Lifestyle</li>
<li>Preparedness Lifestyle</li>
<li role="separator" class="divider"></li>
<li>Developments</li>
<li role="separator" class="divider"></li>
<li>Land Listings</li>
<li>Commercial Listings</li>
</ul>
</li>
<li class="dropdown">Visitor's<br><span style="font-size: 0.7em;">Guide</span><span class="caret"></span>
<ul class="dropdown-menu">
<li>Inspectors</li>
<li>Surveyors</li>
<li>Planning & Zoning</li>
<li role="separator" class="divider"></li>
<li>Septic & Sewer</li>
<li role="separator" class="divider"></li>
<li>Home Inspectors</li>
</ul>
</li>
<li>Resources</li>
<li>Bio</li>
<li>Contact</li>
<li>Maps</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li></li>
<li class="dropdown">
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li role="separator" class="divider"></li>
<li>Separated link</li>
</ul>
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>
</div>
</div>
<div class="row" id="mainwoodcont" style="position: relative">
<div class="col-lg-offset-1 col-lg-12 col-md-12 col-md-offset-1">
<h1>Ranch Lifestyle Properties in <strong>North Idaho</strong></h1>
</div>
</div>
<div class="row pagescont">
<div class="col-lg-offset-1 col-lg-12"> </div>
<div class="col-lg-offset-1 col-lg-1"> </div>
<div class="col-lg-10">
<div class="fluid detailpagecont">
<%
Set objApp = Server.CreateObject("RealtySearch.RSPublic")
If len(Request.QueryString("CMD")) = 0 then
Call objApp.ProcessRequest("ResSelect")
Else
Call objApp.ProcessRequest
End If
Set objApp = Nothing
%>
</div>
</div>
<div class="col-lg-1"> </div>
<div class="col-lg-offset-1 col-lg-12"> </div>
</div>
<div class="row" id="footer" style="margin-top: 10px;">
<div class="col-lg-offset-1 col-lg-4 col-md-4 col-sm-6 col-xs-5 col-xs-offset-5 col-md-offset-6 col-sm-offset-5">
<h4>IdahoLifestyleProperty.com</h4>
<p>Buck Graybill REALTOR®<br>
Member of the REALTORS® Land Instatute</p>
<img style="margin: 5px 10px 5px 5px;" align="left" src="images/RLIlogo.jpg" width="60" height="85" alt=""/>
<p> 208-217-1776 <br>
Buck#Sandpoint.com<br>
</p>
<img src="images/footer-hud-logos.png" alt="" width="100" height="32" class="img-responsive"/> </div>
<div class="col-lg-4 col-md-12 col-md-offset-1 col-lg-offset-0" align="center"><img src="images/c21logo-footer.png" width="212" height="132" alt=""/>
<p class="text-center">316 N. 2nd Avenue, Suite A-1 Sandpoint, Idaho 83864 office <br>
(208) 255-2244</p>
</div>
<div class="col-lg-4">
<div class="row">
<div class="col-md-offset-1 col-md-6 col-lg-offset-0 col-lg-7"><div id="footbuttons"><img style="clear: both; margin: 0 auto;" src="images/foot-residential-button.jpg" class="img-responsive" alt="Placeholder image"></div></div>
<div class="col-md-6 col-lg-7"><div id="footbuttons"><img style="clear: both; margin: 0 auto;" src="images/foot-land-button.jpg" class="img-responsive" alt="Placeholder image"></div></div>
<div class="col-md-6 col-md-offset-1 col-lg-offset-0 col-lg-7"><div id="footbuttons"><img style="clear: both; margin: 0 auto;" src="images/foot-waterfront-button.jpg" class="img-responsive" alt="Placeholder image"></div></div>
<div class="col-md-6 col-lg-7"><div id="footbuttons"><img style="clear: both; margin: 0 auto;" src="images/foot-commercial-button.jpg" class="img-responsive" alt="Placeholder image"></div></div>
</div>
</div>
</div>
<div class="row" id="copyright">
<p class="text-center">All Rights Reserved © <script type="text/javascript">document.write((new Date()).getFullYear());</script> IdahoLifestyleProperty.com</p>
</div>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="js/jquery-1.11.3.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.js"></script>
</body>
</html>
Related
I am newbie in CSS and Bootstrap and was trying to create a image gallery using Bootstrap Grid In which I am using One row class and under which i am using col-lg-4 class for 3 columns in the container and if i am using 2 separate rows then the grid is working as i want.
but if i am using only one row class then the first 3 images are arranged properly as i want and if i am adding the fourth image in the same row then the image should automatically move into the second row and it is moving in second row too but in the second column not the first. Due to this reason the images are not correctly positioned. Any one can explain? and tell me what i am doing wrong?
below is the html code.
body {
font-family: "Bebas Neue";
}
.navbar-brand {
letter-spacing: 2px;
}
.nav {
letter-spacing: 2px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Linking Bootstrap CSS -->
<link
rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"
crossorigin="anonymous"
/>
<!-- LINKING JQuery -->
<script src="https://code.jquery.com/jquery-3.4.1.js"
integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU="
crossorigin="anonymous"></script>
<!-- Linking Bootstrap JAVASCRIPT -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"
integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"
crossorigin="anonymous"></script>
<link href="https://fonts.googleapis.com/css?family=Bebas+Neue&display=swap" rel="stylesheet"/>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Image Gallery</title>
</head>
<body>
<nav class="navbar navbar-inverse navbar-static-top">
<div class="container">
<div class="navbar-header">
<button
type="button"
class="navbar-toggle collapsed"
data-toggle="collapse"
data-target="#bs-nav-demo"
aria-expanded="false"
>
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<strong>J.Photography</strong>
</div>
<div class="collapse navbar-collapse" id="bs-nav-demo">
<ul class="nav navbar-nav">
<li>About</li>
<li>Contact</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>Sign Up</li>
<li>Login</li>
</ul>
</div>
</div>
</nav>
<div class="container">
<div class="jumbotron">
<h1>The Image gallery</h1>
<p>A bunch of beautiful Pictures from Around the Globe!</p>
</div>
<div class="row">
<div class="col-lg-4">
<div class="thumbnail">
<img
src="https://d37b3blifa5mva.cloudfront.net/000_clients/1431025/page/1431025kkXelCOx.jpg"
alt=""
/>
</div>
</div>
<div class="col-lg-4">
<div class="thumbnail">
<img
src="https://d37b3blifa5mva.cloudfront.net/000_clients/1431025/page/1431025Oq0YQLZZ.jpg"
alt=""
/>
</div>
</div>
<div class="col-lg-4">
<div class="thumbnail">
<img
src="https://d37b3blifa5mva.cloudfront.net/000_clients/1431025/page/1431025u5zYFC6n.jpg"
alt=""
/>
</div>
</div>
<div class="col-lg-4">
<div class="thumbnail">
<img
src="https://d37b3blifa5mva.cloudfront.net/000_clients/1431025/page/1431025kkXelCOx.jpg"
alt=""
/>
</div>
</div>
<div class="col-lg-4">
<div class="thumbnail">
<img
src="https://d37b3blifa5mva.cloudfront.net/000_clients/1431025/page/1431025Oq0YQLZZ.jpg"
alt=""
/>
</div>
</div>
<div class="col-lg-4">
<div class="thumbnail">
<img
src="https://d37b3blifa5mva.cloudfront.net/000_clients/1431025/page/1431025u5zYFC6n.jpg"
alt=""
/>
</div>
</div>
</div>
</div>
</body>
</html>
I think the images you added have different height, try give your image a fixed height to get aligned equally.
I have couple of questions about site, which I'm making with help of Bootstrap 4. I would like to make simple page just using on screen space (no scroll except mobile version) with logo in the upper middle of the page, full width navbar and then 2 rows of 3 full width images, which would be cropped as resolution allows. Here is the sketch. I made some HTML/CSS proposals, but they didn't work properly. Do you have some ideas how to make it? :/
Thanks a lot!
<!DOCTYPE html>
<html lang ="cs">
<head>
<meta charset="utf-8">
<!-- Mobile adaptation -->
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- Page information -->
<meta name="description" content="GeoExpo Eshop. Od replik přes zkameněliny do trilobitů.">
<meta name="keywords" content="eshop zoo, eshop Zoo Praha, GeoExpo, zkameněliny, suvenýry, repliky, šutry, kameny">
<meta name="author" content="Ondřej Sloup">
<!-- Mine Stylesheet -->
<link rel="stylesheet" href="stylesheet/stylesheet.css">
<!-- Imported Stylesheets -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" integrity="sha384-Zug+QiDoJOrZ5t4lssLdxGhVrurbmBWopoEl+M6BdEfwnCJZtKxi1KgxUyJq13dy" crossorigin="anonymous">
<script defer src="https://use.fontawesome.com/releases/v5.0.4/js/all.js"></script>
<!-- Scripts (jQuery) -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/js/bootstrap.min.js" integrity="sha384-a5N7Y/aK3qNeh15eJKGWxsqtnX/wWdSZSKp+81YjTmS15nvnvxKHuzaWwXHDli+4" crossorigin="anonymous"></script>
<!-- Tittle -->
<title>Geo Expo</title>
</head>
<body>
<header>
<img class="logo d-block img-fluid mx-auto" src="./logo/PNG.png" alt="Logo" />
</header>
<nav class="navbar navbar-expand-lg">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#Toogle" aria-controls="Toogle" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"><i class="fa fa-bars mx-auto" aria-hidden="true"></i></span>
</button>
<div class="collapse navbar-collapse" id="Toogle">
<ul class="navbar-nav mt-2 mt-lg-0 mx-auto">
<li class="nav-item">
<a class="nav-link" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Repliky</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Unikáty</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Instalace</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Kontakt</a>
</li>
</ul>
</div>
</nav>
<main class="container-fluid p-0">
<div class="row align-items-center no-gutters">
<div class="col-4">
<img class="image" width="auto" src="./images/bridge.jpg" alt="Bridge">
</div>
<div class="col-4">
<img class="image" width="auto" src="./images/park.jpg" alt="Park">
</div>
<div class="col-4">
<img class="image" width="auto" src="./images/tunnel.jpg" alt="Tunnel">
</div>
</div>
<div class="row align-items-center no-gutters">
<div class="col-4">
<img class="image" width="auto" src="./images/bridge.jpg" alt="Bridge">
</div>
<div class="col-4">
<img class="image" width="auto" src="./images/park.jpg" alt="Park">
</div>
<div class="col-4">
<img class="image" width="auto" src="./images/tunnel.jpg" alt="Tunnel">
</div>
</div>
</main>
And CSS
/*INSERT*/
#import url('https://fonts.googleapis.com/css?family=Cinzel+Decorative');
#import url('https://fonts.googleapis.com/css?family=Cinzel');
/*ALL*/
html, body, main {
height: 100% !important;
max-width: 100% !important;
}
body {
background: grey !important;
}
/*Header*/
header {
height: 15%;
}
.logo {
display: inline-block;
padding: 1rem 0 .5rem 0 !important;
}
/*Images*/
.row {
height: 30% !important;
}
/* NavBar */
nav {
font-size: 13pt;
font-family: 'Cinzel', sans-serif;
padding: .3rem 0 .3rem 0 !important;
text-transform: capitalize;
}
.nav-link {
color: #fff !important;
margin: 0 25% 0 25%;
}
.nav-link:hover {
font-style: underline;
}
For future, you can use the http://shoelace.io/
That being said, your html code should look like this:
<div class="container">
<div class="row Logo">
<div class="col-sm-3">
<!-- This is where you should put your logo image -->
</div>
</div>
<div class="row Menu">
<div class="col-sm-12">
<!-- this is where your menu goes in -->
</div>
</div>
<div class="row Images">
<div class="col-sm-4">
<!-- your first image -->
</div>
<div class="col-sm-4">
<!-- your second image -->
</div>
<div class="col-sm-4">
<!-- your third image -->
</div>
<div class="col-sm-4">
<!-- your forth image -->
</div>
<div class="col-sm-4">
<!-- your fifth image -->
</div>
<div class="col-sm-4">
<!-- your last image -->
</div>
</div>
</div>
Also, have a look at the bootstrap layout page https://getbootstrap.com/docs/4.0/layout/grid/
I attach my code and output view. Can anyone help me out how to set alignment for sidebar. Thanks in advance.
sidebar.blade.php
<!-- Sidebar Widgets Column -->
<div class="col-md-4 container">
<!-- Search Widget -->
<div class="card my-4">
<h5 class="card-header">Search</h5>
<div class="card-body">
<div class="input-group">
<input type="text" class="form-control" placeholder="Search for...">
<span class="input-group-btn">
<button class="btn btn-secondary" type="button">Go!</button>
</span>
</div>
</div>
</div>
<!-- Categories Widget -->
<div class="card my-4">
<h5 class="card-header">Categories</h5>
<div class="card-body">
<div class="row">
<div class="col-lg-6">
<ul class="list-unstyled mb-0">
<li>
Laravel
</li>
<li>
PHP
</li>
<li>
HTML
</li>
</ul>
</div>
<div class="col-lg-6">
<ul class="list-unstyled mb-0">
<li>
JavaScript
</li>
<li>
CSS
</li>
<li>
Web Design
</li>
</ul>
</div>
</div>
</div>
</div>
<!-- Side Widget -->
<div class="card my-4">
<h5 class="card-header">Stats</h5>
<div class="card-body">
You can put anything
</div>
</div>
</div>
Master.blade.php
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>myblog</title>
<!-- Custom styles for this template -->
<link href="/public/css/blog-post.css" rel="stylesheet">
</head>
<body style="background-color: #e9ecef;">
#include('partials.nav')
#include('partials.jumbotron')
<!-- Page Content -->
<div class="container">
<div class="row">
#yield('content')
</div>
<!-- /.row -->
#include('partials.sidebar')
</div>
<!-- /.container -->
#include('partials.footer')
</body>
<style type="text/css">
.pagination {
margin-bottom: 20px;
padding-right: 500px;
width: 300px;
height: 23px;
font-size: 25px;
color: red;
padding-left: 500px;
}
</style>
</html>
Output:
Your sidebar is a sibling to the <div class="row">. It needs to be a child, instead.
Also, don't use the container class on your col-md-4
<div class="row">
#include('partials.sidebar')
#yield('content')
</div>
This will, of course, assume your content always has a <div class="col-md-8"> on it to compliment the <div class="col-md-4>" on your sidebar.
Below there are two webpages. Everything is the same except the length of paragraphs (the p tag). But the two webpages look slightly different (in terms of aligment).
In other words, the page with fewer paragraphs is aligned left compared with the page with more paragraphs.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.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>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<style type="text/css">
body{
margin:0 auto;
font-family:Helvetica Neue, Helvetice-Neue, Helvetica;
font-weight:200;
font-size:16px;
color:#2f2f2f;
}
.breakv{
float:left;
width:2px;
height:200px;
margin-top:78px;
margin-right:3px;
padding-top:18px;
padding-left:2px;
background:url(images/breakv.png) repeat-y;
}
strong{
color:#0074B4;
}
.breakh{
width:370px;
margin:0 auto;
padding-top:8px;
height:4px;
background:url(images/breakh.png) bottom repeat-x;
}
.navbar{
background-color:#57b7df;
font-family:Helvetica Neue, Helvetice-Neue;
font-weight:100;
line-height:21px;
border-color:transparent;
}
.carousel-inner > .item > img,
.carousel-inner > .item > a > img {
width: 50%;
margin: auto;
}
</style>
</head>
<body class="container">
<div class="container-fluid">
<img src="./images/header.png" class="img-responsive">
</div>
<div style="background-color:#57b7df" class="container-fluid">
<nav class="navbar navbar-default">
<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>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li>Home</li>
<li>Photos</li>
<li class="active">Prices</li>
<li>Instructions</li>
<li>Testimonials</li>
<li>Contact</li>
</ul>
</div>
</div>
</nav>
<div class="container-fluid hidden-sm hidden-xs">
<img src="images/prices1.png" class="img-responsive col-md-4 col-lg-4 col-xl-4">
<img src="images/prices3.png" class="img-responsive col-md-4 col-lg-4 col-xl-4">
<img src="images/test3.png" class="img-responsive col-md-4 col-lg-4 col-xl-4">
</div>
<div id="myCarousel" class="carousel slide hidden-md hidden-lg hidden-xl" data-ride="carousel">
<!- Indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="images/prices1.png" >
</div>
<div class="item">
<img src="images/prices2.png">
</div>
<div class="item">
<img src="images/test3.png">
</div>
</div>
<!-- Left and right controls -->
<a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
<div class="col-md-5 col-xs-12 col-sm-12">
<h3>Private or Party</h3>
<p>Do you need a quick tan just for yourself or are you thinking of making it a fun event for you and your friends? <strong>A Kiss of Bronze Airbrush Tanning</strong> offers both personal tanning sessions and tanning parties!</p>
<p>Never heard of a tanning party? You've heard of lingerie parties, cosmetics parties, jewelry parties, even tupperware parties!!! Well now it's time to introduce <strong>TANNING PARTIES</strong>!</p>
<p>You and a minimum of five (5), max of ten (10), friends get together, and you all get tanned in one session. The hostess of six (6) or more people gets to <strong>tan for free</strong>!</p>
</div>
</body>
</html>
With more text:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.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>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<style type="text/css">
body{
margin:0 auto;
font-family:Helvetica Neue, Helvetice-Neue, Helvetica;
font-weight:200;
font-size:16px;
color:#2f2f2f;
}
.breakv{
float:left;
width:2px;
height:200px;
margin-top:78px;
margin-right:3px;
padding-top:18px;
padding-left:2px;
background:url(images/breakv.png) repeat-y;
}
strong{
color:#0074B4;
}
.breakh{
width:370px;
margin:0 auto;
padding-top:8px;
height:4px;
background:url(images/breakh.png) bottom repeat-x;
}
.navbar{
background-color:#57b7df;
font-family:Helvetica Neue, Helvetice-Neue;
font-weight:100;
line-height:21px;
border-color:transparent;
}
.carousel-inner > .item > img,
.carousel-inner > .item > a > img {
width: 50%;
margin: auto;
}
</style>
</head>
<body class="container">
<div class="container-fluid">
<img src="./images/header.png" class="img-responsive">
</div>
<div style="background-color:#57b7df" class="container-fluid">
<nav class="navbar navbar-default">
<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>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li>Home</li>
<li>Photos</li>
<li class="active">Prices</li>
<li>Instructions</li>
<li>Testimonials</li>
<li>Contact</li>
</ul>
</div>
</div>
</nav>
<div class="container-fluid hidden-sm hidden-xs">
<img src="images/prices1.png" class="img-responsive col-md-4 col-lg-4 col-xl-4">
<img src="images/prices3.png" class="img-responsive col-md-4 col-lg-4 col-xl-4">
<img src="images/test3.png" class="img-responsive col-md-4 col-lg-4 col-xl-4">
</div>
<div id="myCarousel" class="carousel slide hidden-md hidden-lg hidden-xl" data-ride="carousel">
<!- Indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="images/prices1.png" >
</div>
<div class="item">
<img src="images/prices2.png">
</div>
<div class="item">
<img src="images/test3.png">
</div>
</div>
<!-- Left and right controls -->
<a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
<div class="col-md-5 col-xs-12 col-sm-12">
<h3>Private or Party</h3>
<p>Do you need a quick tan just for yourself or are you thinking of making it a fun event for you and your friends? <strong>A Kiss of Bronze Airbrush Tanning</strong> offers both personal tanning sessions and tanning parties!</p>
<p>Never heard of a tanning party? You've heard of lingerie parties, cosmetics parties, jewelry parties, even tupperware parties!!! Well now it's time to introduce <strong>TANNING PARTIES</strong>!</p>
<p>You and a minimum of five (5), max of ten (10), friends get together, and you all get tanned in one session. The hostess of six (6) or more people gets to <strong>tan for free</strong>!</p>
<p><strong>Tanning parties</strong> are great for Girls Night In, Up-coming Special Occasions, Swimsuit Competitions, Pre-Holiday Tan Parties or if you just want to have some girlfriends over and treat yourselves!</p>
<p>Wear dark, loose fitting clothes (ie. tracksuit, sweats). You may want to bring a bathrobe or swim suit cover-up to wear after your <strong>airbrush tan</strong> while you're drying.</p>
<p>To all those ladies who are uncomfortable about your figure, don't worry! Discuss your requirements beforehand whether you want to wear a bikini, swimsuit or shorts. We deal with all shapes, sizes and ages so please do not feel nervous or embarrassed.</p>
<div style="float:right; padding-left:8px;"><img src="images/stickerbride.png" class="img-responsive"/></div>
<p>All brides want to look radiant on the biggest and happiest day of their lives, and nothing will give you that beautiful bride glow like a sun kissed tan. Have a trial tan a few weeks before the big day so you can judge for yourself which day after your spray tan application you feel that your tan is at its best. This gives you enough planning time to book again before the big day!</p>
<p>**Call for special pricing.</p>
</div>
</body>
</html>
How am I supposed to do to make the pages look exactly the same in terms of alignment of page components?
I tried the same pages on a different browser, MSEdge. Curiously, every page looks the same in terms of alignment.
If you are using Bootstrap, there are frequently :first-child and :last-child pseudoelements applied. That would be the first place to look.
Could you please throw your code sample into a jsfiddle to demonstrate the issue you're having?
The only difference seems to be the scrollbar. So, the only thing you would need to do is to put overflow-y: scroll; in your body CSS selector.
---------- Buzinas
is the correct answer. Buzinas, you save my day!!!Many thx!
I have a floating red bubble, much like used in googles material design.
I am using Materializecss for web development. Info can be found here on the floating red bubble I am trying to implement:
http://materializecss.com/buttons.html
I have tried all their built in helpers for css to move it center at the bottom but no luck. Here is my html:
<html lang="en"><head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0">
<title>Starter Template - Materialize</title>
<!-- CSS -->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link href="css/materialize.css" type="text/css" rel="stylesheet" media="screen,projection">
<link href="css/style.css" type="text/css" rel="stylesheet" media="screen,projection">
</head>
<body style="position: relative;">
<div class="navbar-fixed ">
<nav class="orange " role="navigation">
<div id="replaceBar" class="nav-wrapper container">
<a id="logo-container" href="#" class="brand-logo">Beer Portfolio</a>
<ul class="right hide-on-med-and-down left">
<li>Statistics</li>
</ul>
<ul style="left: -250px;" id="nav-mobile" class="side-nav left">
<li>Statistics</li>
</ul>
<img style="vertical-align: middle;" src="img/menuIcon.png" height="30" width="30">
<ul id="search" class="right valign-wrapper">
<li class="valign">
<img style="vertical-align: middle;" src="img/searchIcon.png" height="30" width="30">
</li>
</ul>
</div>
</nav>
</div>
<div class="collection"><h5 class="orange-text text-darken-2"> Bitter</h5> <div class="right">65% </div> <div class="progress col "> <div class="determinate orange" style="width:65%"> </div> </div><h5 class="orange-text text-darken-2"> Malty</h5> <div class="right">15% </div> <div class="progress col "> <div class="determinate orange" style="width:15%"> </div> </div><h5 class="orange-text text-darken-2"> Smooth</h5> <div class="right">15% </div> <div class="progress col "> <div class="determinate orange" style="width:15%"> </div> </div><h5 class="orange-text text-darken-2"> Dry</h5> <div class="right">5% </div> <div class="progress col "> <div class="determinate orange" style="width:5%"> </div> </div></div><div class="center-align" style="position: fixed; bottom: 0;"> <a id="redCircle" class="btn-floating btn-large waves-effect waves-light red"><i class="material-icons">add</i></a></div>
<!-- Modal Structure For loading beer-->
<div style="z-index: 1003; display: none; opacity: 0; transform: scaleX(0.7); top: 0px;" id="modal1" class="modal">
<div class="modal-content center">
<div>
<span class="card-title">Loading Taste Tags</span>
</div>
<div id="load" class="preloader-wrapper big active ">
<div class="spinner-layer spinner-yellow-only">
<div class="circle-clipper left">
<div class="circle"></div>
</div>
<div class="gap-patch">
<div class="circle"></div>
</div>
<div class="circle-clipper right">
<div class="circle"></div>
</div>
</div>
</div>
</div>
</div>
<div style="left: 0px;" class="drag-target"></div><div class="hiddendiv common"></div></body></html>
My css I am using can be found here:
http://pastebin.com/bHW6Fzp3
Assuming this is the fix you are looking for, your container needs to have a width greater than the width of the button, and from there you can add margin: 0 auto;
As noted above, you should create a fiddle or similar first to demonstrate your problem.
.center-align {
width: 100%;
}
.btn-floating.btn-large {
margin: 0 auto;
}
Updated your fiddle: https://jsfiddle.net/2ftu5rqg/3/
I didn't notice the centering class that was already in there - all you really need is a width on the parent container, which in this example is .center-align.