I am trying to remove the space between the different tables but not able to do so.
If I were you I would seperate your css out into another file. Inline css can be very hard to find sometime.
To get all the tables next to each other, you need to change all of the inline css on .row elements to the following:
<div class="row" style="margin-left: 40px; margin-right: 20px; padding: 0 10px;">
I would also probably add margin-top: 10px depending on how much vertical space you want between each table.
Specifying margin-top, margin-left, and margin-right is the same as margin: top, right, 0, left if you want a shortcut.
Each table element seems to have the class time so you can just apply a negative margin to that class. Something like this should work:
.time {
margin-bottom: -30px;
}
http://jsfiddle.net/nJa45/4/
Now, that being said, if you are trying to eliminate the spacing all together, you might have better luck restructuring your table. Rather than having multiple tables, make the entire thing one nested table. This will provide a more consistent removal of white space.
Related
What is the CSS best practice when you want to give space to an element placed just after a first element.
Asume this html
<div class="a-block">lorem</div>
<div class="another-block">ipsum</div>
Should you use this css
.a-block { margin-bottom: 10px; }
or
.another-block { margin-top: 10px; }
?
i would use :nth-child width margin-top
div:not(:first-child) {
margin-top: 10px
}
<div class="a-block">lorem</div>
<div class="another-block">ipsum</div>
<div class="another-block-1">ipsum</div>
<div class="another-block-2">ipsum</div>
In my opinion, margin-top in the second block is a better practice.
Indeed, the first div shouldn't take care about others divs since it was the first.
If the second is removed I shouldn't have to remember to remove margin-bottom from the first.
Using margin-top would eliminate the need of using a next sibling selector. It also removes the need of removing the bottom-margin from the last-child to avoid padding discrepancies when using text in panels or boxes.
Since nobody has mentioned it yet, I wanted to add that you could use both at once. This will cause them to meld together through a feature called margin collapsing. In certain situations this could as well be the best practice since you can use it to declare "this element need at least this much space below it". Note that margin collapsing may backfire on you if you accidentally use properties that disable it, such as floats, borders or flexbox.
.a-block {
margin-bottom: 10px;
}
.another-block {
margin-top: 10px;
}
div {
background-color: #e0e0e0;
}
.float {
float: left;
clear: both;
width: 100%;
}
<div class="a-block">Only 10px margin</div>
<div class="another-block">between these elements</div>
<hr />
<div class="a-block float">Double margin because</div>
<div class="another-block float">of the float</div>
It is completely up to the context in which the CSS is needed - is the short answer. It depends whether you need the first element pushed down as well as all the other elements. or you need the first element to be flush with the top of the parent but you need the bottom element to have a margin at the bottom.
The common sense thing to think is that the first element is already there so the second element will surely need to be "pushed" down, so the natural thing to do would be to add margin bottom to the previous element (at least that is the way that my brain works).
Current CSS browser support dictates that this is the preferred method. Due to the fact that, in CSS, there is a "next sibling" selector (~), an "adjacent element" selector (+) , and :first-child is more widely supported than :last-child is (purely because it is more difficult to implement in a browser than :first-child is). Namely this :last-child support issue is IE8 but this still affects us today when developing for certain clients.
There are no previous sibling selectors, so this makes me prefer the method of adding margins and paddings to the bottom of elements and not the top. Purely just to keep everything in my CSS to be using the same principal of "pushing things down from above or selecting the first element"
You should always be consistent on how you apply the styles.
For example, if you have a hero and think about the inside elements. For example, you have a title, optionally a button and optionally text below that. You can end up with having margins or padding that should not be there and were intended to have a button there.
Also, the point about collapsing margins is important when you have a design with different use cases. Padding doesn't collapse but if used improperly, can cause elements not to center 'properly'.
I have a table with some columns that contain prices. I added currency with generated content and in order to better encolumn numbers, I jusitfy text of these cells to right.
My problem is that I would also like to add some "space" from right to not have numbers too much narrow to table borders.
Columns have different width and can contain different dinamically created numbers, so I tried to use % for padding values but results is not so good.
In this example you can see actual look of table.
Aligning of prices is made with these rules:
td.cella-prezzo {
padding-right: 6%;
text-align: right;
white-space: nowrap;
}
I thought that paddign was referred to cell width, not table width, so I tried to set padding-right:50% but is too much.
What I would like to obtain is simply right align prices, about at center of their own column not depending by effective column width.
For example, visually speaking, desidered result is very similar to that contained in "Costo Pers./Notte [B]" column.
Try to apply the padding to the element inside the cell instead:
td.cella-prezzo span {
display: block;
padding-right: 16%;
text-align: right;
white-space: nowrap;
}
This will make the percentage calculation based on the cell width instead of the whole table.
Note: I have added display: block only to keep the changes minimal; it would be better to replace span with div in the html code instead.
I'm thinking of creating some CSS styles for padding and margin that would work something like this...
If you want to add padding to all four sides...
<div class="Pad4">
If you want to add padding to the top and bottom...
<div class="PadV">
If you want to add padding to the left and right sides...
<div class="PadH">
Similar styles would designate padding for the top (PadT), bottom (PadB), left (PadL) or right (PadR) sides.
The second class of styles would designate the amount of padding or margin. For example, 10 = 10 pixels, 25 = 25 pixels.
You would then put it together, like this:
<div class="PadV 10 PadH 25">
This particular div would then have 10 pixels padding on the left and right sides and 25 pixels on the top and bottom.
Of course, this won't work exactly as I've described it because of a number of issues. For example, imagine these two div's...
<div id="Uno" class="PadV 10 PadH 25">
<div id="Dos" class="PadV 25 PadH 10">
If I then have the following style...
.PadV.10
how could I make sure it only gets applied only to div#Uno, not to div#Dos?
And perhaps an even more important question - does my scheme sound like a good idea, or is it too verbose, amateurish or whatever?
It seems pointless to me, if I'm going to type out
<div id="Uno" class="PadV 10 PadH 25">
I may as well just do inline styling
<div id="Uno" style="padding: 10px 25px">
Generally a classname must begin with an underscore, a hyphen, or a letter then it could follows by a number; Unless you should escape the numeric character.
I suggest using something like padding v10 h25 instead.
In this approach the padding determines the property and v10/h25 determine the values.
.padding.v10 {
padding-top: 10px;
padding-bottom: 10px;
}
.padding.h25 {
padding-left: 25px;
padding-right: 25px;
}
Same for margin (if it's needed):
.margin.v10 {
margin-top: 10px;
margin-bottom: 10px;
}
.margin.h25 {
margin-left: 25px;
margin-right: 25px;
}
CSS classes are unordered sets, so you can't distinguish the two divs with class selectors. You should probably go with the great advice of the other answerers.
But just for fun, I made a proof of concept that abuses attribute selectors to do it. For example,
[class*="PadV 10"]{padding-top:10px;padding-bottom:10px;}
http://jsfiddle.net/A8Ury/
The idea you are after is cool but i dont think this is a good way to control margins and paddings.
.PadV.10
can looks easier to use but messes up when used with integers which coould represent anything, margins or paddings.
.pad.v10 .pad.h10
.mar.v10 .mar.h10
is a better way of doing it. just my view. so you can know all three aspects of CSS properties (i.e. its a padding where top and bottom (verticle) values are 10px and left and right (horizontal) values are also 10 ). Just my view.
Good Luck
Suppose we have an old-style six to eight products which enclosed in a table with borders (so called leaders or special products). Is it tabular data? Is it worth to replace this with div? If yes then how can I do this?
Thank you.
I think about the following:
These products are not correlated. And from this point of view this is NOT tabular data.
And also this table has borders which I cannot simulate with div (or maybe don't know) because of a liquid layout (width in %).
This table is on the main page. And I want to be more accessable for those devices like mobile gadgets.
So I should use div but don't know the best way. By the way, I think is it the main cause modern sites do not use borders but "blockes" with no border collapsing.
Thank you everybody.
Added: Simply put we have a table with two rows, six cells, and border=1. This is an old-scool design which I want to keep.
There are problems:
- borders
- border collapsing
I just wanna know how seasoned designers work around this. What an approach?
Sorry for so many words. And yes I know about screenshot but there is nothing special just table that has an image in each cell.
There is nothing wrong with using tables for real tables, just set up the table structure in your code and format it how you like using pure css. (Tabular data essentially must have at least two rows and columns inclusive of headings.) You only need to avoid tables when structuring your [entire] page layout.
If you want to highlight some products, by showing them as 'blocks' instead of table rows, I would put them in divs, yes.
<div class="product">some product<br /><img src="product.jpg" /></div>
<div class="product">some other product<br /><img src="product.jpg" /></div>
<div class="product">yet some other product<br /><img src="product.jpg" /></div>
CSS:
div.product {
width: 100px;
height: 100px;
float: left;
}
To 'clear' the floating of the divs, you need something like this just below the last product div.
<div style="clear: both;"></div>
Otherwise, your next element will be positioned under/over your products.
It is possible that I misunderstood (you could give a link or screenshot), but this sounds like NOT tabular data. What you are describing is a LIST of products, so it should be placed either in an <UL> unordered list or <OL> ordered list (latter if order matters a lot).
So your products would look like:
<ul id="lead-products">
<li>
Amazing Product - $10.65
...
</li>
...
</ul>
Then with CSS you could give it some style:
#lead-products { //the list
list-style: none; /* make it not display list markers */
overflow: hidden; /* used to clear up floats */
margin: 0;
}
#lead-products li { /* these are your elements/products */
margin: 5px; /* some space around it */
float: left; /* float them to the left so they are besides each other */
border: 1px solid black; /* border around the products */
width: 20%; /* dynamic width as you needed */
}
What's the best way to obtain three texts on the same line: one to the left, another in the middle, and the third one to the right?
+---------------------------------------------------------------------+
|Page generated in 1 ms Copyright 2010 Email me|
+---------------------------------------------------------------------+
One text may be longer than the others, but their position must not change. The one in the middle must always be in the middle, regardless of the length of the others.
Doing it with tables would be easy, and I already know how to do that, so "correct" solutions only (using tables for layout is wrong).
EDIT: many people assumed for some reason that I needed to display tabular data over several rows. I'm not sure why they thought it was the case, but:
It will have only one row
It's not tabular data
For this reason a table is inappropriate, and the solution only needs to work with one line.
Taking your question literally, here's how I'd do it.
<div style="position:absolute;text-align:left">Text 1, a bit longer</div>
<div style="position:absolute;width:100%;text-align:center">Text 2</div>
<div style="text-align:right">Text 3</div>
Whether this will work for you in practice, depends on what the texts actually are. Note that if the divs' container is too narrow, the texts will overlap with one another, and not wrap like they would if they were in table cells.
If you want table-like layout behaviour, you have two choices. You can use tables, or you can use the CSS display:table, display:table-cell etc properties. Sadly, the latter is not supported in IE6 or IE7, so probably isn't really usable on the web just yet.
I found a very good way to do this that works even if one or more of the paragraphs will span over multiple lines.
<p style="float: left; width: 33.3%; text-align: left">Page Statistics</p>
<p style="float: left; width: 33.3%; text-align: center;">© 2010</p>
<p style="float: left; width: 33.3%; text-align: right;"><a>Email me</a></p>
you can do this with a unordered list and some CSS, if you want to stay 'semantic' that is
<ul id="text_block">
<li class>Text 1, a bit longer</li>
<li class>Text 2</li>
<li class>Text 3</li>
</ul>
and the CSS
ul#text_block {display: table; margin: 0; padding: 5px;}
ul#text_block li {list-style: none; display: inline; margin: 0 40px 0 0;}
hope this helps
So you want to display three pieces of data, over and over, stacked in a vertical pattern that represents some sort of data, options, etc?
Sounds to me like that's exactly what tables are for.
/* Removed box comment, OP fixed it */
Maybe you need to look at grid design system?
http://www.subtraction.com/2004/12/31/grid-computi
http://www.subtraction.com/pics/0703/grids_are_good.pdf
Or, you always can use float div's, playing by float, width and poisition CSS properties.