I have a template that generates links to other pages in my site, but these generated links are incorrect.
For example the home link is http://127.0.0.1:8080/silverstripe/"/silverstripe/"
It should be http://127.0.0.1:8080/silverstripe/
Why are my links wrong?
Here is my template code:
<!DOCTYPE html>
<!--[if lt IE 7 ]><html class="ie ie6" lang="en"> <![endif]-->
<!--[if IE 7 ]><html class="ie ie7" lang="en"> <![endif]-->
<!--[if IE 8 ]><html class="ie ie8" lang="en"> <![endif]-->
<!--[if (gte IE 9)|!(IE)]><!--><html lang="en"> <!--<![endif]-->
<head>
<% base_tag %>
$MetaTags
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
<!-- IE6-8 support of HTML5 elements -->
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<!-- Google Web Font -->
<link href="http://fonts.googleapis.com/css?family=Raleway:300,500,900%7COpen+Sans:400,700,400italic" rel="stylesheet" type="text/css" />
<!-- Bootstrap CSS -->
<link href="$ThemeDir/css/bootstrap.min.css" rel="stylesheet" />
<!-- Template CSS -->
<link href="$ThemeDir/css/style.css" rel="stylesheet" />
<!-- Modernizr -->
<script src="$ThemeDir/js/common/modernizr.js"></script>
</head>
<body>
<!-- BEGIN WRAPPER -->
<div id="wrapper">
<!-- BEGIN HEADER -->
<header id="header">
<div id="top-bar">
<div class="container">
<div class="row">
<div class="col-sm-12">
<ul id="top-buttons">
<li><i class="fa fa-sign-in"></i> Login</li>
<li><i class="fa fa-pencil-square-o"></i> Register</li>
<li class="divider"></li>
<li>
<div class="language-switcher">
<span><i class="fa fa-globe"></i> English</span>
<ul>
<li>Deutsch</li>
<li>Español</li>
<li>Français</li>
<li>Português</li>
</ul>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
<div id="nav-section">
<div class="container">
<div class="row">
<div class="col-sm-12">
<img src="$ThemeDir/images/logo.png" alt="One Ring Rentals" />
<!-- BEGIN MAIN MENU -->
<nav class="navbar">
<button id="nav-mobile-btn"><i class="fa fa-bars"></i></button>
<ul class="nav navbar-nav">
<% loop $Menu(1) %>
<li><a class=”$LinkingMode” href=”$Link” title=”Go to the $Title page”>$MenuTitle</a></li>
<% end_loop %>
</ul>
</nav>
<!-- END MAIN MENU -->
</div>
</div>
</div>
</div>
</header>
<!-- END HEADER -->
<!-- BEGIN PAGE TITLE/BREADCRUMB -->
<div class="parallax colored-bg pattern-bg">
<div class="container">
<div class="row">
<div class="col-sm-12">
<h1 class="page-title">$Title</h1>
<div class="breadcrumb">
$Breadcrumbs
</div>
</div>
</div>
</div>
</div>
<!-- END PAGE TITLE/BREADCRUMB -->
<!-- BEGIN CONTENT -->
<div class="content">
<div class="container">
<div class="row">
<div class="main col-sm-8">
<h1 class="section-title">Nunc enim nulla</h1>
<p class="darker-text">Donec magna justo, laoreet sed consectetur non, malesuada non neque. Aenean vehicula vitae dui eu convallis. Cras a venenatis urna, ac congue nulla.</p>
<p>Donec ex sapien, semper sit amet sodales suscipit, imperdiet in metus. Aliquam maximus mi eget finibus cursus. Duis a nisi tempus, porta eros sit amet, placerat urna. Vivamus varius enim ut sem imperdiet lacinia. Cras sed mauris ac felis rhoncus sodales sit amet eget ante. In metus purus, tristique a porttitor ac, sollicitudin vitae arcu. Quisque ac vehicula nulla. Morbi finibus facilisis cursus. Praesent sollicitudin sem id fermentum dignissim. Donec dictum dui a accumsan finibus. Quisque velit purus, lobortis et aliquam sit amet, sagittis eget lorem. Integer ut elit nisi.</p>
<p>Ut vel facilisis leo. Cras feugiat dolor faucibus, porttitor nisl euismod, tempus tellus. Donec varius cursus velit eu aliquam. Nulla facilisi. Pellentesque sit amet nunc nisl. Suspendisse tortor dolor, sagittis vel mattis vel, commodo eu metus. Proin a hendrerit mi. Sed blandit ante mi, nec elementum lacus elementum in. Quisque at risus nunc. Vestibulum quis diam id massa sodales viverra sit amet et nulla. Quisque commodo faucibus dignissim. Ut eros neque, tristique tincidunt sapien non, fermentum elementum metus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
<p>Phasellus pellentesque metus neque, quis consequat neque hendrerit eget. Vestibulum nunc mauris, venenatis id mi et, ornare consectetur nisl. Nunc molestie sem tempor ante mattis, et consectetur dolor ornare. In congue elit gravida nisi semper gravida. Maecenas posuere mollis ligula, quis malesuada elit pretium vitae. Nulla aliquam eget justo sollicitudin fermentum. Nunc ac justo at arcu aliquet iaculis non non lacus. In nisi tellus, mollis nec volutpat nec, sagittis ac neque. Sed in aliquam risus. Sed in tristique nisl. Ut in tellus non neque pellentesque venenatis eget sed risus. Nulla facilisi. Duis efficitur velit nunc, et mattis enim dictum vitae. Integer tincidunt quam quis vulputate tempor. Donec sagittis tortor vitae consectetur sodales. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
</div>
<div class="sidebar gray col-sm-4">
<h2 class="section-title">In this section</h2>
<ul class="categories subnav">
<li>Company</li>
<li>FAQ</li>
<li>Careers</li>
<li>Contact Us</li>
<li>Terms of Use</li>
<li>Privacy Policy</li>
</ul>
</div>
</div>
</div>
</div>
<!-- END CONTENT -->
<!-- BEGIN FOOTER -->
<footer id="footer">
<div id="footer-top" class="container">
<div class="row">
<div class="block col-sm-3">
<img src="$ThemeDir/images/logo.png" alt="One Ring Rentals" />
<br><br>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam commodo eros nibh, et dictum elit tincidunt eget. Pellentesque volutpat quam dignissim, convallis elit id, efficitur sem. Vivamus ac scelerisque sem. Aliquam sed enim rutrum nibh gravida pellentesque nec at metus. In hac habitasse platea dictumst. Etiam in rhoncus mi. In hac habitasse platea dictumst. Mauris congue blandit venenatis.</p>
</div>
<div class="block col-sm-3">
<h3>Helpful Links</h3>
<ul class="footer-links">
<li>All rentals</li>
<li>List your rental</li>
<li>Read our FAQs</li>
</ul>
</div>
<div class="block col-sm-6">
<h3>Popular regions</h3>
<div class="row">
<div class="col-sm-6">
<ul class="footer-listings">
<li>
<div class="image">
<img src="http://placehold.it/760x670" alt="" />
</div>
<p>Rhovanion</p>
</li>
<li>
<div class="image">
<img src="http://placehold.it/760x670" alt="" />
</div>
<p>Eriador</p>
</li>
<li>
<div class="image">
<img src="http://placehold.it/760x670" alt="" />
</div>
<p>Bay of Belfalas</p>
</li>
</ul>
</div>
<div class="col-sm-6">
<ul class="footer-listings">
<li>
<div class="image">
<img src="http://placehold.it/760x670" alt="" />
</div>
<p>Mordor</p>
</li>
<li>
<div class="image">
<img src="http://placehold.it/760x670" alt="" />
</div>
<p>Arnor</p>
</li>
<li>
<div class="image">
<img src="http://placehold.it/760x670" alt="" />
</div>
<p>Forlindon</p>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<!-- BEGIN COPYRIGHT -->
<div id="copyright">
<div class="container">
<div class="row">
<div class="col-sm-12">
© 2014 One Ring Rentals
<!-- BEGIN SOCIAL NETWORKS -->
<ul class="social-networks">
<li><i class="fa fa-facebook"></i></li>
<li><i class="fa fa-twitter"></i></li>
<li><i class="fa fa-google"></i></li>
<li><i class="fa fa-pinterest"></i></li>
<li><i class="fa fa-youtube"></i></li>
<li><i class="fa fa-rss"></i></li>
</ul>
<!-- END SOCIAL NETWORKS -->
</div>
</div>
</div>
</div>
<!-- END COPYRIGHT -->
</footer>
<!-- END FOOTER -->
</div>
<!-- END WRAPPER -->
<script type="text/javascript" src="$ThemeDir/js/common/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="$ThemeDir/js/common/bootstrap.min.js"></script>
<script type="text/javascript" src="$ThemeDir/js/common/bootstrap-datepicker.js"></script>
<script type="text/javascript" src="$ThemeDir/js/common/chosen.min.js"></script>
<script type="text/javascript" src="$ThemeDir/js/common/bootstrap-checkbox.js"></script>
<script type="text/javascript" src="$ThemeDir/js/common/nice-scroll.js"></script>
<script type="text/javascript" src="$ThemeDir/js/common/jquery-browser.js"></script>
<script type="text/javascript" src="$ThemeDir/js/scripts.js"></script>
</body>
</html>
The problem is the type of double quote character being used in these links:
<ul class="nav navbar-nav">
<% loop $Menu(1) %>
<li><a class=”$LinkingMode” href=”$Link” title=”Go to the $Title page”>$MenuTitle</a></li>
<% end_loop %>
</ul>
You will notice your link attributes have ” quotes instead of " quotes.
The double quote character must be ".
Try this:
<ul class="nav navbar-nav">
<% loop $Menu(1) %>
<li><a class="$LinkingMode" href="$Link" title="Go to the $Title page">$MenuTitle</a></li>
<% end_loop %>
</ul>
Related
For some reason my bootstrap css is not rendering the content in the body of my page correctly. The paragraph tag is rendering inside the image tag. The paragraph tag and image tag are both inside the body.
#{
Layout = null;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Paul Drake's Website</title>
<link rel="stylesheet" type="text/css" href="lib/bootstrap/dist/css/bootstrap-grid.css">
<link rel="stylesheet" type="text/css" href="lib/bootstrap/dist/css/bootstrap.css">
<link rel="stylesheet" type="text/css" href="css/site.css">
</head>
<body>
<header>
<div class="container">
<div class="row">
<div class="col-3">
Resume
</div>
<div class="col-6 text-center">
<h1>Paul Drake's Website</h1>
</div>
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropDownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="False">My Projects</button>
<div class="dropdown-menu col-3" aria-labelledby="dropDownMenuButton">
<a class="dropdown-item" asp-controller="Movie" asp-action="GetMovies">Streaming Movie App</a>
</div>
</div>
</div>
</div>
</header>
<main>
<div class="container">
<div class="row">
<div class="col-md-6">
<IMG src="files/_DSC0630-Costco3.jpg">
</div>
<div class="col-md-6">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Gravida cum sociis natoque penatibus. Leo vel fringilla est ullamcorper eget nulla facilisi etiam dignissim. Diam sit amet nisl suscipit adipiscing bibendum. Diam sollicitudin tempor id eu nisl. Lacus vel facilisis volutpat est velit egestas. Purus gravida quis blandit turpis cursus in hac habitasse platea. Non enim praesent elementum facilisis leo vel. Nunc scelerisque viverra mauris in aliquam sem fringilla ut. Tristique sollicitudin nibh sit amet commodo. Porta nibh venenatis cras sed felis eget. Sapien nec sagittis aliquam malesuada bibendum arcu vitae. Enim eu turpis egestas pretium aenean pharetra magna ac. Ac auctor augue mauris augue neque gravida in fermentum et. Turpis egestas maecenas pharetra convallis posuere morbi leo urna molestie. Tristique sollicitudin nibh sit amet. Laoreet sit amet cursus sit amet dictum sit. Sit amet tellus cras adipiscing enim. Ut eu sem integer vitae justo eget magna.</p>
</div>
</div>
</div>
</main>
<script src="~/lib/jquery/dist/jquery.min.js"></script>
<script src="~/lib/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
<script src="~/js/site.js" asp-append-version="true"></script>
</body>
</html>
I have replicated your issue in codepen.io and found out that you are missing a cdn link in your head section, add the following:
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
You can an example of this at https://www.wiseguypizza.com/ . As you can see their layout is
image
content
image
content
image
content.
As you scroll down it appears the first image you are leaving is being covered by the content and as you continue scrolling it appears that the next image you see is being uncovered as you leave the content. What CSS properties are used to achieve this?
What you want to achieve is a parallax effect.
You can use a simple framework to achieve it, in order to simplify the process.
Here you can find a simple page with the effect you need.
I used Materialize, you just have to import JS and CSS (in your source code or from the CDN).
Here's the working Codepen.
Here's the code, you have to add the classes "parallax-container" and "parallax" to the containers that wraps the image you want to move on page scroll and the framework will do the rest!
<div class="parallax-container">
<div class="parallax">
<img src="https://images.unsplash.com/photo-1552751857-21e31f44fe73?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1344&q=80" alt="Unsplashed background img 1">
</div>
</div>
Here's the full code:
<!DOCTYPE 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, user-scalable=no"/>
<title>Parallax Page Test</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
</head>
<body>
<nav class="black" role="navigation">
<div class="nav-wrapper container">
<a id="logo-container" href="#" class="brand-logo">Logo</a>
<ul class="right hide-on-med-and-down">
<li>Navbar Link #1</li>
<li>Navbar Link #2</li>
<li>Navbar Link #3</li>
<li>Navbar Link #4</li>
<li>Navbar Link #5</li>
</ul>
</div>
</nav>
<div class="parallax-container">
<div class="parallax"><img src="https://images.unsplash.com/photo-1552751857-21e31f44fe73?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1344&q=80" alt="Unsplashed background img 1"></div>
</div>
<div class="container">
<div class="section">
<div class="row">
<div class="col s12 center">
<h3><i class="mdi-content-send green-text"></i></h3>
<h4>Section Title</h4>
<p class="left-align light">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam scelerisque id nunc nec volutpat. Etiam pellentesque tristique arcu, non consequat magna fermentum ac. Cras ut ultricies eros. Maecenas eros justo, ullamcorper a sapien id, viverra ultrices eros. Morbi sem neque, posuere et pretium eget, bibendum sollicitudin lacus. Aliquam eleifend sollicitudin diam, eu mattis nisl maximus sed. Nulla imperdiet semper molestie. Morbi massa odio, condimentum sed ipsum ac, gravida ultrices erat. Nullam eget dignissim mauris, non tristique erat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;</p>
</div>
</div>
</div>
</div>
<div class="parallax-container">
<div class="parallax"><img src="https://images.unsplash.com/photo-1496088285923-2bcbf1ba3f62?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80" alt="Unsplashed background img 2"></div>
</div>
<div class="container">
<div class="section">
<div class="row">
<div class="col s12 center">
<h3><i class="mdi-content-send green-text"></i></h3>
<h4>Section Title</h4>
<p class="left-align light">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam scelerisque id nunc nec volutpat. Etiam pellentesque tristique arcu, non consequat magna fermentum ac. Cras ut ultricies eros. Maecenas eros justo, ullamcorper a sapien id, viverra ultrices eros. Morbi sem neque, posuere et pretium eget, bibendum sollicitudin lacus. Aliquam eleifend sollicitudin diam, eu mattis nisl maximus sed. Nulla imperdiet semper molestie. Morbi massa odio, condimentum sed ipsum ac, gravida ultrices erat. Nullam eget dignissim mauris, non tristique erat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;</p>
</div>
</div>
</div>
</div>
<div class="parallax-container">
<div class="parallax"><img src="https://images.unsplash.com/photo-1545960696-624e0d91b52b?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1491&q=80" alt="Unsplashed background img 3"></div>
</div>
<footer class="black">
<div class="container">
<div class="row">
<div class="col l6 s12">
<h5 class="white-text">Title</h5>
<p class="grey-text text-lighten-4">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation nisi.</p>
</div>
<div class="col l3 s12">
<h5 class="white-text">Title</h5>
<ul>
<li><a class="white-text" href="#!">Link 1</a></li>
<li><a class="white-text" href="#!">Link 2</a></li>
<li><a class="white-text" href="#!">Link 3</a></li>
<li><a class="white-text" href="#!">Link 4</a></li>
</ul>
</div>
<div class="col l3 s12">
<h5 class="white-text">Title</h5>
<ul>
<li><a class="white-text" href="#!">Link 1</a></li>
<li><a class="white-text" href="#!">Link 2</a></li>
<li><a class="white-text" href="#!">Link 3</a></li>
<li><a class="white-text" href="#!">Link 4</a></li>
</ul>
</div>
</div>
</div>
<div class="footer-copyright">
<div class="container">
© Copyright
</div>
</div>
</footer>
<!-- Scripts-->
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<script type="text/javascript">
(function($){
$(function(){
$('.parallax').parallax();
});
})(jQuery);
</script>
</body>
</html>
Hope this helps!
i have a server with nginx + spdy + module_pagespeed installed and i'm making page speed test from google.
This is my current template for the test which obtain 76/100, a basic template with only bootstrap:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Welcome!</title>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
</head>
<body>
<div class="navbar navbar-fixed-top navbar-inverse" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<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="#">Project name</a>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</div><!-- /.nav-collapse -->
</div><!-- /.container -->
</div><!-- /.navbar -->
<div class="container">
<div class="row row-offcanvas row-offcanvas-right">
<div class="col-xs-12 col-sm-9">
<p class="pull-right visible-xs">
<button type="button" class="btn btn-primary btn-xs" data-toggle="offcanvas">Toggle nav</button>
</p>
<div class="jumbotron">
<h1>Hello, world!</h1>
<p>This is an example to show the potential of an offcanvas layout pattern in Bootstrap. Try some responsive-range viewport sizes to see it in action.</p>
</div>
<div class="row">
<div class="col-6 col-sm-6 col-lg-4">
<h2>Heading</h2>
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
<p><a class="btn btn-default" href="#" role="button">View details »</a></p>
</div><!--/span-->
<div class="col-6 col-sm-6 col-lg-4">
<h2>Heading</h2>
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
<p><a class="btn btn-default" href="#" role="button">View details »</a></p>
</div><!--/span-->
<div class="col-6 col-sm-6 col-lg-4">
<h2>Heading</h2>
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
<p><a class="btn btn-default" href="#" role="button">View details »</a></p>
</div><!--/span-->
<div class="col-6 col-sm-6 col-lg-4">
<h2>Heading</h2>
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
<p><a class="btn btn-default" href="#" role="button">View details »</a></p>
</div><!--/span-->
<div class="col-6 col-sm-6 col-lg-4">
<h2>Heading</h2>
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
<p><a class="btn btn-default" href="#" role="button">View details »</a></p>
</div><!--/span-->
<div class="col-6 col-sm-6 col-lg-4">
<h2>Heading</h2>
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
<p><a class="btn btn-default" href="#" role="button">View details »</a></p>
</div><!--/span-->
</div><!--/row-->
</div><!--/span-->
<div class="col-xs-6 col-sm-3 sidebar-offcanvas" id="sidebar" role="navigation">
<div class="list-group">
Link
Link
Link
Link
Link
Link
Link
Link
Link
Link
</div>
</div><!--/span-->
</div><!--/row-->
<hr>
<footer>
<p>© Company 2014</p>
</footer>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
</body>
</html>
I obtain 76/100 and an alert that say render blocking,
page speed test
When i remove the bootstrap.min.css i get 100/100, ¿is there any way to fix this issue?
Regards,
You only seem to have an issue in the mobile test and not the desktop version. Google has different guidelines for the different cases since usually the mobile connection is slower, less content is shown (which means not as much CSS is needed) and so on.
Some things I’d look into:
Is your version of Bootstrap the complete Bootstrap? Try to only include the parts that you actually need. In 90% of the cases there is something you can remove.
Does your mobile site need exactly the same CSS as the desktop version? Try to identify elements that you maybe don’t even use on smaller screens and ship a seperate file that you use only on small screens (and don’t use the big one)
If you use the mod_pagespeed module (either on Apache or NGINX) there is a setting to dynamically inline certain parts of the CSS into the <head> which is what Google recommends you do for big stylesheets. I haven’t used this setting yet though so I can’t provide any help there.
Hope that helps.
This question is unlikely to help any future visitors; it is only relevant to a small geographic area, a specific moment in time, or an extraordinarily narrow situation that is not generally applicable to the worldwide audience of the internet. For help making this question more broadly applicable, visit the help center.
Closed 10 years ago.
I have had a lesson on visual studios for an asp.net and am stumped on this master page please help me. I cannot link the default pages to the master page I am not sure
default page code
<%# Page Title="" Language="C#" MasterPageFile="" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="AdrianASP2012.WebForm2" %>
<div>
<h2>Nulla luctus eleifend</h2>
<p>This is <strong>Greenness </strong>, a free, fully standards-compliant CSS template designed by FCT. The photos in this template are from Fotogrph. This free template is released under a Creative Commons Attributions 3.0 license, so you are pretty much free to do whatever you want with it (even use it commercially) provided you keep the links in the footer intact. Aside from that, have fun with it :) </p>
<p> </p>
<p>Maecenas pede nisl, elementum eu, ornare ac, malesuada at, erat. Proin gravida orci porttitor enim accumsan lacinia. Donec condimentum, urna non molestie semper, ligula enim ornare nibh, quis laoreet eros quam eget ante. Aliquam libero. Vivamus nisl nibh, iaculis vitae, viverra sit amet, ullamcorper vitae, turpis. Aliquam erat volutpat. Vestibulum dui sem, pulvinar sed, imperdiet nec, iaculis nec, leo. Fusce odio. Etiam arcu dui, faucibus eget, placerat vel, sodales eget, orci. Donec ornare neque ac sem. Mauris aliquet. </p>
<p class="button-style">More Details</p>
</div>
and master page body section is
<body>
<form id="form1" runat="server">
<div id="header">
<div id="logo">
<h1>Greenness</h1>
</div>
<div id="menu">
<ul>
<li class="current_page_item">Homepage</li>
<li>Our Clients</li>
<li>About Us</li>
<li>Careers</li>
<li>Contact Us</li>
</ul>
</div>
</div>
<div id="banner-wrapper">
<div id="banner">
<img src="App_Themes/Theme1/images/pics01.jpg" width="1000" height="345" alt="" />
</div>
</div>
<div id="page-wrapper">
<div id="page">
<div id="content">
<!-- CONTENT PLACE HOLDER HERE -->
<asp:ContentPlaceHolder ID="ContentPlaceHolder2" runat="server"></asp:ContentPlaceHolder>
</div>
<div id="sidebar">
<h2>Maecenas lectus</h2>
<ul class="style1">
<li class="first">
<p>Aliquam erat volutpat. Pellentesque tristique ante ut risus. Quisque dictum. Integer nisl risus, sagittis convallis, rutrum congue.</p>
</li>
<li>
<p>Aliquam erat volutpat. Pellentesque tristique ante ut risus. Quisque dictum. Integer nisl risus, sagittis convallis, rutrum congue.</p>
</li>
<li>
<p>Aliquam erat volutpat. Pellentesque tristique ante ut risus. Quisque dictum. Integer nisl risus, sagittis convallis, rutrum congue.</p>
</li>
</ul>
</div>
</div>
</div>
<div id="footer-wrapper">
<div id="footer-content">
<asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
</asp:ContentPlaceHolder>
<div id="fbox2">
<h2><span>Fusce ultrices</span> fringilla</h2>
<p>
<img src="App_Themes/Theme1/images/img05.jpg" width="320" height="150" alt="" />
</p>
<p>Aliquam erat volutpat. Pellentesque tristique ante ut risus. Quisque dictum. Integer nisl risus, sagittis convallis, rutrum id, elementum congue, nibh. Donec leo, vivamus fermentum nibh in augue praesent a lacus at urna congue rutrum elementum congue.</p>
<p class="button-style">More Details</p>
</div>
<div id="fbox3">
<h2><span>Mauris vulputate</span> scelerisque</h2>
<ul class="style3">
<li class="first">
<img src="App_Themes/Theme1/images/img02.jpg" width="78" height="78" alt="">
<p>Nullam non wisi a sem eleifend. Donec mattis libero eget urna. </p>
<p class="posted">August 11, 2002 | (10 ) Comments</p>
</li>
<li>
<img src="App_Themes/Theme1/images/img03.jpg" width="78" height="78" alt="">
<p>Nullam non wisi a sem eleifend. Donec mattis libero eget urna. </p>
<p class="posted">August 11, 2002 | (10 ) Comments</p>
</li>
<li>
<img src="App_Themes/Theme1/images/img04.jpg" width="78" height="78" alt="">
<p>Nullam non wisi a sem eleifend. Donec mattis libero eget urna. </p>
<p class="posted">August 11, 2002 | (10 ) Comments</p>
</li>
</ul>
</div>
</div>
</div>
<div id="footer">
</form>
</body>
First give the MasterPageFile name in your MasterPageFile="~/YourMasterPage.master"
Second you have to write code inside the content place holder..
Consider changing:
MasterPageFile=""
to the name of your master page. Typically:
MasterPageFile="~/MasterPage.master"
In your default.aspx MasterPageFile value is empty. So change it to your master page file name.
MasterPageFile="<place master page path>"
MasterPageFile="~/Custom/UI/Templates/MasterPage.master"
HINT : place the cursor between the "" ( MasterPageFile="|" ), and press Ctrl + Space bar for intellisence and you will get "Pick Master..." and click to pick master page.
This question already has answers here:
Closed 10 years ago.
Possible Duplicate:
twitter bootstrap, fluid vs fixed, then add in responsive, how does it all fit together?
Here is the demo of the design on which I am working
http://jsfiddle.net/U8HGz/1/show/#about
but this design is coming as fluid.. how can I make this design as fixed?
Below is the source for the page
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title> web page</title>
<link rel="stylesheet" type="text/css" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css">
<style type='text/css'>
body {
padding-bottom: 40px;
padding-top: 60px;
}
.sidebar-nav-fixed {
padding: 9px 0;
position:fixed;
left:20px;
top:60px;
width:250px;
}
.row-fluid > .span-fixed-sidebar {
margin-left: 290px;
}
</style>
<script type='text/javascript'>//<![CDATA[
window.onload=function(){
}//]]>
</script>
</head>
<body>
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container-fluid">
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<a class="brand" href="#">Project name</a>
<div class="nav-collapse">
<ul class="nav">
<li class="active">Home</li>
<li>About</li>
<li>Contact</li>
</ul>
<p class="navbar-text pull-right">Logged in as username</p>
</div><!--/.nav-collapse -->
</div>
</div>
</div>
<div class="container-fluid">
<div class="row-fluid row">
<div class="span3">
<div class="well sidebar-nav-fixed">
<ul class="nav nav-list">
<li class="nav-header">Sidebar</li>
<li class="active">Link</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
<li class="nav-header">Sidebar</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
<li class="nav-header">Sidebar</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
</ul>
</div><!--/.well -->
</div><!--/span-->
<div class="span9 span-fixed-sidebar">
<div class="hero-unit">
<h1>Hello, world!</h1>
<p>This is a template for a simple marketing or informational website. It includes a large callout called the hero unit and three supporting pieces of content. Use it as a starting point to create something more unique.</p>
<p><a class="btn btn-primary btn-large">Learn more »</a></p>
</div>
<div class="row-fluid">
<div class="span4">
<h2>Heading</h2>
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
<p><a class="btn" href="#">View details »</a></p>
</div><!--/span-->
<div class="span4">
<h2>Heading</h2>
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
<p><a class="btn" href="#">View details »</a></p>
</div><!--/span-->
<div class="span4">
<h2>Heading</h2>
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
<p><a class="btn" href="#">View details »</a></p>
</div><!--/span-->
</div><!--/row-->
<div class="row-fluid">
<div class="span4">
<h2>Heading</h2>
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
<p><a class="btn" href="#">View details »</a></p>
</div><!--/span-->
<div class="span4">
<h2>Heading</h2>
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
<p><a class="btn" href="#">View details »</a></p>
</div><!--/span-->
<div class="span4">
<h2>Heading</h2>
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
<p><a class="btn" href="#">View details »</a></p>
</div><!--/span-->
</div><!--/row-->
</div><!--/span-->
</div><!--/row-->
<hr>
<footer>
<p>© Company 2012</p>
</footer>
</div><!--/.fluid-container-->
</body>
</html>
You're using the container-fluid and row-fluid classes in your HTML.
The Bootstrap docs specifically explain how to use both the default and fluid grid systems; you want default, i.e. container and row.
Excerpt:
The default Bootstrap grid system utilizes 12 columns, making for a 940px wide container without responsive features enabled.
Twitter bootstrap is meant to be responsive. If you want to change that you'll need to download the css and put it on your server for you to be able to modify it. After that go step by step and eliminate all that makes your site to resize. Like percentage width (other than 100%) and so on.
There's no easy solution to that.