I'm using (☰) and it appears on computer even when I reduce browsers width but when I check it from my mobile browser it doesn't appear, why is that? and how to show it? Is there is another way to create or use something like this icon that would work on mobile phones?
Try using this instead:
≡
mobile browsers are more able to use this unicode character! Hope it helps
just create this hamburger with css and html
HTML:
.hamburger-icon {
margin: 0;
padding: 19px 16px;
display: inline-block;
position: absolute;
top: 0;
left: 0;
}
.hamburger-icon span {
width: 40px;
background-color: #000;
height: 5px;
display: block;
margin-bottom: 6px;
}
.hamburger-icon span:last-child {
margin-bottom:0px;
}
<label class="hamburger-icon">
<span> </span>
<span> </span>
<span> </span>
</label
Related
I have some HTML generated from a text editor macro. The output looks something like this:
<div class='source-block'>
<div class="src-container">
<pre class="src bash">sudo apt update</pre>
</div>
<button class='copyBtn' name=btn_e320edcae3214004ba6339711d50024a>copy</button>
</div>
The only CSS I currently have applied to any of these elements so far is on the pre:
pre {
padding: 8pt;
overflow: auto;
margin: 1.2em;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
}
pre.src {
position: relative;
overflow: auto;
padding-top: 1.2em;
}
I am trying to place my copyBtn directly to the right of the <pre>. Because of the way this text editor macro works, I cannot put the button inside the src-container, which is "automagically" generated. However, I can move the button before or after the src-container div.
Can I achieve this with CSS? I've tried some stuff using float with :last-child and z-index but no success... Is this even possible given the macro limitation (i.e., I cannot easily place HTML inside this src-container class)?
Thanks!
You can use flexbox to position the flow of the child element within the source-block (parent). You can use this to put them next to each other and position the vertical position with align-items: center;
More about flexbox here: https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Flexbox
Can I use Flexbox (browser support):
https://caniuse.com/#feat=flexbox
/* changed CSS */
.source-block {
display: flex;
align-items: center;
align-content:flex-start;
}
/* provided CSS*/
pre {
padding: 8pt;
overflow: auto;
margin: 1.2em;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
}
pre.src {
position: relative;
overflow: auto;
padding-top: 1.2em;
}
/* misc styling */
.copyBtn {
margin-top: 2px;
}
<div class="source-block">
<div class="src-container">
<pre class="src bash">sudo apt update</pre>
</div>
<button class='copyBtn' name=btn_e320edcae3214004ba6339711d50024a>copy</button>
</div>
Set all the class named src-container.
<style>
.src-container {
dispay:inline;
}
</style>
Or, set the single button.
button[name="******"] {
position: absolute;
}
Easiest solution: move the button before the .src-container and float it.
.copyBtn {
float: right;
}
Second solution: don't need to move the button, just position it absolutely, adjusting the top position to where you see fit. Only requirement is making sure the element that contains all these (typically the body) should have position set (usually so, but not always).
.copyBtn {
position: absolute;
top: 10px; right: 10px;
}
There are more advanced techniques, like auto aligning the button, but as your layout is clearly known, this should do enough for your purpose.
A simple solution would be to use float: left on the src-container to make the button go to the right of it. You could also use float:right on the copyBtn. These make the block elements go next to each other.
pre {
padding: 8pt;
overflow: auto;
margin: 1.2em;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
}
pre.src {
position: relative;
overflow: auto;
padding-top: 1.2em;
}
.src-container {
float: left
}
<div class='source-block'>
<div class="src-container">
<pre class="src bash">sudo apt update</pre>
</div>
<button class='copyBtn' name=btn_e320edcae3214004ba6339711d50024a>copy</button>
</div>
I created multi-line-padded text based on Matthew Pennell's solution (codepen by CSS Tricks). In Chrome all looks fine, but in Firefox height of span elements bigger than height of their ancestor. If I adjust vertical padding for Firefox, in Chrome will be same problem, and vice versa.
Why it happens? What the real technical reasons of this problem?
HTML Code:
<div class="padded-multiline">
<h1>
<strong>How do I add padding to subsequent lines of an inline text element?</strong>
</h1>
</div>
CSS Code:
:root {
font-family: Arial, sans-serif;
font-size: 20px;
}
.padded-multiline {
line-height: 1.3;
padding: 2px 0;
border-left: 20px solid #c0c;
width: 400px;
margin: 20px auto;
}
.padded-multiline h1 {
background-color: #c0c;
padding: 4px 0;
color: #fff;
display: inline;
margin: 0;
}
.padded-multiline h1 strong {
position: relative;
left: -10px;
}
Setting a line-height: 1; on strong will fix the problem also read my comment.
Chrome and Firefox seems to use different text layout system.
In Chrome it will floor the line-height attribute and Firefox seems to use the correct one.
To achieve the same effect for title, just use only the outline.
H1 does not need strong.
.padded-multiline {
line-height: 1.3;
padding: 2px 0;
width: 400px;
margin: 20px auto;
}
.padded-multiline h1 {
background-color: #c0c;
padding:1px;
color: #fff;
display: inline;
outline: 10px solid #c0c;
margin: 0;
font-size:16px;
}
<div class="padded-multiline">
<h1>How do I add padding to subsequent lines of an inline text element?</h1>
</div>
Here is codepen: http://codepen.io/anon/pen/vgRvjM
If you need exactly visual (that means less purple space from top and bottom, you can use for example border from after and before):
.padded-multiline:before{
content:'';
display:block;
border:5px solid #fff;
position:relative;
left:-10px;
top:-3px;
}
.padded-multiline:after{
content:'';
display:block;
border:5px solid #fff;
position:relative;
left:-10px;
bottom:-3px;
}
Codepen for this solution: http://codepen.io/anon/pen/QdmzxK
Unfortunately, there isn't a full and clean crossbrowser workaround. Because different UAs render text different, height of each textline may be taller a bit (or vice verca). So, I create a solution based on SCSS calculations of required box' sizes, and hide artefacts via overflow property.
Here is my solution, if you meet the same problem: http://codepen.io/ifiri/pen/ygEeeL
HTML:
<p class="multiline-text">
<span class="multiline-text__wrapper multiline-text__wrapper--outer">
<span class="multiline-text__wrapper multiline-text__wrapper--left">
<span class="multiline-text__wrapper multiline-text__wrapper--right">Multiline Padded text, which looks great on all browsers. No artefacts, no hacks, all clear and flexy, all alignment support. Change SCSS variables for see how it works.</span>
</span>
</span>
</p>
SCSS:
/*
Variables
*/
$base-line-height: 1.75;
$base-font-size: 1.25em;
$multiline-padding-base: ($base-line-height / 2) * 1em;
$multiline-padding-horizontal: $multiline-padding-base;
$multiline-padding-vertical: $multiline-padding-base - (1em / 2);
$multiline-bg-color: #a5555a;
$multiline-font-color: #fff;
/*
= Snippet Styles
This code is required
*/
.multiline-text {
color: $multiline-font-color;
padding: 0px $multiline-padding-horizontal;
// hide line-height artefacts
overflow: hidden;
position: relative;
}
.multiline-text__wrapper {
background-color: $multiline-bg-color;
padding: $multiline-padding-vertical 0px;
}
.multiline-text__wrapper--outer {
// Inner padding between text lines
line-height: $base-line-height;
}
.multiline-text__wrapper--left {
position: relative;
left: -($multiline-padding-horizontal);
}
.multiline-text__wrapper--right {
position: relative;
right: -($multiline-padding-horizontal / 2);
}
When you hover over the paragraph text in JS Fiddle the image gets covered with the background. Using z-index everywhere I could think of doesn't have any effect. (I left the useless z-index stuff in there so show you what I tried.) I also tried pointer-events: none; in various places.
I also tried this type of thing elm1:hover elm2{}, but that didn't help. I'm new to CSS and I'm applying what I have searched and found.
Edit: The problem: on hover background color covers image
Markup:
<div id="col2-middle" class="three-cols-middle three-cols">
<a href="About.php#how-we-work- projects">
<h1 class="h-big-font">Specific Projects</h1>
<img class="col-img" src="3dplotCroppedWithFinancial.png" alt="3dplot">
<p class="p-on-white">
XXXXXXXX XXXXXXXXXX XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX XXXXXXXXXXXXXXXXXXX XXXXXXXXXXXXXXXXXXXX XXXXXXXXXXXXXXXXX XXXXXXXXXXXXXXXXX hover here to cover img XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
<br/>
<br/>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
</p>
</a>
</div>
css:
div.three-cols {
float: left;
width: 29.33%;
position: relative;
left: 70.67%;
overflow: auto;
padding: 1% 1% 1% 1%;
min-width: 200px;
z-index:-1;
}
.three-cols a {
position: relative;
text-decoration: none;
color: #000;
}
.three-cols a p:hover {
background-color: #ecebeb;
}
.col-img {
float: left;
padding: 4%;
z-index: 1;
}
.three-cols h1 {
margin-bottom: 2%;
text-align: center;
}
.three-cols p {
padding: 0.5% 0 3% 0;
z-index: -1;
}
p {
word-wrap: break-word;
color: #000;
margin: 0;
padding: 10px 20px;
font-size: 16px;
}
Here is my demo:
http://jsfiddle.net/pxD33/
PS - needs to be responsive and solution all in CSS and HTML.
<a> is by default an inline-level element. Once you set display: block to it, it fixes the issue.
.three-cols a {
display: block;
position: relative;
text-decoration: none;
color: #000;
}
http://jsfiddle.net/teddyrised/pxD33/2/
p/s: You don't need z-index for your case. You can safely remove all of them.
Anything you use a z-index with has to also have a position attribute.
I hope this helps!
You can get rid of the z-indexes, and then change
.three-cols a p:hover {
background-color: #ecebeb;
}
to
.three-cols:hover {
background-color: #ecebeb;
}
Updated fiddle: http://jsfiddle.net/pxD33/1/
updated fiddle: Fiddle
just change anchor's display to block:
.three-cols a {
display:block;
position: relative;
text-decoration: none;
color: #000;
}
and give hover class to a not p:
.three-cols a:hover {
background-color: #ecebeb;
}
As #Terry said, setting display: block on your three-cols a element should do the trick.
If you want to have a "free hanging" picture on the left of your text, you could also use a media object.
Simply add the following rules
display: block;
overflow: hidden;
to col-img and three-cols p.
You can read more about the media object here.
I'm experiencing a very frustrating problem with my CSS and IE9 and maybe even Chrome on MacOS.
I have an ul of four images in a container #categories {width: 960px}.
Each img (li) is contained in a box .catBox {width: 220px; float: left; margin: 20px 25px 10px 0px}.
I took away the right margin on the last image with .catBox:last-child {margin-right: 0px;}.
Basically, what I am trying to do is justify the four images across the 960px width container. This renders fine in Chrome, Safari, FF, and IE9 on my local computer and Chrome, Safari and FF work fine remotely from my Windows machine.
In IE when I test remotely it pushes the last image to the next line. ALSO, when testing in Chrome on a Mac it does the same thing.
Here is my math: 220px * 4 images = 880px. 3 margins (last one removed) at 25px = 75px. 75 + 880 = 955px. This should give me a 5px "buffer" in any of these browsers. Can someone please help? Am I thinking about this incorrectly?
Thanks in advance for your help.
HTML
<div id="categories">
<ul>
<li class="catBox"><img src="img/3mmwpolytongue22mm.jpg" alt=""><div class="caption"><h2>Stone</h2></div>
</li>
<li class="catBox"><img src="img/4g5.5m12ws.JPG" alt=""><div class="caption"><h2>Wood</h2></div></li>
<li class="catBox"><img src="img/5mmsnowflakeobsidianlabretA_01.JPG" alt=""><div class="caption"><h2>Teflon & Polymer</h2></div></li>
<li class="catBox"><img src="img/13mmblueindianearrings1.jpg" alt=""><div class="caption"><h2>Custom</h2></div></li>
</ul>
</div>
CSS
#categories {
width: 960px;
height: 240px;
}
.catBox {
position: relative;
display: inline;
overflow: hidden;
width: 220px;
margin: 20px 25px 10px 0px;
float: left;
z-index: -999;
}
.catBox:last-child {
margin-right: 0px;
}
.caption {
position: absolute;
top: 190px;
width: 220px;
height: 30px;
background-color: #333;
-webkit-opacity: .5;
-moz-opacity: .5;
-ms-opacity: .5;
text-align: center;
z-index: 999;
padding: 0px;
}
.caption h2 {
color: #fff;
}
Remove all whitespace between tags. It can interfere with pixel-precise layouts.
I don't see any problem. You should use tab to do whitespaces and no the space key. Here you have the JSFiddle, tested in FF, Chrome and Safari.
http://jsfiddle.net/PwkAW/
I'm not exactly sure why you're seeing the behavior that you're describing - do you know for a fact that ALL your CSS is exactly the same on the remote server? If I had to guess, there is another rule that is affecting your li's. Can you share the remote server link?
Also, your markup and CSS could be greatly simplified. I'm not saying it will fix what you're seeing, but it would at least remove some variables in the situation. You could have:
<ul id="categories">
<li>
<img src="img/3mmwpolytongue22mm.jpg" alt="" />
<h2>Stone</h2>
</li>
<li>
<img src="img/4g5.5m12ws.JPG" alt="" />
<h2>Wood</h2>
</li>
<li>
<img src="img/5mmsnowflakeobsidianlabretA_01.JPG" alt="" />
<h2>Teflon & Polymer</h2>
</li>
<li>
<img src="img/13mmblueindianearrings1.jpg" alt="">
<h2>Custom</h2>
</li>
</ul>
Then your CSS could look like this:
#categories {
width: 960px;
height: 240px;
}
#categories li {
position: relative;
display: inline;
overflow: hidden;
width: 220px;
margin: 20px 25px 10px 0px;
float: left;
z-index: -999;
}
#categories li:last-child {
margin-right: 0px;
}
#categories h2 {
position: absolute;
top: 190px;
width: 220px;
height: 30px;
background-color: #333;
-webkit-opacity: .5;
-moz-opacity: .5;
-ms-opacity: .5;
text-align: center;
z-index: 999;
padding: 0px;
color: #fff;
}
Actually, in refactoring the CSS, I did notice an issue - this rule:
catBox:last-child
Will not work the way you expect. The last-child rule, at least in my experience, doesn't work when applied to classes as part of the selector. It seems to work only on straight up elements - like #categories li:last-child. So, it may not removing the right margin as you expect.
There is some text whose formatting I would like to render in HTML. Here is an image:
Note the gray lines with the bullet points and the paragraph numbers. The bullets should be centered on the page and the numbers should be justified right.
I've been trying to think of how to do this in HTML and am coming up blank. How would you capture this formatting?
You can use the :before and :after psuedo-elements to great effect here:
http://jsfiddle.net/yNnv4/1/
This will work in all modern browsers and IE8+. If IE7 support is required, this answer is not for you :)
#container {
counter-reset: nums;
}
p {
position: relative;
margin: 21px 0;
}
p:before {
content: '\2022 \2022';
font-size: 2em;
position: absolute;
top: -8px;
left: 0;
line-height: 1px;
color: #888;
width: 100%;
text-align: center
}
p:after {
content: counter(nums);
counter-increment: nums;
font-size: 1.5em;
position: absolute;
top: -8px;
right: 0;
line-height: 1px;
color: #888;
font-family: sans-serif
}
About the counter properties:
https://developer.mozilla.org/en/CSS_Counters
http://www.w3.org/TR/CSS21/syndata.html#counter
http://www.w3.org/TR/CSS21/generate.html#propdef-counter-increment
It's not possible to (automatically) increment the bullets.
However, it can be done with some dubious repetition:
http://jsfiddle.net/N4txk/1/
p:before { content: '\2022' }
p+p:before { content: '\2022 \2022' }
p+p+p:before { content: '\2022 \2022 \2022' }
/* .... */
(alternatively, :nth-child can be repeated in the same way: http://jsfiddle.net/N4txk/ - but it won't work in IE8; there will only be two bullets)
There is an upper limit on the number of bullets it would be sensible to have, so I think it would be acceptable to copy and paste that as many times as required.
How about something like this?
http://jsfiddle.net/6eTCf/
<div class="separator">
* <div class="page_number">1</div>
</div>
.separator{
margin: 5px 0 5px 0;
color:gray;
position:relative;
text-align: center;
}
.page_number{
position:absolute;
right: 3px;
top: 0;
}
I would float the number right and center the remaining contents (the bullet points). If you give the remaining contents an equal left and right margin larger than the numbers are wide, the contents will be centered.
I would wrap the whole thing in a div, then use relative/absolute positioning between the wrapper and the paragraph number div to get the numbers on the right-hand side like that.
Here's a fiddle showing how to do it.
There are a couple ways I can think of.
Add a <div> between the paragraphs, then add two <p>'s: <p class="dot"></p> and <p class="pnum">1</p>.
Style the <div> to the width of the the paragraphs, and set in the CSS the following:
.dot{ text-align: center; }
.pnum{ float: right; }
There are several ways I can think of:
Float + absolute position (I'll let the purists explain this one)
Old style table (I'll explain this since it's the easiest):
If the total width of the area is, say, 300px
<table><tr>
<td width="30"></td>
<td width="240" align="center">bullets</td>
<td width="30" align="right">number</td>
</tr></table>
Many people prefer using pure CSS, but I like my tables, they just work for me
`#container {
counter-reset: nums;
}
p {
position: relative;
margin: 21px 0;
}
p:before {
content: '\2022 \2022';
font-size: 2em;
position: absolute;
top: -8px;
left: 0;
line-height: 1px;``
color: #888;
width: 100%;
text-align: center
}
p:after {
content: counter(nums);
counter-increment: nums;
font-size: 1.5em;
position: absolute;
top: -8px;
right: 0;
line-height: 1px;
color: #888;
font-family: sans-serif
}`