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.
Related
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)"
Using bootstrap I created three columns, each containing an image and a caption. Like so:
However, I want it to actually output the content like this:
This is my current code:
<!-- Section 6 -->
<div class="cssSection cssCenter">
<div class="container">
<h2>The Order</h2>
<br>
<p class="cssInformation">Labelled as a religious order, the Knights Templars established a set of rules by which their members would follow.</p>
<br>
<div class="row">
<div class="col-sm-4">
<img class="img-center img-responsive" src="http://placehold.it/400x275">
<br>
<p>The Templars swore to an oath of poverty, chastity, obedience and renounced the world.</p>
</div>
<div class="col-sm-4">
<img class="img-center img-responsive" src="http://placehold.it/400x275">
<br>
<p>The Templars lived within their own community, which meant sleeping in a common dorm, while also eating their meals in union. Lorem ipsum sont dolor sit amet. Lorem ipsum sont dolor sit amet.Lorem ipsum sont dolor sit amet.</p>
</div>
<div class="col-sm-4">
<img class="img-center img-responsive" src="http://placehold.it/400x275">
<br>
<p>The Templars refrained from becoming drunk, gambling and swearing</p>
</div>
</div>
</div>
</div>
And here is the related CSS code:
.cssSection {
padding: 45px 0 30px;
}
.cssCenter {
text-align: center;
}
.cssInformation {
font-size: 18px;
}
What can I adjust within the HTML and or CSS to make the p tags align horizontally, without affecting the images?
Are you sure there is no other css you might have added? I tried your code on jsfiddle (adding bootstrap) and it shows up fine for me.
Here everything is fine in plunker. Please provide your whole html file to help us inspect your issue.
Your code works well in bootstrap3.3.4.
Check your bootstrap version.
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.
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>
Can somebody kindly tell me how to implement and HTML slider in a WordPress theme ? The following are the HTML markups:
<div class="slider">
<div class="camera_wrap">
<div data-src="img/slide-1.jpg">
<div class="camera_caption fadeIn">
<strong>FIRST-RATE TATTOO<br> STUDIO SERVING</strong>
<span>THE MIAMI AREA AND BEYOND.</span>
</div>
</div>
<div data-src="img/slide-2.jpg">
<div class="camera_caption fadeIn">
<strong>the best</strong>
<span>services & prices</span>
</div>
</div>
<div data-src="img/slide-3.jpg">
<div class="camera_caption fadeIn">
<strong>modern</strong>
<span>art technologies</span>
</div>
</div>
</div>
</div>
and
<
div class="list_carousel responsive clearfix">
<ul id="foo">
<li>
<div>
<figure class="img-polaroid"><img alt="" src="img/page1-img5.jpg"></figure>
<div class="caption">
<a class="lead" href="#">Quisque et diam ipsu.</a><br>
<time class="time" datetime="2013-04-24">April 24th, 2013</time>
Mes cuml dia sed in lacus ut eniascet etor ingerto aliiqt es sitet amet eismod ictor ut ligulate ameti dapibus ticdu nt mtsent lusto dolor ltisim comme.
</div>
</div>
</li>
<li>
<div>
<figure class="img-polaroid"><img alt="" src="img/page1-img6.jpg"></figure>
<div class="caption">
<a class="lead" href="#">Phasellus a libero ut.</a><br>
<time class="time" datetime="2013-04-24">April 24th, 2013</time>
Mes cuml dia sed in lacus ut eniascet etor ingerto aliiqt es sitet amet eismod ictor ut ligulate ameti dapibus ticdu nt mtsent lusto dolor ltisim comme.
</div>
</div>
</li>
<li>
<div>
<figure class="img-polaroid"><img alt="" src="img/page1-img5.jpg"></figure>
<div class="caption">
<a class="lead" href="#">Quisque et diam ipsu.</a><br>
<time class="time" datetime="2013-04-24">April 24th, 2013</time>
Mes cuml dia sed in lacus ut eniascet etor ingerto aliiqt es sitet amet eismod ictor ut ligulate ameti dapibus ticdu nt mtsent lusto dolor ltisim comme.
</div>
</div>
</li>
<li>
<div>
<figure class="img-polaroid"><img alt="" src="img/page1-img6.jpg"></figure>
<div class="caption">
<a class="lead" href="#">Phasellus a libero ut.</a><br>
<time class="time" datetime="2013-04-24">April 24th, 2013</time>
Mes cuml dia sed in lacus ut eniascet etor ingerto aliiqt es sitet amet eismod ictor ut ligulate ameti dapibus ticdu nt mtsent lusto dolor ltisim comme.
</div>
</div>
</li>
</ul>
<a id="prev" class="prev" href="#"></a>
<a id="next" class="next" href="#"></a>
</div>
I need to implement these sliders into a WordPress theme. Kindly help!
Regards
Debashis
There are several ways to do this, but I'll only show two:
You can add your html, css etc. to where ever you want it to show. For example you can create a page template that's only for the home page and then set this page as the front page in Wordpress backend.
Or you can create a page template that only shows this slider there. Find out more about page templates here http://codex.wordpress.org/Page_Templates
Like any slider, you will need to include the js or css files to the site. So add your css and js files in the header.php or footer.php files for your theme.
You can install this plugin http://wordpress.org/plugins/advanced-custom-fields/ and create a custom field with the above content. And then add the php snippet to your page template.
But like in the above, you still need to link your js and css files in the header.php or footer.php files of your theme!
But why dont you skip all this hard work, and just use a slider plugin like this one http://wordpress.org/plugins/simple-slider-ssp/
It might not have the same features, but it's a lot more simple!