My goal is that the code in class = "nscr" is no longer affected by zooming. So if in the browser with CTRL and mouse wheel or on the mobile device by gesture, the zoom is changed, the menu should continue to be displayed as a zoom of 100%. The problem becomes clear with strong zoom. Then the menu takes up too much space on the display. Zooming should be done normally outside of class = "nscr". I do not want to use external libraries like jquery or bootstrap. All solutions using HTML, CSS and JavaScript are welcome. Does anyone have any idea how to solve this problem?
This is my code:
html,
body {
margin: 0;
padding: 0;
height: 100%;
overflow: hidden;
font-size: 100%;
}
div.nscr {
width: 100%;
padding-left: 10%;
background: #FFFFFF;
color: #000000;
}
div.content {
box-shadow: 0em 0em 1.25em silver;
clear: left;
height: 93%;
overflow: auto;
background: #ffffff;
color: #000000;
}
<!DOCTYPE HTML>
<html>
<head>
<title>Test</title>
<meta name="viewport" content="width-device-width; initial-scale-1.0; maximum-scale-1.0; user-scalable-no" charset=UTF-8>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="nscr">
<h1>Menu</h1>
</div>
<div class="content">
<p>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br> test
<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br> test
<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br> test
<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br> test
<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>
</p>
</div>
</body>
</html>
Related
I am using css grid in my demo application.My application is working fine when I have small heading or small title (h2).
but when The title is big my application works behave buggy or not as expected output .
here is my code
https://codepen.io/naveen-1234/pen/zYzKqQW
<!DOCTYPE html>
<html lang="en-US" class="no-js">
<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">
<style>
.wrapper {
display: grid;
grid-template-columns: repeat(10, 1fr);
grid-template-rows: repeat(10, 40px);
}
.one {
grid-column: 2/5;
grid-row: 2/5;
background-color: #ee0
}
.two {
grid-column: 4/8;
grid-row: 3/8;
background-color: #eee;
padding: 20px;
border: 1px solid #000
}
.header_container {
position: relative;
border: 1px solid #000;
min-height: 50px
}
.header_container h2 {
position: absolute;
bottom: 0;
padding: 0;
margin: 0;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="one">one</div>
<div class="two">Two
<div class="header_container">
<h2>Lorem ipsum dolor sit amet</h2>
</div>
</div>
</div>
</body>
</html>
First case (which is working fine) when tile is small
Case two when Title is big.it show like this which is wrong. It overlap the Two text and not increase the container.
Expected output.
When Title text increase both black border container increase in upward direction .Inner black border and outer black border grows in upward direction.
It will not overlap the text (TWO)
Expected output screenhot
Change your css for .header_container h2 like below and it should work.
.header_container h2 {
margin: 0;
}
It is happening because you are using position absolute for the h2 heading.]
.header_container h2 {
/* position: absolute;
bottom: 0;
padding: 0;
*/
margin: 0;
}
What position absolute does that it makes the element like a ghost and it is not able to take any space in the HTML flow. If you want to use absolute position use it on the parent that is on <div class="two">Two</div>
If you find the answer helpful then please accept it. It lets others know that it is the correct answer.
This question already has answers here:
How wide is the default `<body>` margin?
(4 answers)
Closed 2 years ago.
I am making a topnav and I don't want space between the body and the div element.
I want to look like that. But the thing is, I do not know how I can 'delete' or 'remove' the space between the body and the <div> element.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> Why Linux is just better than Windows - Ring Tips </title>
<link rel="icon" href="linux.png">
</head>
<body>
<style>
body {
background: #484d49;
padding: 0;
-webkit-font-smoothing: antialised;
}
.topnav {
top: 0;
position: sticky;
background: #a5b0a8;
border: 0.5px solid black;
width: 100%;
height: 100px;
overflow: hidden;
z-index: 2;
}
</style>
<div class="topnav"></div>
</body>
</html>
That's what I have done, but how can I use CSS or JavaScript to delete the space between the elements.
If you could help, that'd be great.
Thanks,
Ring Games
You can remove the top margin of the body by styling it to have margin-top:0;.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> Why Linux is just better than Windows - Ring Tips </title>
<link rel="icon" href="linux.png">
</head>
<body>
<style>
body {
margin-top:0;
background: #484d49;
padding: 0;
-webkit-font-smoothing: antialised;
}
.topnav {
top: 0;
position: sticky;
background: #a5b0a8;
border: 0.5px solid black;
width: 100%;
height: 100px;
overflow: hidden;
z-index: 2;
}
</style>
<div class="topnav"></div>
</body>
</html>
Your style declaration needs to be in the head of the page - not the body. And because most browsers style the html and body to have a bit of space around - you should set margin and padding to 0 on each.
Also - you should investigate the semantic elements to use for the nav and main - eg <nav> ... </nav> and <main> ... </main> in order to make the code as good as you can.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> Why Linux is just better than Windows - Ring Tips </title>
<link rel="icon" href="linux.png">
<style>
html, body {
height: 100%;
padding: 0;
margin: 0;
}
body {
background: #484d49;
color: #fff;
padding: 0;
-webkit-font-smoothing: antialised;
}
.topnav {
top: 0;
position: sticky;
background: #a5b0a8;
border: 0.5px solid black;
width: 100%;
height: 100px;
overflow: hidden;
z-index: 2;
padding: 8px
}
.main-content {
height: 100%;
padding: 8px
}
</style>
</head>
<body>
<div class="topnav">This is the navigation</div>
<div class="main-content">This is main-content</div>
</body>
</html>
You can use margin to remove the space between body and stuff inside the body not padding.
body {
margin: 0;
}
In my webpage I have accordion panels which collapse and close. I have set the page height to be specific. However, I want it to be specific from the start, but be able to expand when I open and close the panel, so that I don't have to set the page too be so long with no content. Any ideas about how I go about doing this?
This is only an example I used, which is the reason for the small height currently.
My Current Code:
<!doctype html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<meta charset = "utf-8">
<title>London Tour Guide</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css">
<script src="jquery.js"></script>
<style>
div.container { position: absolute; top: 10px; left: 400px; width: 720px; height: 1300px;
background-color: white; }
div.content {
width: 700px; height: 120px;
background-color: lightblue; padding: 5px; }
button.accordion {
background-color: #eee;
color: #444;
cursor: pointer;
padding: 18px;
width: 100%;
border: none;
text-align: left;
outline: none;
font-size: 15px;
transition: 0.4s;
}
button.accordion.active, button.accordion:hover {
background-color: #ddd;
}
div.panel {
padding: 0 18px;
display: none;
background-color: white;
}
div.panel.show {
display: block;
}
</style>
</head>
<body>
<div class="container">
<div class = "content">
<button class="accordion">Panel</button>
<div class="panel">
Hello
</div>
<button class="accordion">Panel 2</button>
<div class="panel">
Hello
</div>
<script>
var acc = document.getElementsByClassName("accordion");
var i;
for (i = 0; i < acc.length; i++) {
acc[i].onclick = function(){
this.classList.toggle("active");
this.nextElementSibling.classList.toggle("show");
}
}
</script>
</div>
</body>
</html>
If I understand correctly,
you're looking for min-height:1300px instead of height:1300px on div.container
The most robust way without the use of Javascript is to get rid of explicitly setting the height of your containers in CSS - that way the height is automatically going to conform to the total height of your child elements.
If your container is not absolutely positioned, I believe Vlad is Glad's answer with using the CSS property, min-height, will apply.
If your container must be absolutely positioned, you could grab the height of the expanded panel through jQuery in your onClick handler, and add/subtract the height to your container.
I used the following
<body topmargin="0" leftmargin="0" rightmargin="0">
which works only on IE6. I want it to work with firefox and opera.
I attempted the following:
<style type="text/css">
.header {
width: 100%;
background-color: #3B5998;
height: 35px;
margin-top:0;
}
.style1 {
margin-right: 38px;
}
.style2 {
width: 100%;
background-color: #3B5998;
height: 35px;
}
</style>
<div dir="rtl" class="style2" style="width: 100%">
<p align="center"style="width: 92px; height: 32px; font-family: Arial, Helvetica, sans-serif; font-size: 20px; color: #EFF1F6;" class="style1"></p>
</div>
</body>
For start you can use:
<body style="margin:0;padding:0">
Once you study a bit about css, you can change it to:
body {margin:0;padding:0}
in your stylesheet.
Html for content, CSS for style
<body style='margin-top:0;margin-left:0;margin-right:0;'>
Yeah a CSS primer will not hurt here so you can do two things:
1 - within the tags of your html you can open a style tag like this:
<style type="text/css">
body {
margin: 0px;
}
/*
* this is the same as writing
* body { margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px;}
* I'm adding px here for clarity sake but the unit is not really needed if you have 0
* look into em, pt and % for other unit types
* the rules are always clockwise: top, right, bottom, left
*/
</style>
2- the above though will only work on the page you have this code embeded, so if if you wanted to reuse this in 10 files, then you will have to copy it over on all 10 files, and if you wanted to make a change let's say have a margin of 5px instead, you would have to open all those files and make the edit. That's why using an external style sheet is a golden rule in front end coding.
So save the body declaration in a separate file named style.css for example and from your add this to your html instead:
<link rel="stylesheet" type="text/css" href="style.css"/>
Now you can put this in the of all pages that will benefit from these styles and whenever needed to change them you will only need to do so in one place. Hope it helps. Cheers
I hope this will be helpful.. If I understood the problem
html{
background-color:green;
}
body {
position:relative;
left:200px;
background-color:red;
}
div{
position:relative;
left:100px;
width:100px;
height:100px;
background-color:blue;
}
http://jsfiddle.net/6M6ZQ/
<body topmargin="0" leftmargin="0" rightmargin="0">
I'm not sure where you read this, but this is the accepted way of setting CSS styles inline is:
<body style="margin-top: 0px; margin-left: 0px; margin-right: 0px;">
And with a stylesheet:
body
{
margin-top: 0px;
margin-left: 0px;
margin-right: 0px;
}
You need to use css. It's how modern web design gets things done.
This is a basic css walk through.
Your html file would be like:
(really simple html)
<html>
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css" />
</head>
<body>
</body>
<html>
Your css file (mystyle.css) would look like:
body
{
margin-top:0px;
margin-left:0px;
margin-right:0px;
}
Try using CSS.
body {
margin: 0 0 auto 0;
}
The order is clockwise from the top, so top right bottom left.
I would say: (simple zero will work, 0px is a zero ;))
<body style="margin: 0;">
but maybe something overwrites your css. (assigns different style after you ;))
If you use Firefox - check out firebug plugin.
And in Chrome - just right-click on the page and chose "inspect element" in the menu. Find BODY in elements tree and check its properties.
the body element have below styles by default
body {
display: block;
margin: 8px;
}
body: focus {
outline: none;
}
we can override this using
1. inline styles
<body style="margin: 0;">
2. internal styling
<style>
body {
margin: 0;
}
</style>
I'm trying to put together a site that has a welcome-type screen followed by a header/navigation that scrolls to the top of the page and is then fixed, remaining at the top of the page as the user scrolls on. The solution I have works in most browsers, except in the desktop touch version of Chrome I can't stop the header/nav from bouncing around once it reaches the top. I've looked at at least 10 Stack Overflow questions that address this problem, and I've tried a lot of different tutorials and plugins but none of them seem to work for me. I know it's possible because the technique appears on http://laravel.com, and the header/nav is ROCK-SOLID when it reaches the top and becomes fixed. This is what I have now:
html {
height: 100%; }
body {
height: 100%; }
#welcome {
background-color: grey;
height: 100%; }
#header {
background-color: white;
box-shadow: 4px 4px 4px #888888;
height: 90px;
opacity: .93;
position: absolute;
width: 100%; }
#header.fixed {
position: fixed;
top: 0;
width: 100%; }
#nav {
position: absolute;
bottom: 30px;
right: 2%; }
#nav a {
color: black;
letter-spacing: 1px;
line-height: 1.25em;
padding-left: 17px;
text-decoration: none;
text-rendering: optimizelegibility;
text-transform: uppercase; }
#about {
height: 2000px; }
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<section id="welcome"></section>
<header id="header" class="container">
<nav id="nav">
One
Two
Three
Four
</nav>
</header>
<main>
<section id="about" class="container">
</section>
</main>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$(document).scroll(function() {
var top = $(document).scrollTop();
var viewport = $("#welcome").height();
$('#header').toggleClass("fixed", top >= viewport);
});
});
</script>
</body>
May be jquery toggle make it.
$(document).ready(function() {
$(document).scroll(function() {
var top = $(document).scrollTop();
var viewport = $("#welcome").height();
if (top >= viewport ) {
$('#header').addClass("fixed");
} else if ($('#header').hasClass('fixed')) {
$('#header').removeClass('fixed')}
});
});
http://jsfiddle.net/molo4nik11/zvom6o5w/
I think this is working solution.
http://jsfiddle.net/molo4nik11/zvom6o5w/3/
#header {
background-color: white;
box-shadow: 4px 4px 4px #888888;
height: 90px;
opacity: .93;
position: relative;
width: 100%;
}
#header.fixed {
position: fixed;
top: 0;
width: 100%;
}
It has been a long time, and this is no longer an issue, but at the time chrome was not able to keep this header in place without it appearing "jumpy". I was able to fix it by adding
-webkit-transform: translateZ(0);
to the .fixed class. Although this didn't have any bearing on the visual styles that were applied, using the transform property would cause chrome to treat it as a 3d element and devote more resources to it.
As I mentioned before, this doesn't seem to be an issue anymore, and I have since been able to remove this hack without the old problem recurring.