On the website that I'm working on, there is a menubar which includes several options with icons next to them. These icons are purely decorative, and don't need alt text as a result.
Unfortunately, the images have styles - a margin set which correctly aligns them in the menubar, which is 30px high.
This is the code for the button itself (the icon is 32x32px, but is resized down to 16x16px):
<a class="button" href="#">
<img src="images/crosshair.png" alt="">
<span>Track and Trace</span>
</a>
The CSS:
.button {
display: block;
padding: 3px 8px;
background: #343434;
text-decoration: none;
color: #ececec;
font-size: 0; // used by inline-block
}
.button img {
display: inline-block;
vertical-align: top; // needed to align the image properly; I couldn't find a better way.
height: 16px;
border: 0;
font-size: 16px;
margin: 4px 6px 4px 0;
}
.button span {
display: inline-block;
vertical-align: top;
font-size: 16px;
}
.button:hover {
background: #2E2E2E;
}
When the image doesn't load, this has the effect of leaving a space because of the margin.
What do other people do when they want to have an icon disappear completely if it can't be loaded?
You could make use of the "onerror" attribute of the the "img" element to call a function that sets display: none on the outer "a" element.
See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img
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>
Style is same but inside form button size and outside form button size is not same. Outside form button text-content apply extra padding around it. Same issue with a tag. Why this is happening? How to solve it? Also for button user agent stylesheet override my font. How to fix it?
#import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght#400;700&display=swap');
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
body,
html {
font-family: 'Noto Sans JP', sans-serif;
font-size: 16px;
color: #333;
}
.container {
margin: 30px auto;
padding: 25px;
border: 1.5px solid #e6e6e6;
box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.15);
border-radius: 6px;
}
a {
text-decoration: none;
}
.btn {
background-color: #fff;
font-size: 0.9em;
font-weight: 700;
padding: 10px 22px;
border-radius: 5px;
}
.btn--orange {
color: #e99d0f;
border: 1px solid #e99d0f;
}
.btn--red {
color: #ff2727;
border: 1px solid #ff2727;
}
.section-info {
width: 60%;
}
.section-info img {
width: 100%;
margin-top: 10px;
}
.section-info__nav {
display: -webkit-box;
display: flex;
margin-top: 10px;
}
.section-info a {
margin-right: 10px;
}
<section class="container section-info">
<div class="section-info__nav">
Edit
<button class="btn btn--red">Delete</button>
<form action="#" method="POST">
<button class="btn btn--red">Delete</button>
</form>
</div>
</section>
In the first look, it could be a bit confusing but if you look at the style inheritance with more attention you will find out a little difference between them.
Lets get into it step by step
As we can see there is display: flex; attribute within the provided style.
.section-info__nav {
display: -webkit-box;
display: flex;
margin-top: 10px;
}
As we know flex will only affect the direct children of a div, so here what we got:
Edit
<button class="btn btn--red">Delete</button>
<form action="#" method="POST">
...
</form>
There are three direct children to the provided div (a, button, form). The other button within the form won't take effect of the flex display since the form itself got display block by default.
Why this is happening at all?
As we know flex display in the default situation will stretch the content to match the exact height (There is 44px available in section-info__nav, so each button height with display flex will be 44px). But when we got a display block, all items with this kind of display will put in the document just by their normal form and size, so since the button class is:
.btn {
background-color: #fff;
font-size: 0.9em;
font-weight: 700;
padding: 10px 22px;
border-radius: 5px;
}
the sum of the padding, border, and font-size will be 34px (10px lower than actually available height in the div). So the button will add at the beginning of div and in comparison with other buttons, it will look likes a dumb.
NOTE: In order to prevent items from fitting the entire available space in your div you can control them by align-items attribute. But in your particular case, since <a> don't have a default line-height attribute you should add specific line-height attribute to your .btn class in order to align all of your items properly.
How to fix this?
Simply add flex display to your form like this:
form {
display: flex;
}
because your form is not flex.you should just add cod below in your form css:
display: flex;
I have the following code. It's a simplified code of a responsive design: In a certain screen size I want to show only the icon (blue - via ::before) but not the text.
When I try to hide the mail address via font-size: 0 (there will be an icon in the ::before) - the header grows in height.
Sure I could use max-height - but is there a cleaner solution?
Fiddle: https://jsfiddle.net/xs2wre4r/
<div class="header">
<span class="store-contact-email">
info#example.com
</span>
</div>
<div class="header">
<span class="store-contact-email">
<a class="hide" href="mailto:info#example.com">info#example.com</a>
</span>
</div>
Left .header frame is computed = 25px
Right .header frame is computed = 30px
.header {
float: left;
}
.header .store-contact-email a:before {
line-height: 18px;
vertical-align: -36%;
padding-right: 5px;
background-color: blue;
width: 30px;
display: inline-block;
}
.header .store-contact-email a:before {
content: "x";
}
.store-contact-email {
border: 1px solid red;
}
.store-contact-email a {
font-size: 18px;
}
.store-contact-email a.hide {
font-size: 0px;
}
The problem is with the font sizes of the ::before blocks.
Since the second one has a font size of 0 and a line height of 18, it will be vertically positioned around the baseline, with 9px above and 9px below. The first one (with the normal font size) will be positioned normally (depending on the exact font), with, say, 14px above and 4px below.
(You also have vertical-align on the ::before, but that doesn't change the situation; it moves both ::before blocks 6.48 pixels down.)
So since the second one is located 5px lower than the first one, the bottom of the bounding box will be pushed down by 5px.
To illustrate,
span {
font-size: 18px;
border: 1px solid red;
background: rgba(255, 255, 0, .4);
}
span::before {
line-height: 18px;
vertical-align: -36%;
border: 1px solid blue;
background: rgba(0, 255, 255, .4);
width: 30px;
display: inline-block;
content: "x";
}
span.hide {
font-size: 0;
}
<span>visible</span>
<span class="hide">invisible</span>
Solution: don't use the font-size:0 trick.
You can set font-size of ::before, as it's inheriting parent font-size.
.header .store-contact-email a:before {
content: "x";
font-size: 18px;
}
Or you can use display or visibility, just avoid :before to inherit that property.
wrap the text with span and hide the span
<div class="header">
<span class="store-contact-email">
<a class="hide" href="mailto:info#example.com"><span>info#example.com</span></a>
</span>
</div>
.store-contact-email a.hide span {
display:none;
}
Better to:-
(1) nest the text info#example.com inside another span, which will display:none under a breakpoint; or
(2) put the icon on .store-contact-email:before instead of .store-contact-email a:before.
The reason is that browsers often enforce a minimum font size for accessibility purposes.
I can't figure out what is causing the uneven spacing that you see in the image http://i.imgur.com/AZoXzYf.png (can't embed images yet ... sorry)
which comes from http://playclassicsnake.com/Scores. My relevant CSS is
.page-btn { background: #19FF19; color: #FFF; border: 0; border: 3px solid transparent; }
.page-btn.cur-page { border-color: #FFF; cursor: pointer; }
.page-btn + .page-btn { margin-left: 5px; }
and I've inspected the elements to make sure there's nothing fishy. What's the deal?
You have a new line character in your HTML just after your first button:
<button class="page-btn cur-page">1</button>
<button class="page-btn">2</button><button class="page-btn">3</button>
Make it all in 1 line and it will start to work without any extra spaces:
<button class="page-btn cur-page">1</button><button class="page-btn">2</button><button class="page-btn">3</button>
Your CSS is perfectly fine and doesn't need to be altered as mentioned by others..
Hi now try to this css
#page-btns-holder {
width: 80%;
margin-top: 12px;
font-size: 0;
}
div#page-btns-holder * {
font-size: 14px;
}
.page-btn {
background: #19FF19;
color: #FFF;
border: 0;
border: 3px solid transparent;
display: inline-block;
vertical-align: top;
font-size: 14px;
}
Define your btn display inline-block and remove space to inline-block element define your patent font-size:0; and child define font-size:14px; as like this i give you example
Remove Whitespace Between Inline-Block Elements
Try to make the font-size of the parent content 0, also try setting letter-spacing to 0.
Problem
I am working on a project to theme a website, but I am not allowed to change the HTML or JavaScript. I can only update the CSS stylesheet and add/update images.
Requrements
I need to style a h3 tag to have an
underline/border after the content.
This h3 will be used multiple times
on the page, so the conent length can
vary
The solution needs to be
cross-browser (IE 6/7/8, FF 3, &
Safari)
Sample Code
<div class="a">
<div class="b"><!-- etc --></div>
<div class="c">
<h3>Sample Text To Have Line Afterwards</h3>
<ul><!-- etc --></ul>
<p class="d"><!-- etc --></p>
</div>
</div>
Sample Output
Sample Text to Have Line Afterwards ______________________________________
Another Example __________________________________________________________
And Yet Another Example __________________________________________________
Notes
I think #sample:after { content: "__________"; } option wouldn't work since that would only be the correct length for one of the tags
I tried a background-image, but if it gave me problems if I gave it one with a large width
Using text-indent didn't see to give me the effect I was looking for
I tried a combination of border-bottom and text-decoration: none, but that didn't seem to work either
Any ideas would be much appreciated!
This will work if class 'c' is always the parent of the h3...
.c {
position: relative;
margin-top: 25px;
border-top: 1px solid #000;
padding: 0px;
}
h3 {
font-size:20px;
margin-top: 0px;
position: absolute;
top: -18px;
background: #fff;
}
It lets the container have the border, then uses absolute positioning to move the h3 over it, and the background color lets it blot out the portion of c's border that it's covering.
try attaching a background image to class c of a repeating underline, then add a background color to the h3 to match the background of the container. I believe that you would have to float the h3 left in order to get the width to collapse. does that make sense?
.c {
background: #ffffff url(underline.gif) left 20px repeat-x;
}
.c h3 {
margin: 0;
padding: 0 0 2px 0;
float: left;
font-size: 20px;
background: #ffffff;
}
.c h3 { display: inline; background-color: white; margin: 0; padding: 0; line-height: 1em; }
.c ul { margin-top: -1px; border-top: 1px solid; padding-top: 1em; /* simulate margin with padding */ }
http://besh.dwich.cz/tmp/h3.html
H3 {
border: 1px solid red;
border-width: 0 0 1px 0;
text-indent: -60px;
}
You need to know the width of the text, but works pretty well.
The only solution I've imagined so far is to make a PNG or GIF image, with 1px height and a very large width (depends on your project, could be like 1x2000px), and do something like this:
h3#main-title { background: url(line.png) no-repeat bottom XYZem; }
where the XYZ you'd set manually, for each title, in 'em' units. But I can't figure out a 100% dynamic solution for this one, without using JS or adding extra markup.
this worked for me
div.c
{
background-image:url(line.gif);background-repeat:repeat-x;width:100%;height:20px;
}
div.c h3
{
height:20px;background-color:white;display:inline;
}
you make the div the width of your content
then you set the background of the h3 to the background of your page. this will then overlap the background imageof the full div. You might want to play with background positioning depending on your image
Can you pad content in the UL tags? If so, this might work:
h3 { display: inline; margin: 0; padding: 0 10px 0 0; float: left;}
ul { display: inline; border-bottom: 1px solid black; }
check source code of: http://nonlinear.cc/lab/friends/elijahmanor.html
then again i have NO IDEA how to control the end of the line.
Assuming that you're working with dynamic content, the best I could suggest is to accept graceful degradation and use a mix of great_llama and Bohdan Ganicky
Imagine:
A long title that will wrap to two lines___________________
and leave you like this in great_llama's solution
and nothing appearing at all with Bohdan Ganicky's solution if ul isn't immediate preceded by ul.
Solution:
.c h3 { display: inline; background-color: white; margin: 0; padding: 0; line-height: 1em; }
.c + * { margin-top: -1px; border-top: 1px solid; padding-top: 1em; /* simulate margin with padding */ }
We care about IE6, but accept that this is an aesthetic touch and IE6 users will not suffer. If you can't get the designer to accept this AND you can't alter the HTML, then do something else (before you find another job ;))
Here's a better answer:
.c {
background: url('line.png') repeat-x 0 20px;
}
H3 {
background-color: white;
display: inline;
position: relative;
top: 1px;
}
Use a small, 1px height, couple px wide image as your underline and occlude it with a background color on your H3.
h3:after {
content: '___________';
}