Splitting schema.org Microdata over multiple divs or elements - html

The basic Microdata should be something like:
<div itemscope itemtype="http://schema.org/LocalBusiness">
<a itemprop="url" href="url"><div itemprop="name"><strong>name</strong></div>
</a>
<div itemprop="description">My Description</div>
<div itemprop="address" itemscope itemtype="http://schema.org/PostalAddress">
<span itemprop="streetAddress">My Address</span><br>
<span itemprop="addressLocality">My City</span><br>
<span itemprop="postalCode">My Zip</span><br>
<span itemprop="addressCountry">My Country</span><br>
</div>
</div>
But can I "split" the itemscope along the page?
Giving an extreme example - Say I have the name at the header of a page, the address in the middle of the page, and the country at the footer.
Would it still be a valid / effective to split the data in such a way? or do I always need to use a cluster.
And if a split is valid, how exactly to perform it?
Do I just need to repeat the divs like :
<div itemscope itemtype="http://schema.org/LocalBusiness">
<div itemprop="name"><strong>name</strong></div>
</a>
<div itemprop="description">My Description</div>
</div>
And …
<div itemscope itemtype="http://schema.org/LocalBusiness">
<span itemprop="streetAddress">My Address</span><br>
</div>
And …
<div itemscope itemtype="http://schema.org/LocalBusiness">
<span itemprop="country">My Country</span><br>
</div>
This is my first time considering the use of Microdata - and I just want to make sure that I do it correctly - and I could not see any references to such a "split".
And on the same topic, can I use already existing elements, while adding only the itemscope?
For example:
<div itemscope itemtype="http://schema.org/LocalBusiness">
<h1><div id = "title" class="title" itemprop="name"><strong>name</strong></div></h1>
</a>

The easiest is to have everything in the same hierarchical tree. But you can split things using itemref. See this example from the same document you linked to:
In the following example, the "a" property has the values "1" and "2", in that order, but whether the "a" property comes before the "b" property or not is not important:
<div itemscope>
<p itemprop="a">1</p>
<p itemprop="a">2</p>
<p itemprop="b">test</p>
</div>
Thus, the following is equivalent:
<div itemscope>
<p itemprop="b">test</p>
<p itemprop="a">1</p>
<p itemprop="a">2</p>
</div>
And the following:
<div itemscope itemref="x">
<p itemprop="b">test</p>
<p itemprop="a">2</p>
</div>
<div id="x">
<p itemprop="a">1</p>
</div>

No, a parser will probably see what you're suggesting as 3 separate Local Business entities.
But you can have other text between the various properties in http://schema.org/LocalBusiness as follows:
<div itemscope itemtype="http://schema.org/LocalBusiness">
<a itemprop="url" href="url"><div itemprop="name"><strong>name</strong></div></a>
<p>
This paragraph is not used by schema.org
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam blandit pretium
massa, in consectetur velit. Vivamus aliquam, turpis in pellentesque pulvinar,
lectus diam fermentum velit, quis fermentum arcu turpis in orci. Duis egestas
urna vel velit suscipit mollis. Nulla sed diam massa.
</p>
<div itemprop="description">My Description</div>
</div>

Related

Cant figure out where IMG is

Hi i'm working with a new template, and there's a main image on the landing page.
photo
It's the photo behind the main text. I cannot figure out where the img source is.
I don't see it in the HTML. I just would like to find where this stock image is and swap my new image into its place.
I'm pretty sure the following code is where it should be:
<!-- home -->
<section aria-label="home" class="mainbg" id="home">
<!-- intro -->
<div class="container">
<div class="row">
<div class="overlay-main v-align">
<div class="col-md-10 col-xs-11">
<h1 class="onStep" data-animation="animbouncefall" data-time="300">LOUIS WALLACE CONSTRUCTION</h1>
<div class="onStep" data-animation="fadeInUp" data-time="600" id="slidertext">
<h3 class="main-text">We Build Your Dream</h3>
<h3 class="main-text">We Are Passionate</h3>
<h3 class="main-text">We Are Capable</h3>
</div>
<p class="onStep" data-animation="animbouncefall" data-time="900">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum sit amet eas malesuada leo. Vestibulum eros magna volutpat at facilisis cursus, tempus etex Vestibulum pellentesque et dolor sit amet. Pellentesque eu enim nec nibh convallis suscipit. Morbi interdum dignissim metus dignissim gravida.
</p>
</div>
</div>
</div>
</div>
<!-- intro end -->
</section>
<!-- home end -->
Is there some way it could be in the css?
Edit: when I inspect it, first of all I'm not entirely sure which one is for the image. In any case, when I select what I think is the right element, the styles area don't point to any img tag.
It's more than likely being displayed as a background using the mainbg css class. Can you look in your stylesheet for mainbg?

