I want to shift a text label down by about 6px I am attaching the style:
.price-label{
font-family:Arial, Helvetica, sans-serif;
font-size:small;
position:relative;
bottom:-6px;
vertical-align:bottom;
}
The HTML is:
<table border="0" cellspacing="1" cellpadding="0">
<tr>
<td height="45" colspan="2" align="center"><p><span class="text">Name</span><span class="name-label"></span></p></td>
</tr>
<tr>
<td> </td>
<td class="price-label">54.67</td>
</tr>
<tr>
<td width="28" bgcolor="#CCCCCC"> </td>
<td height="45"> </td>
</tr>
<tr>
<td width="28" bgcolor="#CC3300"> </td>
<td height="112"> </td>
</tr>
<tr>
<td width="28" bgcolor="#CCCCCC"> </td>
<td height="22"> </td>
</tr>
</table>
Visually I want the 54.67 label to appear horizontally parallel - to the gap where the grey cell (top one) and red cell (second from top) meet. As the number represents that point in the bar to the left.
So if some other technqiue is better, please let me know, maybe I should be using DIVs would that give me more control?
If you want to shift it down, you need to shift it a positive 6px, not a negative 6px, and set the top property, not bottom
position: relative;
top: 6px;
If I'm reading this correctly, then you're trying to straddle the border between two table cells which won't work. You'll need to consolidate the first two cells in the right column and then rowspan="2" the new cell with the number in it. Then top or bottom vertically align the text in the cell and add some padding-top until it's aligned properly.
Label is an inline element, margin/padding would only work when you make it a block (inline-block, block or float). Try this:
.price-label {
padding:6px 0 0;
display: inline-block;
display: -moz-inline-box;
-moz-box-orient: vertical;
vertical-align: top;
zoom: 1;
*display: inline; }
You might be better off using:
.price-label { margin-top: 6px; }
It's difficult to know more without some context of what else is around that table cell though.
Use padding-top:6px; instead of positioning, which can get very messy with relation to sibling elements etc.. and has other-side effects.
Related
I have
<table>
<tr>
<td style='text-align:center'>
CENTERED
</td>
</tr>
</table>
I would like to ADD a single character either on the left or on the right of CENTERED, without affecting the x-position of the CENTERED string.
To be clear: NOT on the left of the cell, but on the left of the CENTERED string. And the CENTERED string can be anything, so I do not want to calculate something pixel-perfect and move it by some constant pixel value.
I tried fiddling with position:absolute/relative and padding-left/left but I couldn't find a working solution.
Ideally if it could be build with classes:
<table>
<tr>
<td style='text-align:center'>
<span class='centeredRegardless'>CENTERED</span>
<span class='onTheLeftWithoutAffectingThePreviousOne'>*</span>
</td>
</tr>
</table>
Then I will need those classes defined :)
Thank you
If you want some cells to have the extra character and some not you could put the extra character as content in a pseudo element positioned absolutely so it doesn't change the positioning of the actual text at all.
For a left character position is right: 100% and for a character on the right the positioning is left: 100%.
td {
position: relative;
}
td.extraChar::before {
content: '*';
position: absolute;
right: 100%;
}
<table>
<tr>
<td style='text-align:center' class="extraChar">
<span class='centeredRegardless'>CENTERED</span>
</td>
</tr>
<tr>
<td style='text-align:center'>
<span class='centeredRegardless'>CENTERED</span>
</td>
</tr>
</table>
Something like this? (remove and collapse the border when happy)
td { border: 1px solid black; min-width:20px; }
.left { text-align:left;}
.right { text-align:right;}
.center { text-align:center;}
<table>
<tr>
<td class="right">></td>
<td class="center">
CENTERED
</td>
<td class="left"><</td>
</tr>
</table>
How do I remove the extra line space between blocks of text? (i.e. January 29th and 31st cells in image).
And is there a way to remove padding from td so words could fill the cell width a little more? (i.e. "Observational" in week 2 topic cell to bottom left of image).
Here is some of the code:
th {
width=16.66%;
height: 30;
text-align: center;
}
td {
text-align: center;
font-size: 65%;
padding: 0;
margin: 0;
}
table {
table-layout: fixed;
margin: 0;
padding: 0;
}
<div class="table-responsive">
<table class="table table-bordered">
<tr>
<th>Week</th>
<th>Mon</th>
<th>Tues</th>
<th>Wed</th>
<th>Thurs</th>
<th>Fri</th>
</tr>
<tr>
<td style="line-height:1px;margin:0;"></td>
<td>
<p style="font-size:95%;line-height:1px;margin:0;text-align:center;">27</p>
</td>
<td>
<p style="font-size:95%;line-height:1px;margin:0;text-align:center;">28</p>
</td>
<td>
<p style="font-size:95%;line-height:1px;margin:0;text-align:center;">29</p>
</td>
<td>
<p style="font-size:95%;line-height:1px;margin:0;text-align:center;">30</p>
</td>
<td>
<p style="font-size:95%;line-height:1px;margin:0;text-align:center;">31</p>
</td>
</tr>
<tr>
<td><b>Week 2: Chapters 2-3</b><br>(Observational Studies)</td>
<td></td>
<td></td>
<td>
<p style="color:red;font-size:100%;">HW Assignment 1 Due</p><br>
<p style="color:blue;font-size:100%;">Chapter 2 Part 1 Prelecture Due</p>
</td>
<td></td>
<td>
<p style="color:red;font-size:100%;">HW Assignment 2 Due</p><br>
<p style="color:blue;font-size:100%;">Chapter 2 Part 2 Prelecture Due</p>
</td>
</tr>
</table>
</div>
You have a <br> between your 2 p tags on each of those that is adding extra space. Just remove that.
If you want even less space you could also lower/remove the margin on your p tags
p {
margin: 0;
}
Not all of your CSS seems to be in your question here so other styles might be interfering also, but you can likely change the margin of the p tag to whatever you'd like.
To remove border gap between blocks in table, you need to add border-collapse: collapse in your table style.
<table border-collapse="collapse" border="1">
You have a <br> between your 2 p tags, remove margin: 0 on your p tag.
to add from an earlier comment.
there's a few elements with default margins and padding that you can reset , you can reset these at once for all of them with : * {margin:0;padding:0;} if it bothers you to mind each element.
To set a box away from another , you can also reset margin , or padding only to the few that matters . p+p is an option to add a margin top only from the second p appearing so you can remove the <br> to be used inside a piece of text or in between inline boxes.
You can also increase line-height if that's what you want at every line of text , usually line-height:1.6em is an average value for reading confort you can use.
CSS requires : in between rules and values, not = (there was a typo for th width ).
example with line-height and the sibbling selector + to remove the br tags , also a display reset on your b tag.
* {
margin: 0;
padding: 0;
}
p+p {
margin-top: 1em;
}
b {
display: block;
margin-bottom: 1em;
}
th {
width: 16.66%;
height: 30px; /* value was missing */
text-align: center;
line-height: 1.6em;
}
td {
text-align: center;
font-size: 65%;
padding-top:1em;
}
table {
table-layout: fixed;
}
<div class="table-responsive">
<table class="table table-bordered">
<tr>
<th>Week</th>
<th>Mon</th>
<th>Tues</th>
<th>Wed</th>
<th>Thurs</th>
<th>Fri</th>
</tr>
<tr>
<td style="line-height:1px;margin:0;"></td>
<td>
<p style="font-size:95%;line-height:1px;margin:0;text-align:center;">27</p>
</td>
<td>
<p style="font-size:95%;line-height:1px;margin:0;text-align:center;">28</p>
</td>
<td>
<p style="font-size:95%;line-height:1px;margin:0;text-align:center;">29</p>
</td>
<td>
<p style="font-size:95%;line-height:1px;margin:0;text-align:center;">30</p>
</td>
<td>
<p style="font-size:95%;line-height:1px;margin:0;text-align:center;">31</p>
</td>
</tr>
<tr>
<td><b>Week 2: Chapters 2-3</b>(Observational Studies)</td>
<td></td>
<td></td>
<td>
<p style="color:red;font-size:100%;">HW Assignment 1 Due</p>
<p style="color:blue;font-size:100%;">Chapter 2 Part 1 Prelecture Due</p>
</td>
<td></td>
<td>
<p style="color:red;font-size:100%;">HW Assignment 2 Due</p>
<p style="color:blue;font-size:100%;">Chapter 2 Part 2 Prelecture Due</p>
</td>
</tr>
</table>
</div>
if you want some reading :
https://developer.mozilla.org/en-US/docs/Web/CSS/line-height
The line-height CSS property sets the height of a line box. It's commonly used to set the distance between lines of text. On block-level elements, it specifies the minimum height of line boxes within the element. On non-replaced inline elements, it specifies the height that is used to calculate line box height.
https://developer.mozilla.org/en-US/docs/Web/CSS/display
The display CSS property sets whether an element is treated as a block or inline element and the layout used for its children, such as flow layout, grid or flex.
https://developer.mozilla.org/en-US/docs/Web/CSS/Adjacent_sibling_combinator
The adjacent sibling combinator (+) separates two selectors and matches the second element only if it immediately follows the first element, and both are children of the same parent element.
also usefull to know : https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Selectors
I hope this helps you find more options you can have via CSS to set for your layouts.
I am trying to construct an html table with 6 rows. The first row has one line of text which is heading. The second row has 3 columns (set as three td elements). Third row has three values in 3 columns (set as three td elements). 4th row has 3 images in 3 columns (again set as three td elements). This works correctly so far. Now I want to add a fifth row which is a line of text that spans the entire div and has a dotted underline. When I add this element it just draws the the dotted border to 1/3rd of the div only. If I set the width to 100%, the elements above it are dragged to the right of the screen. What am I doing wrong? Here is my complete HTML snippet:
<div id="ToySummary" style="border:solid; border-width:4px; border-color:gray; padding:4px; margin:10px">
<span style="font-family:Calibri; font-size:large; color:midnightblue; text-align:right"><b>FINAL RESULTS SUMMARY</b></span>
<table style="width:100%">
<tr>
<td style="width:33%; font-size:large"><i>Result</i></td>
<td style="width:33%; font-size:large"><i>Lucky Toy</i></td>
<td style="width:33%; font-size:large"><i>Lucky Peoples</i> </td>
</tr>
<tr>
<td style="width:33%; font-size:large">{{overall_result}}</td>
<td style="width:33%; font-size:large">{{lucky}}</td>
<td style="width:33%; font-size:large">{{lucky_peoples}}</td>
</tr>
<tr>
<td><img src={{some_png}} style="width:50px;height:50px;"></td>
<td><img src={{some_other_png}} style="width:50px;height:50px;"></td>
<td><img src={{another_png}} style="width:50px;height:50px;"></td>
</tr>
<tr>
<td style=" border-bottom-style:dotted; border-bottom-color: black; border-bottom-width: 2px;"><b><em>{{animal_test_note}}</em></b></td>
</tr>
<tr>
<td>{{toy_score_note}}</td>
</tr>
</table>
</div>
You're trying to make the last two tr's span all the columns? Try this
<tr>
<td colspan="3" style=" border-bottom-style:dotted; border-bottom-color: black; border-bottom-width: 2px;"><b><em>{{animal_test_note}}</em></b></td>
</tr>
<tr>
<td colspan="3">{{toy_score_note}}</td>
</tr>
Use colspan attribute inside to span ur dotted border across all columns.
{{animal_test_note}}
<td colspan="3" style=" border-bottom-style:dotted; border-bottom-color: black; border-bottom-width: 2px;"><b><em>{{animal_test_note}}</em></b></td>
this will fix it.
When I understand you right, you try to align a dotted bottom border to your fifth td cell? And every try goes wrong and does not cover the whole bottom line?
I would recommend using CSS classes and ids instead of writing the style part directly into the td tags.
It's messy coding! No offense!
And for your approach:
HTML part:
<td id="dotted">
CSS part:
#dotted {
border-bottom: dotted #000000; /* or any colour you prefer! */
width:100%;
}
By the way: using % and then px in your td tags could cause your problem stick to one.
that should fix it
What I have is an html page and here an image for it :
As you can see I have a table and in the first row the border works just fine but in the next one in the table it doesn't show the vertical lines instead it shows around each button which I don't want too .. and the horizontal one its cut between each cell .. and I guess it's because of the margin .. so how can I make the horizontal lines continuous and the vertical lines appear? Can anyone tell me what the problem is?
Here is my html code:
<div id="wrapper">
</div>
<table>
<tr>
<td width="188px" class="button" ><img src="b2.png" /></td>
<td width="188px" class="button" ></td>
<td width="188px" class="button" ></td>
<td width="188px" class="button" ></td>
<td width="188px" class="button" ><img src="b1.png" /></td>
<td width="188px" class="button" ></td>
</tr>
</table>
and here is CSS :
.button {
width:180px;
text-align:center;
background:rgb(51,153,51);
position:relative;
overflow:hidden;
margin-top:1px;
margin-bottom:1px;
margin-left:1px;
margin-right:12px;
float: left; /* add this */
}
table td {
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
border:1.0px solid #000;
}
Can anyone help me?
There are a lot of problems in your code. The first one is that you are applying float: left to .button, which matches all your tds. Remove that line, it completely breaks the table.
Then you can add border-collapse: collapse to your table.
Also I'm not sure if you intended the table to be in the div.wrapper or not.
Fiddle: http://jsfiddle.net/bDHW6/
I'm not 100% sure what you're looking for, but I'd assume that you'd want your table style to include border-collapse: collapse. This will remove the spacing between adjacent cells and essentially merge their borders. As an alternative, if you still want both borders to be drawn, you might want to try border-spacing: (distance).
I have an div container where an image is displayed, above that image I would like to show an table. So, my problem is that the table isn't displayed over the image. Instead it is shown after the image? Can somebody tell me how I can align the table above the image?
<div id="foto2">
<img src="foto2.jpg" class="bg"> <span class="oben">
<table>
<tr>
<td onclick="playAudio('test.mp3')">Hamdullah</td>
<td onclick="playAudio('test2.mp3')">Was?</td>
</tr>
<tr>
<td onclick="playAudio('test.mp3')">Penner</td>
<td onclick="playAudio('test2.mp3')">Heidefick</td>
</tr>
</table>
</span>
</div>
And my css:
html, body {
margin: 0;
width: 100%;
height: 100%;
background-color:#00061c;
}
img.bg {
width: 100%;
}
.oben {
left: 0;
width: 100%;
}
#font-face {
font-family: "Hallo";
src: url(hallo.ttf);
}
table {
width:100%;
color:#FFF;
}
tr {
text-align:center;
}
td {
font-family: Hallo;
font-size: xx-large;
}
In order to see your table "above" ( I suppose you mean in the z axis.) so the image is displayed as a background of the table you can use 2 alternatives solutions
1) a background for your foto2 div.
2) an absolute positioned table
Alternative 1 : Background for your foto2 div.
I dont think you need that oben rule with a left property for a not positioned element (which actually wont work either). The span tag as well I will keep it out of the game unless you have a very particular reason for it...mmmm
This is the fiddle
This is the css for foto2 div. You may adjust the repeat and other properties at your will
#foto2 {
background:url( your image url here );
}
this is the html
<div id="foto2">
<table>
<tr>
<td onclick="playAudio('test.mp3')">Hamdullah</td>
<td onclick="playAudio('test2.mp3')">Was?</td>
</tr>
<tr>
<td onclick="playAudio('test.mp3')">Penner</td>
<td onclick="playAudio('test2.mp3')">Heidefick</td>
</tr>
</table>
</div>
Alternative 2: Absolute positioned table
With this alternative you may use a full width image and not to be constrained by the table size. its your call which alternative to use
Your foto2 div should be relative positioned.Then....
table {
position:absolute;
top:0px;
width:100%;
color:#FFF;
}
And here the fiddle for the absolute table
Have you tried putting the image after the table, like?
</table>
<img src="foto2.jpg" class="bg" />
Or put it in the lowest row of the table like:
<tr>
<td onclick="playAudio('test.mp3')">Penner</td>
<td onclick="playAudio('test2.mp3')">Heidefick</td>
</tr>
<tr>
<td><img src="foto2.jpg" class="bg"></td>
</tr>
</table>
By the way why are you using <span> and put the <table> inside it?
Try inserting it after the closing span tag
<div id="foto2">
<span class="oben">
<table>
<tr>
<td onclick="playAudio('test.mp3')">Hamdullah</td>
<td onclick="playAudio('test2.mp3')">Was?</td>
</tr>
<tr>
<td onclick="playAudio('test.mp3')">Penner</td>
<td onclick="playAudio('test2.mp3')">Heidefick</td>
</tr>
</table>
</span>
<img src="foto2.jpg" class="bg" />
</div>