Original Tabe:
My Table:
On your first look there is a difference, it become in 2 ways first is color of fonts which is not really important atm. What is important is that my ICON is far away from rest of the text and its not in the middle of the line, can somebody help me to fix it?
My CSS:
tr {
display: block;
border-bottom: 1px solid #ccc;
}
td {
padding: 7px 30px;
white-space: nowrap;
color:999999;
}
.icon {
background-image: url("images/cs_icon.png");
background-size: 24px 22px;
background-repeat: no-repeat;
padding-right: 20px;
}
td a{
color:#1a6eb6;
text-decoration: none;
}
My HTML:
<table>
<tr>
<td class="icon"></td>
<td>Public server#1</td>
<td>IP: 88.88.88.87:270115</td>
<td>Mapa: de_dust2</td>
<td>Hráči: 40/60</td>
<td>Detail</td>
</tr>
.....
Fiddle:
http://jsfiddle.net/Fzw7L/
It seems to be because you specified your icon to have padding-right: 20px;!
Try removing that, or lessening the value to something like 5px to reflect your mockup
Related
I wanted to make a text on a transparent strip with a colored strip on the left side. As in the picture below (the gray stripe should be transparent). The gray stripe would have to expand with the length of the text. If the text did not fit the width of the container, a new line would be created, and the orange bar and the gray bar would expand with the text (new line).
I was just starting to learn CSS and I wanted to achieve that, but I don't know how.
I made this small fiddle.
I've given background color to elements so that you can see how it acts based on amount of text. Change background-color to transparent on your h2 tag to get what you want.
HTML:
<div class="container">
<div class="label">
<h2 class="label-text">
Sample text
</h2>
</div>
</div>
and CSS:
.container {
width: 200px;
border: 1px solid Black;
background-color: gray;
}
.label {
background-color: white;
display: inline-block;
border-left: 10px solid red;
word-wrap: normal;
}
.label-text
{
display: inline-block;
padding-left: 10px;
}
Check this snippet:
#strip{
border: none;
}
#ribbon{
background-color: orange;
width: 15px;
height: 50px;
}
#strip-text{
padding-left: 20px;
background-color: #cccccc;
opacity: 0.6;
width: 185px;
height: 50px;
}
<table id="strip" cellspacing="0" cellpadding="0">
<tr>
<td id="ribbon">
</td>
<td id="strip-text">
EXAMPLE TEXT
</td>
</tr>
</table>
We have used CSS property opacity to add transparency to our strip.
Not sure what you've checked already (please share some code), but I think you want to use border CSS property, e.g.
border-left: 5px solid #ffdd00
EDIT:
Ok, since somebody downvoted this answer without clarification, I've realized by myself that probably OP is looking for total solution for his/her problem (so not only ribbon) - please check solution below then:
.ribbon {
color: #fff;
display: inline-block;
padding: 5px 10px;
border-left: 5px solid orange;
background: rgba(0, 0, 0, 0.25);
}
<div class="ribbon">Some text here</div>
You can achieve transparency by using rgba instead of opacity - it's supported by all modern browsers already.
This solution contains no hacks (or oldschool <TABLE> nodes!), requires only 1 element and is being widely supported by the browsers.
In my mobile theme I have been playing around with the CSS of my tables to make the information clearer and easier to understand for my users.
In column 1 I have a network logo, in column 2 I have text which I have formatted both as (display:table-cell) and given them a border of 1px.
The problem is I can't get them to vertically align exactly I have attached an image to show you exactly what I mean.
http://pasteboard.co/1vII00Yg.png
As its an image in column one when I first inserted it in there it was messed up so I did this in the CSS to try to align it to the adjacent text cells.
HTML
<td class="network-cell">
<center><img alt="EE" src="/wp-content/themes/wootique-child/images/network-logos/ee-logo.png" class="network-logo"></center>
</td>
CSS
.network-logo {
min-height: 30px;
min-width: 30px;
position: relative;
top: 5px !important;
}
.network-cell > center {
border-bottom: 1px solid gainsboro;
border-right: 1px solid gainsboro;
border-top: 1px solid gainsboro;
height: 39px;
position: relative;
top: 5px;
width: 100%;
}
The adjacent cells are formatted differently because they don't contain an image.
For example.
HTML
<td>
<p id="minutes" align="center">300</p>
</td>
CSS
#minutes, #texts, #data, #infinity {
background-color: ghostwhite;
border-color: gainsboro;
border-style: solid;
border-width: 1px;
color: black !important;
font-size: 13px;
font-weight: normal;
line-height: 3em;
padding-left: 1px;
padding-right: 1px;
width: 100%;
}
How can I make the column 1's border align exactly to the border of column 2,3 + 4?
I know I need to change these to classes also - to view the problem scroll to the bottom of the website and select view mobile version.
http://mobilereactor.co.uk/shop/mobile-phones/samsung-galaxy-j1-white-deals/
This question is way more complex than the question you highlighted it
to be a duplicate of, the rules are different and we are talking about
aligning objects formatted as table cells not table cells themselves!
Replace all the id= with class=, as id shouldn't be duplicated. Just remove the <tbody> structure there and replace with the following:
.row {font-family: 'Open Sans', 'Segoe UI', sans-serif; font-size: 10pt;}
.row > div {display: inline-block; vertical-align: middle; height: 40px; background: #f5f5f5; border: 1px solid #ccc; line-height: 40px; padding: 0 10px;}
.row .network-cell {background: #fff; padding: 0;}
.row img {display: inline-block; line-height: 1; vertical-align: middle;}
<div class="row">
<div class="network-cell">
<img class="network-logo" src="http://mobilereactor.co.uk//wp-content/themes/wootique-child/images/network-logos/three-logo.png" alt="Three" />
</div>
<div class="minutes">100</div>
<div class="infinity">unltd*</div>
<div class="data">500MB</div>
</div>
Preview
Try border-collapse: collapse on each offending element. I believe that would be <center> and <img>. border-spacing: 0 may be of use as well. Keep in mind that your metro stylesheet reset the border-collapse: separate, so either place the styles in a <style> block with !important, or use inline, or better yet, assign classes.
With minimal effort:
.network-cell > center {
...
...
top: 6px;
...
...
}
But use table for alignment isn't so good, in this case better div with display: inline-block, and the tag center is deprecated.
Before you disregard this question as removing the white space between the span elements will help me, let me assure you this particular issue is a bit different.
Issue: There is very small gap between span elements occurring only in IE11 only at certain width of the screen, which BTW is not an issue due to white space between span elements.
Code:
<table width="100%" height="50" cellspacing="0" cellpadding="0">
<tbody>
<tr height="15">
<td nowrap="nowrap" style="text-align: center;">
<button >
<span class="buttonLeft"></span><span class="buttonMiddle"><span class="buttonText" >Reset Page</span></span><span class="buttonRight"></span>
</button>
</td>
</tr>
</tbody>
</table>
code :
button {
background: none;
border:none;
}
.buttonLeft, .buttonMiddle, .buttonRight {
background-color: #23609D;
height: 20px;
vertical-align: middle;
padding-top: 2px;
height: 22px;
display: block;
float: left;
}
.buttonRight, .buttonLeft {
width: 10px;
}
.buttonLeft {
border-top-left-radius: 3px;
border-bottom-left-radius: 3px;
}
.buttonRight {
border-top-right-radius: 3px;
border-bottom-right-radius: 3px;
}
.buttonText {
white-space: nowrap;
color: #fff;
font-size: 12px;
cursor: pointer;
display: block;
margin-top: 2px;
}
Here is the fiddle for the same jsfiddle
You may not notice the issue at first, try re-sizing the Result section of the fiddle, you will be able to identify the issue.
You can see the resultant as below.
The issue can be solved by removing the style="text-align: center;"
on the td element in the above code or by removing the border-radius styles.
Since the same markup is being used at numerous places in my project, I really don't think changing the markup is the best way to go around.
I'm looking for a CSS solution or if not solution at least the reason behind this odd behavior.
I just add negative margin of 1px for both left and right SPANs :
span.buttonLeft {
border-top-left-radius: 3px;
border-bottom-left-radius: 3px;
margin-right:-1px;
}
span.buttonRight {
border-top-right-radius: 3px;
border-bottom-right-radius: 3px;
margin-left:-1px;
}
And add a padding to your .buttonText span in order to give 1px free around your text :
span.buttonText {
display: block;
margin-top: 2px;
padding:0 1px;
}
This solution works, even if it isn't a clean way to do. What happens here ?
2 SPANs are overlapping on the middle one (1px).
(Sorry, JSFiddle seems to be out of order, so I cannot provide a live Demo)
My markup is:
<table style="table-layout:fixed">
<tr>
<td class="key">
<div>Age:</div>
</td>
<td class="value">
<div>69</div>
</td>
</tr>
</table>
And my CSS is:
td.key
{
border-left: 1px solid #D6D6D6;
text-align: right;
font-weight: normal;
color: #7f7f7f;
background-color: peachpuff;
width: 115px;
}
td.key div
{
width: 100%;
background-color: lightseagreen;
}
"Computed Style" screenshots from Chrome for the TD element:
"Computed Style" screenshots from Chrome for the DIV child element:
Now when this renders in Chrome I get this result:
When this renders in IE7 I get this result:
Not sure what I'm doing wrong any help would be great!
NOTE: The problem does not occur on IE8+
If you want to apply an attribute to only IE7 and below, you could use the * key like so:
td.key
{
border-left: 1px solid #D6D6D6;
text-align: right;
font-weight: normal;
color: #7f7f7f;
background-color: peachpuff;
width: 115px;
*width: 105px;
}
This makes it so the width is 115 in all browsers, but once it's loaded in IE7 or below, it sets the width to 105px to cut off that extra space at the end.
It's more of a workaround than a solution, but it's still valid.
BACKGROUND:
I would like to have small labels in columns of a table.
I'm using some implemented parts of HTML5/CSS3 in my project, and this section specifically is for mobile devices. While both facts are not necessarily relevant, the bottom line is that I don't have to support Internet Explorer or even Firefox for that matter (just WebKit).
THE PROBLEM
With my current CSS approach, the vertical padding of the cell comes from the <span> element (set to display: block with top/bottom margins), which contains the "value" of the column. As a result there's no padding when the <span> is empty or missing (no value) and the label is not in place.
The "full" coulmns should give you the idea of where I want the labels to be, even if there's no value, and the <span> is not there.
I realize that I could use "non-breaking-space", but I would really like to avoid it.
I wonder if any of you have a fix / better way to do this? current code is below.
<!DOCTYPE html>
<html lang="en">
<head>
<title>ah</title>
<style>
body {
width: 320px;
}
/* TABLE */
table { width: 100%; border-collapse: collapse; font-family: arial; }
th, td { border: 1px solid #ccc; border-width: 0px 0px 1px 1px; }
th:last-child, td:last-child { border-right-width: 1px; }
tr:first-child th { border-top-width: 1px; background: #efefef; }
/* RELEVANT STUFF */
td {
padding: 3px;
}
td sup {
display: block;
}
td span {
display: block;
margin: 3px 0px;
text-align: center;
}
</style>
</head>
<body>
<table>
<tr>
<th colspan="3">something</th>
</tr>
<tr>
<td><sup>some label</sup><span>any content</span></td>
<td><sup>some label</sup><span>any content</span></td>
<td><sup>some label</sup><span></span></td><!-- No content, just a label -->
</tr>
</table>
</body>
</html>
As above, you can use:
td {
padding: 3px;
vertical-align:top;
}
If you wanted to retain the padding exactly, even on the invisible elements, you can force the hasLayout attribute on the empty span using:
td {
padding: 3px;
vertical-align:top;
}
td sup {
display: block;
}
td span {
display: inline-block;
margin: 3px 0px;
text-align: center;
width:100%;
}
The inline-block technique is discussed extensively at Drawing empty inline boxes in CSS?