I can't seem to vertically align the spans in my real basic code.
Here is the CSS:
.BigGreyTitle {font-size: 22px;
color: #676767;
font-weight: bolder;
}
.f1 {
font-size: 12px;
font-family: arial,'Lucida Grande','Bitstream Vera Sans',verdana,sans-serif;
}
.mainlink-u a {
color: #EF3834;
text-decoration: underline;
}
Here is the HTML Markup:
<table cellpadding="0" cellspacing="0" border="0" style="width:100%">
<tr>
<td class="BigGreyTitle" align="left">All Members In Montana</td>
<td align="right">
<span><img src="http://www.coalprepdir.com/images/schemes/red/ret_arrow.png" style="border:none" alt=""/></span>
<span style="padding-left:5px" class="f1 mainlink-u">Go Back To US Distribution</span></td>
</tr>
</table>
Take a look: http://jsfiddle.net/sJA92/
Any help to get these vertically aligned would be greatly appreciated..
Thanks!
Add a rule to vertically align the image to the middle.
img {
vertical-align:middle;
}
jsFiddle example
span {
vertical-align: top;
}
http://jsfiddle.net/sJA92/1/
For another level of vertical alignment (baseline, middle, bottom...) you'll need to adjust them with padding and margins.
I think you need to float the spans.
I set the td to align middle also.
See this link:
http://jsfiddle.net/sJA92/6/
td{
vertical-align:middle
}
td span{
float: left
}
Related
I am trying to create a table with the following two functionalities:
Some kind of 'bring-to-front with shadow' or '3d effect' that I see in some websites and find very pleasant.
Mouse cursor should have the 'hand' icon indicating the row is clickable.
I need these functionalities to appear whenever the user hover over the rows of the table. I tried using Bootstrap 4's table-hover class's functionality but couldn't achieve any of the two functionalities.
For the first functionality, I have an idea of adding a class with shadow to the <tr> being hovered. Don't know however, if this is the best approach. Is there some already defined class that could achieve such behavior?
And for the second functionality, I have no idea. Any suggestions?
Here's my code:
<div class="container">
<div class="table-wrapper">
<table class="table">
<thead id="thead_st" class="thead">
<tr>
<th class="thead-row" scope="col"></th>
<th class="thead-row" scope="col">1</th>
<th class="thead-row" scope="col">2</th>
<th class="thead-row" scope="col">3</th>
<th class="thead-row" scope="col">4</th>
<th class="thead-row" scope="col"></th>
</tr>
</thead>
<tbody>
<tr class="trow">
<th scope="row"></th>
<td class="score">4.7</td>
<td>Bla bla</td>
<td>2</td>
</tr>
</tbody>
</table>
</div>
</div>
CSS:
.table-wrapper {
border-radius: 8px;
overflow: hidden;
}
.container {
margin-top: 50px;
margin-bottom: 50px;
background: white;
border-radius: 8px;
padding: 0px;
}
body {
background: #ECEEF1;
font-family: 'Roboto', sans-serif;
color: #2C3A56;
}
tr {
font-size: 16.5px;
line-height: 50px;
padding: 0px;
font-weight: 100;
}
td, th {
display: table-cell;
text-align: center;
}
#thead_st {
background-color: #F6CE52;
border: 3px solid #F6CE52;
color: white;
}
.thead-row {
line-height: 20px;
font-weight: 100;
}
.trow:hover {
cursor:pointer; //set the cursor to pointer (hand)
background-color: blue; //sets hovered row's background color to blue
box-shadow: 5px 10px #888888;
}
Please Check Below Fiddle. Your two requirement completed.
Some kind of 'bring-to-front with shadow' or '3d effect' that I see in some websites and find very pleasant.
Mouse cursor should have the 'hand' icon indicating the row is clickable.
Fiddle
.trow
{
transition: transform .2s;
}
.trow:hover {
cursor:pointer;
transform: scale(1.03);
background:#ccc;
color:#fff;
}
In css, assuming your <tr> has .row class :
.row:hover{
cursor:pointer; //set the cursor to pointer (hand)
background-color:blue; //sets hovered row's background color to blue
box-shadow: 5px 10px #888888; //this is a box shadowing effect that you can tweak at your choice.
}
If further more you just want to make that "3D" effect you can play with width and height properties of the <tr> element to make it bigger over the others on hover event.
When I used to play with 3D effects I usually implemented 2D Transforms to adjust positioning with translation properties.
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;
}`
I got a Problem with CSS ! :)
I want to style a box to look like this one here:
http://dribbble.com/shots/1151646-Home-AgenceMe/attachments/148910 (Chart + 3 boxes right).
Right now i tried:
.wktcontent {
float: left;
width: 80%;
}
.wktinfo {
float: right;
width: 20%;
}
.wkttitle {
height:34px;
padding:5px;
border-bottom:1px solid #000000;
margin-bottom:20px;
}
.wktinfocontent {
font-weight:bold;
border-top:1px dashed #000000;
}
and in html:
<div class="wktcontent">
<center><h2>Title</h2></center>
<p><h3>Content</h3></p>
</div>
<div class="wktinfo">
<div class="wktinfocontent"><p><h4>27/7/2013</h4></p></div>
<div class="wktinfocontent"><p><h4>27/7/2013</h4></p></div>
<div class="wktinfocontent"><p><h4>27/7/2013</h4></p></div>
<div class="wktinfocontent"><p><h4>27/7/2013</h4></p></div>
</div>
I think everything aligns fine. But as soon as I add a border to the boxes by defining
border: 1px solid lightblue;
the title is placed over the infos on the right.
My second part of the Question is: How can I align the numbers on the right (as in the example on dribble) to the text next to it?
thank you so much!!
Adding a border changes an elements dimensions. If you add a 1px border to an element, then remove 1px from it's width and height. Failure to do this will result in issues with layout.
I couldn't reproduce your error on jsfiddle and chrome, what browser are you using?
As for the numbers, I'd suggest using a table in each div so you can align both halves properly.
Something along the lines of:
<div class="wktinfocontent">
<table>
<tr>
<td width="30%">
07
</td>
<td width="70%">
Hours play game today
</td>
</tr>
</table>
</div>
I have some Sharepoint-produced HTML markup which is not the best you've seen, and cannot interfere in the markup, but have to style it via CSS.
The markup goes more or less like this:
<div id="searchbox">
<table>
<tr>
<td>
<table class="mstable">
<tr>
<td><input></input></td>
<td><select><option></option><option></option></select></td>
</tr>
</table>
</table>
<div id="fontsize">
<a href=""/>
<a href=""/>
</div>
</div>
Here is the CSS applied
#searchbox {
float: right;
margin-right: 15px;
margin-top: 10px;
text-align: right;
width: 40%;
}
#fontsize {
float: right;
width: 46px;
}
.mstable {
border-collapse: collapse;
margin-left: 2px;
margin-top: 2px;
width: 100%;
color: #000000;
font-family: Verdana;
font-size: 0.7em;
font-style: normal;
font-weight: normal;
}
What I am trying to do is put the fontsize div, next to the table. Currently, after the table there's a break and the fontsize id goes under it.
I set display:inline to all the table descendants of searchbox and the fontsize div, and in Firefox I get the desired result, but in IE (all versions 8 and below) it ignores it..
I know my solution would be to remove these tables and make it div-only but I don't know if I have this possibility..
Edit: I resolved the problem by setting float:left to both table and fontsize div AND setting a width in pixels to the table itself such as to limit it from expanding to the whole searchbox div.
This should do it for you :
http://jsfiddle.net/nULYR/8/
works in ie7+
EDIT
<table>
<tr> // here is
<td> // the problem
<table class="mstable">
<tr>
<td><input></input></td>
<td><select><option></option><option></option></select></td>
</tr>
</table>
</table>
With : http://jsfiddle.net/nULYR/13/
Without : http://jsfiddle.net/nULYR/12/
try to float left the table that comes directly after the 'searchbox' div:
<div id="searchbox">
<table style="float: left;">
When I place an image followed by text in a table cell, the vertical alignment of the text shifts down compared to text in adjacent cells. I tried using a line-height CSS property, but it didn't seem to have an affect.
In the following example, I need "123 Description" to be flush with "cell one." Also, there is a space between the image and "123" by default. How can I adjust that - negative margins perhaps?
<html>
<head>
<style type="text/css">
table { border-collapse: collapse; }
td { border: thin solid; width: 10em;}
/* .adjust-text { line-height: 1.3em; } */
</style>
</head>
<body>
<table>
<tbody>
<tr>
<td>cell one</td>
<td>
<img src="small-star.png" />
<span class="adjust-text">123 Description</span>
</td>
</tr>
</tbody>
</table>
</body>
</html>
By default, the image is aligned with the baseline of the text, which is in effect pushing the text in that cell down. To address this, specify:
td img { vertical-align: top; }
There's a good summary of CSS vertical-align here.
To remove the space... remove the space:
<img src="http://juzzam.org:8888/AkoveServer-0.1/images/small-star.png" /><span class="adjust-text">123 Description</span>
http://jsfiddle.net/s38Uv/
To align your image with the cell, try putting the image in a css rule as a background image. Then adjust the y position of the background using background-position. Add a padding to the left of the element to display the text to the right of the image.
table { border-collapse: collapse; }
td { border: thin solid; width: 10em;}
.image {
background-image:url('http://juzzam.org:8888/AkoveServer-0.1/images/small-star.png');
background-position: 0 -2px;
padding-left:20px;
}
<span class="image">123 Description</span>
<html>
<head>
<style type="text/css">
table { border-collapse: collapse; }
td { border: thin solid; width: 10em;}
td { vertical-align: baseline;}
td img { vertical-align: middle;}
</style>
</head>
<body>
<table>
<tbody>
<tr>
<td>cell one</td>
<td>
<img src="small-star.png" />
<span style="margin: 0 0 0 -5;">123 Description</span>
</td>
</tr>
</tbody>
</table>
</body>
</html>
Have you tried a classic vertical-align:middle? Else put the image in it's own cell or leave the alignment at default and change the padding-bottom of all your cells will also give you the same thing.