I created a but it's not aligning my text to the . I've tried adding !important but the results are still not working. How can I fix this?
Here is my code below:
<div>
<table width="100%" cellspacing="0" cellpadding="0" role="presentation">
<!--Bullet 1 -->
<tr>
<td align="center" style="background-color:#dc1f26;height: 26px; width: 26px; border-radius: 50%; display: inline-block;color: #ffffff;font-family:Arial,Helvetica,sans-serif;font-weight:bold;font-size:16px;vertical-align: middle!important;">1
</td>
</tr>
</table>
</div>
Please help?
The display: inline-block; renders the vertical-align ineffective.
Explanation: vertical-align is only valid for display: table-cell. So, if you change the display mode, the alignment becomes invalid.
Solution: Remove the display from the CSS style.
Add line-height:26px on td
<table>
<tr>
<td align="center" style="background-color:#dc1f26;height: 26px; width: 26px; border-radius: 50%; display: inline-block;color: #ffffff;font-family:Arial,Helvetica,sans-serif;font-weight:bold;font-size:16px;vertical-align: middle!important; line-height: 26px;">1 </td>
</tr>
</table>
Delete the both of "display:inline-block" and "vertical-align:middle" then add "text-align: center".
How about adding span for the text?
<span style="display:flex; height:100%; align-items:center; justify-content:center;">1</span>
Related
I am trying to create a profile box where the user would be able to see his own profile picture, and other account specific information and utilities, like their username, settings button, profile page button, etc. The way I went about doing this was with a table element centered using flex. Then, I colored the backgrounds of my divs to see what they are doing. I noticed white lines between the cells of my table, tried some things, did some research, found the border-collapse attribute, and used it. Problem is, only some of my lines went away, as shown in the picture below. Weirder enough, it seems to disappear when I zoom in and out using ctrl + scroll. My guess is that it's some sort of rounding error.
What to do?
.Leftside2 {
flex: 20%;
background-color: red;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-around;
}
.profile {
width: 90%;
border: 2px solid black;
display: flex;
justify-content: center;
border-collapse: collapse;
}
#profile_picture {
height: 100%;
padding: 5px;
background-color: orange;
display: flex;
justify-content: center;
}
#profile_picture img {
width: 80%;
height: 80%;
}
.friend_list {
width: 90%;
}
<div class="Leftside2">
<table class="profile">
<tr>
<td style="height: 30vh;border-width: 0px">
<div id="profile_picture"><img src="https://via.placeholder.com/450x400"></div>
</td>
</tr>
<tr>
<td style="border: 0 solid black; background-color: orange">Jill</td>
</tr>
<tr>
<td style="border-width: 0px">Eve</td>
</tr>
<tr>
<td style="border-width: 0px">John</td>
</tr>
</table>
<table class="friend_list">
<tr>
<td>Friends List</td>
</tr>
<tr>
<td>content</td>
</tr>
</table>
</div>
Edit: I tried putting cellpadding="0" and cellspacing="0" inside my and it didn't work. I also tried to explicitly state that margin = 0, padding = 0 in all table elements. I do not think that it's a margin/padding issue, as many have suggested below.
Edited code:
.profile {
width: 90%;
border: 2px solid black;
display: flex;
justify-content: center;
border-collapse: collapse;
padding: 0;
margin: 0;
}
.profile td {
padding: 0;
margin: 0;
}
Second edit:
<html lang = "en">
<head>
<link rel="stylesheet" href="../css/style.css">
<title>Find a Friend</title>
</head>
<body>
<div class="HeaderMenu">
<div style="margin-left:40px;margin-right:100px;background-color: #008aed;">
<button class="logout_button">Logout</button>
</div>
</div>
<div class="row">
<div class = "left_space"></div>
<div class="Leftside2">
<table class="profile" cellpadding="0" cellspacing="0">
<tr>
<td style="height: 30vh;border-width: 0px">
<div id="profile_picture"><img src="../img/placeholder.png"></div>
</td>
</tr>
<tr>
<td style="border: 0 solid black; background-color: orange">Jill</td>
</tr>
<tr>
<td style="border-width: 0px">Eve</td>
</tr>
<tr>
<td style="border-width: 0px">John</td>
</tr>
</table>
<table class="friend_list">
<tr>
<td>Friends List</td>
</tr>
<tr>
<td>content</td>
</tr>
</table>
</div>
<div class="Centerside2">
</div>
<div class="Rightside2">
</div>
<div class = "right_space"></div>
</div>
</body>
.profile td {
padding: 0;
}
adding this to your css should solve the problem. or you can add cellpadding="0" in your html table tag.
just adding attribute cellpadding="0" in your table tag will fix your issue.
Try adding this to your table tag:
cellspacing=“0”
Padding refers to the space inside the cell. Cell spacing is about how much space there is outside it.
I'm active on a side called My Anime List. It's for tracking your Anime.
On this site you can upload a custom CSS Design für your List I already achieved the design I want, but I want to improve it little by little so my first problem occurred.
I want to to crop the Animes Names, to fit everything in one row.
How can I crop it? All I know its sth about the table layout, I already made it fixed, but now I don't know how to proceed.
.table {
table-layout: fixed;
width: 100%;
}
I tried to edit the td1, td2, but I think I need to change the inside the td to achive what I want, but all I tried did nothing.
My List, for examples see #51,#58 in Completed
Thanks for helping me, sorry for my bad english and if you need other informations I'll try to provide it to you.
solution (worked for me)
td.td2 span, td.td1 span {
display:block;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}
.td1, .td2 {
background-color: #FFF;
border-color: #F2F2F2;
border-style: solid;
border-width: 0 0 1px !important;
max-width: 416px;
}
you may need text-overflow and turn span as a box :
td.td2 span {
display:block;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}
td.td2 span {
display:block;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}
table {
width:100%;
}
<table>
<tr>
<td class="td2" style="border-left-width: 1px;" align="center" width="30">28</td>
<td class="td2" style="border-left-width: 0">
<div style="float: right;">
<small>
Add -
More
</small>
</div>
<small style="float: right;margin:0.25em;">Airing</small>
<span>Tokyo Ghoul √A</span>
</td>
<td class="td2" align="center" width="45">5</td>
<td class="td2" align="center" width="50">TV</td>
<td class="td2" align="center" width="70">8/12</td>
<td class="td2" align="left" width="125"> <span id="tagLinks27899">Studio Pierrot</span>
<span id="tagRow27899" style="display: none;">Studio Pierrot</span>
</td>
<td class="td2" align="center" nowrap="" width="75"><span title=""> </span>
</td>
</tr>
</table>
Without seeing more of the code, I can only venture a guess as to what you want - you could try setting a height and max width for your <td> and using
overflow:hidden;
white-space: nowrap;
See Fiddle Here
EDIT:
GCyrillus added text-overflow:ellipsis; to the solution, and I hadn't even thought of it - it's a good way to make the text look neater. Updated Fiddle.
td.td2 span {
display:block;
white-space:nowrap;
overflow:hidden;
}
I want a image to fill up the table cell completely. with css i've set the padding to zero but it does not help. Anybody has any thoughts on this?
Greetz Job
.HTML
<div id="vakjes">
<table id="tabel" border="1">
<tr>
<td><img class="" src="images/jack.png"></td>
<td><img class="" src="images/jack.png"></td>
</tr>
<tr>
<td><img class="" src="images/jack.png"></td>
<td><img class="" src="images/jack.png"></td>
</tr>
</table>
</div>
CSS
table, tr, td {
border: 1px solid #FF7300;
padding: 0px;
vertical-align: bottom;
}
#tabel {
width: 345px;
height: 345px;
}
Here is a screenshot of my table
http://i62.tinypic.com/1584fnb.png
Try setting the height and width of your image:
here's a demo where i've set:
img{
width:100%;
height:100%
}
Alernatively, if you didn't want all images to be set, you could create it as:
.myStyle{
width:100%;
height:100%;
}
and then for your images add the class 'myStyle'.
Is it because you are setting the width and height of the table in CSS #tabel? Maybe the image is slightly smaller than the expected table size. Try it without the #tabel CSS.
I'm new to HTML and CSS. I have created a table where the distance between first and the second column is correct where as the distance between second and third column and the distance between third and forth column is greater than the first one. I want the distance between the second and third column and the distance between the third and forth column should be same as that of first and second column. How can I reduce this distance.
HTML
<table class="img_table">
<tr>
<td>
<img src="./images/FACILITIES.PNG"/>
<p><center>FACILITIES</br>MANAGEMENT</center></p>
</td>
<td>
<img src="./images/RESALE.PNG"/>
<p><center>RESALE</br>& RENTALS</center></p>
</td>
<td>
<img src="./images/AIR_CONDITIONER.PNG"/>
<p><center>AIR CONDITIONER</br>SERVICES</center></p>
</td>
<td>
<img src="./images/DEEP_CLEANING.PNG"/>
<p><center>DEEP CLEANING</br>& JANITORSERVICES</center></p>
</td>
</tr>
<tr>
<td>
<img src="./images/INTERIOR.PNG"/>
<p><center>INTERIOR</br>WORK</center></p>
</td>
<td>
<img src="./images/PAINTING.PNG"/>
<p><center>PAINTING</br>WORK</center></p>
</td>
<td>
<img src="./images/LANDSCAPING.PNG"/>
<p><center>LANDSCAPING</br>WORK</center></p>
</td>
<td>
<img src="./images/PEST_CONTROL.PNG"/>
<p><center>PEST CONTROL</br>WORK</center></p>
</td>
</tr>
<tr>
<td>
<img src="./images/SECURITY.PNG"/>
<p><center>SECURITY</br>SERVICES</center></p>
</td>
<td>
<img src="./images/CONCIERGE.PNG"/>
<p><center>CONCEIRGE</br>SERVICES</center></p>
</td>
<td>
<img src="./images/MOBILE_LANDLINE.PNG"/>
<p><center>MOBILE/LANDLINE</br>CONNECTION</center></p>
</td>
<td>
<img src="./images/UTILITY.PNG"/>
<p><center>UTILITY &</br>BILL PAYMENT</center></p>
</td>
</tr>
</table>
CSS
table.img_table{
position: absolute;
left:160px;
top: 295px;
display: inline;
font-size:10px;
font-family:Verdana;
}
table.img_table td {
text-align: center;
padding: 10px
}
table.img_table td img {
display: block;
margin: 0 auto;
padding: 10px
height: 81px;
width: 80px;
}
I have created a fiddle out of it
Tables are designed to resize to fit the content, so having longer words or wider images will mean larger columns (I think), this can be fixed by inputting "white space" into the smaller columns or removing text from the larger ones. I am sure there is another way to do it, but it would have to involve resizing the text in some way. Hope this helps :)
Well this all is happening because of Your long names written on your table if you write only one letter each then you will get your coding is right just the problem is of the length of the words.
To prevent this you can do this :
table.img_table{
position: absolute;
left:160px;
top: 295px;
display: inline;
font-size:10px;
font-family:Verdana;
}
table.img_table td {
text-align: center;
padding: 10px
}
table.img_table td img {
display: block;
margin: 0 auto;
padding: 10px
height: 81px;
width: 100px;
}
By simply increasing the width: 100px and it will obviously give you equal distance between all your images.
FIDDLE
You can add following CSS.
table.img_table td {
vertical-align: top;
word-break: break-all;
}
you paragraph tag is not sized while image has size. so you must add
tr{
vertical-align:top;
}
p{
width:80px;
}
and remove all those br and center tags. i rather like to use divs instead of table
http://jsfiddle.net/6ABBx/4/
I am trying to make the button align up with the textbox, but I can not get it to work, if you need more code, I will be glad to post it :)
Here is my code: http://jsfiddle.net/Hunter4854/FFcAu/
<table class="chatMain" width="100%" height="100%" cellpadding="10" cellspacing="0" border="0">
<tr>
<td align="center" class="MainView" valign="middle">1</td>
<td align="center" valign="middle" class="SideAd" width="185px" rowspan="3">AD</td>
</tr>
<tr>
<td align="center" class="controls" valign="middle">
<textarea class="chatInput"></textarea>
<button type="submit">Send</button>
</td>
</tr>
</table>
Try to add vertical-align: middle to form elements themselves.
Entire contents (as a solid thing) of table cell are vertically aligned within the cell while mutual aligning of each inline element inside contents is specified via vertical-align of these inline elements, not table cell.
Add display: block and float: left to your .chatInput and button class:
.chatInput
{
display:block;
float:left;
width: 500px;
font-size: 12pt;
height: 75px;
box-sizing: border-box;
border: 1px solid #000;
padding-left: 5px;
padding-right: 5px;
outline: none;
resize:none;
}
button {
display:block;
float:left;
height:75px;
}
Fiddle: http://jsfiddle.net/kboucher/xH8sm/