Using columns to arrange HTML

First off, apologies if my title isn't the most descriptive in the world, I couldn't think of anything else for it.
I'm using a HTML5 theme by HTML5UP called Alpha. The website is intended to be a first point of help for clients using an app my colleagues have developed. I would like to make two columns, one 8 wide and one 4 wide. using bootstrap I would write this...
<div class="col-sm-8">
***CONTENT***
</div>
<div class="col-sm-4">
***CONTENT***
</div>
However this theme uses the following notation:
<div class="row">
<div class="6u 12u(narrower)">
<section class="box special">
<span class="image featured"><img src="images/pic02.jpg" alt="" /></span>
<h3>Sed lorem adipiscing</h3>
<p>Integer volutpat ante et accumsan commophasellus sed aliquam feugiat lorem aliquet ut enim rutrum phasellus iaculis accumsan dolore magna aliquam veroeros.</p>
<ul class="actions">
<li>Learn More</li>
</ul>
</section>
</div>
My issue is, I've tried swapping col-sm-X straight out for Xu but that doesn't work. Can anybody here point me in the right direction?
Thanks,
Ethan.
i try to change column width and it's working..!!
changes:
class="6u 12u(narrower)" --> class="4u 12u(narrower)"
class="6u 12u(narrower)" --> class="8u 12u(narrower)"

changing spaces between rows in Skeleton Framework.

Right now I have two divs using "one-half columns" class.
As you can see here, the bottom card on the left side is still aligned with the one on the bottom right.
I want Pinterest kind of style like this, but I do not know how because they are in different rows.
here is my html code.
<div class="container">
<div class="row">
<div id="cards" class="one-half column" style="margin-top: 25%">
<img class="card-image" src="img/sample.png">
<div class="title">
<h4>Stealth Rats</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus suscipit eu nibh vitae maximus.</p>
</div>
</div>
<div id="cards" class="one-half column" style="margin-top: 25%">
<img class="card-image" src="img/sample.png">
<div class="title">
<h4>Basic Page</h4>
<p>This index.html page is a placeholder with the CSS, font and favicon. It's just waiting for you to add some content! If you need some help hit up the Skeleton documentation.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus suscipit eu nibh vitae maximus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc a mollis arcu.</p>
</div>
</div>
</div>
<div class="row">
<div id="cards" class="one-half column" style="margin-top: 5%">
<img class="card-image" src="img/sample.png">
<h4>Basic Page</h4>
<p>This index.html page is a placeholder with the CSS, font and favicon. It's just waiting for you to add some content! If you need some help hit up the Skeleton documentation.</p>
</div>
<div id="cards" class="one-half column" style="margin-top: 5%">
<img class="card-image" src="img/sample.png">
<h4>Basic Page</h4>
<p>This index.html page is a placeholder with the CSS, font and favicon. It's just waiting for you to add some content! If you need some help hit up the Skeleton documentation.</p>
</div>
Thanks in advance!
You can't do it in plain css unless you work with columns instead of rows (and that breaks content importance).
What you want is Masonry or another javascript alternative.
Also, your html has errors, you cannot use the same id more than once. Change it to class='cards' and if you want to use masonry you have to put every card inside the same div, so in this case, inside the same row.
Then you can call it
$('.row').masonry({
itemSelector: '.cards',
columnWidth: 200 //this is an example.
});
Since masonry is responsive, you can forget about skeleton for this part.

HTML markup adding redundant <a> tags <divs>?

