Using nth-child, how would I style the <span class=field-content>Martin McGurk</span> from the following HTML:
<div id="callout" class="owl-carousel">
<p>
<span class=field-content>Good service...</span>
<span>
<span class=field-content>Martin McGurk</span>
</span>
</p>
</div>
I would say, go with:
#callout span .field-content {background: #0cf;}
<div id="callout" class="owl-carousel">
<p>
<span class=field-content>Good service...</span>
<span>
<span class=field-content>Martin McGurk</span>
</span>
</p>
</div>
Or, if you really prefer :nth-child, use:
#callout span:nth-child(2) .field-content {background: #0cf;}
<div id="callout" class="owl-carousel">
<p>
<span class=field-content>Good service...</span>
<span>
<span class=field-content>Martin McGurk</span>
</span>
</p>
</div>
Related
Let's say, my markup looks like this:
<div class="card">
<div class="card__heading">
<div> <!-- used to group contents inside a flexbox for vertical alignment -->
<p><img src="icon-1.svg"> Some text</p>
<p><img src="icon-2.svg"> Some more text</p>
<p><img src="icon-3.svg"> Some more... text</p>
</div>
</div>
<div class="card__body">
<div class="card__tags">
<span class="card__tag">text: some text</span>
<span class="card__tag">text: some text</span>
<span class="card__tag">text: some text</span>
</div>
</div>
</div>
Some of these HTML elements don't need classes, i.e. they don't need any CSS applied. But I'm not sure if that's BEM compliant. Would it be "better" to set a class name for every HTML element nested inside a BEM block? The above code would be written like this:
<div class="card">
<div class="card__heading">
<div class="card__heading-text">
<p class="card__heading-paragraph"><img class="card__heading-icon" src="icon-1.svg"> Some text</p>
<p class="card__heading-paragraph"><img class="card__heading-icon" src="icon-2.svg"> Some more text</p>
<p class="card__heading-paragraph"><img class="card__heading-icon" src="icon-3.svg"> Some more... text</p>
</div>
</div>
<div class="card__body">
<div class="card__tags">
<span class="card__tag">text: <a class="card__tag-link" href="#">some text</a></span>
<span class="card__tag">text: <a class="card__tag-link" href="#">some text</a></span>
<span class="card__tag">text: <a class="card__tag-link" href="#">some text</a></span>
</div>
</div>
</div>
Which one is "more" BEM compliant? Which one is preferred?
I have added 3 glpyhs inside my h3 tag and have applied a style to it however every glyph I add they seem to be moving upwards so they are not in line with each other like this (check link for picture)
This is how I have added the glyphs within the panel.
<div class="col-md-4 column">
<div class="panel panel-default" draggable="true">
<div class="panel-heading panel-backcolour">
<h3 class="panel-title">Panel title<span class="glyphicon glyphicon-trash panel-icons" /><span class="glyphicon glyphicon-trash panel-icons" />
<span class="glyphicon glyphicon-trash panel-icons" /></h3>
</div>
<div class="panel-body">
Panel content
</div>
</div>
</div>
and this is the custom css that I am applying to the panel.
.panel-icons{
float: right;
cursor:pointer;
}
You missed to close your span tags.
Also I should point out, span is not a self closing tag, as you have tried to make use of it.
.panel-icons {
float: right;
cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet" />
<div class="col-md-4 column">
<div class="panel panel-default" draggable="true">
<div class="panel-heading panel-backcolour">
<h3 class="panel-title">Panel title
<span class="glyphicon glyphicon-trash panel-icons"></span>
<span class="glyphicon glyphicon-trash panel-icons"></span>
<span class="glyphicon glyphicon-trash panel-icons"></span>
</h3>
</div>
<div class="panel-body">
Panel content
</div>
</div>
</div>
Correct your markup to have the span properly close like so:
<span class="glyphicon glyphicon-trash panel-icons"></span>
<span class="glyphicon glyphicon-trash panel-icons"></span>
<span class="glyphicon glyphicon-trash panel-icons"></span>
As your code is now, it thinks that each glyphicon is within the previous glyphicon and you haven't properly closed your span tag.
See this codepen link for a working example.
My client would like their company name (the run throughout the US) to come up in a goolge search based on the zip code a user puts in the google. I figured it must be schema.org..I have found a similar site and this is the code source I found:
<!-- Top Bar -->
<div id="top_toolbar" class="clearfix">
<div class="container">
<div class="breadcrumbContainer">
<div class="breadcrumb" itemscope itemtype="http://data-vocabulary.org/Breadcrumb"> <span itemprop="title">TITLE HERE</span> </div>
<div class="breadcrumb" itemscope itemtype="http://data-vocabulary.org/Breadcrumb"> <span> <span itemprop="title">TITLEHERE </span> </span></div>
<div class="breadcrumb" itemscope itemtype="http://data-vocabulary.org/Breadcrumb"> <span> <span itemprop="title">In </span> </span></div>
</div>
</div>
</div>
If I was to google search "Something in 49117" this is the source code:
<div id="top_toolbar" class="clearfix">
<div class="container">
<div class="breadcrumbContainer">
<div class="breadcrumb" itemscope itemtype="http://data-vocabulary.org/Breadcrumb"> <span itemprop="title">TITLEHERE</span> </div>
<div class="breadcrumb" itemscope itemtype="http://data-vocabulary.org/Breadcrumb"> <span> <span itemprop="title">TITLEHERE </span> </span></div>
<div class="breadcrumb" itemscope itemtype="http://data-vocabulary.org/Breadcrumb"> <span> <span itemprop="title">In </span> </span></div>
<div class="breadcrumb" itemscope itemtype="http://data-vocabulary.org/Breadcrumb"> <span> <span itemprop="title">49117 </span> </span></div>
<div class="breadcrumb" itemscope itemtype="http://data-vocabulary.org/Breadcrumb"> <span itemprop="title">Instant Quote</span> </div>
</div>
I would like to know if its possible to move that bar a bit under, the bar is wrapped with a <p> tag.
<div class="span9 well">
<div class="row-fluid">
<div class="row-fluid">
<div class="span2">
<img src="dummy_image.jpg" class="img-polaroid">
</div>
<div class="span7">
<h2>Title</h2>
<p>Texttttttttttttttttt.</p>
<p >
<span class="label label-info">Genre</span>
<span class="label label-warning">
<i class="icon-star"></i>
...<!-- stars -->
</span>
<span class="label label-success">Yes</span> / <span class="label label-important">No</span>
</p>
</div>
</div>
</div>
screen shot of the actual block i wanna change:
You can always name your <p> tag like so:
<p class="bar">
<span class="label label-info">Genre</span>
<span class="label label-warning">
<i class="icon-star"></i>
...<!-- stars -->
</span>
<span class="label label-success">Yes</span> / <span class="label label-important">No</span>
</p>
then use .bar {margin-top: 20px;} in your css code, it's not bad behaviour
Use position:absolute
.row-fluid{position:relative; width:450px; background:red; overflow:auto}
.span2{display:inline; float:left}
.span7{display:inline; }
.row-fluid > p{position:absolute; bottom:0; left:170px}
DEMO
How can I wrap a glyphicon and a word together so that the icon is centered over or under the word. For an example:
<div class="row">
<div class="span4">
<div style="font-size: 60px;">
<i class="icon-camera-retro"></i> </p>
<h1>Photography </h1>
</div>
</div>
<div class="span4">
<div style="font-size: 60px;">
<i class="icon-camera"></i> </p>
<h1>Rentals</h1>
<p></center></p>
</div>
</div>
<div class="span4">
<div style="font-size: 60px;">
<i class="icon-star-empty"></i> </p>
<h1>Dance Media</h1>
<p></center></p>
</div>
If I understand your question correctly, you need to put text-align: center; in the div that contains the text and the icon. Check out this example: http://jsfiddle.net/rahjU/11/