I am facing an issue of text getting a bit down in a tag vertically. This issue is particular to Open Sans google font. Arial and other fonts seem to be working fine. Don't know whats the issue.
Please find the jsFiddle here:
https://jsfiddle.net/or7nkyts/3/
First button has Open Sans and 2nd one has Arial font-family.
Any help is appreciated.
<a target="_blank" href="javascript:void(0)" class="btn testClass">
<i style="font-size: 24px; color: #fff; vertical-align: middle;" class="fa fa-address-book-o"></i>
<span style="vertical-align: middle;">Blue Button</span>
</a>
<a target="_blank" style="font-family: Arial;" href="javascript:void(0)" class="btn testClass">
<i style="font-size: 24px; color: #fff; vertical-align: middle;" class="fa fa-address-book-o"></i>
<span style="vertical-align: middle;">Blue Button</span>
</a>
I think that this is because of how the font is made and there is very little you can do about it except manipulate it with css.
If you put a border on the span for the button text you will see that the font itself has a greater margin on the top than on the bottom and that it is actually middle aligned to the icon.
a.testClass span {
border: 1px solid red;
}
Here is a solution that might work better for you:
https://jsfiddle.net/32cLkm5x/2/
Related
I am developing a web in Bootstrap 4 and in the header I have a SVG format logo that has to be responsive (without fixed size) but it is not possible to visualize it unless you leave the property wide at a fixed value in .px some way to be responsive without leaving a fixed value in .px? Because in Chrome, Opera, Safari, Internet explorer leaving the Width property in auto. In all browsers it appears without problem but in Firefox it does not
<div class="col-md-2 col-sm-12 col-xs-12 text-center" style="padding-left: 0px; padding-right: 0px;">
<div style="height: 80px; display: flex; align-items: center;">
<a href="index">
<img style="width: 100% !important; height: auto !important;" src="img/imprentaonline24.svg" alt="imprentaonline24" />
</a>
</div>
</div>
It works fine from if use use directly from url. I'm using FireFox and it works
<div class="col-md-2 col-sm-12 col-xs-12 text-center" style="padding-left: 0px; padding-right: 0px;">
<div style="display: flex; align-items: center;">
<a href="index">
<svg>
<img src="https://www.imprentaonline24.es/img/imprentaonline24.svg"/>
</svg>
</a>
</div>
</div>
I am hoping to have a navigation bar run across the entire screen, with a purple background and a to have a the menu sit in the middle of the bar. Right now I cant get the background color to work.
My Css:
div#main-navigation {
background-color: #AC56B8;
width: 100%;
height: 100px;
}
My Html:
<div class="main-navigation">
<ul id="menu">
<li>HOUSE</li>
<li>BABY</li>
<li>MORE</li>
<li>ABOUT</li>
</ul>
</div>
You are using wrong css selector # is for ids, to select element by class you have to use ., so the first line of your CSS must be: div.main-navigation {
Look for this:
Replace div#main-navigation for div.main-navigation
div.main-navigation {
background-color: #AC56B8;
width: 100%;
height: 100px;
}
<div class="main-navigation">
<ul id="menu">
<li>HOUSE</li>
<li>BABY</li>
<li>MORE</li>
<li>ABOUT</li>
</ul>
</div>
Write . instead of #
# is for id, . is for class.
I've included RDFa information in MathML like so:
<math xmlns="http://www.w3.org/1998/Math/MathML" display="block">
<mi resource="om:Apparent_magnitude">m</mi><mo>-</mo><mi resource="om:Absolute_magnitude">M</mi>
<mo>=</mo>
<mi>log</mi><mo> <!--FUNCTION APPLICATION--> </mo><mi resource="om:Distance">d</mi><mo>+</mo><mn>10</mn>
<mo>=</mo>
<mn>10</mn><mo>-</mo><mn>5</mn><mi>log</mi><mo> <!--FUNCTION APPLICATION--> </mo><mi resource="om:Trigonometric_parallax">ϖ</mi>
</math>
The resource attributes point to concepts in an ontology on units and measures.
When MathJax processes the MathML, I loose the RDFa information.
The generated HTML looks like this:
...
<span class="mrow" id="MathJax-Span-2">
<span class="mi" id="MathJax-Span-3" style="font-family: STIXGeneral-Italic;">m</span>
<span class="mo" id="MathJax-Span-4" style="font-family: STIXGeneral-Regular; padding-left: 0.25em;">−</span>
<span class="mi" id="MathJax-Span-5" style="font-family: STIXGeneral-Italic; padding-left: 0.25em;">M<span style="display: inline-block; overflow: hidden; height: 1px; width: 0.039em;"></span></span>
<span class="mo" id="MathJax-Span-6" style="font-family: STIXGeneral-Regular; padding-left: 0.313em;">=</span>
...
But I would like it to generate (note the resource attributes):
...
<span class="mrow" id="MathJax-Span-2">
<span resource="om:Apparent_magnitude" class="mi" id="MathJax-Span-3" style="font-family: STIXGeneral-Italic;">m</span>
<span class="mo" id="MathJax-Span-4" style="font-family: STIXGeneral-Regular; padding-left: 0.25em;">−</span>
<span resource="om:Absolute_magnitude" class="mi" id="MathJax-Span-5" style="font-family: STIXGeneral-Italic; padding-left: 0.25em;">M<span style="display: inline-block; overflow: hidden; height: 1px; width: 0.039em;"></span></span>
<span class="mo" id="MathJax-Span-6" style="font-family: STIXGeneral-Regular; padding-left: 0.313em;">=</span>
...
Is it possible to insert the RDFa attributes in the corresponding span elements generated by MathJax automatically?
There is currently no built-in way to do this. This could be realized via an extension though.
i am now working for several days now on a header for our project. Everything is ok - but the layout not.
In my Layout I have on the left a logo, in the middle a navbar, and on the right Login/Logout/Register links.
My Problem is, that I can't center the navbar as I want, if I try, then it is only for my display resolution ok and e.g. if I zoom in or out, it is going bad.
This is also very nice, but I don't know how to do it.
I would be really glad if somebody could help me.
Thanks in advance.
HTML
<body>
<div class="row">
<div class="span3">
<img src="/resources/img/logos/bb_logotype_blue_110.png" />
</div>
<div class="span6">
<!-- NavBar -->
<ul id="navbar">
<li>Product</li>
<li>Support</li>
<li>Blog</li>
<li>About</li>
</ul>
</div>
<div class="span3"></div>
<div id="nav-account" class="nav-collapse pull-right">
<ul class="nav">
<li><a id="register" href="/register">Register</a></li>
<li><a id="login" href="/login/form">Login</a></li>
</ul>
</div>
</div>
</div>
<div class="container" style="margin-top:3em">
<h1 id="title"></h1>
... some stuff ...
</div>
CSS
<style>
body {
padding-top: 60px; /* 60px to make the container go all the way to the bottom of the topbar */
}
#navbar li
{
display: inline;
border-right: 2px solid black;
padding-left: 20px;
padding-right: 20px;
font-weight: bold;
font-size: 16pt;
}
#navbar li:last-child
{
border-right: 0;
padding-right: 0;
}
</style>
In bootstrap, if you place elements inside a <container> block, they will be automatically centered and resized to fit in the grid layout. Perhaps that is what you are looking for.
I'm trying to create a small html fragment (a div element) consisted of three parts: a label, textbox, and a button.
Within that div element the label would be on the left (autosized), the button would be on the right (again, autosized) and the textbox should take up all remaining space within the parent div element.
This is what I've tried (assuming I want my div to be 400 pixels wide):
<div style="width:400px">
<div style="float: left">Label</div>
<input style="width:100%"> <!-- doesn't work -->
<button type='button' style='float: right'>Click</button>
</div>
The trouble is, my textbox does not get resized automatically. Add 'width=100%' to the textbox doesn't work.
What would be the way to make it take up all remaining space between the label and the button? Ideally it should be done just by applying some styles, not by introducing new elements.
(I guess the issue isn't related only to div element, but that just happens to be my work scenario.)
Perhaps something like this will be what you want. Yeah I know it's cheating. And yeah, I agree with #Paul re: label, so i swiped his id. :)
EDIT: Obligatory Self-Referencing Demo
Warning: not tested in all browsers.
CSS:
div {
display: table;
width: 400px;
white-space: nowrap;
}
label {
display: table-cell;
padding-right: 3px;
width: 1em;
}
input {
display: table-cell;
width: 100%;
}
span {
display: table-cell;
padding-left: 6px;
width: 1em;
}
HTML:
<div>
<label for="my-very-special-input">Label</label>
<input id="my-very-special-input"/>
<span><button type="button">Click</button></span>
</div>
The only way I could think of making this work was with percents. I enclosed everything in seperate divs (probably uneccesary) and then assigned percentages to each div. Take a look:
<div style="width=400px">
<div style="float:left; width:10%">Label</div>
<div style="float: left; width:70%"><input style="width:100%"></div> <!-- doesn't work -->
<div style="float: right width:20%"><button type='button' style=''>Click</button></div>
It's by no means a perfect solution, but hopefully it will suit your needs to some extent.
Elliott
Does it help if you wrap the <input> in a <div> with overflow: hidden?
<div style="width: 400px;">
<div style="float: left;">Label</div>
<div style="overflow: hidden;">
<input style="width: 100%;">
</div>
<button type="button" style="float: right;">Click</button>
</div>
See xHTML/CSS: How to make inner div get 100% width minus another div width.
And although it’s off-topic, please note that your label should be, well, a <label>.
<div style="width: 400px;">
<label for="my-very-special-input" style="float: left;">Label</label>
<div style="overflow: hidden;">
<input id="my-very-special-input" style="width: 100%;">
</div>
<button type="button" style="float: right;">Click</button>
</div>