I would like to wrap a thumbnail element into an anchor tag so that the whole element is a clickable link. As far as I can see, my markup looks correct but when I view the page in the browser and inspect the element, several tags are added.
My markup:
<div class="col-xs-6 col-sm-4">
<a class="link" href="page.html">
<div class="thumbnail">
<img alt="200x360" src="img.png">
<div class="caption">
<h3>Thumbnail label</h3>
<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus.</p>
<p>category</p>
</div>
</div>
</a>
</div>
What I am seeing in the element inspector:
<div class="col-xs-6 col-sm-4">
<a class="link" href="page.html"></a>
<div class="thumbnail"> <a class="link" href="page.html">
<img alt="200x360" src="img.png">
</a>
<div class="caption"><a class="link" href="page.html">
<h3>Thumbnail label</h3>
<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam.</p>
</a>
<p><a class="link" href="page.html"></a>category
</p>
</div>
</div>
</div>
I've been staring at my markup for 20 minutes and also shoved it through the validator. I'm not seeing any error. Anybody know what might be going on here?
The problem is you have one <a> element inside another <a> element. That's not allowed. The browser is compensating by adding more <a> elements around the other link target content.
12.2.2 Nested links are illegal
Links and anchors defined by the A element must not be nested; an A element must not contain any other A elements.
http://www.w3.org/TR/html401/struct/links.html#h-12.2.2
If you run it through an html5 validator it says so:
http://html5.validator.nu/
Error: An a start tag seen but an element of the same type was already open.
From line 14, column 5; to line 14, column 54
.</p>↩ <p><a href="#" class="btn btn-primary" role="button">catego

960gs nested grid in combination with responsive

Good evening everyone,
I had a question about using nested grid of 960.gs and responsive webdesign.
Currently I use nested grid and the classes Alpha and Omega, to the left (alpha) and right (omega) margins to reset to 0. This is now hardcoded.
The structure of my grid is as follows:
 <div class="grid_8">
<ul class="recentbox">
<li class="grid_4 projectbox alpha">
<a href="#">
<div class="thumbnails">
<img src="images/portfolio/thumbnails/thumbnail-5.png" alt="Thumbnail">
</div> <! - End. Thumbnails ->
</a>
<div class="description">
<h3> Title Project </h3>
<p> Lorem ipsum dolor sit amet, elit consectetur adipiscing. Phasellus ante quis eros.
</p>
</div> <! - End. Description ->
<div class="tags">
Tags: Photoshop, Illustrator, Graphic Design
</div> <! - End. Tags ->
</li> <! - End li.grid_4 projectbox ->
<li class="grid_4 projectbox">
<a href="#">
<div class="thumbnails">
<img src="images/portfolio/thumbnails/thumbnail-5.png" alt="Thumbnail">
</div> <! - End. Thumbnails ->
</a>
<div class="description">
<h3> Title Project </h3>
<p> Lorem ipsum dolor sit amet, elit consectetur adipiscing. Phasellus ante quis eros.
</p>
</div> <! - End. Description ->
<div class="tags">
Tags: Photoshop, Illustrator, Graphic Design
</div> <! - End. Tags ->
</li> <! - End li.grid_4 projectbox ->
<li class="grid_4 projectbox omega">
<a href="#">
<div class="thumbnails">
<img src="images/portfolio/thumbnails/thumbnail-5.png" alt="Thumbnail">
</div> <! - End. Thumbnails ->
</a>
<div class="description">
<h3> Title Project </h3>
<p> Lorem ipsum dolor sit amet, elit consectetur adipiscing. Phasellus ante quis eros.
</p>
</div> <! - End. Description ->
<div class="tags">
Tags: Photoshop, Illustrator, Graphic Design
</div> <! - End. Tags ->
</li> <! - End li.grid_4 projectbox ->
</ul> <! - End ul ->
My website has a 3 column layout.
What is now the problem is that I want to make my website responsive. For my iPad I design instead of 3 columns only 2. When I make my container the proper width (for iPad), the last div (with the extra class omega) at the bottom of the first div to stand, making this div the wrong property. Fully Sighted classes alpha and omega are hardcoded in code, changed not take them. The middle div in the example above would actually have to get the omega class and the last div (which is now under the first condition), the alpha class should get.
I want the site with responsive media queries and my question is, how do I do to, to alpha and omega to be able to adapt to the grid or how I go about doing this without classes to?
Thank you already!
Greetz, Casper B
PS: Sorry for my English it's not my mother tongue.