I have a predetermined set of items generated by a different page which I can't modify. I want to style the first and last items in the list. The first item is no problem, but because the last item is not the last DIV in the list, I can't figure out how to modify it. Removing the last description DIV, which is also line 15 of this Fiddle http://jsfiddle.net/CeJAS/ achieves what I want, but I can't modify the real HTML - the empty description DIVs are unfortunately part of the markup. Can this be achieved with CSS?
<div class="list">
<div class="title">
Link
</div>
<div class="description"> </div>
<div class="title">
Link
</div>
<div class="description"> </div>
<div class="title">
Link
</div>
<div class="description"> </div>
</div>
After doing a bit of Googling, I've found you can use .list div:nth-last-child(2).
It's also supported by IE 9 and so far 10.
Related
I am having trouble with my css. I am trying to have my contact information, the quote, and my contact form to be in the same row but different columns. And also why is it that my html doesn't all fit on one page, I can scroll to the rigth and there's just empty white space. I figure its because I added -1.23em in my navbars margin; However, I only did this because my navbar was not filling the whole page. Here is a link to my gist and bitballon. Thank you in advance.
https://gist.github.com/bklynbest/a19565b1b5289f045919e76d657848ea
http://sad-goodall-e4f115.bitballoon.com
You have a .row div in the nested directly under the body on line 103 that is causing the page to spread past 100% width
Bootstrap requires a containing element to wrap site contents and
house our grid system. You may choose one of two containers to use in
your projects. Note that, due to padding and more, neither container
is nestable. bootstrap containers
Regarding the contact info your nesting and class names are not correct, you currently have the following:
<div class="container-fluid" id="contact">
<div class="row">
<div class="column">
<div class="col-xs-12 col-md-12">
<div id="quote">...</div>
</div>
<div class="col-lg-4 col-md-4">
<div class="contact">...</div>
</div>
</div>
</div>
</div>
<form>
you will need to change this to follow bootstrap3 grid conventions, something like the following:
<div class="container">
<div class="row" id="contact">
<div class="col-sm-4">
<div id="quote">...</div>
</div>
<div class="col-sm-4">
<div class="contact">...</div>
</div>
<div class="col-sm-4">
<form>
</div>
</div>
</div>
See Bootply for explanation
In my demo above, try to hover on the first box, others get affected. I expect it would be flexible like pinterest layout. I tried overflow and height thing but it doesn't solve my problem.
I wouldn't want to change the markup as it suits my case perfectly.
You'll need to use Bootstrap's column reset element between pairs of boxes, and hide them for mobile:
<div class="row">
<div class="col-lg-6">
<div class="productWrap"></div>
</div>
<div class="col-lg-6">
<div class="productWrap"></div>
</div>
<!-- Add the extra clearfix for only the required viewport -->
<div class="clearfix hidden-xs-block"></div>
<div class="col-lg-6">
<div class="productWrap"></div>
</div>
<div class="col-lg-6">
<div class="productWrap"></div>
</div>
...
</div>
Demo
http://getbootstrap.com/css/#grid-responsive-resets
As was suggested, rows would also work. To the contrary of your comment above, you can use nested rows and not affect your orange box sidebar.
Related to my earlier question
I would like to be able to align the pull-right div to the bottom of a div.
I have the following markup:
<div class="container">
<div class="container">
<div class="footer-images">
<img src="img1">
<div class="pull-right">
<img src="img2">
<img src="img3">
</div>
</div>
</div>
<div class="container">
<div class="copyright">
<p>© Some Company YYYY</p>
</div>
</div>
</div>
I can't figure out how to get the pull-right (or other div classes) to align to the bottom of the footer-images div class.
If I understand the question right. You just have to make sure you float the elements inside it (the tags). But it will only be aligned from the top if you have different image sizes.
Would be much more easier to give you advice if you can show us an image of what you want to do and what does it look like as of now. (Would be better if you also show the css)
So I want to code the content section that displays the title, author and the post itself, the code I'm using is where I want the title on top on one row, then the author on another row and content on another:
<div id="main">
<div class="container">
<div class="title">Title</div>
<div class="author">Author</div>
<div class="content">
Content here
</div>
</div>
</div>
or would span be a better choice like this?
<div id="main">
<div class="container">
<span class="title">Title</span>
<span class="author">Author</span>
<span class="content">
Content here
</span>
</div>
</div>
Or is there a completely different and better way of doing this?
Thank you.
Maybe you should try HTML semantic markup instead of divs?
<section id="main">
<article>
<hgroup>
<h1>Title</h1>
<h2>author</h2>
</hgroup>
<section>
Content
</section>
</article>
</section>
div is grouping content and span is text-level semantics. Of the two examples given, the latter is what you'd be better using:
<div id="main">
<div class="container">
<span class="title">Title</span>
<span class="author">Author</span>
<span class="content">
Content here
</span>
</div>
</div>
Depending on what is contained within .content you may want to use div for that, however.
To properly conform with the specification you should use cite for the title. Equally, if your .content is a quote or extract you should use q or blockquote
<div id="main">
<div class="container">
<cite class="title">Title</cite>
<span class="author">Author</span>
<q class="content">
Content here
</q>
</div>
</div>
It doesn't matter. All of the answers espousing one over the other are fine, but pretty much arbitrary opinions.
In the end, both DIV and SPAN are just generic containers. They don't mean anything in and of themselves.
So, if you have to choose between one of those two, it doesn't matter. However, due to your one requirement:
is where I want the title on top on one row, then the author on another row and content on another
...I'd suggest going with a DIV for no other reason than a div, by default, is a block level element, meaning it will automatically be formatted into individual lines for you.
All that said, everyone that is suggestion that you perhaps consider a more semantic container is spot-on. Would this be better treated as a ol? Or perhaps even just p tags?
The <div> tag should be used for dividing up your page into logical blocks. Here a <span> would be more appropriate.
However as you're displaying text what's wrong with something like:
<div id="main">
<div class="container">
<h2 class="title">Title</h2>
<a class="author">Author</a>
<p class="content">
Content here
</p>
</div>
</div>
After all, they're designed specifically for text.
If the question is only a choice between div and span then the answer is...
span is used for the individual elements, and div for blocks.
The second variant is better than the first.
See Grouping elements: the DIV and SPAN elements for more info.
Here is quote from there:
These elements define content to be inline (SPAN) or block-level (DIV)
(Before I start, yes I have asked a similar question before; unfortunately due to new information being added, the markup has completely changed for the worse, and it's now impossible for me to figure out.)
I have some very ugly markup generated by a Drupal view. Because many of the class names can be used in multiple places, in various levels of the hierarchy (for example, the first view-content/view-grouping/view-grouping-header needs to float left (or at least the contents of it do for the headshot image, but the other view-grouping-header elements need to display to the right of the image), I can't just address the class names; I need to get the full hierarchy. I'm having some trouble with that... (I know someone is going to come along and say, "but you can add classes to fields in Drupal views; why not do that?" Well, you can if you're displaying individual fields, but in this case I need to group by 5 of the 6 fields that are displayed, and when you group by a field you set the field itself to be excluded from the display, which means any custom classes you add to the field are ignored. The only thing you can do stylewise with grouping is apply a single class to all rows, which I've done but doesn't help in this case.)
<div class="view-clone-of-speaker-list">
<div class="view-content">
<div class="view-grouping">
<div class="view-grouping-header">
<div id="file-741" class="file file-image file-image-jpeg
contextual-links-region">
<div class="content">
<img src="johndoe.jpg" width="180" height="180" alt="" />
<!-- this img needs to float left -->
</div>
</div>
</div>
<div class="view-grouping-content">
<div class="view-grouping">
<div class="view-grouping-header">
John Doe
<!-- this view-grouping-header a needs to be styled differently
than the one the next level down (view full profile) -->
</div>
<div class="view-grouping-content">
<div class="view-grouping">
<div class="view-grouping-header">
Freelance consultant
</div>
<div class="view-grouping-content">
<div class="view-grouping">
<div class="view-grouping-header">
Path to Purchase Institute
</div>
<div class="view-grouping-content">
<div class="view-grouping">
<div class="view-grouping-header">
<a href="/speaker/john-doe">
view full profile ></a>
</div>
<div class="view-grouping-content">
<h3>Sessions:</h3>
<div class="views-row views-row-1 views-row-odd views-row-first">
<div class="views-field views-field-title-1">
<span class="field-content">
Keynote Address 2
</span>
</div>
</div>
<div class="views-row views-row-2 views-row-even views-row-last">
<div class="views-field views-field-title-1">
<span class="field-content">
Keynote Address 1
</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
This is what I've tried, for example, to get the outer view-grouping - I want to put a border around the entire thing:
.view-clone-of-speaker-list.div.view-content.div.view-grouping {
border: 1px solid #a8a8a8;
}
But according to Firebug the element is not getting that style.
Here's the desired outcome; I don't need help (I don't think!) with the actual style code; I just need a hand figuring out how to address the correct elements given how frakkin' awfully they're nested.
A period on a selector means "class"; div.myClass means a div with a class of myClass. div.myClass.div.myOtherClass doesn't mean anything.
I think what you want is
div.view-clone-of-speaker-list>div.view-content>div.view-grouping {
border: 1px solid #a8a8a8;
}
That means "a div with a class of view-grouping, which is a child of a div with a class of view-content, which is a child of a div with a class of view-clone-of-speaker-list".