I am developing a website where I create different graphics with D3.js
I have a main page called "index.html" where I have a piece of text for the introduction. I have a second page called "GenrePie.html" which has a pie chart.
I want to put the "GenrePie.html" page in my "index.html" page.
On several forums I found a way to do it but it doesn't work for me :
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<script>
$(function(){
$("#includedPieContent").load("GenrePie.html");
});
</script>
this is my index.html :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Maxes</title>
</head>
<body>
<div class="jumbotron jumbotron-fluid">
<div class="container">
<h1 id="title">Forever</h1>
<p id="intro">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam id mi vitae felis faucibus finibus eu nec arcu. Curabitur quis ultricies magna. Cras rutrum metus est, id hendrerit mauris mattis a. Etiam suscipit sodales urna eget fringilla. Donec diam lorem, laoreet commodo ligula nec, mollis mattis mi. Mauris luctus ut nisi ac viverra. Integer dictum eu mi a aliquet. </p>
</div>
</div>
<div class="principal">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam id mi vitae felis faucibus finibus eu nec arcu. Curabitur quis ultricies magna. Cras rutrum metus est, id hendrerit mauris mattis a. Etiam suscipit sodales urna eget fringilla. Donec diam lorem, laoreet commodo ligula nec, mollis mattis mi. Mauris luctus ut nisi ac viverra. Integer dictum eu mi a aliquet.
</p>
</div>
</body>
</html>
I would like to put my pie chart after the second paragraph
Thank you in advance
You can use embed or iframe whichever suits you,
I will recommend embed as its looks clean.
Quick Demo : https://jsfiddle.net/vikas_saini/kupb0Lh9/5/
<div>
<h1>SOME TEXT</h1>
<embed src="https://example.com/" style="width:500px; height: 300px;">
<iframe src="https://example.com/">
<p>Your browser does not support iframes.</p>
</iframe>
</div>
Your Code Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Maxes</title>
</head>
<body>
<div class="jumbotron jumbotron-fluid">
<div class="container">
<h1 id="title">Forever</h1>
<p id="intro">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam id mi vitae felis faucibus finibus eu nec arcu. Curabitur quis ultricies magna. Cras rutrum metus est, id hendrerit mauris mattis a. Etiam suscipit sodales urna eget fringilla. Donec diam lorem, laoreet commodo ligula nec, mollis mattis mi. Mauris luctus ut nisi ac viverra. Integer dictum eu mi a aliquet. </p>
</div>
</div>
<div class="principal">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam id mi vitae felis faucibus finibus eu nec arcu. Curabitur quis ultricies magna. Cras rutrum metus est, id hendrerit mauris mattis a. Etiam suscipit sodales urna eget fringilla. Donec diam lorem, laoreet commodo ligula nec, mollis mattis mi. Mauris luctus ut nisi ac viverra. Integer dictum eu mi a aliquet.
</p>
<embed src="GenrePie.html" style="width:500px; height: 300px;">
</div>
</body>
</html>
Let me know if this did not work for you.
Related
I have been trying to follow this tutorial here and around the 9:08 mark, he adds javascript and then shows that fullpage.js works, but mine does not after I refresh the page after putting in the new code. Am I doing something wrong here?
Thanks.
<!DOCTYPE html>
<html>
<head>
<title>page</title>
<link rel="stylesheet" type="text/css" href="css/fullpage.css">
<link rel="stylesheet" type="text/css" href="css/stylesheet.css">
</head>
<body>
<div id="fullpage">
<div class="section section1">
<div class="container">
<h1>Section 1</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam vulputate metus ornare vestibulum vehicula. Mauris nec eros urna. In hac habitasse platea dictumst. Curabitur a odio sagittis, vehicula libero porta, auctor odio. Praesent a ultrices neque. Aliquam at tellus lectus. Sed tempus cursus justo sed tincidunt. Aenean quis bibendum velit, et auctor massa. Praesent tincidunt eu quam sed semper. Donec eu quam dapibus, suscipit odio nec, consectetur lectus. Maecenas scelerisque nec velit eu tincidunt. </p>
</div>
</div>
<div class="section section2">
<div class="container">
<h1>Section 2</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam vulputate metus ornare vestibulum vehicula. Mauris nec eros urna. In hac habitasse platea dictumst. Curabitur a odio sagittis, vehicula libero porta, auctor odio. Praesent a ultrices neque. Aliquam at tellus lectus. Sed tempus cursus justo sed tincidunt. Aenean quis bibendum velit, et auctor massa. Praesent tincidunt eu quam sed semper. Donec eu quam dapibus, suscipit odio nec, consectetur lectus. Maecenas scelerisque nec velit eu tincidunt. </p>
</div>
</div>
<div class="section section3">
<div class="container">
<h1>Section 3</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam vulputate metus ornare vestibulum vehicula. Mauris nec eros urna. In hac habitasse platea dictumst. Curabitur a odio sagittis, vehicula libero porta, auctor odio. Praesent a ultrices neque. Aliquam at tellus lectus. Sed tempus cursus justo sed tincidunt. Aenean quis bibendum velit, et auctor massa. Praesent tincidunt eu quam sed semper. Donec eu quam dapibus, suscipit odio nec, consectetur lectus. Maecenas scelerisque nec velit eu tincidunt. </p>
</div>
</div>
<div class="section section4">
<div class="container">
<h1>Section 4</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam vulputate metus ornare vestibulum vehicula. Mauris nec eros urna. In hac habitasse platea dictumst. Curabitur a odio sagittis, vehicula libero porta, auctor odio. Praesent a ultrices neque. Aliquam at tellus lectus. Sed tempus cursus justo sed tincidunt. Aenean quis bibendum velit, et auctor massa. Praesent tincidunt eu quam sed semper. Donec eu quam dapibus, suscipit odio nec, consectetur lectus. Maecenas scelerisque nec velit eu tincidunt. </p>
</div>
</div>
</div>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.js"></script>
<script type="text/javascript" src="js/fullpage.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#fullpage').fullpage({
//options here
autoScrolling:true,
scrollHorizontally: true,
navigation: true
});
});
</script>
</body>
</html>
Here is a working demo from your code. I think you have an issue with the fullpage.js library file. In the latest version(3 & up) of fullpage.js, it has changed its license to GPLv3 and it requires a licenseKey option. Read more here
So, check your console & if you found such warnings please get a licensekey or downgrade your library version.
$(document).ready(function(){
$('#fullpage').fullpage({
//options here
autoScrolling:true,
scrollHorizontally: true,
navigation: true
});
});
/**
* EXTRA JS CODE
* Only for element background-color
*/
$(document).ready(function() {
$('.section').each(function () {
var hue = 'rgb(' + (Math.floor((256-199)*Math.random()) + 200) + ',' + (Math.floor((256-199)*Math.random()) + 200) + ',' + (Math.floor((256-199)*Math.random()) + 200) + ')';
$(this).css("background-color", hue);
});
});
#fp-nav ul li a span {
background-color: orangered !important;
}
#fp-nav ul li a.active span {
background-color: red !important;
}
<html>
<head>
<title>page</title>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.9.7/jquery.fullpage.min.css">
</head>
<body>
<div id="fullpage">
<div class="section section1">
<div class="container">
<h1>Section 1</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam vulputate metus ornare vestibulum vehicula. Mauris nec eros urna. In hac habitasse platea dictumst. Curabitur a odio sagittis, vehicula libero porta, auctor odio. Praesent a ultrices neque. Aliquam at tellus lectus. Sed tempus cursus justo sed tincidunt. Aenean quis bibendum velit, et auctor massa. Praesent tincidunt eu quam sed semper. Donec eu quam dapibus, suscipit odio nec, consectetur lectus. Maecenas scelerisque nec velit eu tincidunt. </p>
</div>
</div>
<div class="section section2">
<div class="container">
<h1>Section 2</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam vulputate metus ornare vestibulum vehicula. Mauris nec eros urna. In hac habitasse platea dictumst. Curabitur a odio sagittis, vehicula libero porta, auctor odio. Praesent a ultrices neque. Aliquam at tellus lectus. Sed tempus cursus justo sed tincidunt. Aenean quis bibendum velit, et auctor massa. Praesent tincidunt eu quam sed semper. Donec eu quam dapibus, suscipit odio nec, consectetur lectus. Maecenas scelerisque nec velit eu tincidunt. </p>
</div>
</div>
<div class="section section3">
<div class="container">
<h1>Section 3</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam vulputate metus ornare vestibulum vehicula. Mauris nec eros urna. In hac habitasse platea dictumst. Curabitur a odio sagittis, vehicula libero porta, auctor odio. Praesent a ultrices neque. Aliquam at tellus lectus. Sed tempus cursus justo sed tincidunt. Aenean quis bibendum velit, et auctor massa. Praesent tincidunt eu quam sed semper. Donec eu quam dapibus, suscipit odio nec, consectetur lectus. Maecenas scelerisque nec velit eu tincidunt. </p>
</div>
</div>
<div class="section section4">
<div class="container">
<h1>Section 4</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam vulputate metus ornare vestibulum vehicula. Mauris nec eros urna. In hac habitasse platea dictumst. Curabitur a odio sagittis, vehicula libero porta, auctor odio. Praesent a ultrices neque. Aliquam at tellus lectus. Sed tempus cursus justo sed tincidunt. Aenean quis bibendum velit, et auctor massa. Praesent tincidunt eu quam sed semper. Donec eu quam dapibus, suscipit odio nec, consectetur lectus. Maecenas scelerisque nec velit eu tincidunt. </p>
</div>
</div>
</div>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.js"></script>
<!--- Default Library - v2.9.7
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.9.7/jquery.fullpage.min.js"></script>
-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.9.7/jquery.fullpage.extensions.min.js"></script>
</body>
</html>
I created a website which basically consists of a button and everytime that you click on the button a sentence appears above it.
As Background I´ve set a picture. On Mobile I have the Problem that when a long sentence appears the content gets stretched so much that you have to scroll to reach the bottom of the page and at the bottom of the page appears a blank space underneath the picture. This whitespace doesnt appear in the developer tool though, just on my real phone.
So far I´ve been searching quite some time looking for a solution but i didnt find one. I though about disabling background-repeat: no-repeat; in media query but this would have unnice side effects.
html, body{
width:100%;
height:100%;
margin:0px;
padding:0px;
overflow-x:hidden;
}
body {
background-image: url('../Images/BG.jpg');
background-repeat: no-repeat;
background-size:cover;
color: #FFF;
font-size: 125%;
font-family: Arial, 'Lucida Sans Unicode';
line-height: 1.5;
text-align: center;
}
This is the HTML
<!DOCTYPE html>
<html lang="de">
<head>
<title>Generator</title>
<link rel="stylesheet" type="text/css" href="Css/style.css">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0>
</head>
<body >
<div id="main">
<header class="header">
<h1> Generator<span style="color:red">.com</span> </h1>
</header>
<div class="mainContent">
<article id="spruchErstellen">
</article>
</div>
<div class="mainButton">
<button class="button" onclick="neuerSpruch()">Go!</button>
</div>
</div>
<div id="space">
</div>
<footer id="mainFooter">
<p>Copyright © 2019; All Rights Reserved</p>
</footer>
<script src="javascript.js"></script>
</body>
</html>
I want the background-picture to allways fill the whole screen and to have no white spaces.
Greetings and thanks for your help.
The problem as i guess is happening because of your content overflowing its container block, so the body shows the white extra space on the bottom because text took more space than it should,one of the solutions that i found to your problem is by setting your vertical overflow to auto using overflow-y:auto
html, body{
width:100%;
height:100%;
margin:0px;
padding:0px;
overflow-y:auto;
}
body {
background-image: url('https://image.freepik.com/vector-gratis/fondo-abstracto-acuarela-efecto-grunge_1340-4291.jpg');
background-repeat: no-repeat;
background-size:cover;
color: #FFF;
font-size: 125%;
font-family: Arial, 'Lucida Sans Unicode';
line-height: 1.5;
text-align: center;
}
<!DOCTYPE html>
<html lang="de">
<head>
<title>Generator</title>
<link rel="stylesheet" type="text/css" href="Css/style.css">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0>
</head>
<body >
<div id="main">
<header class="header">
<h1> Generator<span style="color:red">.com</span> </h1>
</header>
<div class="mainContent">
<article id="spruchErstellen">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas egestas justo sit amet cursus tempus. Ut nec ligula vestibulum, aliquet tellus ac, pellentesque dolor. Fusce egestas congue nibh vel ultrices. Duis mollis arcu at sollicitudin tempus. Nam sed felis quis ligula dictum fermentum. Sed eget arcu sem. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec leo tellus, tempus faucibus arcu sit amet, tempor dignissim purus. Etiam rutrum fermentum accumsan. Sed interdum libero in laoreet aliquam. Integer sed dolor enim. Fusce aliquam ullamcorper dictum. Sed vehicula euismod felis, ornare condimentum metus dictum vel. Nam vestibulum ante eget ipsum efficitur pellentesque. Aliquam ac facilisis magna, eget rutrum erat. Pellentesque at quam ut metus pellentesque vulputate in ut eros.
Nam varius fermentum felis vel fringilla. Aliquam et sapien accumsan, viverra leo vel, iaculis nunc. Nullam vehicula cursus orci in malesuada. Quisque lacinia metus non lectus elementum, vel commodo augue blandit. Mauris dictum odio ut purus mattis rhoncus. Nam auctor consequat risus auctor euismod. Morbi aliquam eros nisl, in egestas tortor feugiat a. Morbi viverra nec mauris sed tempus. Cras blandit sagittis eros.
Aenean tempor risus odio, ut pretium massa mollis sed. Duis finibus justo non sem volutpat convallis. Donec rutrum nec lectus vitae iaculis. Aenean vitae tellus tristique, porta turpis nec, volutpat sem. Aliquam molestie scelerisque arcu in auctor. Nam suscipit est at est dictum maximus. Nulla facilisi. Phasellus eget mattis mauris, nec bibendum arcu. Cras ornare egestas eleifend. Integer semper elementum euismod. Sed a ligula risus. Fusce commodo sem sit amet malesuada blandit. Donec at justo et metus viverra aliquam eget sit amet turpis.
Integer ligula tellus, accumsan volutpat risus vitae, suscipit accumsan neque. Quisque sed efficitur urna. Nullam mollis ultricies enim, vitae interdum ipsum consequat consectetur. Phasellus tincidunt nunc ut nisi ullamcorper, in laoreet erat mollis. Vivamus a semper orci, sed vestibulum risus. Aenean ultrices quam tristique vestibulum vulputate. Praesent rutrum tempor libero, vitae sollicitudin tellus iaculis sit amet. Proin vulputate tellus tellus, sit amet dignissim sem venenatis sed. Pellentesque cursus lorem eu mauris malesuada scelerisque. Integer quis pulvinar urna. Aenean vitae porta ex, sit amet hendrerit lorem. Mauris dictum magna vitae imperdiet placerat.
Duis consectetur nec sem et hendrerit. Fusce ut porttitor arcu. Curabitur condimentum volutpat congue. Phasellus mauris dolor, commodo id felis sit amet, ornare imperdiet ante. Integer dignissim elit sit amet magna rutrum, vitae interdum dolor dignissim. Phasellus vulputate ac quam non porta. Nam viverra sapien vel metus consequat, vitae rutrum risus posuere. Fusce nec pellentesque sapien. Curabitur non efficitur nunc, at sodales sapien. Donec vulputate, tellus id rhoncus euismod, mauris lacus imperdiet urna, non ornare risus quam a diam. Maecenas sit amet libero ante. Aliquam non mauris a risus vehicula imperdiet. Donec volutpat euismod vulputate. Morbi nec egestas lectus, a aliquet nisi.
</article>
</div>
<div class="mainButton">
<button class="button" onclick="neuerSpruch()">Go!</button>
</div>
</div>
<div id="space">
</div>
<footer id="mainFooter">
<p>Copyright © 2019; All Rights Reserved</p>
</footer>
<script src="javascript.js"></script>
</body>
</html>
PS: the background image and the text are just for demonstration.
i have this code
<html lang='es'>
<head>
<link rel="stylesheet" type="text/css" href="theme.css">
<link rel="stylesheet" type="text/css" href="bootstrap337/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="bootstrap337/css/bootstrap-theme.min.css">
<link rel="stylesheet" type="text/css" href="bootstrap337/css/normalize.css">
<script src="bootstrap337/js/jquery-3.2.0.min.js"></script>
<script src="bootstrap337/js/bootstrap.min.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
* {
padding:0.5%;
}
</style>
</head>
<body>
<div class='col-md-12' style='background-color:#DDD'>
<h1 class='text-center'>Sea bienvenido a la web</h1><hr/>
</div>
<hr/>
<div class='col-md-3' style='background-color:#DDD'>
<p class='text-justify'>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin tincidunt dictum lacus sed pellentesque. Suspendisse dignissim eros eget lacus commodo, nec congue ante sollicitudin. Ut consequat metus at metus volutpat congue sit amet facilisis turpis. Fusce vitae eros lectus. Nullam blandit massa ac erat tempor fermentum. Aenean tristique eu neque at sagittis. Curabitur sed dui ut orci rutrum fringilla. Phasellus suscipit lacus ut iaculis interdum. Nunc vehicula lacus at risus luctus, non malesuada urna tempor. In eget massa ligula..</p>
</div>
<div class='col-md-6' style='background-color:#EEE'>
<div class='col-md-6' style='background-color:#AAA'>
<p class='text-justify'>Vivamus sit amet cursus diam, non aliquet urna. Mauris viverra commodo fringilla. Donec rutrum sodales ex a tincidunt.</p>
</div>
<p class='text-justify'>Nam ac fermentum nulla. Donec nibh lacus, feugiat vitae magna sit amet, mollis ornare lorem. Etiam a auctor enim. Nam sed egestas est. Vivamus sit amet cursus diam, non aliquet urna. Mauris viverra commodo fringilla. Donec rutrum sodales ex a tincidunt. Integer volutpat mauris eget dictum tristique. Suspendisse quis sagittis nisl. In purus lorem, volutpat in eros cursus, porta faucibus ligula. Sed non dolor convallis, efficitur urna a, congue velit. Pellentesque nec ante sit amet leo ultricies fringilla efficitur sit amet est. Proin ut ullamcorper felis. Quisque eget iaculis arcu.</p>
</div>
<div class='col-md-3' style='background-color:#DDD'>
<p class='text-justify'>Nunc suscipit augue iaculis, facilisis ex a, tristique tellus. Nullam vel tellus libero. Nulla facilisi. Suspendisse potenti. Mauris in varius diam. Aliquam non malesuada tellus. Nullam pulvinar tellus id aliquet fermentum. Quisque sed dictum justo, id mollis ante. In hac habitasse platea dictumst. Donec eu nisi facilisis metus porta consectetur id id nisi.</p>
</div>
</body>
</html>
But the problem is the following: i want the text outside the div (thereis a div inside a div)
mid div dont get right text padding, as i mark in the image
How to solve the text right padding?
Image with the code
Give that element a right/bottom margin.
.in-text-block {
margin: 0 1em 1em 0;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<html lang='es'>
<head>
<link rel="stylesheet" type="text/css" href="theme.css">
<link rel="stylesheet" type="text/css" href="bootstrap337/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="bootstrap337/css/bootstrap-theme.min.css">
<link rel="stylesheet" type="text/css" href="bootstrap337/css/normalize.css">
<script src="bootstrap337/js/jquery-3.2.0.min.js"></script>
<script src="bootstrap337/js/bootstrap.min.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
* {
padding:0.5%;
}
</style>
</head>
<body>
<div class='col-md-12' style='background-color:#DDD'>
<h1 class='text-center'>Sea bienvenido a la web</h1>
<hr/>
</div>
<hr/>
<div class='col-md-3' style='background-color:#DDD'>
<p class='text-justify'>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin tincidunt dictum lacus sed pellentesque. Suspendisse dignissim eros eget lacus commodo, nec congue ante sollicitudin. Ut consequat metus at metus volutpat congue sit amet facilisis turpis.
Fusce vitae eros lectus. Nullam blandit massa ac erat tempor fermentum. Aenean tristique eu neque at sagittis. Curabitur sed dui ut orci rutrum fringilla. Phasellus suscipit lacus ut iaculis interdum. Nunc vehicula lacus at risus luctus, non malesuada
urna tempor. In eget massa ligula..</p>
</div>
<div class='col-md-6' style='background-color:#EEE'>
<div class='col-md-6 in-text-block' style='background-color:#AAA;'>
<p class='text-justify'>Vivamus sit amet cursus diam, non aliquet urna. Mauris viverra commodo fringilla. Donec rutrum sodales ex a tincidunt.</p>
</div>
<p class='text-justify'>Nam ac fermentum nulla. Donec nibh lacus, feugiat vitae magna sit amet, mollis ornare lorem. Etiam a auctor enim. Nam sed egestas est. Vivamus sit amet cursus diam, non aliquet urna. Mauris viverra commodo fringilla. Donec rutrum sodales ex a tincidunt.
Integer volutpat mauris eget dictum tristique. Suspendisse quis sagittis nisl. In purus lorem, volutpat in eros cursus, porta faucibus ligula. Sed non dolor convallis, efficitur urna a, congue velit. Pellentesque nec ante sit amet leo ultricies
fringilla efficitur sit amet est. Proin ut ullamcorper felis. Quisque eget iaculis arcu.</p>
</div>
<div class='col-md-3' style='background-color:#DDD'>
<p class='text-justify'>Nunc suscipit augue iaculis, facilisis ex a, tristique tellus. Nullam vel tellus libero. Nulla facilisi. Suspendisse potenti. Mauris in varius diam. Aliquam non malesuada tellus. Nullam pulvinar tellus id aliquet fermentum. Quisque sed dictum justo,
id mollis ante. In hac habitasse platea dictumst. Donec eu nisi facilisis metus porta consectetur id id nisi.</p>
</div>
</body>
</html>
You have a lot of problems in your code.
Using bootstrap you should always put everything in a "container".
Then inside the container have a "row", then inside rows you have a "column".
example:
<div class="container">
<div class="row">
<div class="col-xs-12">
Some text
</div>
</div>
</div>
If you want to add more rows and coloumns you still have to keep it "in order" and always only put columns inside of rows and rows inside of columns (or inside containers).
This will make your page work better because in Bootstrap there are paddings and margins that even each other out.
Then if you want to add padding to a specific div, it's better not to override the bootstrap classes, nor add padding to * which effects everything.
Instead- add a class to the div you want to add padding to and add padding for that class only.
example
`<style>
.extra-padding {
padding: 20px;
}
</style>
<div class="container">
<div class="row">
<div class="col-xs-12">
<div class="row">
<div class="col-xs-3">
</div>
<div class="col-xs-9 extra-padding">
</div>
</div>
</div>
</div>
</div>`
I'm trying to assign different anchors to different divs, but they don't seem to be taking effect. I've tried using <a name="anchor">, <a id="anchor">, and <div id="anchor"> (which worked with some divs, but not all).
This is my current HTML:
<div class="about">
<a name="nabout"></a>
<div class="section">
<div class="section-title job-section-header section-header section-subheader">
<div class="section-bar"></div>
<img src="images/about-photo.png" class="left-image" />
</div>
<div class="section-body jobs">
<p class="section-subtext-md section-subtext section-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis lobortis nulla a eros porttitor, ut congue elit commodo. Nunc ut dapibus elit. Suspendisse euismod rhoncus felis, id vulputate mauris posuere vitae. Praesent bibendum maximus nibh, nec
tempor diam blandit in. Praesent non metus in odio vehicula cursus vulputate quis quam. Nulla varius massa ac libero commodo imperdiet. Fusce tincidunt metus sapien, sed fringilla nibh vulputate eget. Suspendisse sodales nisi quis hendrerit porttitor.
Morbi in augue sapien. Maecenas ultricies, nisl vitae vehicula vulputate, nunc tellus sagittis turpis, nec laoreet quam velit non nunc. In aliquam libero a tellus commodo, at aliquet risus imperdiet. Fusce finibus a nulla et facilisis. Maecenas
condimentum sit amet velit et sodales. Duis mauris augue, feugiat non ornare pharetra, convallis nec metus. Integer vitae consequat dolor, at tristique lorem.</p>
<p class="section-subtext-md section-subtext section-text">Cras libero massa, fringilla id condimentum ut, aliquam ut nisi. Vestibulum ullamcorper commodo elit at commodo. Nullam dignissim id lacus sed faucibus. Quisque sollicitudin quam sit amet est facilisis tempor. Morbi vehicula quam et mauris faucibus
semper. Etiam vel est eu magna viverra viverra. Donec venenatis, nisl eget rhoncus auctor, lorem est gravida magna, ac consectetur velit libero at turpis. Vivamus at quam sed arcu eleifend suscipit non id mauris. Pellentesque tempor ornare imperdiet.
Morbi ornare luctus imperdiet. Fusce sagittis lorem ut elementum fermentum. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
<div style="clear: both;"></div>
</div>
</div>
Why does <a name> not work sometimes and what should I be using in this case?
The way that HTML anchors works is as follows.
When you give a div or any other DOM object an id attribute, you can then "link" to that object by specifying that id, with a # in your href, to have an a tag link to that tag.
For example:
HTML
Testing
...
<div id="testing">
<h1>Testing DIV</h1>
</div>
By clicking on the above <a> tag, the user's browser will scroll until the very top of the #testing div is at the top of the page, assuming the browser has space to scroll.
Try this
Test
.........
<a name="test"></a>
<h1>Testing</h1>
or this
Test
.......
<div id="test">
<h1>Test</h1>
</div>
I'm not 100% sure why it's not jumping to the location on load, but if you add this javascript
window.location.href = window.location.hash;
to the bottom of the page, that should fix your problem.
So I am trying to teach myself how to use bootstrap and for some reason I can not get the website to format correctly when displaying on a mobile device. The website is formatting correctly when the browser is resized but not when emulating a mobile device.
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="bootstrap.min.css" rel="stylesheet" >
</head>
<body>
<div class="container-fluid">
<h1>HERE IS WHERE THE CONTAINER IS. </h1>
<div class="row-fluid">
<div class="col-lg-4 col-md-4 col-sm-4">
<h2>Paragraph 1</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin rutrum leo ut posuere suscipit. Suspendisse sed ex venenatis, tempus quam sit amet, porta sapien. Maecenas in nibh leo. In elementum eleifend odio, id pellentesque justo. Cras vitae placerat mauris. Aliquam erat volutpat. Integer faucibus eget nulla eget mollis. Pellentesque interdum vitae purus ut venenatis. Fusce hendrerit ultricies dignissim.</p>
</div><!--col-lg-4 col-md-4 col-sm-4-->
<div class="col-lg-4 col-md-4 col-sm-4">
<h2>Paragraph 2</h2>
<p>Duis elementum quam sit amet ante imperdiet, id bibendum nunc finibus. Donec et semper quam, et tempus tellus. Nullam quis nisl eu sem sodales consectetur. Donec ornare urna elit, in euismod leo feugiat eget. In eu placerat tellus. Nullam et tristique purus. Sed ut accumsan ipsum, nec semper mauris.</p>
</div><!--col-lg-4 col-md-4 col-sm-4-->
<div class="col-lg-4 col-md-4 col-sm-4">
<h2>Paragraph 3</h2>
<p>Mauris euismod massa a gravida posuere. Etiam placerat euismod est. Nam sed scelerisque elit. Mauris id ultrices enim. Nulla eu justo eget tellus vestibulum lacinia non eu augue. Maecenas porta purus vitae vehicula mattis. Nam auctor euismod ornare. Morbi eleifend luctus varius. Sed non nisl porta, vehicula elit sed, rhoncus felis. Aliquam ac elementum nunc. Integer blandit porta nisi, et venenatis nibh. Donec velit lorem, aliquet vel lorem in, efficitur tempus leo. Nulla facilisi. Nam vel malesuada mauris. Vivamus leo libero, finibus ut justo eget, tristique lobortis lectus. Etiam luctus urna eget leo lobortis blandit.</p>
</div><!--col-lg-4 col-md-4 col-sm-4-->
</div><!--row-->
</div><!--container-->
</body>
</html>
I have been unable to figure out why this would be. Any help would be appreciated.
It looks like your using Bootstrap 2 here, take a look at this tutorial on configuring Bootstrap 3 to work on mobile devices.