I was expecting my buttons in the header to be rounded, but instead they are coming out square. See the home button in the screenshot:
My CSS:
#main {
text-overflow: ellipsis;
overflow: visible;
white-space: normal;
}
a {
text-decoration: none;
}
.ui-header .ui-title {
overflow: visible !important;
}
.ui-header {
min-height: 40px;
}
The snipped of html declaring the header:
<div data-role="page" id="settings">
<div data-role="header" data-position="fixed">
Home
<h1>App</h1>
</div>
...
I was expecting to see buttons round similar to these:
Any pointers appreciated ...
For rounded corners, I'd expect something like:
#home {
border-radius: 5px;
}
Unfortunately, this is also something that varies between implementation of the CSS, so if this doesn't work, please provide more info on versions of tools you use.
The problem was due to this line in my code:
$('a').buttonMarkup({ corners: false });
Removing that fixed the problem :$
Related
Let's say I have a p and I want to remove/hide the first two letters. Is there any way I can do that with only CSS (no JS)?
Example:
.remove-letters {
/* STYLES-HERE */
}
<p class="remove-letters">yrHello There!</p>
Actually, there is a way to do this in pure css! It uses the ch font-dependent unit.
.remove-letters {
font-family: monospace;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
display:block;
text-indent: -2ch;
font-size: 2em;
}
<html>
<body>
<p class="remove-letters">yrHello There!</p>
</body>
</html>
Unfortunately this works only with monospace fonts and not in older browsers.
Without Javascript you cant achieve this very well. It would be a very hacky solution. With JS would be working like a charm.
let str = "yrHello There!"
console.log(str.substring(2))
I think I found a way to do it...
Example:
.remove-letters {
font-size: 0px;
}
.remove-letters:after {
font-size: 10px;
content: "Hello There!";
}
<p class="remove-letters">yrHello There!</p>
I am creating the nav bar for my website and I want to make a hover state so when you mouse over either the home, work, or contact tag a star appears. Is this possible to add via code or do I need to convert this text to an image to do so. See images for what I created in XD.
navigation with star hover
plan navigation with out star hover
Yeah you can do this pretty easily with CSS like this:
.star {
visibility: hidden;
}
.items:hover .star{
visibility: visible;
}
<div class="items"><span class="star">★</span>hello world</div>
Here is an example with an image used.
.star {
visibility: hidden;
max-width: 20px;
max-height: 20px;
}
.items:hover .star{
visibility: visible;
}
<div class="items">
<img Class="star" src="https://www.mariowiki.com/images/thumb/8/8a/New_Super_Mario_Bros._U_Deluxe_Super_Star.png/1200px-New_Super_Mario_Bros._U_Deluxe_Super_Star.png"/>hello world</div>
elementInQuestion.addEventListener("mouseenter",function(event){
elementInQuestion.innerHTML = "☆" + elementInQuestion.innerHTML;
}, false);
elementInQuestion.addEventListener("mouseleave",function(event){
elementInQuestion.innerHTML = elementInQuestion.innerHTML.slice(1);
}, false);
Just change "elementInQuestion" with your element. You can even make a function to assign the event listeners to each of your nav buttons.
There is a JAVASCRIPT solution which is more efficient.
<html>
<head>
<title>
star appear
</title>
<style type="text/css">
#stardiv
{
height: 16px;
width: 25px;
}
</style>
</head>
<div style="opacity:0;" id="stardiv">☆</div><div onmouseout="document.getElementById('stardiv').style.opacity= '0';" onmouseover="document.getElementById('stardiv').style.opacity= '1';">HOVER ME</div>
</html>
JSFIDDLE:https://jsfiddle.net/Lhobpwq9/
I am having an issue with some CSS within my code.
Using bootstrap I have created a square which is 400px height, and I would like to have text inside there which is centered vertically.
I am using JavaScript to change the text when hovered, the issue here is if the text changes to two lines worth, the CSS then no longer works correctly.
JSfiddle: https://jsfiddle.net/Ljprxkrq/3/ For some reason the Hover does not seem to work in fiddle.
<div class="col-xs-offset-1 col-xs-10 col-sm-offset-0 col-sm-4">
<div class="navigation-links">
<h2><a href="#" id="text-display" class="network"
onmouseover="changeText('More network information here')"
onmouseout="defaultText()">Network</a></h2>
</div>
</div>
.navigation-links {
height: 400px;
}
h2 {
font-family: 'Open Sans', sans-serif;
font-size: 40px;
text-align: center;
-webkit-font-smoothing: antialiased;
}
a {
text-decoration: none;
color: white;
}
a:hover {
color: white;
text-decoration: none;
}
Well, ok, let's start with JSFiddle and Javascript not working.
If you do not specify the wrap setting it defaults to "onLoad". This results with all JavaScript being wrapped in a function run after result has been loaded. All variables are local to this function thus unavailable in the global scope.
Change the wrapping setting to "no wrap" and it'll work:
Source - Screenshot
As for the problem:
Seems like you're using flex already. Why not just use it for vertical alignment as well? Append:
.navigation-links {
display: flex;
align-items: center;
}
JSFiddle
Try this:
.navigation-links {
background: #eee none repeat scroll 0 0;
display: table-cell;
height: 100px;
vertical-align: middle;
}
<div class="col-xs-offset-1 col-xs-10 col-sm-offset-0 col-sm-4">
<div class="navigation-links">
<h2><a href="#" id="text-display" class="network"
onmouseover="changeText('More network information here')"
onmouseout="defaultText()">Network</a></h2>
</div>
</div>
Update:
you can add class vertical-center with navigation-links like class="navigation-links vertical-center"
demo
CSS:
.share {
width: 150px;
height: 20px;
background: #000;
float: right;
white-space: nowrap;
padding-top: 5px;
padding-bottom: 5px;
padding-left: 3px;
background-color:rgba(255, 255, 255, 0.5);
border-bottom-left-radius: 5px;
box-shadow: 0px 0px 10px #888;
vertical-align: top;
}
HTML:
<div class="share">
<div class="fb-like" data-href="http://bronies.info/" data-send="false" data-layout="button_count" data-width="450" data-show-faces="true" style="width:47px; overflow:hidden; top:-3px; left:3px;"></div>
Tweet
<div class="g-plusone" data-size="medium" data-annotation="inline" data-width="300" style="width:32px; overflow:hidden;"></div>
</div>
Chrome, Safari:
Internet Explorer, Firefox, and Opera:
If you can see what I did in my HTML style property, I used top:-3px, and I did this before testing my website out on other browsers (Chrome is my primary web browser). I used top because a quick Google search led me a page instructing me to do so. Now that this solution doesn't work, how would I adjust it to align and work on all web browsers?
My solution is:
.fb-like.fb_iframe_widget span{
vertical-align: top !important;
}
You should remove top:-3px; completely. Because you don't have position:relative;, which is required (something other than static) to activate positioning, then Webkit (Chrome, Safari) is correctly ignoring it, but Internet Explorer, Firefox, and Opera are mistakenly honoring it (-3px shift).
EDIT:
From the comments...
Facebook's script adds a <span> inside your <div> which then triggers a CSS rule they also provide: .fb_iframe_widget span { vertical-align: text-bottom; }. I suggest adding float: left; to all three of your <div> tags so they will not share a common flow (or baseline).
try using top: auto and look at the result, check and see if it is in the same position in all browsers. If it needs to be aligned virtually then use bottom: 3px; (or any appropriate value that suites your need)
do not forget you have to position:relative; to your code
so the final styling for the facebook button should look something like this :
width:47px; overflow:hidden;position:relative; top:auto; bottom:3px; left:3px;
I suggest using display: inline-block; and vertical-align: middle; for container of Facebook button ...
I added vertical-align: text-bottom; to the <span> enclosing each button (to match what Facebook does), and everything lines up perfectly in Chrome, Firefox, and IE. (My spans also have display: inline-block if that matters.)
Try adding this to your "share" div. I don't know how it looks on other browsers but it seems to make things line up in Chrome.
font-size: 0.1px;
I ended up wrapping each button in their own div, and setting the div to
display:inline-block; white-space: nowrap; vertical-align:top;
and then added the following to the facebook specific div:
#facebookButton > div > span {vertical-align:baseline;}
Adding the following style to my css aligned the facebook share button with other social icons.
.fb_iframe_widget{vertical-align:top;}
This is my solution: Wrap each social button by an inline-block element. And each social button has display attribute is block
HTML
<div class="social-share clearfix">
<div class="social-share-item">
<div id="fb-like" class="fb-like" data-href="{url}" data-layout="button_count" data-size="small" data-action="like" data-show-faces="true" data-share="true"></div>
</div>
<div class="social-share-item">
<a class="twitter-share-button" href="https://twitter.com/intent/tweet">Tweet</a>
</div>
<div class="social-share-item">
<div class="g-plus" data-action="share"></div>
</div>
</div>
CSS
.social-share {
display: block;
background: #f9f9f9;
padding: 0.2em 0.4em;
margin-top: 1em;
}
.social-share-item > * {
display: block;
float: left;
}
.social-share-item {
display: inline-block;
}
I was having the same problem with mobile browsers and solved it with the following:
.fb-like span{
vertical-align: initial !important;
}
UPDATE #2: I have solved almost all my issues bar the one major one. With the same structure and CSS IE7/6 displays each a with 100% width of it's container. I need this to no happen. Besides that everything else is fine. Can anyone enlighten me?
UPDATE: Should Look Like This
I have the following html page (detailed below). It simply renders 2 styled buttons from the links. My problem is IE6 & 7 renders it differently than Firefox, Safari, IE8 and Chrome that all render it correctly.
I have been banging my head against the wall for a day now trying to make it work in IE6/7. Can anyone offer advice as to what I am doing wrong?
Thanks
<html>
<head>
<style>
.niw-button {
background: #1f81c0 url(niw-btn-gradient-normal.png) repeat-x;
border: none;
color: #fff;
display: inline-block;
font-weight: bold;
margin-right: 6px;
min-width: 95px;
padding: 2px;
text-decoration: none;
}
.niw-button:hover {
background: #5e698f url(niw-btn-gradient-hover.png) repeat-x;
}
.niw-button > .niw-button-contents {
border: 1px solid #73b1da;
}
.niw-button > .niw-button-contents:hover {
border: 1px solid #99a1bc;
}
.niw-button .niw-button-icon {
background-position: center;
background-repeat: no-repeat;
float: right;
height: 25px;
width: 27px;
}
.niw-button .niw-button-text {
height: 25px;
line-height: 1.5em;
padding-left: 5px;
padding-right: 27px;
text-align: center;
text-transform: uppercase;
}
.right-align {
float:right;
}
.niw-icon-cancel {
background-image: url(niwater_cancelIcon.png);
}
</style>
</head>
<body>
<a class="niw-button right-align" href="#">
<div class="niw-button-contents">
<div class="niw-button-icon niw-icon-cancel"></div>
<div class="niw-button-text">Cancel</div>
</div>
</a>
<a class="niw-button" href="#">
<div class="niw-button-contents">
<div class="niw-button-icon niw-icon-cancel"></div>
<div class="niw-button-text">Cancel</div>
</div>
</a>
</body>
</html>
EDIT: Now that I understand your image:
Just make your <a> elements block elements with display:block and put some kind of span inside of them to hold the icon. Or you could make the whole thing an image...
IE6/7 doesn't support display: inline-block, IE6 doesn't support the child (parent > child) selector. So you probably should look into those points in your css...
Edit: I actually don't get correct rendering in IE8, which is what I address below:
For a start, you should put the <a> elements inside the elements rather than the other way round. Block level elements shouldn't really exist within inline elements. e.g.
<div class="niw-button-contents">
<div class="niw-button-icon niw-icon-cancel"></div>
<div class="niw-button-text"><a class="niw-button right-align" href="#">Cancel</a></div>
</div>
<div class="niw-button-contents">
<div class="niw-button-icon niw-icon-cancel"></div>
<div class="niw-button-text"><a class="niw-button" href="#">Cancel</a></div>
</div>
This fixes the positioning for me but there is a subsequent loss in styling. I haven't tinkered with the CSS to correct that yet but it should be straightforward. Secondly, you have an awful lot of classes to deal with a straightforward issue. Arguably you should only need one class in the outer div to identify what's happening inside, and then your CSS can descend from there.
Just one tip for a resource to the button/link problem in general:
http://mezzoblue.com/archives/2008/09/17/anchor_butto/
I'm actually confused myself. How are they supposed to look? If you don't let us know what you're intending to do, it's very difficult to fix the problem.