Here is a fiddle showing the effect I wish to create
2 mandatory requisites:
i need a small spacing (padding/margin) between each highlighted
row
the green highlight should only cover the length of the text on each line
I tried a mixture of <div><span>text</span></div> combos and could only ever get to 1. or 2. but never both, except with a table.
whilst im happy this content being in a table as it is tabular, im not happy with the end result as im splitting a paragraph across table rows which isnt cricket.
how to get the effect with just divs and spans?
Try this...
display: block;
float: left;
clear: both;
Here's an example I made: http://jsfiddle.net/Gxhsq/
Related
I'm trying to make a 2 columns layout in CSS, with the property display: table;, but there is an image on the top of the second columns, and the content of the columns is limited in height, so the extra-content from the first column goes on the second column.
Here is an illustration of what I'm trying to do:
Here is some text in IMAGE
the first column, and
I want that text to go everything is displayed
on the second column, with the help of CSS.
under the image. And
I know it can be done with display: grid, or display: flex, or even float, but these are not an option... (nor Javascript) :(
I've made several searches but nothing led to the proper result.
Thank you for your help!
I am trying to build a table purely in CSS. Have succeded so far, even though I have one issue:
How do I make a cell span two columns?
I made this fiddle, and in the top where the "XXXXXX" with the grey background is, I simply cannot make it span the width of my box. I tried to use column-span, but it did not work, so I guess I have redesign it in another fashion .. just how?
I am using this code, but the content of tabledata_lang stops just where tablecells below stop:
#tabledata_lang {
padding: 6px;
width:100%;
}
See my fiddle here:
http://jsfiddle.net/T7wU2/
(Probably easier to see my issue here...)
Hope someone has some input..
Regards
Regin
I think you are looking for the colspan attribute
<td colspan="2"></td>
This will make a cell span 2 columns
i'm really stumped by this current page i'm working on. The layout is a grid.
The page is dynamic so the cells (divs) will be shifting about or even disappearing over time.
Because the location of the last cell will be changing, i want this last cell(div) to always extend horizontally across the remainder of the containing div. The point being to create a gray top border.
here's a link, it's obvious to see what i'm trying to do.
http://www.tomcarden.net/ug-post.html
i thought it would be easy. i thought the last cell (div) if not given a width attribute would naturally take up the remaining space in the row but it's not (?)
the class of this div is .last-cell.
i tried making the width:100% but that doesn't work. that breaks the page. the cell clears and starts a new row, i tried clear:none so it would stay floated to left but that didn't work. this can't be that hard...?? can anyone lend some advice on this?,
big thanks in advance.
Quite tricky, but try adding this:
.last-cell {
width: 100%;
margin-top: -153px;
}
The width: 100%; will indeed make it into one row, bumped by the last picture, but with the negative margin you push it back up. To keep the image on top, apply:
.grid {
z-index: 100;
}
Why would the top two rows of my site load like this and the bottom row perfect?
Bottom Row:
HTML:
https://gist.github.com/1228291
CSS:
https://gist.github.com/1228301
It really depends on how you want to achieve vertical alignment. For instance, you could try something like:
.product-grid .name { height: 40px; }
But this would give you some whitespace between the title and price when the title is only one line.
It looks to me like it's off because the "cells" in the top row have item names that span two lines (thus pushing your buttons down for those items). With the "cells" on the bottom, the images above appear to make them wide enough that the item names fit, if this wasn't the case, that row would also suffer the same problem. You could try setting the names to have a specific height (as #brianreavis suggested) or perhaps adding non-breaking spaces ( ) instead of regular spaces) to the names would force the name div to push out the side.
On a side note, you don't have to use two ID's in a CSS selector (unless you're doing it for specificity reasons). Since the IDs are unique to the whole document, simply calling #welcome instead of #header #welcome should be sufficient.
Because your product titles have different number of lines.
Maybe this structure can inspire you:
http://jsfiddle.net/JeaffreyGilbert/EW6Ax/
Here I am getting trouble with last column. I want last column bg-color and borders up-to vertical scroll bar. And header text is overlapping.
Here is the link : http://jsfiddle.net/8JvZQ/
Floating header
Added width: 100%; to .tableScrollBar table {}:
Fiddle: http://jsfiddle.net/hobobne/8JvZQ/3/
Note: This is the straight-up solution to your problem. However, if you simply wish the effect of the table header always being visible. Then you can use jQuery to make the full floatable on scroll. Here is a demo of the floating header and from here you can download it.
Last row (CSS)
This is css version of detecting the last row. However, it is not crossbrowser, since IE does recotnize :first-child but not :last-child :(
Fiddle: http://jsfiddle.net/hobobne/8JvZQ/4/
Last row (jQuery)
This is the jQuery version for detecting the last row. This is the ultimate solution!
Fiddle: http://jsfiddle.net/hobobne/8JvZQ/9/
Not full-width version
This is being done by adding display: inline-block; to the global container.
Fiddle: http://jsfiddle.net/hobobne/8JvZQ/10/
Last column being full-width (just like your screenshot)
Being done by adding class="w100pre" to phone column and also creating a new class:
.w100pre {width: 100%;} that can be used globally on your site :)
Fiddle: http://jsfiddle.net/hobobne/8JvZQ/11/
NOTE: I wasted about 2 hours on this question.
here exactly like ur screenshot fixed the text overlaping. http://jsfiddle.net/8JvZQ/14/
hiding the row for fixing the overlapping text.