On the homepage of staterequirement.com I have a group of buttons, one for each state. The site is built on Squarespace.
Squarespace gives you three "button sizes," each with their own CSS properties. They all, however change the size of buttons based on the amount of text.
When placing all of the buttons in columns, they look very wonky, because they are all different sizes, and run into each other.
My goal is to have these five rows of buttons fit together in straight columns, and all the buttons the same size.
I thought of making all of the buttons into images, but that would take away the hover effect that the buttons have.
.medium-button-shape-rounded .sqs-block-button .sqs-block-button-element--medium, .large-button-shape-rounded .sqs-block-button .sqs-block-button-element--large
{ width: 100px}
This has been suggested to me, and it does make all of the rows buttons the same size, but it cuts off "Massachusetts", and the columns are not evenly spaced.
I think the answer is a combination of the code that was offered to me, and a padding change.
Please help!
P.S. -- If there is a better solution, to this issue, I am absolutely open to hearing it.
The following CSS will help you achieve what you're looking for. Besides decreasing the padding and font size in order to make all the buttons more compact and a single-line high, it makes use of the min-width property. This makes all buttons that are less than 130px wide to be made to be 130px wide, which is around the width of the longest button in the set (South Carolina I believe).
.sqs-block-button .sqs-block-button-element--medium {
padding: 14px 18px;
font-size: 11px;
min-width: 130px;
}
As mentioned by Serge Inácio, you have an additional problem in that you're attempting to divide Squarespace's 12-column grid into 5 columns, which it will not do equally (it is a column-based system, even if it doesn't feel like it). Therefore, consider using 4 columns instead. With 4 columns, you may then be able to adjust the values in the above CSS upward a bit. You may also notice that at certain widths, buttons in adjacent columns overlap one-another. Going to four columns may help this as well, but if it doesn't, it should at least make the problem easier to fix.
I see you use diferent col sizes in your code: 3 x col sqs-col-2 span-2 and 2x col sqs-col-3 span-3 Having a total of 5 columns, if you reduce it to 4 columns you will have more space (i.e. 4x col sqs-col-3 span-3) and add the code that was suggested to you. if it still cuts off you may be can split it into 3x col sqs-col-4 span-4 or make the font a little smaller.
Hope I helped a bit :)
Regards
Related
Now I know there are similar questions posted, but I'm looking for a solution for pixel perfection.
Sandbox: http://jsfiddle.net/unqc4a0f/1/
Problem trying to solve:
Attempted code:
.mi{float:left; width:150px;height:200px;padding-right:10px;/*margin-top:3px;*/}
.mt{float:left; width:400px;margin:0;}
In the past I've used the padding/margin hacks to push the image or the text objects down a few pixels to make them visually align at the top edge. And by visually I mean that I know that the fonts have a size and line height, but even taking that into account, the height of the actual font characters may include some space. This you can see in my example above. I've also —based on other threads here —tried using line-height, and although that did achieve pixel perfect alignment, it mangled the the vertical line spacing of the entire paragraph.
My question essentially is whether to continue using the padding/margin hacks or is there a more 'legit' solution. I ask this in regards to building layouts that are responsive and then having no issues with uniform layouts.
Thanks in advance.
Realize it's an old question but...
In CSS one can use a ::before element add a negative margin-top value to it.
Specifically, I wanted to share this Interactive Text-Crop tool I found that helps create a SASS mixin for this purpose.
The gist in this tool is that you remove the capital height from the (font-size * line-height) and then divide by two. But that is a simplification of how your font may or may not be structured.
In reality - There is no "pixel-perfect" answer because when it comes down to it, the physical structure of fonts doesn't always match their font-size and different font-families at the same font-sizes can still look taller or shorter.
Instead of float use a display:table; layout for a perfect inline placement and vertical alignment.
It only requires that you wrap them within an element...
Updated JSFiddle
.wrapper {
display: table;
}
.mi{width:200px;height:200px;display: table-cell;}
.mt{display: table-cell;vertical-align:middle;}
<div class="wrapper">
<img src="http://www.thehollywoodnews.com/wp-content/uploads/2839335-morgan_freeman_wallpaper_4_normal.jpg" class="mi">
<p class="mt">Join me in San Diego at the Global Event for Data-Driven Engagement Marketers. DMA is doing great work to protect marketers around the world, come and hear from leading marketers how DMA is enabling them to NOT MARKET ALONE</p>
</div>
The space is supposed to be there it normally comes from line height which is something you need. If you font size is 14px and you reduce the linee-height to 11px you see the gap will vanish from the top, but the text will look very cramped..
Sometimes to get pixel perfect you have to just tweak like you have with the margin on the image..
I have some very simple sub-navigation that I'm trying to build across the top of the content area within my web site, but CSS doesn't seem to have any simple solutions for such a common problem: I want either 3 or 4 equally spaced DIVs across the top of the page.
1) e.g. 3 Variable-Width, Equally-Spaced DIVs
[[LEFT] [CENTER] [RIGHT]]
2) e.g. 4 Variable-Width, Equally-Spaced DIVs
[[LEFT] [LEFT CENTER] [RIGHT CENTER] [RIGHT]]
My solution for the first problem with only 3 DIVs was to float the left and right DIVs, and then assign an arbitrary size to the middle DIV and give it "margin: 0 auto". That's not really a solution, but assuming there are no changes to the navigation, it gives a rough approximation of what I want the results to be.
The solution I have for the second problem with 4 DIVs is to simply center a DIV in the same way as before, but then float two DIVs within that, e.g.
[[LEFT] [[LEFT CENTER] [RIGHT CENTER]] [RIGHT]]
But again, this requires applying an arbitrary size to the middle DIV for alignment, and if any language or image changes are made to the site, alignment values will have to be recalculated. As well, it's simply an over-complicated solution that requires merging structure with presentation.
Any help is greatly appreciated.
EDIT 07/20/2012 5:00PM
Alright, I put the "table-cell" solution into place using percents, but I encountered another issue within my slightly more complex implementation: the issue at hand is that each DIV I was referring to is actually a container for two more DIVs which are icon-label pairs, inlined either by float or by display:inline-block.
e.g. http://jsfiddle.net/c3yrm/1/
As you can see, the final element in the list is displayed improperly.
Any help is again greatly appreciated!
EDIT 07/20/2012 7:16PM
Final solution with arttronics' help: http://jsfiddle.net/CuQ7r/4/
Reference: jsFiddle Pure CSS Demo
The solution was to float the individual breadcrumbs while using a simple formula to determine the percentage of breadcrumb width based on the number total breadcrumbs.
You could use percentages, then it just comes down to simple math:
[[LEFT=22%]2% margin><2% margin[LEFT CENTER=22%]2% margin><2% margin[RIGHT CENTER=22%]2% margin><2% marginRIGHT=22%]]=100%/??px
You could then specify a width for its container and use
display:inline;
to keep them inline.
Note: If you use borders to see what the divs are doing that will add space unnaccounted for so you would need to reduce your elements width by 1% or so OR just change their background colors.
ol {
width: 400px;
/*width: 800px;*/
display: table;
table-layout: fixed; /* the magic dust that ensure equal width */
background: #ccc
}
ol > li {
display: table-cell;
border: 1px dashed red;
text-align: center
}
like here: http://jsfiddle.net/QzYAr/
One way I've found to do it is using flex boxes (or inline-flex).
Here is a great explanation and example of how it can be done.
I think in the future, flex boxes will be the superior way of handling this sort of thing, but until other browsers catch up with Mozilla's way of thinking for how to use the flex-basis attribute (with min-content, max-content, fit-content, etc. as values), these flex boxes will continue to be problematic for responsive designs. For example, occasionally the inner content (a_really_really_long_word) can't fit in the allotted space when the window is squished down, and so sometimes some things might not be visible off to the right of the screen if you're not careful.
I think perhaps if you make use of the flex-wrap property, you might be able to ensure everything fits. Here is another example of how this might be done (in Mozilla browsers anyway).
I tend to use flex boxes for letterheads or tables where the width is fairly fixed (not too small) because they usually space themselves nicely; I tend to use nested float and inline-block objects for websites where the content must squish down very small (as suggested in some of the other answers here).
I'm currently working on a CSS three column layout (http://jsfiddle.net/methuselah/rCtGd/) and I wanted to ask several questions:
1) For some strange reason there seems to be a 10px gap between the header, content-1, content 2-1, content-2-2. This cannot be seen in jsfiddle but if you load up the code in any browser it is noticeable. How do I get rid of it?
2) I would like to figure out a way of clearly defining a fluid column height. Is this possible? Ideally I would like all the divs header, content-1, content 2-1, content-2-2, footer to stretch in order to accommodate the page.
Thanks in advance.
Answers for your valid questions! :P
10px gap is not found on the jsFiddle because, they use CSS Reset. The goal of a reset stylesheet is to reduce browser inconsistencies in things like default line heights, margins and font sizes of headings, and so on.
For getting a good idea about CSS Fluid Layouts, please refer the links below:
The Perfect Fluid Width Layout
2 And 3 Column Fluid CSS Layouts
Do you have any clarifications still? Let me know in the comments! :)
I'm trying to create a grid layout at http://www.gablabelle.com/.
I have multiple divs (images) with float: left; property and I wonder why there is some empty spaces and why the floating divs are not filling the gaps.
Many thanks for your time and help.
UPDATE: I now use jQuery isotope but still have gaps... any idea?
That's just how floating works. Those gaps are there because elements float after another breaks to a new line. It doesn't fill the space above.
If you want an uneven grid effect then you'd need to use a javascript solution where you are setting absolute positions. I'd recommend the masonry plugin, I think the before/after example on the homepage shows the problem you are having and the solution you want.
It seems that you are looking for a way to fill all of the squares on the page. This isn't going to be possible simply through CSS. 'float: left;' is simply filling the space in the page, image by image, and not considering how it all fits together.
Fitting all of the pieces together so they sit cosily and like a jigsaw will not be easy. It is actually quite a complex problem, and it is connected to the knapsack problem (http://en.wikipedia.org/wiki/Knapsack_problem) and the packing problem (http://en.wikipedia.org/wiki/Packing_problem).
To solve this, I'm certain that there would be jQuery or JavaScript (or maybe even PHP) libraries available for use. Alternatively, you could manually order the photos such that they fit together in a tidy fashion.
Good luck!
This is causing the gaps:
article.post {
margin: 0 0 30px 30px;
}
I have a list of items that I am displaying in a floated list, with each item in the list at a fixed width so that there's two per row. What is the best practice to prevent this horrible thing from happening:
alt text http://x01.co.uk/floated_items.gif
Possibilites:
Trim to a specified number of characters before displaying the data. Requires guesswork on how many characters will be "safe".
Overflow: hidden. Hacky.
Remove the background and just have a top border on each item.
Possible but silly:
Have a scrollbar in each item by doing overflow: auto, this will look horrendous.
Add a background image to the container. It's not guaranteed that there's always an equal number of items so this option is out.
Any help on this irritating issue appreciated!
Are you using a fixed font size, i.e. specified in px? If not you also need to consider the various text size options of each browser which is probably going to make the concept of trimming the string redundant. If it is fixed then perhaps seeing how many Ws you can fit in and restricting your text to that -3 and appending an ellipsis, not sure what this list is for so that's one approach.
Personally I'd probably use overflow:hidden as that covers all eventualities and ensures that it'll always keep your layout consistent.
I guess the last option would be to keep a tight control over what can be added to the list and prevent the problem occuring in the first place. Prevention better than cure as they say, although probably unhelpfully.
There are scripts that help with this by comparing the li in blocks of two and making them both equal to the tallest.
Usually, rather than thinking what's best from a css point of view though, you should consider what presentation you want, then get the css/JavaScript to get you to your desired effect.
If this is something that you're just wanting out of the way, consider using a gradient background image that highlights the top of the li and suggests the block without actually filling it in.
Adding link to a jQuery solution: Equalize
One solution would be to have a alpha-based PNG that would slowly fade the text to the backgroundcolor of your container, on the last 10px or so. That would look good if some text are considerebly shorter than the long ones, however in the case where the text would be equal to the container it could look kinda silly.
Of course, in combination with display: hidden and white-space: no-wrap
From an accessibility point of view it's not a good idea to simply hide the title, since that could hide content on people who increase font sizes due to bad eyesight. Your design should be able to float when hit by bad resolutions or similar obstructions, even if it floats into something less pleasing to the eye.
Now if I understand your issue with the background image correctly, I believe your problem could be solved using the techniques describes in the ALA article on sliding doors, where the background image expands with the content.
Here's some controversy for you.. use a table?
Sounds like you have a grid of data to me, would a table answer this problem for you?
It also raises the question, do you actually want the items to be the same height, or just have the same amount of black background behind them? You could apply the black to the row's background, then create the centre white separator with borders and margins.
You could try using:
ul li{
display:block;
float:left;
width:6em;
height:4em;
background-color:black;
color:white;
margin-right:1em;
}
ul{
height:100%;
overflow:hidden;
}
div{
height:3em;
overflow:hidden;
background-color:blue;
}
Don't know about cross browser consistensy though.
EDIT: This is the html I'm assuming:
<div>
<ul>
<li>asdf
<li>asdf trey tyeu ereyuioquoi
<li>fdas dasf erqwt ytwere r
<li>dfsaklñd s jfañlsdjf ñkljdk ñlfas
<li>ksdflñajñldsafjñlksdjfñalksdfjlkdhfc,v.mxzn
</ul>
</div>