Consider the following jQuery Mobile markup:
<div data-role="collapsible">
<h3 style="white-space:normal">This heading is not
wrapping even after "white-space:normal" style is applied</h3>
<p>This content is wrapping without any problems</p>
</div>
The heading should wrap due to the style "white-space:normal", but it is not happening.
Why this is so?
What can I do to wrap the heading?
As of version 1.4.3, you now need to do something like this in your CSS:
h3 .ui-btn{white-space:normal !important;}
I had this issue, and it was driving me crazy because all the examples online were for older versions of jQuery Mobile, and apparently the good people at jQuery Mobile changed up their class names over time.
...............................................................
Used to this
word-break:break-all
as like this
h3{
word-break:break-all;
}
The actual text of the h3, after jquerymobile had its ways, is not directly inside the h3 tag. The answer is to use the css on the class ui-btn-text. So if you want to implement it for buttons made from h3 tags:
<style>
h3 .ui-btn-text{ white-space:normal; word-break:break-all; }
</style>
The h3 tag's html after jquerymobile had loaded looks something like this:
<h3 class="ui-collapsible-heading ui-collapsible-heading-collapsed">
<a href="#" ...>
<span class="ui-btn-inner">
<span class="ui-btn-text">The actual h3 text
<span class="ui-collapsible-heading-status"> click to expand contents</span>
</span>
<span class="ui-icon ui-icon-arrow-d ui-icon-shadow"> </span>
</span>
</a>
</h3>
Related
I have my profile image and below it I want to place my name and a few things about me. I don't know what to use for the image div or if I even need a div for it. Are the h1 and p elements used properly?
Snippet
<div class="profile">
<div><img src="profile_image.jpg"></div>
<h1>first last</h1>
<p>Coffee snob.</p>
</div>
Full Body HTML
<body>
<div class="page">
<div class="profile">
<div><img src="profile_image.jpg"></div>
<h1>first last</h1>
<p>Coffee snob.</p>
</div>
<div class="sites">
<ul>
<li><img src=""> <img src=""></li>
</ul>
</div>
</div>
</body>
The rest of the site are just app icons taking to my social media sites. There's no other content. My site also doesn't have a header or footer. Not sure if my profile class should be considered the header at this point for good SEO.
You do not need to put the div around the image. Just style it to display: block (img defaults to display: inline)
<div class="profile">
<img style="display: block" src="profile_image.jpg">
<h1>first last</h1>
<p>Coffee snob.</p>
</div>
Otherwise, the rest of the code is perfectly fine.
It does depend of what exactly you want to do with it but if I understand your question.
You don't need divs for your image just set up different image classes in your CSS.
.image1
{
width:100px;
height:100px;
}
Then your HTML would look like
<img src="profile_image.jpg" class="image1">
Check out http://www.w3schools.com/css/css_align.asp for more information about how to actually set up alignments in your CSS
It might be worth using a div to style your text into a block or format it to look nice, etc. But you don't need to do it
http://www.w3schools.com/tags/tag_div.asp for div styling .
And finally abit of personal experience, spend an hour or 2 looking through W3Schools CSS section and learning the basics of styling it's a great way to learn the basic tools you need to work with CSS and make your pages look good !
Edit styling text
<h1>first last</h1>
<p>Coffee snob.</p>
so first you could style them in your css as the elements they are
h1
{
text-align:left;
padding-left: 10px;
text-decoration: underline;
}
p
{
text-align: right;
}
Doing thing your HTML would look exactly as it is you wouldn't have to change anything. Obviously this is something you can only do once for all <p> and <h1> content and every time you use those tags without specifying a class for them it'll look exactly like whatever the above CSS is.
The other option is to do what I suggested with the image and give them a unique class.
p.body
{
text-align: right;
}
Here you'll need to add class to <p> jsut like you did for image which will look like
<p class="body">Coffee snob.</p>
Hope that helps !
I have a list of calendar events. The html looks like this:
<li data-id="1">
<a href="#calendar-item/1">
<div class="calendar" style="">
<div class="calendar-header"></div>
<div class="calendar-month">Dec</div>
<div class="calendar-day">11</div>
</div>
<p>Parents Association Non-Uniform Day</p>
<span class="chevron"></span>
</a>
</li>
I have given the list item padding, but it is ignoring the content of the div tag, see the image:
Here is the jsfiddle.
works in firefox for me but you defenitely need to clear your float. The easiest way to do that is using overflow: hidden on the list item so it takes the space of the floating icon and wraps its padding around that instead of just the text next to it
Try this my be slow your problem
CSS
give flot:left in below class
li p:nth-of-type(1) {float:left;}
And give flot:left in below class
li{float:left;}
I have an anchor link which has an image and two spans of text, a title and a tagline with different colors, and i want them to change differently when hovering the link.
<style>
span.title {color: #666;}
span.tagline {color: #aaa;}
</style>
<a class="button" href="http://www.link.com" target="_blank">
<div style="display:block">
<img src="images/button.png">
<span class="title">TITLE</span><br>
<span class="tagline">tagline</span>
</div>
</a>
I wonder if it's possible to use something like:
<style>
a.button:hover span.title {color: #000;}
a.button:hover span.tagline {color: #2ae;}
</style>
Yes thats possible. Psuedo class :hover doesn't have to be for the last element in the selector.
Live Demo: http://jsfiddle.net/H35rf/
For future reference its easier/quicker to try this out for yourself in jsFiddle before asking questions.
There is a good example about using css nth-of-type selector http://codepen.io/mnafricano/pen/ltKvy, but when I run the example myself, I can't make it work. Can somebody point out what goes wrong in using the nth-of-type
The html is
<h1 class='logo'>Google</h1>
, and css is
h1.logo span:nth-of-type(1){
color:#0089ab;
}
h1.logo span:nth-of-type(2){
color:#d91821;
}
h1.logo span:nth-of-type(3){
color:#ffac05;
}
h1.logo span:nth-of-type(4){
color:#0089ab;
}
h1.logo span:nth-of-type(5){
color:#88c406;
}
h1.logo span:nth-of-type(6){
color:#d91821;
}
The CSS here works, the trick is that there is some Javascript on that page which adds a <span> wrapper around each of the letters in "Google".
The CSS specifically is looking for the nth span inside of the h1 with class "logo".
If you directly take the HTML and CSS, but not the JS the CSS rules will never match.
If you inspect the h1, you'll see the following:
<h1 class="logo">
<span class="char1">G</span>
<span class="char2">o</span>
<span class="char3">o</span>
<span class="char4">g</span>
<span class="char5">l</span>
<span class="char6">e</span>
</h1>
If you try that HTML instead, it should work as you expect.
Here's a JSFiddle that may help.
http://healthybodyguru.com
If you load the site and wait 3 seconds you'll see the attentionGrabber bar appear in the header. It has shortcodes to add the social buttons (FB, Twitter, G+1), but for some reason the Google +1 button is too high.
I've tried adding custom CSS to lower it by adding margin/padding to the top but that didn't make a difference.
Any ideas what CSS I can use to make it line up with the other social buttons?
Thanks!
Try setting:
#___plusone_0 {
font-size: default; !important
}
Override inline CSS styles with !important.
The solution was to add:
#attentionGrabberWrap .plusoneBtn iframe{
margin-bottom: -3px !important;
}
I got help from the plugin creator :)
try putting a span tag around the google +1 button and pad that top.
<span style="padding-top:5px;">[shortcode]</span>
I don't know if you tried this with custom css but if not give it a shot and see what happens. a style tag in the html should override any styling that the stylesheet is giving the element.
As you can see I like divs and not spans. I've always gotten better results from divs than spans when css is playing around.
<div id="attentionGrabber">
<div id="centeredPart" style="width: 575px; margin:0 auto">
<div style="float:left;" class="facebookBtn">
...like code....
</div>
<div style="float:left;" class="twitterBtn" >
...twitter code...
</div>
<div style="float:left;" class="plusoneBtn">
...+1 code...
</div>
<div style="float:left;" class="linkToForums">
Check out our new forums:
<a class="link" href="http://healthybodyguru.com/forum/">go!</a>
</div>
<div style="clear:both"></div>
</div>
<div id="closeAttentionGrabber"></div>
</div>
I just put an invisible letter behind mine. A bit hacky but it worked for me.
<br><div class="g-plusone" data-annotation="none"></div><span style="font-size:33px;opacity:0;">G</span>