Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 8 years ago.
Improve this question
This is my code, but the content of the second <td> is located at the bottom of the <td>
Here's what I have so far:
CSS
.TableMarket {
font-family: Tahoma;
width: 800px;
height:800px;
background-color: #9ca4b5;
margin-left: auto;
margin-right: auto;
}
.TableMarket td {
width:400px;
height:200px;
}
HTML
<table class="TableMarket" border="1">
<tr>
<td style="background-color:#00ff90;">
<img src="images/a.PNG" />
</td>
<td style="background-color:#ff6a00;" >
<p>
name....
family.....
age....
</p>
</td>
</tr>
</table>
Here's a JSFiddle to accompany the post: http://jsfiddle.net/WHFMk/
So, you want the text to be at the top of the box?
If so, vertical-align works;
vertical-align: top;
If not, can you clarify on the question; it's a little confusing.
http://jsfiddle.net/A7BrT/
If your question is how to get the cell content at the top, try this:
.TableMarket td {
width:400px;
height:200px;
vertical-align: top
}
Related
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 16 days ago.
Improve this question
I'm trying to recreate an album cover into a website and I can't figure out how to line things up like this.
image
I prefer only using HTML but I'm not opposed to CSS : )
I should also mention that I don't really know a ton about HTML, I more just make things for fun, so sorry if I don't understand any questions or certain terms
We can create a table, and then add some styling via CSS:
<style>
td {
border:4px solid red;
padding: 13px;
text-align: center;
text-transform: uppercase;
font-weight: 1000;
font-size: 25px;
font-family: Arial, sans-serif;
}
</style>
<table>
<tr>
<td>Heaven</td>
</tr>
<tr>
<td>Radiation</td>
</tr>
<tr>
<td>Radio</td>
</tr>
<tr>
<td>Television</td>
</tr>
</table>
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 2 years ago.
Improve this question
I'm currently stuck on a problem, I have tried using ".test" "#test" and "test" but nothing seems to select what I'm trying to work on. Below is the code I'm working on.
HTML
#test {
width: 40px;
height: 40px;
}
<div id="content">
<div id="test">
<img src="pictures/furniturepic1.jpg" alt="Furniture Picture" />
</div>
</div>
if your css file is linked properly with your html file. this one is going to work for you.
here is the css code:
div#content div#test {
width: 40px;
height: 40px;
}
or
#content #test {
background-color: blue;
width: 50px;
height: 50px;
}
both is going to work for you
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 8 years ago.
Improve this question
I wan to perform some text like the following format.
Mary salary: $1,000
Ray salary: $100
Dummy salary: $99
And the code of css is as follow:
<span class="some-class1">Mary salary:</span><span class="some-class2">$1,000</span><br/>
<span class="some-class1">Ray salary:</span><span class="some-class2">$100</span><br/>
<span class="some-class1">Dummy salary:</span><span class="some-class2">$99</span><br/>
In C, we can use printf() to achieve this easily.
Also, I know there is a way to do this by css, but I forget the code.
How can I perform the same effect like printf but using css only?
Here's a solution that requires you to set the width of each "column".
CSS:
.some-class1 {
display: inline-block;
text-align: right;
width: 100px;
}
.some-class2 {
display: inline-block;
text-align: right;
width: 60px;
}
Here's a fiddle.
The obvious solutions have already been given, but noting your explicit reference to printf another option is possible if you want to preformat the text: just put it in a container without any markup at all, and apply the following CSS to the container:
white-space:pre;
font-family:'Courier New',monospace;
Sample here. You could also use the <pre> element which has these styles as default.
While it goes without saying that most other solutions are better for most cases there are ample scenarios where this is a valid solution as well.
If you have only textual data, you can use table:
HTML
<table>
<tr>
<td>Mary salary:</td>
<td>$1,000</td>
</tr>
<tr>
<td>Ray salary:</td>
<td>$100</td>
</tr>
<tr>
<td>Dummy salary:</td>
<td>$99</td>
</tr>
</table>
CSS
td:nth-child(2n){
text-align: right;
}
JSFiddle
Fiddle with border and some fixed width
#Paul D. Waite's fiddle where the first column is a table header (<th>).
Put each row on a container:
<div class="row"><span class="some-class1">Mary salary:</span><span class="some-class2">$1,000</span></div>
<div class="row"><span class="some-class1">Ray salary:</span><span class="some-class2">$100</span></div>
<div class="row"><span class="some-class1">Dummy salary:</span><span class="some-class2">$99</span></div>
And the CSS:
.row {
width: 300px; /* or something else */
overflow: hidden;
}
.some-class1 {
float: left;
width: 50%;
text-align: right;
}
.some-class2 {
float: right;
width: 50%;
text-align: right;
}
jsFiddle Demo.
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 8 years ago.
Improve this question
<td valign="bottom">
<div style="width: 205px;height: 21px;border: 1px solid;">
<div style="height: 21px;background-color:#5f5f5f; background-size: 100px 10px;">
</div></div><br>
<span style="font-size:11px;">*Valid for 1 year from the date of purchase</span>
</td>
The above image , i have send it . i need the things like this in html , I have made a div and use background-color but it covers the whole portion but i want to cover the background only 30% or any % i want . Is there any kind of help u can give me
Actually, you need only one DIV element (instead of two):
LIVE DEMO
<div class="expirationBar"></div>
CSS:
.expirationBar{
border:1px solid #ddd;
width: 205px;
height:21px;
border-radius:3px;
background: #eee url(//placehold.it/1x1/5f5f5f) repeat-y;
background-size: 30%;
}
...but to get to your exact issue:
Instead of background-size use width
LIVE DEMO
<div style="height: 21px; background-color:#5f5f5f; width:30%;">
for the inner DIV
You're not using any image, so you don't have any background-size to apply to, cause it refers to images.
Otherwise, using images - than you can set it like:
LIVE DEMO
<div style="background:url('10x10_gray.jpg') repeat-y; background-size:30%; height:21px; "></div>
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 8 years ago.
Improve this question
I would like for the number and the word members to be aligned.
What am I doing wrong?
Link here
Add float:left to id stat-left
Check this updated DEMO
#stat-leftgive to`
display:inline-block
as like this
#stat-left {
display:inline-block;
vertical-align:top;
}
Demo
Add style="float:left" to the div with number :)
It will allow next Divs to float object from left side :)
<div id="connections">
<div id="stat">
<div style="float:left"id="stat-left">
<p span class="number"> 2,476 </p>
</div>
<div id="stat-right">
<p> Followers </p>
</div>
</div>
</div>
You could quite easily condense your code. Rather than using a paragraph tag, why not use a span instead? Paragraph tags are automatically block level elements, but spans are inline by default.
jsfiddle.
i tried to make a code for your with only one div and minimize code
HTML
<div id="connections">
<p class="number"> 2,476 </p>
<p class="stat-right">Followers </p>
</div>
CSS
#connections {
margin: 0px;
width: 150px;
font-family: calibri;
font-size: 22;
color: #444;
border:1px solid red;
overflow:hidden;
}
.number {
margin: 0px;
padding: 0px;
float:left;
}
.stat-right {
float:right;
margin-top:7px;
}
Check the demo :- http://jsfiddle.net/EC63P/35/