I have a table where top and right borders are not required. So I made them border-top:none;border-right: none;. But as per my requirement, I will keep adding multiple tables one inside other. In that case, this top and right borders are keep adding up the size. Is there a way, where I can remove that space also ?
Related
I am new to css. I am having an alignment issue in one of my html pages. I have created an invoice page, which can be viewed at: https://www.w3schools.com/code/tryit.asp?filename=G6HQYBZLNH3Y .
When you will open this page you will notice that one of DIVs is slightly more to the right and one of its edge is pointing out. i have tried multiple things but i am unable to set its alignment. I will be really thankful if anyone can solve this issue.
The Bootstrap .row class adds negative margin to the left and right, and the .col classes add padding to the left and right. You have tried to counteract this padding by adding columns to the container to wrap your rows which in turn wrap additional columns.
Try removing those wrapper columns. This will allow the previous rows with black backgrounds to extend further, the text will line up better, and then the div in question won't extend further than the previous rows.
https://www.w3schools.com/code/tryit.asp?filename=G6HS3SOMWWM8\
I don't think I asked this as clearly as I could for easy searching, but here goes:
How can I make a bootstrap column extend to a larger height so that when the columns wrap around, they get offset by it even if it's not tall enough to cause that normally.
Essentially, how do I make the bottom panel in this bootply stay centered in both cases?
http://www.bootply.com/FCgrUtGuQ0
My left panel will be of variable length, which means that if I use a col-x-offset-x it will get pushed over further if the left panel extends below middle.
If I add the bottom panel to a new row then it will have whitespace above it if the panel left is longer than middle.
I tried the negative margin trick without success. It lets you change the background colour which those examples all used, but it doesn't seem to cause the floated panels to shift right.
I need this layout to behave differently at smaller screen sizes, so I can't just put the middle and bottom in the same col-x-6 as this is actually my lg layout, and at sm I need it to act with left at the top in a row, middle and right as two columns in the second row, and bottom as a third row.
Negative margin trick:
.row {
overflow:hidden;
}
#extend-down {
padding-bottom: 10000px;
margin-bottom: -10000px;
}
This isn't answering my own question directly, as it doesn't explain how to expand the column height to make the repositioning happen properly, and it's not generic to all column sizes and arrangements.
But in my exact case this arrangement of columns and rows case can be solved with two master columns and then separating the contents of the second, where 3-6-3 columns can easily be made to be 3-9(4-8) columns which maintain the same 3-6-3 spacing.
http://www.bootply.com/UTq2klEuCG
By putting the middle, right, and bottom in the second column then letting those wrap around naturally seems to handle all my cases with this specific layout.
So I went from
col-x-3
col-x-6
col-x-3
col-x-6
to
col-x-3
col-x-9
{
col-x-8
col-x-4
col-x-8
}
This isn't ideal, as a 2-8-2 arrangement might be best at a large screen size, but the math doesn't work to easily create a subset within the col-x-10 that would need that follows the same spacing as a 2-8-2.
What I really want to do is merge column headers vertically, but that doesn't appear possible in SSRS. One work around presented in the quest SSRS tablix Merging cells vertically problem was to just remove the header borders.
However, when I remove the bottom border (or change the border at all for that matter), the old one still remains.
For example, here's a test case where I've removed the bottom border and add a wide red border to the top and sides:
And here are the properties on the top text box itself:
How do I get rid of the black lines?
Found the answer. So the issue was that even though the interface functions are pretty similar to excel, cell borders are handled like individual objects with properties.
Meaning two adjacent cells don't share a common border definition between them at the boundary.
So in order to remove the bottom border on the top cell, you have to remove the bottom border on the top cell AND the top border on the middle cell.
I am working on the interface for a small web module and am having some problems with the CSS. Right now I have the container DIV and then tables to layout the sub-sections. I am floating 3 of the tables left and 3 tables right, which until now has worked great.
I recently added a feature that allows for additional fields to be added by the user as needed and as the height of a table in the right column grows, it breaks the layout. Is there a better way to do this so that the layout won't break?
After adding "clear:left" and "clear:right" to each table, it appears as follows...
After moving the 3 left floated tables to the top of the code and removing the "float:right/clear:right" from the other 3, it works well except for this.
For each float left, add clear:left, for each float right, add clear: right.
It'd depend on the order of each floated container though. Another option would be to try keeping one set of floats from one column (i.e. the float lefts or float rights) and remove the float property from the others in the other column so they wrap to the side of the floated boxes.
EDIT: a working example: http://cssdesk.com/Xan5j
It would be better to show a live example of this, but the easiest way to handle this—if this is an option—is to wrap each column in its own div.
Could someone take a look at the following link of a work in progress test page for my new website - http://goo.gl/YwGiB
I'm new to CSS, and I have come across some issues that I can't figure out without some expert help. Could someone answer me three questions and possibly an explanation of how to amend it?
1) Why does my middle column by default split itself into sections, whereas my right hand column is pretty much the same but does not have the divisions? What could I do to cause that to default in the right hand column?
2) I am looking to have a box in the right hand column running parallel to the first box titled 'news' in the centre column, and then a second running parallel underneath this (with the box titled 'blog' but it will have an irregular length. What would be the best way to do this? Would this be a case for using the standard positioning commands to shift them into place or is there a better way?
3) I have stripped the padding and margins from my h1-h3 tags (specifically the h2 tag) yet there still appears to be space above the lettering. It is more pronounced when using the font MerceariaAntique which is going to be the final font, but unfortunately I am unable to amend my html file to show this right now. I am attempting to resolve it by adjusting the line-height but I am not getting anything consistent. Is there anything else I can do other than make line-height and margin adjustments?
Thanks in advance
Firstly, in your markup, you have divided your sections using the <div> element, which is completely acceptable, however you have used the same ID to identify each of them. This is what classes are for. IDs should be unique and only used once on a page, classes can be used to apply the same styles to multiple elements.
So this:
<div id="newsitem">
should be this:
<div class="newsitem">
Answers to your actual questions now!
By default, paragraph and headings have paddings and margins set. The reason your sections have spaces is down the margin on the paragraph tag. Removing this removes the space, but also brings the text together with the next heading. You can over come this by giving the <p> tags 0 margin and giving them padding, or giving padding to the section container instead.
If you want the boxes in the right hand column to line up with the ones in the middle column, you'll have to change how your layout works so that you have rows rather than columns I think. That would make it easier to line them up.
From your description, you should then have the following layout:
middle column | right column
middle column | right column
middle column
To maintain the background colour of the centre column, you could apply the background-color property to the class .centre or to be more specific .column.centre (this type of CSS selector might not work in IE6 though).
The issue with the H2 is down to line-height, each font may have a different line-height so you will have to play with the value until you get it right. If you find you're getting the top position right, but text underneath is getting closer or overlapping, give the H2 a padding-bottom value.
I see you are using h2 and h3, but I can't find an h1 that you mentioned. I'd remove "line-height" option from your css to prevent wrong/incorrect spacing.
To run div's parallel you need to have the same padding and margin on both divs (the left and right side). To do so just create a class "floatingColumn" that would float to the left and append it to both divs with all the margins and paddings.