<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title></title>
<!-- bootstrap -->
<link href="../css/lib/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div style="padding:2mm;border-bottom:2px solid blue;">
</div>
</body>
</html>
I don't have any idea about the negative height of div.
Any advice would be usefull.
Edit:
console.log($("#1").outerHeight());
console.log($("#2").outerHeight());
console.log($("#3").outerHeight());
<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title></title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- bootstrap -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
<style type="text/css">
</style>
</head>
<body>
<div id="1">
<div id="2">
<hr>
</div>
<div id="3">
<p>Text</p>
</div>
</div>
</body>
</html>
If You Mean The Margin Using Negative Value Then We Can Use
<div style="padding:5mm;margin-top:-40px;border-bottom:2px solid blue;">
</div>
Here Margin Holds Negative Value To Displace The Object Towards The Direction Opposite to The Normal Movement Path Simply Margin-top If It Holds Negative Value Then It Moves Towards The Top Instead Of Going Down. Did This Fulfill Your Request?
Related
I have some troubles with my website template. Is it possible to shift div (or container) and leave the content aligned with other content on the page? I can do this with classic HTML + CSS but have some troubles with bootstrap.
See the picture.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container-fluid">
<h1>Hello World!</h1>
<p>Resize the browser window to see the effect.</p>
<p>The columns will automatically stack on top of each other when the screen is less than 768px wide.</p>
<div class="row">
<div class="col-xs-4 col-xs-offset-2" style="background-color:lavender;">.col-sm-4</div>
<div class="col-xs-4" style="background-color:lavenderblush;">.col-sm-8</div>
</div>
</div>
</body>
</html>
I am just trying to get a simple project started using foundation 6. My very simple html is:
<!doctype html>
<html class="no-js" lang="en">
<head>
<meta charset="utf-8" />
<meta http-equiv="x-ua-compatible">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Foundation for Sites</title>
<link rel="stylesheet" href="css/foundation.min.css">
</head>
<body>
<div class="row">
<div class="large-2 columns">
<h1>test</h1>
</div>
<div class="large-2 columns">
<h1>test2</h1>
</div>
</div>
<script src="js/vendor/jquery.js"></script>
<script src="js/vendor/what-input.js"></script>
<script src="js/vendor/foundation.min.js"></script>
<script>
$(document).foundation();
</script>
</body>
</html>
However, when testing the website, the column classes are not getting applied and the grid is not working as it should be. Is there something I am missing?
Unless you're using < foundation 6, you need to be using the XY-grid because the old float grid was deprecated.
Check this out: https://foundation.zurb.com/sites/docs/xy-grid.html
Your html would look something like this using the XY-grid:
<!doctype html>
<html class="no-js" lang="en">
<head>
<meta charset="utf-8" />
<meta http-equiv="x-ua-compatible">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Foundation for Sites</title>
<link rel="stylesheet" href="css/foundation.min.css">
</head>
<body>
<div class="grid-x">
<div class="cell large-2">
<h1>test</h1>
</div>
<div class="cell large-2">
<h1>test2</h1>
</div>
</div>
<script src="js/vendor/jquery.js"></script>
<script src="js/vendor/what-input.js"></script>
<script src="js/vendor/foundation.min.js"></script>
<script>
$(document).foundation();
</script>
</body>
</html>
Just wanted to add that you can still use the float grid in Foundation 6. If you visit the download page, you can select "Float Grid" under "Grid" in the left column and download that custom build. You do not have to use the XY Grid.
If you do that, your existing grid markup will work.
I am using DomXPath for the first time and I don;t know how to select some html code.
For Example I've got:
<!DOCTYPE html>
<html lang="">
<head>
<title>Dodmond</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<link href="layout/styles/layout.css" rel="stylesheet" type="text/css" media="all">
</head>
<body id="top">
<div class="header">
header content
</div>
<div class="content">
content
</div>
<div class="footer">
footer content
</div>
<a id="backtotop" href="#top"><i class="fa fa-chevron-up"></i></a>
<!-- JAVASCRIPTS -->
<script src="layout/scripts/jquery.min.js"></script>
<script src="layout/scripts/jquery.backtotop.js"></script>
<script src="layout/scripts/jquery.mobilemenu.js"></script>
<script src="layout/scripts/jquery.flexslider-min.js"></script>
</body>
</html>
And I need to make 2 selections. First with the code before header div
<!DOCTYPE html>
<html lang="">
<head>
<title>Dodmond</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<link href="layout/styles/layout.css" rel="stylesheet" type="text/css" media="all">
</head>
<body id="top">
And second with the code after footer div
<a id="backtotop" href="#top"><i class="fa fa-chevron-up"></i></a>
<!-- JAVASCRIPTS -->
<script src="layout/scripts/jquery.min.js"></script>
<script src="layout/scripts/jquery.backtotop.js"></script>
<script src="layout/scripts/jquery.mobilemenu.js"></script>
<script src="layout/scripts/jquery.flexslider-min.js"></script>
</body>
</html>
How can I do this? What should I use?
Thank you
Edit: I found out how to delete all divs, but I don't know how to separate the code before header and code after footer.
At the moment I've got this:
$html = file_get_contents('..');
$doc = new \DOMDocument();
libxml_use_internal_errors(true);
$doc->loadHTML($html);
$finder = new \DomXPath($doc);
foreach ($finder->evaluate('//div') as $node) {
$node->parentNode->removeChild($node);
}
which gives me the code in one variable. How can I split it?
So I'm not completely sure if you still need help on this problem but I have a regex that will match everything before your "header" <div>:
^<[\w\n\s="<>\/\-,.#!m]+(?=<div)
The pattern above would match this chunk of your HTML:
<!DOCTYPE html>
<html lang="">
<head>
<title>Dodmond</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<link href="layout/styles/layout.css" rel="stylesheet" type="text/css" media="all">
</head>
<body id="top">
As for the tail end of you HTML, it is a bit too tricky to get everything after your <div class="footer"> tag, but if you switch it from div to footer, you can accomplish this easily. Below is an example of using footer:
<footer class="footer">
footer content
</footer>
The following will match everything from </footer> all the way until the closing </html> tag:
(<\/footer>)[\w\n\s="<>\/\-,.#!m]+<\/html>
Please Note: above regex includes </footer>. Hope this helps!
I'm using StackEdit (Which is amazing!).
It has a feature to export HTML file of the document.
The document uses The CSS File which is the default.
For instance, I downloaded HTML file with the following code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>New Markdown document</title>
<link rel="stylesheet" href="https://stackedit.io/res-min/themes/base.css" />
<script type="text/javascript" src="https://stackedit.io/libs/MathJax/MathJax.js?config=TeX-AMS_HTML"></script>
</head>
<body><div class="container"><h2 id="hello">Hello</h2>
<p>We’re dealing with…</p>
<blockquote>
<p>Written with StackEdit.</p>
</blockquote></div></body>
</html>
What I want to do is change the background color if the 'div' element with ID: "container" without changing any other property of his.
I only have access to the basic template which is this:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title><%= documentTitle %></title>
<link rel="stylesheet" href="https://stackedit.io/res-min/themes/base.css" />
<script type="text/javascript" src="https://stackedit.io/libs/MathJax/MathJax.js?config=TeX-AMS_HTML"></script>
</head>
<body><div class="container"><%= documentHTML %></div></body>
</html>
How can I do that the simplest way?
Notes:
I can only edit the template.
I want to change the color into f6f7f9.
I want any other properties of the elements to be kept.
Updates
Tried your suggestions on the sample code above:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>New Markdown document</title>
<link rel="stylesheet" href="https://stackedit.io/res-min/themes/base.css" />
<script type="text/javascript" src="https://stackedit.io/libs/MathJax/MathJax.js?config=TeX-AMS_HTML"></script>
</head>
<body><div class="container" style="background-color:#f6f7f9;"><h2 id="hello">Hello</h2>
<p>We’re dealing with…</p>
<blockquote>
<p>Written with StackEdit.</p>
</blockquote></div></body>
</html>
It doesn't work, it changes the whole look of the document.
You can try by creating a local HTML file and see. -> I was wrong. It works!
if you are only able to edit the template, use inline styling like this:
<div class="container" style="background-color:#f6f7f9;"><%= documentHTML %></div>
or since your template is the whole page, you can add custom styles in the head and use !important directive to override any other custom styling.
example:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>
<%= documentHTML %>
</title>
<link rel="stylesheet" href="https://stackedit.io/res-min/themes/base.css" />
<script type="text/javascript" src="https://stackedit.io/libs/MathJax/MathJax.js?config=TeX-AMS_HTML"></script>
<style type="text/css">
.container {
background-color:#f6f7f9 !important;
}
</style>
</head>
<body>
<div class="container">
<%= documentHTML %>
</div>
</body>
</html>
Add the style background-color:yellow; to the container div.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title><%= documentTitle %></title>
<link rel="stylesheet" href="https://stackedit.io/res-min/themes/base.css" />
<script type="text/javascript" src="https://stackedit.io/libs/MathJax/MathJax.js?config=TeX-AMS_HTML"></script>
</head>
<body>
<div class="container" style="background-color:yellow;"><%= documentHTML %></div>
</body>
</html>
try this one
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title><%= documentTitle %></title>
<link rel="stylesheet" href="https://stackedit.io/res-min/themes/base.css" />
<script type="text/javascript" src="https://stackedit.io/libs/MathJax/MathJax.js?config=TeX-AMS_HTML"></script>
<style>
.container
{
background:#f6f7f9;
}
</style>
</head>
<body>
<div class="container" style="background-color:#f6f7f9;"> <%= documentHTML %></div>
</body>
</html>
Try this:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title><%= documentTitle %></title>
<link rel="stylesheet" href="https://stackedit.io/res-min/themes/base.css" />
<script type="text/javascript" src="https://stackedit.io/libs/MathJax/MathJax.js?config=TeX-AMS_HTML"></script>
</head>
<body>
<div class="container" style="background-color:#f6f7f9;"><%= documentHTML %></div>
</body>
</html>
Hello friends i have created two page one is index.html and second is about.html . I just want to add back button on about.html using jQuery mobile . i have tried it but back button is not working in my code i dont know what is the problem
HTML
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="jquery.mobile-1.2.0.min.css" />
<script src="jquery-1.8.2.min.js"></script>
<script src="jquery.mobile-1.2.0.min.js"></script>
</head>
<body>
<div data-role="page">
<div data-role="data-add-back-btn ">Back</div>
<div><h1>Page title</h1>
About us</div>
</div>
</body>
</html>
Please help me. Thanks in advance...
You may try creating your back button by using data-rel="back" as follows:
<a data-role="button" data-rel="back">Back</a>
Full HTML:
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="jquery.mobile-1.2.0.min.css" />
<script src="jquery-1.8.2.min.js"></script>
<script src="jquery.mobile-1.2.0.min.js"></script>
</head>
<body>
<div data-role="page">
<a data-role="button" data-rel="back">Back</a>
<div>
<h1>Page title</h1>
About us
</div>
</div>
</body>
</html>
Check the section "Back" button links of the online doc for more information: http://jquerymobile.com/demos/1.2.0/docs/pages/page-links.html