I have a newbie question; I have this code, using framework7.
<div class="list-block">
<ul>
<li>
<a href="" class="external item-content" >
<div id="div1" class="item-media" style="display:block" ><img ></div>
<div class="item-inner">
<div class="item-title-row">
<div class="item-title" ><></div>
</div>
<div class="item-subtitle"></div>
</div></a></li>
</ul>
</div>
The color of the item-title is blue. I want to make it red, bold and override any previous rule? I can't get it done, the CSS code included in the framework is too complicated for me.
i just added style="color: #FFFF00;"
Related
Basically for one of our accessibility requirements, we have to make explicit list markup using role="list" and role="listitem".
One issue I face is trying to do this on a search page with search results. Each search results, however, are wrapped in a 'row' div.
so it's:
<div role="list">
<div class="row">
<a role="listitem"
</div>
<div class="row">
<a role="listitem"></a>
</div>
<div class="row">
<a role="listitem"></a>
</div>
</div>
^ what i want to do.
The screen reader, however, reads out that it's only 1/1 list item. Any way i acn fix this?
Your role="listitem" should go on the "row" <div>. The only children of row="list" that are allowed are listitems.
<div role="list">
<div class="row" role="listitem">
<a></a>
</div>
<div class="row" role="listitem">
<a></a>
</div>
<div class="row" role="listitem">
<a></a>
</div>
</div>
It's probably a silly question, but I don't understand why it doesn't work.
I need to create a bootstrap menu where each item is an image on the left and several lines of text on the right.
I wrote the following HTML for this:
<div class="btn-group">
<ul class="dropdown-menu" style="display: block;">
<li>
<a href="#" class="clearfix">
<div class="pull-left">
<span>My image</span>
</div>
<div class="pull-left">
<div>Text on the right</div>
<div>Second line of text</div>
</div>
</a>
</li>
</ul>
</div>
Link to jsfiddle: https://jsfiddle.net/brucecat5/rr71xmry/
However, width is not calculated properly and the second floated block is moved below the first block.
I don't understand why it happens and what to do to fix this.
P.S. I know I can implement it with display: table-cell, but I just don't understand the reason why my approach doesn't work.
I think problem is how you use dropdown-menu class, try this:
<div class="btn-group">
<ul style="display: block;">
<li>
<a href="#" class="clearfix">
<div class="pull-left">
<img src="smiley.gif" alt="Smiley face" width="42" height="42">
</div>
<div class="pull-right">
<p>Text on the right</p>
<p>Second line of text</p>
</div>
</a>
</li>
</ul>
If you want use a dropdown-menu, you can look an example in this page:
https://www.w3schools.com/bootstrap/bootstrap_button_groups.asp
Hope it helps.
I have a site that uses Bootstrap 3. In that site, I have a list of items. For each item, I want to show an icon. To the right of the icon, I want to show a blurb of text. Currently, I have this working for small amounts of text. However, when my block of text grows, it eventually gets to a point where the text block appears below the icon instead of beside it.
I've created a fiddle to demonstrate the problem here. The code looks like this:
<div class="container">
<div class="row">
<div class="col-md-4">
<ul class="list-inline">
<li>[icon]</li>
<li><div style="background-color:#ccc; padding:16px;">
This is some text that should appear to the right of the icon.
If this text is longer, it should wrap within this box.
</div></li>
</ul>
</div>
</div>
<br />
<div class="row">
<div class="col-md-4">
<ul class="list-inline">
<li>[icon]</li>
<li><div style="background-color:#ccc; padding:16px;">
Shorter blurbs appear beside like it should.
</div></li>
</ul>
</div>
</div>
</div>
Why isn't the second li always appearing to the right of the first li?
Instead of making lielements appearing side to side. Use the existing component of bootstrap Media object(more info here) to make it happen.
Check Demo Here
HTML:
<div class="container">
<div class="row">
<div class="col-sm-4">
<ul class="list-unstyled">
<li>
<div class="media">
<div class="media-left">
<a href="#">
<span class="media-object">
<i class="fa fa-user fa-2x"></i>
</span>
</a>
</div>
<div class="media-body">
<h4 class="media-heading">Media heading</h4> This is some text that should appear to the right of the icon. If this text is longer, it should wrap within this box.
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
I want to change the bg-color of .circle.icon if posts-item is hovered. Any idea how to accomplish that, possibly without Javascript?
<div id="scr1" class="large-6 columns timeline">
<div class="line"></div>
<ul class="posts">
<li class="posts-item">
<div class="circle icon"></div>
<h2 class="posts-item-title">
</h2>
<p class="summary"></p>
</li>
</ul>
</div>
Like so.
.posts-item:hover .circle.icon {
background: green;
}
No jQuery - Everyone's happy :)
<div class="positions">
<div class="main" style="clear: both;">
<div class="mainC">
<a class="news" href="#"><img src="salad.jpg" width="105" alt="salad"/></a>
</div>
</div>
<div class="foot" style="clear: both;">
<h1 class="news">Salad</h1>
</div>
</div>
Is it possible to change the color of the "Salad" link, when the parent "positions" div is rolled over? Thanks in advance for any help.
Use Css psuedo class :hover:
.positions:hover h1.news a
{
color:red;
}
-- SEE EXAMPLE --