I have the following HTML:
pre {}
div.uncovered {
background-color: red;
}
<!doctype html>
<html>
<head>
<title>Line numbering test</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<pre>
<div class="uncovered"><code>def f(a, b):</code></div>
<div><code> return a+b</code></div>
</pre>
</body>
</html>
I need to have div elements because I would like the background color to span the width of my entire browser window. However, the div element also adds whitespace between the code elements, which I do not want. I tried adjusting the margins and padding of the div element in my CSS to 0, but this had no effect. I also tried playing around with the white-space property of the div, some of the options (like nowrap) would remove the whitespace, but would also remove the spaces before my return statement, which is also not desirable.
I don't understand why div is adding this whitespace. Div is a block element and following the box model, all whitespace should be accounted for by either the margin or padding. Why is this happening, and how I can fix it?
Pre can contain phrasing content i.e. not divs - you need to put the pre inside the divs
You need to reset all the elements (you can limit yourself to pre, code and div if needed
Here the <pre> is enough so we can remove the <code>
* { margin:0; padding:0;}
div.uncovered {
background-color: red;
}
<!doctype html>
<html>
<head>
<title>Line numbering test</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="uncovered"><pre>def f(a, b):</pre></div>
<div><pre> return a+b</pre></div>
</body>
</html>
Perhaps better alternative
We can have the code tag AND assign white-space: pre to it. Then we have semantic and visual consistency
* { margin:0; padding:0;}
code { display:block; white-space: pre;}
code.uncovered {
background-color: red;
}
<code class="uncovered">def f(a, b):</code>
<code> if a < b:
return a+b
else:
return b-a</code>
Please do not put nothing inside a CSS selector properties, e.g.:
pre {}
Next, negative padding values will not work, but margins will:
.box {
position: absolute;
width: 50px;
height: 50px;
padding: -20px; /* Will not work */
margin: -20px;
font-size: 8px;
background: #f1f1f1;
text-align: center;
}
<div class="box">You may not be able to see this box</div>
Finally, you can clean and fix the code.
div.uncovered {
background-color: red;
}
code {
margin: 0 !important;
padding: 0;
white-space: auto;
}
<!doctype html>
<html>
<head>
<title>Line numbering test</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<pre>
<div class="uncovered"><code>def f(a, b):</code></div>
<code> return a+b</code>
</pre>
</body>
</html>
In HTML avoid using more than one space because HTML will ignore the rest. I replaced (whitespace), with the unicode alternative .
You can also apply display: block; + white-space: pre; and only use the <code> tag to achieve a similar result:
code {
display: block;
white-space: pre;
/* for more space between lines */
/* margin-bottom: 10px; */
}
code.uncovered {
background-color: red;
}
<!DOCTYPE html>
<html>
<body>
<code class="uncovered">def f(a, b):</code>
<code> if a > b:</code>
<code> return a - b</code>
<code> else:</code>
<code> return a + b</code>
</body>
</html>
Related
A button inside the legend of a fieldset is not clickable when the fieldset is a flexbox, this only happens in mobile Safari:
* {
box-sizing: border-box;
}
fieldset {
display: flex;
}
legend {
width: 100%;
}
button {
width: 100%;
font-size: 2rem;
}
button:hover {
background: red;
}
<!DOCTYPE html>
<html>
<head>
<title>Parcel Sandbox</title>
<meta charset="UTF-8" />
</head>
<body>
<fieldset class="col" data-un="u_SkwBump">
<legend>
<button>Click</button>
</legend>
</fieldset>
<script src="src/index.js"></script>
</body>
</html>
Here is also a CodeSandbox, since the snippet is hard to get running on mobile. Any ideas what could be causing this?
I found this flexbug, but I don't think that's the issue here, the flexbox works well on the fieldset as you can see, the columns are displayed side by side (at least on my phone). Just the button not being clickable.
New to HTML. During a book exercise, I was commenting some code using Notepad++ editor and I noticed that when I commented above a segment, that the rendering in the browser is changed (I thought HTML comments do not affect the rendering at all).
What I am attempting to do is simply change a block color to yellow within a black border using classes and the "div" element. When I comment, the block becomes white, instead of yellow (which it appears WITHOUT the comment). I again, restate that the ONLY thing I change is the comment to cause this discrepancy Can someone explain to me what is happening/what I am doing wrong? Thank you.
(This is the code that works: it changes my box to yellow)
<html>
<head>
<meta charset= utf-8>
<title>div padding border margin test 1</title>
</head>
<style>
.box1{
border-style: solid;
border-color: black;
border-width: 3em;
text-align: center;
}
.div-box-yellow{
background-color: yellow;
}
</style>
<body>
<div class="box1 div-box-yellow"><p>hello</p></div>
</body>
</html>
(This is the commented code that nullifies my yellow box color )
<DOCTYPE! html>
<html>
<head>
<meta charset= utf-8>
<title>div padding border margin test 1</title>
</head>
<style>
.box1{
border-style: solid;
border-color: black;
border-width: 3em;
text-align: center;
}
<!--comment-->
.div-box-yellow{
background-color: yellow;}
</style>
<body>
<div class="box1 div-box-yellow"><p>hello</p></div>
</body>
</html>
You are writing the comment in the CSS style tag which needs /* instead of <!-- for block comments. Using the <style> is basically like a css file rather than a html file.
<html>
<head>
<meta charset= utf-8>
<title>div padding border margin test 1</title>
</head>
<style>
.box1{
border-style: solid;
border-color: black;
border-width: 3em;
text-align: center;
}
/* how to block comment css comment */
.div-box-yellow{
background-color: yellow;}
</style>
<body>
<!-- how to block comment html comment -->
<div class="box1 div-box-yellow"><p>hello</p></div>
</body>
</html>
I am trying to give the date a margin of 15px between the bottom of the header and the text itself, but it doesn't move no matter what I tried.
HTML:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<link type="text/css" rel="stylesheet" href="stylesheet.css"/>
<script src="myscripts.js"></script>
<title>The Impertus ยท Understand the News</title>
</head>
<body>
<div id="Preheader">
<img src="images/masthead.png">
<div class ="ph" id="hd"></div>
<p class="ph">May 14, 2016</p>
</div>
</body>
</html>
CSS:
#import url('https://fonts.googleapis.com/css?family=Oswald');
html, body {
background-color: #E1D4C0;
margin: 0 0 0 0;
}
.ph {
display: inline-block;
margin-bottom: 15px;
}
#Preheader {
height: 150px;
width:100%;
background-color: #104386;
font-family: Oswald;
color: #F5EDE3;
}
Created Fiddle here: https://jsfiddle.net/fhkh6ae0/
Add .ph { vertical-align:15px; }
See https://jsfiddle.net/fhkh6ae0/2/
Try
.ph {
padding-bottom: 15px;
}
I think your issue lies in your html elements display property.
I see you are using this for the .ph class:
display: inline-block;
In order for your elements to align next to each other, but I think what you are trying to achieve here is possible by applying a float to your #hd and .ph elements:
float: left;
Here is some detailed information on CSS Floats by CSS-Tricks. The method you are using can be a good thing to do in a lot of specific situations, but for your specific case, I think this is the right path to take.
Here is a Fiddle for you.
You can see I changed some things and I added new things. One is the float property I am referencing above, and I have added an overflow: hidden property to the main container #Preheader , this is a fix for floating elements that try to escape their position or break your layout in bits. Remember the last one.
Just add a padding in #Preheader and it will be okay. take a look https://jsfiddle.net/fhkh6ae0/3/
#Preheader {
height: 150px;
width:100%;
background-color: #104386;
font-family: Oswald;
color: #F5EDE3;
padding-bottom:15px; /*added*/
}
I need to set text is normal in div tag:
._div
{
text-decoration:none;
}
<i>italic<div class="_div">need to unitalic</div></i>
But it's not works. How can I do this?
I think you are looking for
._div
{
font-style: normal;
}
Edit: (comments) Since you can't override the line-through of the s tag you can make it look like you are overriding it
<!DOCTYPE html>
<html>
<body>
<style>
s {display: inline-block; position: relative; width: 100%;}
s ._div
{
text-decoration:none ;
position: absolute;
display: inline-block;
margin-left: 5px;
}
</style>
<s>line-through <span class="_div">need to un-line-through</span></s>
</body>
</html>
you will need to adjust this to your layout (e.g width)
if you use s tag u need add
<style>
s{
text-decoration : none !important;
}
</style>
Try this.
._italics {
font-style:italic;
}
<span class="_italics">italic</span> <div> need to unitalic </div>
If you want a striked text change the contents of class to
text-decoration:line-through
I'd like to make color change when hovering h1 as the code shown below.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
<style>
h1 {color:#aef;font-size: 14em;line-height: 0.1;}
h1:hover {color: #ff9224;}
</style>
</head>
<body>
<h1>More</h1>
</body>
</html>
(The code is also in JS Bin.)
However, I want the color change when hovering on letters only, like, in the picture, the letter area below the green line. I had tried line-height and height to very small values, but both didn't take effect.
Should I change something else? Or just use p to replace h1 for convenience?
try this snippet i created if it helps
.border {
overflow: hidden;
}
h1 {
color: #aef;
font-size: 14em;
line-height: 163px;
margin: 0;
}
h1:hover {
color: #ff9224;
}
<div class="border">
<h1>More</h1>
</div>