I have a tick based pricing table. Two of the ticks are not in vertical alignment with the other ticks.
For your convinence I've taken a print screen and highlited them:
The page itself is found here.
You could do this to avoid changing the style sheets. Although please do keep in mind that stylesheets are a better method to achieve this.
<td style="text-align: center !important; width: 145px !important;">
The 'width' property in table elements is not always respected by browsers and can lead to inconsistent behavior. Instead, use properties like 'min-width' and 'max-width' when trying to set table widths.
Ex.
table.header-features tr td {
text-align: center !important;
min-width: 33% !important;
max-width: 33% !important;
}
The problem is wheb you include a text "Restricted" inside td rather than the image with the green tick. You should set the width of td lower so that the green ticks are aligned
Just change this css
table.header-features tr td {
text-align: center !important;
width: 212px !important;
}
to this:
table.header-features tr td {
text-align: center !important;
width: 145px !important;
}
Related
I want to add padding in my hr,
hr {
padding-left: 200px;
}
but it's not working. how to add padding in my hr ?
Padding does not work in hr.
You have to use margin instead:
hr {
margin-left: 200px;
}
And it'll work.
Before adding padding, you should have to set a width for your hr otherwise it will display in full width.
hr:first-of-type{
width: 100px;
padding-left: 10px;
}
hr:last-of-type{
width: 100px;
padding-left: 50px;
}
<hr>
<hr>
Thanks and best regards!
HR is slightly different from most HTML tags in its defined behaviour, as it tries to fill up the whole width of the containing element.
The only way I know to stop it expanding over any margins is to explicitly set a width attribute
hr {
width: 90%;
padding-left: 200px;
}
Even then, it seems to ignore the padding, so you should use a margin instead:
hr {
width: 90%;
margin-left: 200px;
}
It's still kind of scrappy and imprecise. If the ruled line needs to be in line with some other element, you're probably best ensuring that they are in the same DIV, so that the ruled line can start at the left margin of the div.
As Python mentioned, padding does not work with hr
A good solution would be to place the hr inside a div
Another workaround (not recommended, more like a band-aid) would be to create a div and apply styling to it to create a line, particularly add a single border to it
For example,
<div class="divider"></div>
And for the styling
.divider {
border-top: 1px solid #081521; /* Create the border, i.e. Divider */
margin: 1rem auto; /* Add a Margin and Center the divider */
}
I'm learning CSS now, but I'm kinda lost at this point. What I want to achieve is a 3x4 table with SVGs in it. I have to rotate 90 degrees the image, but after that I show below what happens. The problem is that the td inside the table doesn't follow the width. I don't know if it's a basic behavior of tables, or something, but it took hours of research and didn't find anything.
Here's what I have:
.game img {
display: inline-block;
transform: rotate(90deg);
}
.game {
margin: auto;
}
.game td {
vertical-align: middle;
text-align: center;
}
table,
th,
td {
border: 1px solid black;
}
Rotated elements take the space they would take without the rotating (which is also apparent in the image you posted), which can result in overlaps.
Possibly solutions would be 1.) to give a min-width to the tds which is equal to the height of the images, or 2.) to change the image(s) themselves to be square (height = width), with the additional areas being transparent if needed, or 3.) save the image inthe rotated state and use that.
I am making a simple table to display information and wanted a border at the bottom of each row. I collapsed the borders to remove the space between the rows as to avoid the doubling of borders. And it works fine but when I adjust the screen size sometimes the border seems to break or buckle where it gets displaced slightly. I'm attaching an image of the phenomenon.
Here is the whole table as well:
And here is my CSS:
table{
border-collapse: collapse;
}
tbody{
width: 100% !important;
}
th{
width: 8%;
padding-left: 4%;
font-size: 1.5vw;
padding-top: 2%;
}
td{
width: 20%;
font-size: 1.5vw;
padding-top: 2%;
}
td ul {
width: 90%;
}
td ul li {
padding-top: 10%;
text-align: center;
padding-bottom: 10%;
}
tr{
border-bottom: solid 1px black !important;
}
Is there any way around this? Or is it more a matter of my content?
Your table row borders work only as a side-effect of conflict-resolution in the border-collapse algorithm. A table row is not meant to have borders, but since the style is applied, and borders are collapsed, the browser attempts to resolve any potentially conflicting styles by applying border styles of the parent to the respective cells it houses.
What's actually being rendered is a series of cells of slightly varying height, each with its own bottom border resolved from the value taken from the parent tr element.
One alternative might be to wrap the first row with a thead element and each successive row with a tbody element, and then set them to display: block with border-bottom.
You can work out some different solutions, but the main issue here is just a misunderstanding of how borders work on table elements, and the W3C link should help to sort that out.
At small sizes this table becomes impossible to read, so I'd also recommend that you read Richard Rutter on designing tables to be read, and also avoid using percentage and viewport-based units for font-size and padding.
I was looking to implement the following design to the HTML/CSS.
I have got problems with the text overflow in the column. Currently the table column width is given in the percentage format so that the column width will change depending on the screen size, but there is a minimum width too. In the first text column, you can see that the content is extending and produced a second line due to the long size. How to avoid this problem using the text overflow? Or any other solution? Also, you can see that a set of icons are appearing in the same row when the mouse hover takes place. At this time, the text below the icons should hide and it should be shortened as shown in the design. Can you advise me to get a solution to this problem? I have tried text-overflow: ellipsis. But I'm getting problem when the screen width changes. Since I don't have a minimum width due to the variable column width, how to cut short the text in this field? Also in the hover case ??
Please let me know if you want to know anything else.
If you don't want the text to split in multiple rows, add white-space:nowrap rule.
Then, set a max-width for the cell.
For the icons, position them in absolute to the right, with a z-index higher then the text. You'll have to add a relative position to the containing cell also.
To keep them visible over text, i've added a background color (and some left padding).
EDIT: Fix for Mozilla
Mozilla seems to ignore position:relative; for td elements.
To fix it, you've to wrap the td contents inside another div, and apply this style
.tables td {
font-weight: 400;
font-size: 13px;
border-bottom: 1px solid #E1E1E1;
line-height: 38px;
text-align: right;
white-space: nowrap;
max-width: 200px; /* just an example */
}
.tables td > div {
overflow: hidden;
width:100%;
position: relative;
}
.linkFunctions {
display: none;
padding-top: 14px;
position: absolute;
right: 0;
z-index: 999;
background-color: #FFF9DC;
padding-left: 3px;
width: 100%;
max-width: 120px; /* just an example */
text-overflow: ellipsis;
overflow: hidden;
}
It's not exactly what you want (regarding the elipsis) but comes very close.
For the <a> inside the <td> add
td a{
display:block;
overflow:hidden;
width:100%;
white-space:nowrap;
}
(You might need to add a class to them to more easily target them and not ALL <a> inside <td>s).
And regarding the hover. Float the div.linkFunctions right, add the yellow background to it and it will look like it cuts the text accordingly.
All of those require a width to be set, which doesn't make tables fluid as they are intended to be. Use this: http://jsfiddle.net/maruxa1j/
That allows you to automatically set widths on <td> as percentages and the :after automatically sizes the overflowed <span>
Example of problem http://img638.imageshack.us/img638/3733/97914817.jpg
I'm trying to recode one of my older forms. It was filled with tables that I want to replace with CSS. However I'm having trouble having text and a form element aligned vertically together. As the picture shows the text defaults to starting at the top instead of in the middle. The blue highlights around the row is dreamweavers interpretation / selection of what is going on.
I have label and input divs, both floated left, inside a div called #light, which is inside a general container. This is what my css code looks like:
#contentBox{
width: 600px;
float: left;
background-color: #e2e2e2;
overflow: auto;
border-color: #c5c5c5;
border-width: 1px;
border-style: solid;
font-size: 12px;
}
#light {
float: left;
width: 500px;
padding: 15px;
background-color: #e2e2e2;
margin: 7px;
border-color: #c5c5c5;
border-width: 1px;
border-style: solid;
vertical-align: middle;
}
input {
float: right;
width: 20em;
}
label {
float: left;
text-align: right;
vertical-align: baseline;
}
Any idea what the problem is? I've tried swapping around the vertical-align in different divs, floating in different directions, getting rid of the label but I just end up with more problems rather than less.
You cannot use vertical-align on elements unless they are table cells (or displayed as such) as this article explains. Set line-height to the element height if you've only got one row of text.
Usually, to solve that problem, I use the line-height property:
Ex:
div{width:600px;font:normal normal 12px/30px Arial, Helvetica, sans-serif;}
This will set the font to 12px, and the line-height to 30px, keeping the font vertically align within the 30px of its line.
Vertical alignment of text can be incredibly annoying or incredibly easy.
If the size of all the involved elements are known, your best bet is to set manual padding/margins on the text itself to make sure it's aligned.
If the content you want to center vertically is dynamic, this is your best bet.
Not sure, but your input tag is set to "float:right", so its height won't be taken into account by the parent. Hence, the height of the parent is actually probably the height of the label (I suspect dreamweaver is not interpreting correctly what browsers do.) Try to remove the float on the input tag and see if it makes a difference.
Vertical alignment can be applied only to inline elements.
The best solution is to modify your HTML and make it like in this examples
You could go for a 'cheap' solution and apply a padding-top to the label divs.