I'm working on this website.
www.firmtechnologysolutions.us
I'm having a bizarre problem. I'm doing some fixes for css and navs right now. Whenever I click the navs like #services or #about it causes my divs to shift. I suspect its because I have them set up relative to each other. Is there some way to correct this problem?
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Firm Technology Solutions</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="css.css">
<link href="styles.css" rel="stylesheet" type="text/css">
</head>
<body>
<nav class="home main" style="display: block;">
<div class="content">
<ul class="nav-links">
<li>Home</li>
<li>Services</li>
<li>About Us</li>
<li>Contact</li>
</ul>
</div>
</nav>
<div id ="mainContainer" class ="home-slide slide">
<div id = "Logo">
<img src="images/ftslogo.png">
<h1>Managed Information Services for Small Business</h1>
<h2>Simple & Affordable IT Solutions to get you up and running</h2>
<div class ="contactButton">
<img src="images/contactButton.png">
</div>
</div>
<div id ="mainContainer2"></div>
<div id = "mainContainer3"></div>
<div id ="about" class ="about-slide slide">
<h1>At Firm Technology Solutions, we are all about customer service. <br> We know that our customer's time is valuable.<br> Waiting around all day to get a fix on a minor problem on your email or server means you lose money. <br>Our service creed is: efficency.<br> We get on your problem as soon as you report it and try to resolve it ASAP.</h1>
<p>Simple Solutions</p>
<h2>We determine with our clients what kind of technology would fit <br>
their business best by creating an action plan.
</h2>
<p>Affordable Solutions</p>
<h2>After we create our action plan we determine where we can cut costs for <br> deployment, overhead, and matainence costs. </h2>
<p>The Firm Gauruntee</p>
<h2>We gaurntee our work 100%. <br> As a locally based New Jersey business we understand that our clients don't want to talk to someone 2000 miles away.<br> On top of our remote administration service. <br>We offer full in person consultations to handle everything from A to Zip.</h2>
</div>
<div ="services" class ="services-slide slide" >
<h1>Services</h1>
</div>
<div id = "serviceIcons">
<div class = "icon1">
<img src="images/icon1.png">
<p>Managed Information Services</p>
</div>
<div class ="icon2">
<img src="images/icon2.png">
<p>Networking</p>
</div>
<div class ="icon3">
<img src="images/icon3.png">
<p>Remote Services</p>
</div>
<div class="icon4">
<img src="images/icon3.png">
<p>Web Design</p>
</div>
</div>
<div id = "contacts" class ="contact-slide slide">
<h3>Contact us for more information!</h3>
<form id="form1" name="form1" method="post" action="">
<p>
<label for="Name">Name</label>
<input name="Name" type="text" id="Name" size="40" />
</p>
<p>
<label for="Email">Email</label>
<input name="Email" type="text" id="Email" size="40" />
</p>
<p>
<label for="Discription">Tell us about the job<br />
</label>
<textarea name="Discription" id="Discription" cols="50" rows="10"></textarea>
</p>
</form>
</div>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
<script src="http://www.elli.nu/potatis/js/jquery.backstretch.min.js"></script>
<script>
$.backstretch("http://www.wallpapersmood.com/uploads/2010-09/green-plants-nature-wallpaper/1285552282-AE04VJ2.jpg");
</script>
</body>
</html>
thanks!
Related
I'm creating a simple web application with Ruby using Sinatra, and when modifying the views, the CSS is applied to all .erb files except one. I'm not quite sure what the issue is. I've tried:
Clearing my browser cache
Running the application on a new browser (Chrome, Safari, Firefox, even Edge)
Running the application on a different device
Linking the stylesheet directly from the erb file
This is my layout.erb file
<br/>
<h2>Upload a Video</h2>
<br/>
<br/>
<form action="/create_video" method="POST">
<div class="col-6">
<label for="videoTitle">Video Title</label>
<input type="text" class="form-control" aria-describedby="emailHelp" placeholder="Enter video title" name="title">
</div>
<br/>
<div class="col-6">
<label for="videoDescription">Video Description</label>
<input type="text" class="form-control" placeholder="Enter video description" name="description">
</div>
<br/>
<br/>
<div class="col-6">
<label for="videoURL">Video Link</label>
<input type="text" class="form-control" placeholder="Enter link to video" name="l_url">
</div>
<br/>
<div class="col-6">
<label for="listingUrl">Company</label>
<input type="text" class="form-control" placeholder="Enter company name" name="company">
</div>
<br/>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
<br/>
<br/>
</div>
My layout.erb file
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css?family=Roboto:300|Niramit|Nunito" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="stylesheet" type="text/css" href="animate.css">
</head>
<body>
<%= erb :navigation %>
<main role="main">
<%= yield %>
</main>
<footer class="end">
<div class="footer-grid">
<div class="footer-one">
<p> logo<p>
</div>
<div class="footer-two">
<p>© Copyright Ignite 2018. All rights reserved.</p>
<p>Terms of use • Press Inquiries • General Inquiries • Investors</p>
</div>
<div class="footer-three">
<img src="https://image.flaticon.com/icons/svg/185/185981.svg" width=40 height=40>
<img src="https://image.flaticon.com/icons/svg/185/185961.svg" width=40 height=40>
<img src="https://image.flaticon.com/icons/svg/185/185985.svg" width=40 height=40>
</div>
</footer>
<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/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</body>
</html>
Finally, this is a small snippet where the style sheet IS working:
<br/>
<br/>
<h2>Videos</h2>
<br/>
<br/>
<% #videos.each do |v| %>
<img src="<%= v.logo %>" width="110" height="110">
<h3><%= v.title %></h3>
<p><%= v.l_url %></p>
<p><%= v.description %> </p>
<br/>
<% end %>
<br/>
<br/>
<br/>
<br/>
</div>
Any idea what might be wrong? I appreciate any tips.
I think this might resolve your issue, I think the link to your stylesheets might be broken.
If the page is not in the top-path, if it looks something like this:
http://localhost/namespace/ThisIsThePage
In your layout.erb-file, you are refering to the stylesheets using:
href="style.css"
In your CSS-imports, I'd recommend to refer to the stylesheets by using e.g:
href="/style.css"
Note the slash before the filename. The slash tells the browser that the resource will loaded from the root-path of your webserver. Without the slash, the browser will try to grab the style.css from the path below:
http://localhost/namespace/style.css
I'm using Bootstrap 3.1.1 and my login page is not responsive under 768px.
The page is breaking as shown in the pictures:
What am I doing wrong?
<!DOCTYPE html>
<html>
<head>
<title>MY Site</title>
<link href="~/favicon.ico?v=2" rel="shortcut icon" type="image/x-icon" />
<meta content='width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no' name='viewport'>
<meta content='text/html;charset=utf-8' http-equiv='content-type'>
<meta content='Saúde Inteligente Móvel' name='description'>
<link href='~/favicon.ico?v=2' rel='shortcut icon' type='image/x-icon'>
<link href='~/assets/images/meta_icons/apple-touch-icon.png' rel='apple-touch-icon-precomposed'>
<link href='~/assets/images/meta_icons/apple-touch-icon-57x57.png' rel='apple-touch-icon-precomposed' sizes='57x57'>
<link href='~/assets/images/meta_icons/apple-touch-icon-72x72.png' rel='apple-touch-icon-precomposed' sizes='72x72'>
<link href='~/assets/images/meta_icons/apple-touch-icon-114x114.png' rel='apple-touch-icon-precomposed' sizes='114x114'>
<link href='~/assets/images/meta_icons/apple-touch-icon-144x144.png' rel='apple-touch-icon-precomposed' sizes='144x144'>
<!-- / START - page related stylesheets [optional] -->
<!-- / END - page related stylesheets [optional] -->
<!-- / bootstrap [required] -->
<link href="~/Content/bootstrap.css" media="all" rel="stylesheet" type="text/css" />
<!-- / theme file [required] -->
<link href="~/Content/light-theme.css" media="all" id="color-settings-body-color" rel="stylesheet" type="text/css" />
<!-- / coloring file [optional] (if you are going to use custom contrast color) -->
<link href="~/Content/theme-colors.css" media="all" rel="stylesheet" type="text/css" />
<!--[if lt IE 9]>
<script src="assets/javascripts/ie/html5shiv.js" type="text/javascript"></script>
<script src="assets/javascripts/ie/respond.min.js" type="text/javascript"></script>
<![endif]-->
<link href="~/Content/bootstrap.css" rel="stylesheet" />
<link href="~/Content/font-awesome.min.css" rel="stylesheet" />
#Styles.Render("~/Content/themes/base/css")
#Styles.Render("~/Content/site-css")
#Scripts.Render("~/bundles/libs/modernizr")
</head>
<body class='contrast-blue login contrast-background'>
<div class='middle-container' style="display: none" data-bind="visible: true">
<div class='middle-row'>
<div class='middle-wrapper'>
<div class='login-container-header'>
<div class='container'>
<div class='row'>
<div class='col-sm-12'>
<div class='text-center'>
<h1 class="text-primary"><img src="~/Images/logo-sim.png" height="160" width="225" /></h1>
</div>
</div>
</div>
</div>
</div>
<div class='login-container'>
<div class='container'>
<div class='row' data-bind="validationOptions: {
registerExtenders: true,
messagesOnModified: true,
insertMessages: false,
parseInputAttributes: true
}">
<div class='col-sm-4 col-sm-offset-4'>
<h1 class="text-center">
</h1>
<div class="row">
<div class='col-sm-12'>
<div class="validation-summary" data-bind="visible: model().isAnyMessageShown()">
<ul>
<li data-bind="validationMessage: model().Email"></li>
<li data-bind="validationMessage: model().Senha"></li>
</ul>
</div>
</div>
</div>
<form>
<div class='form-group'>
<div class='controls with-icon-over-input'>
<input value="" placeholder="E-mail" class="form-control" data-bind="value: model().Email" name="email" type="email" />
<i class='icon-user text-muted'></i>
</div>
</div>
<div class='form-group'>
<div class='controls with-icon-over-input'>
<input value="" placeholder="Senha" class="form-control" data-bind="value: model().Senha" name="password" type="password" />
<i class='icon-lock text-muted'></i>
</div>
</div>
<div class='checkbox'>
<label for='remember_me'>
<input id='remember_me' name='remember_me' type='checkbox' data-bind="checked: model().CookiePersistente">
Lembrar de mim
</label>
</div>
<button class='btn btn-block' data-bind="click: submit">Entrar</button>
</form>
<div class='text-center'>
<hr class='hr-normal'>
#Html.ActionLink("Esqueceu sua senha?", "EsqueciSenha", "Login")
</div>
</div>
</div>
</div>
</div>
<div class='login-container-footer'>
<div class='container'>
<div class='row'>
<div class='col-sm-12'>
<div class='text-center'>
<img src="~/Images/logo-rodape.png" />
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
#Scripts.Render("~/bundles/libs/jquery")
#Scripts.Render("~/bundles/libs/base")
<script type="text/javascript">
RouteUtility.rootPath = '#Url.Action("Index", "Home")';
</script>
<script type="text/javascript" src="#Url.Content("~/Scripts/pages/login.js")"></script>
</body>
</html>
EDIT:
After adding col-xs-* as suggested, a weird behaviour is happening.
When I add col-xs-*, the fields will fit only with 768px and up. If it's under 768px they will grow!!
It's totally the opposite!
How to fix this?
Under 768px: http://postimg.org/image/d0zcna7bf/
768px and up: http://postimg.org/image/56isu0qtt/
thiago Hi there.
Have a look around line number 60 in you code for this...
<div class='col-sm-4 col-sm-offset-4'>
When your screen size hits this breakpoint it will expand to 100% width because you are not controlling/using the col-xs-XX class here.
If you add this to your code like this...
<div class='col-sm-4 col-sm-offset-4 col-xs-8 col-xs-offset-2'>
for the line of code around line 60 and resize the window, you will see you have control.
This line of code you are using it is used to wrap the Form block, to set the width of this Form.
You just need to take control of this at all breakpoints.
Hope this helps.
Added to this
This is what I get when resized.
Using... <div class='col-sm-4 col-sm-offset-4 col-xs-8 col-xs-offset-2'>
You can control the width for xs device adding eg col-xs-6 :
<div class='form-group'>
<div class='controls with-icon-over-input col-xs-6'>
<input value="" placeholder="E-mail" class="form-control" data-bind="value: model().Email" name="email" type="email" />
<i class='icon-user text-muted'></i>
</div>
</div>
I am building a SPA with AngularJS, everything is working as I hoped except that I am running into issues regarding its appearance on mobile (I am using twitter bootstrap 3). The two issues in particular are:
Vertical scrolling on mobile is very jerky and sometimes gets stuck
On some pages the users mobile screen automatically zooms in on an input field, which is fine. However, I want to undo this zoom when they change partial; because otherwise when the user gets to the next partial everything is too zoomed.
I have had a look around and can't see an answer to these. I haven't put code in here, as it pretty much effects the whole site :) However, for a demonstration of the issue you can see on the site itself: www.objectivemoney.co.za.
Any help would be much appreciated!
UPDATE TO INCLUDE CODE
Index.html
<!DOCTYPE html>
<html lang="en-us" ng-app="omApp">
<head>
<title>OM</title>
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="Find your perfect planner | Quickly search for and compare verified, customer reviewed planners in your area with OM">
<meta name="keywords" content="search,financial,planner,compare,verified,planners">
<!-- load bootstrap and fontawesome via CDN -->
<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="Font-Awesome-master/css/font-awesome.min.css" />
<link href='//fonts.googleapis.com/css?family=Lato' rel='stylesheet' type='text/css'>
<link href='//fonts.googleapis.com/css?family=Merriweather:700' rel='stylesheet' type='text/css'>
<link href='toaster/toaster.css' rel='stylesheet' type='text/css'>
<!-- load CSS files locally -->
<link rel="stylesheet" href="style-min.css" />
<link rel="stylesheet" href="angular-slider-master/slider.css" />
<link rel="stylesheet" href="animate.min.css" />
<!-- sharethis -->
<script type="text/javascript">var switchTo5x=true;</script>
<script type="text/javascript" src="https://ws.sharethis.com/button/buttons.js"></script>
<script type="text/javascript">stLight.options({publisher: "XXXXXXXXXXXXX", doNotHash: false, doNotCopy: false, hashAddressBar: false});</script>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-XXXXXXX-X', { 'cookieDomain': 'none' });
</script>
</head>
<body>
<!-- create a navbar that is collapsable in a mobile view -->
<nav id="navbar-example" class="navbar navbar-inverse navbar-static" role="navigation" ng-controller="searchController">
<div class="container-fluid">
<div class="navbar-header">
<button class="navbar-toggle" type="button" ng-click="isCollapsed = !isCollapsed">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#/"> <img id="navbarlogo" src="./img/logo/logo-white.png"></a>
</div>
<div collapse="isCollapsed" class="navbar-collapse bs-js-navbar-collapse">
<ul class="nav navbar-nav">
<ul class="nav navbar-nav navbar-right">
<li>Home</li>
<li>Search</li>
<li>Resources</li>
<li>Planner Registration</li>
</ul>
</ul>
<!-- create a logout sign that shows when a user is logged in, position this on the right of the navbar -->
<ul ng-show="authenticated === true" class="nav navbar-nav pull-right logoutlink ng-cloak">
<ul class="nav navbar-nav navbar-right">
<li><a ng-controller="searchController" ng-click="logout(); changeAuth()">Logout</a></li>
</ul>
</ul>
</div><!-- /.nav-collapse -->
</div><!-- /.container-fluid -->
</nav>
<!-- Create container for app views -->
<div class="wrapper">
<!-- set empty div for views, autoscroll means that page scrolls to top when user clicks through -->
<div ng-view autoscroll="true"></div>
<div class="push"></div>
</div>
<div class="footer">
<footer>
<div>
<div id="footershare" class="col-sm-6">
<span class='st_twitter_large' displayText='Tweet'></span>
<span class='st_facebook_large' displayText='Facebook'></span>
<span class='st_linkedin_large' displayText='LinkedIn'></span>
<span class='st_googleplus_large' displayText='Google +'></span>
<span class='st_email_large' displayText='Email'></span>
</div>
<div id="footercontact" class="col-sm-6">
<p>Contact: xxx#xxx.co.za | Copyright ©</p>
</div>
</div>
</footer>
</div>
<div class="ng-cloak" ng-controller="searchController">
<div ng-show="showBar" class="signupBox">
<p id ="signupBox-text"><span ng-click="setCloseBar();setShowBar()" class="signupBox-close pull-right"><b>×</b></span><a id ="signupBox-text" href="#/mailinglist" ng-click="setCloseBar();setShowBar()">Join Our Mailing List To Stay Up To Date With The Latest Planning Advise And News.</a></p>
</div>
</div>
<!-- load angular and additional precompiled services -->
<script src="//code.angularjs.org/1.4.0-rc.2/angular.min.js"></script>
<script src="//code.angularjs.org/1.4.0-rc.2/angular-route.min.js"></script>
<script src="//code.angularjs.org/1.4.1/angular-animate.min.js"></script>
<script src="//code.angularjs.org/1.4.0-rc.2/angular-messages.min.js"></script>
<script src="//code.angularjs.org/1.4.0/angular-resource.min.js"></script>
<script src="//maps.googleapis.com/maps/api/js?libraries=places"></script>
<script src="vs-google-autocomplete.min.js"></script>
<script src="angulartics.min.js"></script>
<script src="angulartics-ga.min.js"></script>
<script src="toaster/toaster.js"></script>
<script src="ui-bootstrap-0.13.0.min.js"></script>
<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.13.0.js"></script>
<script src="angular-slider-master/slider.js"></script>
<script src="bower_components/ng-optimizely/ng-optimizely.js"></script>
<!-- load angular app -->
<script src="modules/omApp.js"></script>
<!-- load custom services -->
<script src="services/services.min.js"></script>
<script src="services/data.min.js"></script>
<!-- load angular controllers -->
<script src="controllers/minified/searchController.js"></script>
<script src="controllers/minified/resourcesController.js"></script>
<script src="controllers/minified/plannerRegController.js"></script>
<!-- directives -->
<script src="directives/directive.min.js"></script>
</body>
<!-- toaster-container that shows when a user log ins and log out [CURRENTLY THE TOASTER SHOWS FOR TOO LONG AND TIME OUT FUNCTION DOES NOT CHANGE TOASTER DISPLAY TIME] -->
<toaster-container toaster-options="{'time-out': 2000}"></toaster-container>
</html>
Home Partial
<div class="jumbotron">
<div class="container">
<div class="homepage-jumbo-info col-sm-offset-7 col-sm-5">
<div class="homepage-jumbo-info-header">
<h1>We'll help you find a <br><b> planner</b>, hassle-free</h1>
</div>
<div class="homepage-jumbo-info-box">
<h2 class="homepage-jumbo-info-boxheader"><b>Compare verified planners</b> in your area</h2>
<input vs-google-autocomplete="options"
ng-model="searchquery.address.name"
vs-street-number="searchquery.address.streetNumber"
vs-street="searchquery.address.street"
vs-city="searchquery.address.city"
vs-state="searchquery.address.state"
vs-country-short="searchquery.address.countryCode"
vs-country="searchquery.address.country"
vs-latitude="searchquery.lat"
vs-longitude="searchquery.long"
type="text"
name="address"
id="address"
class="form-control homepage-jumbo-info-boxinput"
placeholder="In which city / suburb do you live?">
</div>
<div class="form-group homepage-searchbutton homepage-jumbo-info-boxbutton">
<p id="homepage-searchbutton-text">SEARCH NOW <i class="fa fa-search"></i></p>
</div>
</div>
</div>
</div>
<div class="container-fluid homepage-body-steps">
<div class="col-sm-12 homepage-body-header">
<h2><b>Find The Right Planner With 3 Simple Steps</b></h2>
</div>
<div class="col-sm-4 homepage-body-steps-info">
<h4 class="homepage-body-icons"><img id="homepage-body-icons" src="img/icons/search.png"></img></h4>
<h3 class="homepage-body-icons-title"><b>SEARCH</b></h3>
<p class="homepage-body-icons-text">Search for independently verified planners in your local area that can meet your requirements.</p>
</div>
<div class="col-sm-4 homepage-body-steps-info">
<h4 class="homepage-body-icons"><img id="homepage-body-icons" src="img/icons/compare.png"></img></h4>
<h3 class="homepage-body-icons-title"><b>COMPARE</b></h3>
<p class="homepage-body-icons-text">Compare planners based on their offerings, qualifications and actual customer reviews.</p>
</div>
<div class="col-sm-4 homepage-body-steps-info">
<h4 class="homepage-body-icons"><img id="homepage-body-icons" src="img/icons/schedule.png"></img></h4>
<h3 class="homepage-body-icons-title"><b>SCHEDULE</b></h3>
<p class="homepage-body-icons-text">Click to automatically schedule a meeting with your chosen planner at a time that suits you.</p>
</div>
</div>
<div class="row homepage-body-carousel-header">
<div class="col-sm-12 homepage-body-header">
<h2><b>Our Planners Partner With The Biggest Companies In South Africa</b></h2>
</div>
</div>
<div class="row homepage-body-carousel">
<carousel interval="myInterval" disable-animation="true">
<slide ng-repeat="slide in slides" active="slide.active">
<img ng-src="img/sitephotos/{{slide.image}}.png" alt="{{slide.image}}" style="margin:auto;">
</slide>
</carousel>
</div>
<div class="container-fluid homepage-body-video">
<p class="homepage-body-video-text">Watch our short video to see how it works in more detail</p>
<div class="videoWrapper">
<!-- Copy & Pasted from YouTube -->
<iframe width="560" height="315" src="https://www.youtube.com/embed/-rsr45s2mws" frameborder="0" allowfullscreen></iframe>
</div>
</div>
<div class="container-fluid homepage-body-steps">
<div class="col-sm-12 homepage-body-header">
<h2><b>How OM Helps You</b></h2>
</div>
<div class="row">
<div class="col-sm-4 homepage-body-steps-info">
<h4 class="homepage-body-icons"><img id="homepage-body-icons-how" src="img/icons/independent.png"></img></h4>
<h3 class="homepage-body-icons-title"><b>INDEPENDENT</b></h3>
<p class="homepage-body-icons-text">All of our advisers have been independently verified, helping you to avoid any sharks.</p>
</div>
<div class="col-sm-4 homepage-body-steps-info">
<h4 class="homepage-body-icons"><img id="homepage-body-icons-how" src="img/icons/user-review.png"></img></h4>
<h3 class="homepage-body-icons-title"><b>USER REVIEWED</b></h3>
<p class="homepage-body-icons-text">All of our advisers are reviewed by genuine users, helping you make sure that the adviser is the right match for you.</p>
</div>
<div class="col-sm-4 homepage-body-steps-info">
<h4 class="homepage-body-icons"><img id="homepage-body-icons-how" src="img/icons/tailored.png"></img></h4>
<h3 class="homepage-body-icons-title"><b>TAILORED</b></h3>
<p class="homepage-body-icons-text">Search functionality lets you specify your ideal adviser.</p>
</div>
</div>
<div class="row">
<div class="col-sm-offset-2 col-sm-4 homepage-body-steps-info">
<h4 class="homepage-body-icons"><img id="homepage-body-icons-how" src="img/icons/quick.png"></img></h4>
<h3 class="homepage-body-icons-title"><b>QUICK</b></h3>
<p class="homepage-body-icons-text">No need for lengthy internet research, enquiry calls or getting hold of friends and family to help you.</p>
</div>
<div class="col-sm-offset-right-2 col-sm-4 homepage-body-steps-info">
<h4 class="homepage-body-icons"><img id="homepage-body-icons-how" src="img/icons/free-2.png"></img></h4>
<h3 class="homepage-body-icons-title"><b>FREE</b></h3>
<p class="homepage-body-icons-text">Our service is entirely free of charge.</p>
</div>
</div>
</div>
Jack
I'm starting to play with javascript for the first time and I turned the index.html of a steroids project into a simple login form but the content is going below the header. I've also tried the <ionic-header-bar><ionic-content> tags but none works. What am I missing?
<!DOCTYPE html>
<html>
<head>
<meta charset="utf8">
<meta name="viewport" content="width=device-width">
<title>Gestor de Mesas</title>
<link rel="stylesheet" href="/components/ionic/css/ionic.min.css" />
<link rel="stylesheet" href="/stylesheets/application.css" />
<script src="/javascripts/onerror.js"></script>
<script src="/javascripts/console.log.js"></script>
<!-- cordova.js is served from localhost to ensure the correct version -->
<script src="http://localhost/cordova.js"></script>
<script src="/components/steroids-js/steroids.js"></script>
<script src="/javascripts/application.js"></script>
</head>
<body class="content">
<ion-header-bar class="bar bar-header bar-positive">
<h1 class="title">Login</h1>
</ion-header-bar>
<ion-content>
<div class="list">
<label class="item item-input">
<span class="input-label">Username</span>
<input type="text">
</label>
<label class="item item-input">
<span class="input-label">Password</span>
<input type="password">
</label>
<li class="item item-checkbox">
<label class="checkbox">
<input type="checkbox">
</label>
Lembrar?
</li>
</div>
<button class="button button-positive">
Entrar
</button>
</ion-content>
</body>
</html>
Try adding Class "has-header" to your tag. It'll solve the issue. This is because :
ion-header-bar is positioned absolutely. and hence your lower content goes behind it. .has-header class defines top : 44px, which will move your content down with the required space.
to all moderates reading this message I had asked it in another thread but was told to post it as a stand alone question. Not my intention to cluter the forum
My twitter bootstrap container is shifted to the left for some reason. Is there any way to make it take up the whole screen despite resolution? When I use .container-fluid, it seems to shrink the overall container (even when I add .row-fluid to all my rows).
My alerts are not increasing in width. That is to say that I would like the alert (background color and all) to be the width of the container. In the link below I would like "If this is your ad login to edit" to span the whole container. However when I try .span12 it just shifts the alert. Also width:100%; does nothing to help. Also when I press login and an a login error occurs the error is shown at the far left instead of right on top of the login form.
** concerning items 2 and 3 refer to this link https://twitter.com/HassanNSaid/status/355797180063301632/photo/1 **
Requested code
<div class="container-fluid">
<div class="row well">
<?php
loginFunc();
miniLogo();
searchFunc();
otherOptions();
?>
</div>
<div class="row">
<center>
<?php
if(isset($_GET['error_with_new_title'])){
echo'<span class="alert-error">'.$_GET['error_with_new_title'].'</span>';
}elseif(isset($_GET['success_with_new_title'])){
echo'<span class="alert-success">'.$_GET['success_with_new_title'].'</span>';
}elseif(isset($_GET['error_with_new_vitals'])){
echo'<span class="alert-error">'.$_GET['error_with_new_vitals'].'</span>';
}elseif(isset($_GET['success_with_new_vitals'])){
echo'<span class="alert-success">'.$_GET['success_with_new_vitals'].'</span>';
}elseif(isset($_GET['error_with_new_description'])){
echo'<span class="alert-error">'.$_GET['error_with_new_description'].'</span>';
}elseif(isset($_GET['success_with_new_description'])){
echo'<span class="alert-success">'.$_GET['success_with_new_description'].'</span>';
}else{
echo'<span class="alert">If this is your ad please log in to edit it!</span>';
}
?>
</center>
</div>
<div class="row page-header text-center">
<?php
if(isset($_SESSION['id'])){
$i = $_SESSION['id'];
printAdTitle($i);
}else{
$i = 0;
printAdTitle($i);
}
?>
</div>
<div class="imagesAndVitals">
<div class="row span9">
<center>
<? printAdImages($_GET['id']); ?>
</center>
</div>
<div class="row tabbable span6" style="height:374px;">
<ul class="nav nav-tabs">
<li class="active"> Ad Vitals</li>
<li>Contact Seller</li>
</ul>
<div class="contactVitalsDiv">
<div class="tab-content">
<div class="tab-pane active" id="adVitalsPane">
<?php
if(isset($_SESSION['id'])){
$i = $_SESSION['id'];
printAdVitals($i);
}else{
$i = 0;
printAdVitals($i);
}
?>
</div>
<div class="tab-pane" id="contactUserPane">
<?php
if(isset($_SESSION['id'])){
$i = $_SESSION['id'];
printAdContactForm($i);
}else{
$i = 0;
printAdContactForm($i);
}
?>
</div>
</div>
<div class="ratingForm">
<?php
$adId = $_GET['id'];
printRatingForm($adId);
?>
</div>
</div>
</div>
</div>
<div class="row text-center descriptionDiv">
<?php
if(isset($_SESSION['id'])){
$i = $_SESSION['id'];
printAdDescription($i);
}else{
$i = 0;
printAdDescription($i);
}
?>
</div>
<div class="row">
<div class="tabbable">
<ul class="nav nav-tabs">
<li class="active">
Similar Items
</li>
<li>
User's Other Items
</li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="similarItmesPane">
<? printSimilarItems(); ?>
</div>
<div class="tab-pane" id="otherUserItemsPane">
<? printOtherItems(); ?>
</div>
</div>
</div>
</div>
</div>
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"></meta>
<title>Scoopclassifieds.com - Test4 posted under Electronics/Laptop</title>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/bootstrap.js"></script>
<script type="text/javascript" src="js/bootstrap-carousel.js"></script>
<script type="text/javascript" src="js/bootstrap-tooltip.js"></script>
<script type="text/javascript" src="js/bootstrap-popover.js"></script>
<script type="text/javascript" src="js/editFormValidation.js"></script>
<link rel="stylesheet" href="css/bootstrap.css" type="text/css" />
<link rel="stylesheet" href="css/customStyles.css" type="text/css" />
</head>
<body onLoad="addOption_list();">
<div class="container-fluid">
<div class="row well">
<form class="form-inline pull-right" action="controllers/login.php" method="POST">
<input type="text" name="email" id="email" placeholder="Email" class="span2" />
<input type="password" name="password" id="password" placeholder="●●●●●●●●" class="span2" />
<input type="submit" name="login" id="login" value="Login" class="btn" />
</form>
<img src="/scoopclassifieds/slir/w300-h200-q60/scoopclassifieds/images/scoop3.png" alt="miniLogo" />
<form action="search.php" method="get" name="search_form" id="search_form" class="form-search pagination-centered">
<input type="text" name="searchFor" id="searchFor" class="searchInput span10" />
<input type="text" name="min" id="min" placeholder="Min Price" class="span2 text-center" />
<input type="text" name="max" id="max" placeholder="Max Price" class="span2 text-center" />
<input type="text" name="location" id="location" class="span2 text-center" />
<button type="submit" class="btn">Search</button>
</form>
<ul class="nav nav-pills">
<li>Add</li>
<li>Browse</li>
</ul>
</div>
<div class="row">
<center>
<span class="alert">If this is your ad please log in to edit it!</span> </center>
</div>
<div class="row page-header text-center">
<div id="item_title"><br/><span style="font-size:35px; font-weight:bold;">Test4</span></div> </div>
<div class="imagesAndVitals">
<div class="row span9">
<center>
<div id="myCarousel" class="carousel well span8">
<div class="carousel-inner">
<img src="/scoopclassifieds/slir/w500-h374-q60//classy/images/6/test4/61Ec8SFYZoL._SS500_.jpg" id="0" alt="image0" class="item active" />
<img src="/scoopclassifieds/slir/w500-h374-q60//classy/images/6/test4/0176440763.jpg" id="1" alt="image1" class="item" />
</div>
<a class="carousel-control left" href="#myCarousel" data-slide="prev">‹</a>
<a class="carousel-control right" href="#myCarousel" data-slide="next">›</a>
</div>
</center>
</div>
<div class="row tabbable span6" style="height:374px;">
<ul class="nav nav-tabs">
<li class="active"> Ad Vitals</li>
<li>Contact Seller</li>
</ul>
<div class="contactVitalsDiv">
<div class="tab-content">
<div class="tab-pane active" id="adVitalsPane">
<span class="well span5" style="font-size:30px; color:white; text-align:center; background:#BC4F0F;">$124</span><br/>
<span style="font-size:16px; font-weight:bold;">Location:</span><span style="font-size:14px;">Ottawa</span><br/>
<span style="font-size:16px; font-weight:bold;">Category:</span><span style="font-size:14px;">Electronics</span><br/>
<span style="font-size:16px; font-weight:bold;">Sub-Category:</span><span style="font-size:14px;">Laptop</span>
</div>
<div class="tab-pane" id="contactUserPane">
<form action="" method="post">
<label>Email:</label> <input type="text" name="email" id="email" value="" class="viewInput" /><br/>
<label>Message:</label><br/>
<textarea rows="4" cols="50" name="message" id="message" class="input"></textarea><br/>
<input type="submit" name="contactUser" id="contactUser" value="Contact User" class="button" />
</form>
</div>
</div>
<div class="ratingForm">
<div class="modal hide fade" id="userFeedback" aria-hidden="true">
<div class="modal-header">
<h4>Give us some feedback about this user</h4>
</div>
<div class="modal-body">
<form>
<h5>The Good</h5>
<input type="radio" name="feedBack" value="Good1">Good1<br/>
<input type="radio" name="feedBack" value="Good2">Good2<br/>
<input type="radio" name="feedBack" value="Good3">Good3<br/><br/>
<input type="submit" name="giveFeedBack" id="giveFeedBack" class="btn btn-success" value="Give Feedback" />
</form>
</div>
<div class="modal-footer">
<input type="button" class="btn" data-dismiss="modal" value="Close" />
</div>
</div>
Give feedback
</div>
</div>
</div>
</div>
<div class="row text-center descriptionDiv">
<span class="page-header descriptionHeader">Description:</span><br/><div id="item_description">"But I must explain to you how all this mistaken idea of denouncing pleasure and praising pain was born and I will give you a complete account of the system, and expound the actual teachings of the great explorer of the truth, the master-builder of human happiness. No one rejects, dislikes, or avoids pleasure itself, because it is pleasure, but because those who do not know how to pursue pleasure rationally encounter consequences that are extremely painful. Nor again is there anyone who lov</div> </div>
<div class="row">
<div class="tabbable">
<ul class="nav nav-tabs">
<li class="active">
Similar Items
</li>
<li>
User's Other Items
</li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="similarItmesPane">
<h4>Ads with similar category of: Electronics</h4><ul class="thumbnails">
<li class="span4"><a href="view.php?id=2&title=test3" class="thumbnail" style="height:235px; width:300px;" id="secondary-info" rel="popover" data-content="Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the..." data-original-title="Price: $1234<br/>Location: Ottawa<br/>Electronics/Television">
<center>Test3</center>
<img src="/scoopclassifieds/slir/w300-h200-q60/" alt="Test3MainImage" />
</a></li>
<li class="span4"><a href="view.php?id=24&title=test21" class="thumbnail" style="height:235px; width:300px;" id="secondary-info" rel="popover" data-content="There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or..." data-original-title="Price: $1245<br/>Location: Ottawa<br/>Electronics/Laptop">
<center>Test21</center>
<img src="/scoopclassifieds/slir/w300-h200-q60/" alt="Test21MainImage" />
</a></li>
</ul> </div>
<div class="tab-pane" id="otherUserItemsPane">
<ul class="thumbnails">
<li class="span4"><a href="view.php?id=2&title=test3" class="thumbnail" style="height:235px; width:300px;" id="secondary-info" rel="popover" data-content="Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the..." data-original-title=" Price: $1234<br/> Location: Ottawa<br/>Electronics/Television">
<center>Test3</center>
<img src="/scoopclassifieds/slir/w300-h200-q60/" alt="Test3MainImage" />
</a></li>
</ul> </div>
</div>
</div>
</div>
</div>
<!--
</div>
<div class="footer">
Home | Contact Us<br/>
Scoop Classifieds ©
2013 </div>
</div> -->
</body>
<script>
$(document).ready(
function(){
$('#myCarousel').carousel();
$('[rel="popover"]').popover();
}
);
</script>
</html>