Firstly, look this fiddle: http://jsfiddle.net/Uuyp8/5/
I need to create block like block in next image in the <aside> block.
Don't pay attention to russian words. It's not the question.
I can create such block with next html structure:
<aside>
<div class='block'>
<div class='header'><h1>Lorem block 2</h1></div>
<div class='content'>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ullamcorper posuere pretium. Mauris vitae pharetra nisl.
</p>
</div>
</div>
<div class='block'>
<div class='header'><h1>Lorem block 1</h1></div>
<div class='content'>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ullamcorper posuere pretium. Mauris vitae pharetra nisl.
</p>
</div>
</div>
</aside>
Questions:
1) is it ok to use new html5 tags like <aside> or <section> with <div> blocks like in my example?
2) how I can create such block only with html5 tags?
3) Do I need to use only html5 tags or it is normal practic to use both html5 tags and old divs?
Divs aren't "old". They still have theire place like <span> and many others.
See here
QUOTE :
“Sorry, can you say that again?”, I hear you ask. Certainly: you can still use <div>! Despite HTML5 bringing us new elements like <article>, <section>, and <aside>, the <div> element still has its place. Let the HTML5 Doctor tell you why.
So you don't have to ban them from your web pages and you should still use them like you are.
Related
I am trying to code a section of a one-page responsive Bootstrap design that has two side-by-side columns of text. The designer wants these two columns to have a max-width, but once it reaches its max, it is no longer centered (as the rest of the content continues to be responsive).
Is there a way around this to still have the two columns of text centered?
Edit: Here is a link to what the code looks like: http://www.bootply.com/119539
Here try this Bootply. Is this what you are looking for?
<div class="row">
<div class="col-lg-12">
<h2 class="center-block">How We Work</h2>
</div>
<div class="col-lg-4 col-lg-offset-2">
<p class="text-justify center-block">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce quis nulla nec lacus condimentum molestie.</p>
</div>
<div class="col-lg-4">
<p class="text-justify center-block">Lorem ipsum dolor sit amet, consectetur adipiscing elit. .</p>
</div>
</div>
h2.center-block{
text-align:center;
}
p.text-justify{
max-width:400px;
}
NOTE: You can use col-lg-offset-2 to shift the div by 2 columns.
I'm using Twitter Bootstrap's media object styling for our user profiles on a social network of sorts. Pretty standard layout: avatar/logo to the left, title and short description to the right (sorry, not enough rep to provide an image, but see jsfiddle below).
Where I'm stuck: I need to include a "follow" button next to the media heading, but I can't figure out how to position it properly to handle a long media heading (the button wraps to the media body).
Suspect I'm heading toward a face-palm moment.
Here's a jsfiddle illustrating both cases.
Here's my HTML:
<div class="row">
<div class="span8 media top-buffer">
<div class="row">
<p class="media-object pull-left span2">
<img class="img-polaroid" src="160x120.jpg">
</p>
<div class="media-body span6">
<h3 class="media-heading">Some Name<i class="icon-circle addToFoo-yes-org"></i> <button class="addToFoo-org btn btn-flat pull-right"><i class="icon-plus-sign"></i> Add to My Foo</button><br />
</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
</div>
</div>
</div>
Note, this is for a prototype and I'm firmly in the n00b category, so pardon my janky markup (particularly the egregious use of the i element).
Add a clearfix class to h3.media-heading.
<h3 class="media-heading clearfix">
I'm new for WordPress. I'm using the_content() to get image and posted text. I need to change the CSS in Text of post.
Html coding is,
<div class="entry-content">
<p>
<a href="http://.../?attachment_id=34#main" rel="attachment wp-att-34">
<img src="http://.../uploads/2013/03/1-1.jpg" alt="1-1" width="960" height="283" class="alignnone size-full wp-image-34">
</a>
</p>
<p>
Lorem ipsum dolor sit amet, consectetuer adnenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt Cras dapibus.
</p>
</div>
What to do?
This could be done in several ways
When you create a new post, add some html element to the text and assign the a class to it and style that class in your style.css
Use inline style.
Or simply just put new rule in css file
.entry-content p{
// your style here
}
Hey, y'all! I am building a site using the Nivo Slider (which I've normally had great success with). But I'm having some issues with this particular usage that I just can't figure out. Any help from you code wizards would be greatly appreciated!
Test site is here.
In Firefox, as usual, the site looks fantastic. Everything works, nothing broken.
In Opera, pretty much the same.
In IE9, however, the slider looks great until it transitions to the next image. The slider uses a float:right property and, in Explorer, each transition causes the image to momentarily jump all the way to the left of the container div. THIS PROBLEM SOLVED. The "float:right" property was only placed on the slider images and not to the slider container, itself. The corrected code now causes both the individual images AND the overall slider container to float to the right.
In Safari, the slider looks great unless you resize the page to anything less than 100% - then, the images do not shrink with the surrounding content.
In Chrome, surprisingly, the thing is all messed up. On first load, the slider doesn't appear. If I reduce the viewing size to 90%, it appears fine including when I size back up to 100%. However, the caption function is not popping out as far as it does on the other browsers (see the site to understand what I mean). THIS PROBLEM SOLVED It turns out that the bullets that control the slides were the problem. Or, more accurately, the div surrounding them was. The div for the .controlNav bullets had a "position:absolute" property that worked fine in all the other browsers but that screwed up Chrome for whatever reason. I eliminated those bullets entirely as they're really not necessary for this particular site. Problem solved. Unfortunately, the methods used have buggered up Safari rendering of the slider completely, so now I have to figure that out.
I have done quite a bit of searching on this topic and have found many problems with the Nivo Slider, particularly in IE, but nothing that exactly relates to what I am experiencing. I suspect that some of the issue is being caused by the float:right property that the Slider typically doesn't get used with (most sites use it in a centered-on-page capacity), but I don't know this for absolute certain.
Here is the slider HTML (there is a metric buttload of CSS for the Nivo Slider so I won't paste it here. You can look at the stylesheets using your browser's developer tools.) :
<div id="header">
<div class="layout-wrapper">
<aside id="slider" class="theme-default">
<div id="nivo-slider" class="nivoSlider slider-underline">
<img src="images/slider-img1.jpg" class="attachment-slider_nivo" title="#slide-1" />
<img src="images/slider-img2.jpg" class="attachment-slider_nivo" title="#slide-2" />
<img src="images/slider-img3.jpg" class="attachment-slider_nivo" title="#slide-3" />
</div>
<!-- end #nivo-slider -->
<div id="slide-1" class="nivo-html-caption" data-position="right">
<span class="slider_title">Tile and Ceramic Cleaning</span>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nunc suscipit. Suspendisse enim arcu, convallis non, cursus sed, dignissim et, est. Aenean semper aliquet libero.</p>
Read more »
</div>
<!-- end #slide-1 -->
<div id="slide-2" class="nivo-html-caption" data-position="left">
<span class="slider_title">Kitchen Cleaning and Sanitizing</span>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nunc suscipit. Suspendisse enim arcu, convallis non, cursus sed, dignissim et, est. Aenean semper aliquet libero.</p>
</div>
<!-- end #slide-2 -->
<div id="slide-3" class="nivo-html-caption" data-position="right">
<span class="slider_title">Full Residential Services!</span>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nunc suscipit. Suspendisse enim arcu, convallis non, cursus sed, dignissim et, est. Aenean semper aliquet libero.</p>
</div>
<!-- end #slide-3 -->
</aside>
<div class="banner-1"></div>
<!-- end #slider -->
</div>
<!-- end .layout-wrapper -->
</div>
<!-- end #header -->
<div class="clear"></div>
I appreciate any and all tips you folks can come up with!
Replace the <aside> tag with a <div> tag. I did that in the chrome inspector tools, and it seemed to work fine after that.
I am using the nivo-slider on 4-5 different websites right now, never seen it use the <aside> tag.
I have the following jquery mobile code:
<div data-role="collapsible">
<h3>I like to read a lot but sometimes I simply can't bring myself to do it</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi iaculis interdum felis, et tempor nunc commodo sit amet. Ut fringilla.
</p></div>
I need the h3 tag to word wrap as opposed to truncating as jquery mobile does by default.
I've tried changing the above h3 tag to:
<h3 style="white-space:normal;">
or adding the following to the style sheet
h3 { white-space:normal; }
or
.h3 { white-space:normal; }
None of which works...any ideas? I could wrap it with line breaks but that's no good as it looks ugly if someone changes the orientation of their phone.
Thanks
Darren
You had the right idea. JQM just does some funky markup and you were targeting the wrong thing in the end.
.ui-collapsible h3 .ui-btn-text{white-space:normal;}