I am trying to create a rounded header that could possible be multiple lines. My problem is that the left and right images start to repeat themselves if the text needs to go on another line.
Edit If you need the images: http://www.filedropper.com/corners
CSS
.Label
{
color:White;
}
.Left
{
background:url('images/tab_left.png') repeat-y;
height:auto;
width:12px;
}
.Middle
{
width:200px;
height:auto;
background:url('images/tab_mid.png');
font-weight:lighter;
background-repeat:repeat-x;
color:White;
vertical-align:middle;
padding-top:1px;
text-align:center;
}
.Right
{
background:url('images/tab_right.png') repeat-y;
height:auto;
width:12px;
}
HTML
<table style="height:auto;" cellspacing="0" cellpadding="0" border="0">
<tr>
<td class="Left"></td>
<td class="Middle"><asp:Label runat="server" ID="Label1" Text="Label1" CssClass="Label" /></td>
<td class="Right"></td>
</tr>
</table>
The images that you provided are for one-line only. If you want it to go multiple lines, you will have to do some extra work. Also the images have a gradient, so it will not be possible to use them for multiple lines.
On the other hand, JQuery offers a much simpler solution for rounded corners. A lot less pain and flexible.
Tutorials:Rounded Corners
Related
I wouldn't call myself a programmer at all but I do know some basic css. However, I have trouble creating a table that looks something like on this site: https://www.slotsia.com.
What I wish to achieve is that row numbering to the far left together with that corner graphic. I'm sure it's all done with css and the numbering is probably automatic.
I use wordpress and the plugin tablepress to create tables.
I did try to put the following code in the css which achieved the numbering, even if it starts wrong with 0 instead of 1.
.tablepress-id-4 {
counter-reset: rowNumber;
}
.tablepress-id-4 tr:not(:first-child) {
counter-increment: rowNumber;
}
.tablepress-id-4 tr td:first-child::before {
content: counter(rowNumber);
min-width: 1em;
margin-right: .5em;
}
Also, the larger text doesn't look like normal fonts? I'm thinking it's font awesome or google fonts or something? How to use that?
Thank you
Here's a fiddle demonstrating to accomplish that index thing in the cell : https://jsfiddle.net/59wfkzgs/2/
HTML
<table>
<tr>
<td>
<span class="index">1</span>
ABC
</td>
<td>
ABC
</td>
</tr>
<tr>
<td>
<span class="index">2</span>
ABC
</td>
<td>DEF</td>
</tr>
<tr>
<td>
<span class="index">3</span>
ABC
</td>
<td>DEF</td>
</tr>
</table>
CSS
table, tr, td {
font-family:"Segoe UI";
padding:20px;
border:solid 1px black;
border-collapse:collapse;
}
td {
text-align:center;
position:relative;
min-width:150px;
}
.index {
position:absolute;
top:-2px;
left:-2px;
width:30px;
height:30px;
border:solid 1px black;
border-radius:0 0 100px 0;
background-color:rgba(0,0,0,.5);
}
You are able to do -almost- everything you want in a table's cells, so you can stylish it in any way you want to. Do not fear of doing so :).
Hope it helps.
Dylan
I'm having some trouble formatting a table! I want to make a table in which all the cells stay at an equal width and height. In other words, so they don't overflow.
I can make it so that the cells don't overflow in the x-axis, by using table-layout:fixed, but I'm having some trouble preventing the cells overflowing in the y-axis. I want this to be hidden as well, but for some reason the CSS isn't co-operating with me!
I won't go into detail, as this isn't related to the problem I'm having, but I'm not looking for an absolute solution such as having a height:50px style. I would like a general solution to prevent this overflow, please!
I've provided some sample CSS and HTML below. Please let me know if you need any clarifications! http://jsfiddle.net/pdtua295/1/
CSS
table.pztable {
border-collapse:separate;
table-layout:fixed;
overflow:hidden;
margin:0px;
width:100px;
height:100px;
}
td.pzcol {
border:1px dotted #2F2F2F;
padding: 0px 2px 5px 2px;
text-align:center;
vertical-align:middle;
}
span.pztext {
font-family:Tahoma;
}
HTML
...
<table class="pztable">
<tbody>
<tr>
<td class="pzcol">
<span class="pztext">Alice</span>
</td>
<td class="pzcol">
<span class="pztext">Bob</span>
</td>
</tr>
<tr>
<td class="pzcol">
<span class="pztext">S<br>T<br>R<br>E<br>T<br>C<br>H</span>
</td>
<td class="pzcol">
<span class="pztext">This won't stretch horizontally.</span>
</td>
</tr>
</tbody>
</table>
...
try this
word-wrap: break-word;
this will break even word
[I edited your code][1]
[1]: http://jsfiddle.net/pdtua295/1/
This isn't tested, but in the CSS for the td your should add height: 50px; white-space: nowrap; overflow: ellipsis; that should do it.
Replace your css with
give min width and max-width to table td like
`table.pztable{
border-collapse:separate;
table-layout:fixed;
overflow:hidden;
margin:0px;
}
td.pzcol{
border:1px dotted #2F2F2F;
padding: 0px 2px 5px 2px;
text-align:center;
min-width:150px;
max-width:150px;
}`
Im creating a responsive table which contains a vertical divider. I want that divider to move along with the text according to all screen sizes. left and right td are responsive just the divider is creating problem.
The CSS is
.divider{
position: absolute;
left:30.5%;
top:6%;
bottom:25%;
border-left:2px solid #333;
overflow:hidden;
}
and the related html is
<table width="100%">
<tr>
<td>
this is test
</td>
<td><div class="divider"></div></td>
<td>
This is test2
</td>
</tr>
</table>
The problem is when I change the position from absolute to anything else in css it hides the divider.
In your case....its happening because i feel that your are giving position only to the div and not the containing <td>....give this parent td a position first
add height, width to html,body and your are good to go...
solution
CSS
html, body {
height:100%; /* added */
width:100%;/* added */
}
.divider {
position: relative; /* changed*/
left:30.5%;
top:6%;
bottom:25%;
border-left:2px solid #333;
overflow:hidden;
}
td.r {
position:absolute;/* added */
height:100%;/* added */
width:100%;/* added */
}
HTML
<table width="100%" border=1>
<tr>
<td>this is test</td>
<td class="r"> <!-- notice the added class-->
<div class="divider"></div>
</td>
<td>This is test2</td>
</tr>
</table>
EDIT
A much simpler and cleaner way to create divider is to use td only for divider, not the div....check this demo
Remove the div creating the divider and instead, add the divider class to td itself!
<table width="100%" border=0>
<tr>
<td>this is test</td>
<td class="divider"></td>
<td>This is test2</td>
</tr>
</table>
CSS
td {
text-align:center
}
td.divider {
position:absolute;
height:100%;
width:1px;
border:1px solid #000;
background:#000;
}
Is there a way I can achieve the position and formatting of this iframe with only css and divs instead of the table that I am using? I tired using 3 separate divs and applied css to them and could only partially achieve this format however the bottom of the iframe would overflow and it wasn't possible to view the bottom content of the page included.
<style>
body {
margin:0;
background-color:#efefef;
}
.frame{
width:100%;
height:100%;
margin:0px;
border-spacing:0;
border-collapse:collapse;
overflow:hidden;
}
.frame_leftspace{
width:250px;
}
.frame_topspace{
height:70px;
}
</style>
<table class="frame" width="100%">
<tr>
<td class="frame_topspace" colspan="2"></td>
</tr>
<tr>
<td class="frame_leftspace"></td>
<td>
<iframe style="width:100%; height:100%;" src="http://www.reddit.com/" frameborder="0"></iframe>
</td>
</tr>
</table>
This fiddle will show how to achieve this. First is your original code, then how I'd recreate it:
HTML:
<div class="topspace"></div>
<div class="iframe">
<iframe id="reddit" src="http://www.reddit.com/" frameborder="0"></iframe>
</div>
CSS:
.topspace { height: 70px; }
.iframe { padding-left: 250px; }
#reddit { height: 100%; width: 100%; }
Hope that helps.
I want to achieve this thing:
Height of table row and grey line should be dynamic depend on contents in right column.
I've read in How to make <div> fill <td> height, so I tried with this http://jsfiddle.net/hyNWy/
But still no luck. Any suggestions?
With a colon? Also, to get your spacing:
<td style="position:relative;">
<div style="width: 10px; position:absolute; top:10px; bottom:10px; background:grey">
</div>
</td>
EDIT:
I don't think it's possible without specifying an explicit height. The solution in the original question that you pointed to does not actually work. position:relative does not seem to apply correctly to table cells. This could well be intentional and part of the spec.
Did you try
<table>
<tr>
<td>
<div>
</div>
</td>
</tr>
</table>
with
tr { }
td { position:relative;height:300px; display:block; }
div {
width:10px;
position:absolute;
bottom:10px;
top:10px;
display:block;
background:grey
}
Here's a jsfiddle of that.