I think this should be quite simple, but I just can't get it to work. In ASP.NET MVC I have a list of items like this:
<div id="FilmListContent" class="row">
<div class="span12">
<ul class="thumbnails">
#foreach (var film in Model.Films)
{
<li class="span4">
<div class="thumbnail">
<a href="#Url.Action("Details", "Films", new { id = film.ID })">
<img src="#(String.Format("../../Content/Uploads/{0}.jpg", new object[] { FileUpload.CheckImageExists(Server.MapPath("~/Content/Uploads/"), film.ID) ? "Image_Film_" + film.ID : "NoImage" }))" alt="#film.Title image" />
<span>
#film.Title (#film.Year, #film.MediaType_Name) </span></a>
</div>
</li>
}
</ul>
</div>
</div>
Generates a nice list with 3 items per row, but when the #film.Title etc. content wraps to the next line I get an empty position on the next line. Like this:
I've tried display: table-cell, vertical align text-bottom etc, but I can't get it to work. At the moment I have removed all css on the thumbnails. What css can I use to get 3 items per row no matter the size? Or do I need to fix the size?
This is caused by the varying height of the thumbnails. clear:left / clear:both will work but the boxes will still not be the same height (which is a minor detail).
Also, if doing responsive layouts, putting a clear after every three thumbnails will mess things up.
Another solution is to ensure the height of the contents inside the thumbnail. There are many ways to do this. In this example:
1) Either have an overflow:hidden with a text-overflow: ellipsis and an optional title attribute on the span with the full text.
2) Set a height on the variant text that allows two lines (or more) of text to wrap (and even then most likely a overflow: hidden)
Basically, you need to manage the height yourself and ensure that each box will have the same height.
Assuming you are using float: left to lay out the items, you can insert an element with clear: both after each set of three items to ensure that each line is positioned completely below the previous one.
Related
So, I'm attempting to make my own website (Yeah, I finally sucked it up and started doing markup, sigh) - problem I'm having is I'm trying to center a button, and it's offset a little. Without the <center> it's all the way to the left.
Also tried :
style="align-items:center"
<div id="form-container" style="align-items:center;">
<div>
<fieldset>
<center><input class="button0" value="Install Redux" type="button" /></center>
</fieldset>
</div>
</div>
You just have to put <center> before your <div> and close it after </div>.
Like this:
<center>
<div id="form-container" style="align-items:center;">
<div>
<fieldset>
<input class="button0" value="Install Redux" type="button" />
</fieldset>
</div>
</div>
</center>
I've also made a CodePen and a JSFiddle for you.
Try text-align:center on the parent, or use left:0;top:0;position:relative;webkitTransform:translate3d(-50%,0%,0%); where parent doesn't have position:static (the default)
I would also recommend checking out Bootstrap because it has a nice grid layout that lets you define which 12ths of the page you want columns to lay in, simply by defining classes like .btn-default or .nav or in your case class="col-xs-12" inside that other column
They also have really nice styles for forms and input buttons etc. (see video on my example site below)
Try resizing your browser while looking at their examples. Pretty much, you define class="col-xs-12" if you want it to appear as 12/12 width of the row on extra small (mobile) and LARGER devices, and you can mix them class="col-xs-12 col-md-6" so it will split the row on larger (tablet) size devices. It's the number 1 repository on GitHub, and only takes about 30 minutes to read through the Grid Layout and search around for "Nav" and "Button" elements.
I recently made a quick site http://neaumusic.github.io, feel free to check it out, and good luck
Two ways:
1) Set margin-left: auto; AND margin-right: auto; to the containing div OR
2) Set display:flex; AND justify-content:center;to the parent container.
Google flex box for a little more information, its very useful for layout once you get the hang of it.
As stated in the comments, the center tag is no longer supported.
What about if you try #form-container { text-align: center; } ? It will center all children, including button.
I would definitely recommend using flexbox, the only issue being ie8/9 support.
It really makes layout so much easier and you don't have to create very specific, often arbitrary margins to get your stuff to align nicely, particularly vertical alignment.
Your alignment options are split between the container and the items. It does row and column layout too.
Here is a link I used to get me started.
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
I am working on an add to cart button to something I am making.
Currently, I hardcoded a fixed margin space of:
margin: 10px 20px;
From the text Lab and + ADD ME!
As you can see, it works, but when I have classes of differing number of letters, the alignment is all messed up.
So I looked into having a Linux-style/C-style tab separator string that could allow me to denote a fixed separator length so all my elements would align vertically, using left-padding: 5em.
However, that did not work.
Could someone tell me how I could align all my add to cart buttons?
A sample of the HTML:
<div
class="margin-class-type"
>
<h4>
<div class="title-container">{{ $type }}
<a
href="javascript:void(0)"
class="btn btn-material-yellow-600 btn-xs btn-raised cart-button mdi-content-add-circle-outline">
Add Me!
</a>
</div>
</h4>
<table
class="table table-striped"
>
<th>Class</th>
<th>Section</th>
<th>CRN</th>
<th>Day</th>
<th>Time</th>
<th>Professor</th>
<th>Enroll</th>
<th>Max Enroll</th>
<th>Credits</th>
Depending on how your code is structured, there are several ways to accomplish this.
1) If your titles are not dynamic (you know that they will always be "Lab" and "Lecture") you could set a width on the title element's container that is equal to the width of your widest title with a little extra. Then, you place your "add to cart" button inside the container holding the title and position it absolute so it will line-up vertically always.
Example:
<div class="title-container"><h2>Lab</h2>Add Me</div>
<!-- YOUR TABLE -->
<div class="title-container"><h2>Lecture</h2>Add Me</div>
<!-- YOUR TABLE -->
<style>
div.title-container{width:300px;position:relative;}
a.cart-button{display:block;position:absolute;top:0;right:0;}
</style>
2) If the titles will be dynamic, you can use a bit of Javascript to loop through each and take the widest element, setting that as fixed-width for all others. This is a bit more involved and based on your question I am guessing it would be overkill.
Good luck!
You can add a div for lab and add me and for "button" float : right
or
you might create a div
and inside that 2 inner divs.
the left inner div should be of specific length (max length you expecting for a label,e.g.lab)
all inner divs are float left in this case
or any alternative way
basically you need to fix the positions anyway.
Thanks
Sam
Put your titles and buttons inside an inline element and give them a fixed width large enough to accommodate. No example of code or anything but you don't appear to need one Hope it fixes your problem.
One of my website pages is current messed up. I'm having a hard time getting the biographies in for my crew of lovable misfits. Here is the webpage:
http://www.sampsonvision.com/about/
The code for this webpage can be found in the about folder in the website files inside this zip folder here:
https://drive.google.com/file/d/0B3ZPyNRv7C3hemJERHZYVWFtSDg/edit?usp=sharing
May you please help me fix the divs so that the pictures are all in a nice little column and the text is directly next to the image, telling the user all about that particular crew member? I don't want the elements going all over the place like you see in the sampsonvision.com page above.
Add an empty div to the end of each section with the class "clear".
<div class="jordansbio">
<div class="jordanpic">
<img src="images/jordanwhite.jpg" width="150" height="170">
</div>
<div class="jordaninfo">
<span class="jwhit">
<h2 align="center">Jordan White</h2>
<p>Testing, Testing, 1, 2, 3</p>
</span>
</div>
<div class="clear"></div>
</div>
Then add the following CSS style
.clear {
clear: both;
}
What you're facing is a very common issue encountered with using floats to position content. Basically with all of your elements floated, none of them are considered to have height and so the container itself has a height of 0.
http://www.quirksmode.org/css/clearing.html
I just started out using twitter bootstrap and so far I've had a nice experience.
I'm currently having some trouble with positioning some .well elements the way I'd like them to be. Basically, this is what I'd like to see them
But this is what I get
The second row is clearly overlapping the first one because the elements are floated and the row is not wrapped around the .well element. I tried to apply .clearfix class but sadly it did not fix this.
Here's the html I'm currently using
<div class="container">
<div class="row offset-top-large">
<div class="col-md-9">
<a href="#" class="well well-lg">
</a>
</div>
</div>
<div class="row offset-top">
<div class="col-md-9">
<a href="#" class="well well-lg">
</a>
</div>
</div>
</div>
The .offset-top classes just add additional margins to the rows
.offset-top-large{
margin-top:100px;
}
.offset-top{
margin-top:20px;
}
I know that I can fix this on my own by manipulating the css, like, removing the floats, for example, but my question is - can I do this (get the desired output) without adding any additional CSS and possibly breaking the bootstrap functionality (resizing to smaller screens etc.).
Edit
Sorry, I had posted the code with the wrong well size class - I have corrected it now and here is a fiddle displaying my problem - http://www.bootply.com/127620
Thanks!
Based on the html and css you provided, this has nothing to do with floats. The problem is that you only have link elements in your rows, which by default are inline elements. Inline elements don't take up any space in their container elements. Try adding display:block or display:inline-block to the well elements.
The update to your question doesn't change a lot, you just need to increase the margin to account for the larger well size.
Try this:
.offset-top-large{
margin-top:100px;
}
.offset-top{
margin-top:50px;
}
Note: bantroth is also correct, adding display:block to your a tags is another solution.
I'm having a little CSS problem with a list of thumbnails. Here's an example:
http://jsfiddle.net/22hs8/
The problem is that when the link is too long to fit in the 150px block it will push the image down. By using inline-block on the list elements instead of a float I could get the images to line up properly, but now I want to have the links at the same height as well.
One thing I tried is making the links itself a block (or surrounding it by a div) and giving that a height, but that would mean they are always the same height even if none of the links uses two rules. Also, if a link is so long it uses three lines the same problem would occur.
In short: how do I align the links to the top of the list items, without breaking the image alignment?
To address one issue, you can add vertical-align:top; to the <li> tag in order to align the content to the top of the element, but unfortunately, I don't believe there's a way to resolve the issue entirely without also implementing one of the following methods:
Placing all of the tags in a separate
Specifying a height on the tags
Using javascript to equalize heights
Options
1. Separate Div
By moving the anchor tags into a separate div, they could be given the same width as the images and floated or displayed inline accordingly, but your markup becomes less semantic when you separate the anchor from the content (and may also be programmatically more complex if these are being dynamically generated).
2. Specifying a Height
This option can be thrown out almost immediately because, as you've stated, the anchor lengths can fluctuate to multiple lines. You could specify the height the the largest know line length, but then you'll ultimately end up with unnecessary white space with groups of short links.
3. JavaScript (jQuery)
While It would be ideal to resolve this issue without the requirement of JavaScript, I think it may be the only option that would allow you to preserve the semantics of your markup, and also apply an equal height to each of the anchor tags.
Recommended Solution
I would recommend setting a default height on the anchors of the largest known line length, then applying a bit of jQuery to normalize the heights of the anchors. This way, if the JavaScript parsing fails or JavaScript is disabled, the user still sees a uniform layout (albeit with potentially more whitespace), and with JavaScript active the heights are normalized.
Apply vertical-align:top; to the <li>
Define default height for non-js users
Equalize heights using jQuery:
(function(){
$.fn.equalizeHeights = function(){
return this.height( Math.max.apply(this, $(this).map(function(i,e){ return $(e).height() }).get() ))
}
$(function(){ $('li a').equalizeHeights(); });
})();
Example: http://jsfiddle.net/Eg7hy/
How is this:
http://jsfiddle.net/22hs8/3/
So you're saying that you want the links to not push the content down? I don't see that as being possible unless you don't allow your content to stretch at all. It's natural flow of a page for something above content to force the content down after it if it needs more space.
Have you thought about chopping off the text after a certain number of characters, with a '...' and providing the full text through a title, and providing the full text through a popup (since I assume you're creating some kind of photo gallery)?
The first answer that came to mind was:
"just use a table, it makes this really easy, and works everywhere"
Live Demo
However, I would probably get down voted into oblivion if I posted an answer only containing a <table> tag version, so here's a version using CSS display: table and friends:
Live Demo
Of course, that won't work in IE7 because that browser doesn't support display: table.
I can't think of a way to do this using code closer to your original and display: inline-block, which would also support an arbitrary number of lines. I'd love to see a better way to do this.
HTML:
<div id="container">
<div class="row">
<div class="cell">Some text</div>
<div class="cell">Some more text (too long)</div>
<div class="cell">Some text</div>
<div class="cell">Some text (seriously too long) text text text text text text text text text text text text text</div>
</div>
<div class="row">
<div class="cell"><div class="image">image</div></div>
<div class="cell"><div class="image">image</div></div>
<div class="cell"><div class="image">image</div></div>
<div class="cell"><div class="image">image</div></div>
</div>
</div>
(you could change some of those div tags into ul and li if you wanted to)
CSS:
#container {
display: table
}
.row {
display: table-row;
text-align: center
}
.cell {
display: table-cell;
width: 150px
}
.image {
width: 150px;
height: 150px;
background: grey
}
Add vertical-align:top; to the images.