This is my first question and first website ever, a total beginner so I hope I'm doing it right :)
I made a table with pictures. I added height and width to each, like this:
<td>
<img src="numbers.jpg" title="Numbers" width="300" height="300">
</td>
It worked, but then I tried to delete the sizes and use my external CSS file instead. So i changed it to:
<td>
<img class="topics" src="numbers.jpg" title="Numbers">
</td>
And then added in the css file:
.topics {width: 300px;
height: 300px;}
It didn't work, and the pictures are now showing with the original size of the picture file itself. I also tried adding the class to the "td" part instead of the "img", that one didn't work either.
What am I doing wrong?
After being able to do this, with your answers I hope, I'd like another tip for adjusting the pictures to mobile version as well. I tried using percentage (%) and it didn't work. So any insights on that will be great :)
You forgot to say px in the stylings to specify its 300 pixels
.topics {
width: 300px;
height: 300px;
}
Add "px" to your pixel attribute
Be sure to link to your external stylesheet
.topics {
height:300px;
width:300px;
}
<head>
<link href="style.css" type="text/css" rel="stylesheet">
</head>
<td>
<img class="topics" src="numbers.jpg" title="Numbers">
</td>
Thanks!
I've just noticed that I forgot the px, indeed.
Sadly, it still doesn't work.
I know the link to the stylesheet is ok since it works on other elements, like the headlines. I'm trying to figure out what else I am missing here...
Related
This question already has answers here:
Setting the height of a table in HTML has no effect
(4 answers)
Closed 4 years ago.
I have a simple html table
I am not able to set the height for this table
Am i missing something
<table border="1" id="abc1" height="10px;" >
<tr><td><b>Name</b></td></tr>
<tr><td><b>Name</b></td></tr>
<tr><td><b>Name</b></td></tr>
<tr><td><b>Name</b></td></tr>
</table>
Place table inside a div and give height to that div.
Both border and height, which you're trying to set, are actually CSS attributes, not HTML.
Set them in the following way:
<table id="abc1" style="border: 1px; height:10px;" >
<tr><td><b>Name</b></td></tr>
<tr><td><b>Name</b></td></tr>
<tr><td><b>Name</b></td></tr>
<tr><td><b>Name</b></td></tr>
</table>
Or, alternatively, you can use a linked CSS style sheet like this:
#abc1 {
border: 1px;
height: 10px;
}
Just to let you know, setting the height of the table element sets the height of each row, if you want to set the height of the whole table, put the table in div tags and set the height of that element.
What are you missing? you're missing the concept of styling with CSS, try this tutorial: HTMLdog.com
I just solved a similar problem.
For this I used the line-height property for setting each element of table's size.
Also, here you can find more information: http://www.w3schools.com/cssref/pr_dim_line-height.asp
Here is it's usage:
<table style='line-height: 3px'>
Also you can use percentages instead of absolute values.
Firstly you need to know which html renderer will render your html code. Visit this site: http://www.campaignmonitor.com/css/ , after this you can decide which solution is better.
1) Use inline-css for your table tag like this:
<table style="height:50px;"></table>`
2) Use an internal style sheet for your table tags like this:
<head>
<style>
table { height:50px; }
p { color:blue; }
</style>
</head>
3) Use an external style sheet like this and give a height value for the table like this:
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
Or you can give a value for the td elements and then the table will automatically figure out it's size.
Example: if you work on an html email you can't use external css. You need to solve it with inline-css (solution 1 above). If it's not supported you are still able to do it in the td tags.
The following code works:
table{
height: 86px;
display: inline-block;
overflow-y: scroll;
}
I am helping a friend with his website (URL: http://mk7vrlist.altervista.org/databases/test.html). I used a table for the design and I put each single inputbox in a <td> .. </td>. I used Javascript for save the datas and PHP for upload them on the server. My problem is that when an user open this page, the table is not well aligned according to the background.
Screen of my desktop.
As you can see, the table is insede the black rectangle, but with other screen sizes the looking is not the same. For solve this problem I used the following code:
CSS:
body {
background-image:url('pictures/bgframe.png');
background-repeat:no-repeat;
background-attachment:fixed;
background-position:center;
}
input{
text-align:center;
}
In the table I used this code:
<table id="tab" border="0" style="width:1200px;" align="center">
<tr>
...
</tr>
</table>
This code is not working because with a smaller screen, the align of the table is not the same.Can you help me? If you want, here there is the entire code.
You probably should try relative CSS property, like: width:100%; (instead of hard-coded value in px) in order to scale it properly. Also, it might be useful to explicitly set HTML5 <body> CSS properties: padding:0;margin:0;
I've been looking for a way to position one of my tables that has an image in it. Its a little bit far to the left and I need to scoot it over to the right. So far my table is written like:
<TD>
<IMG SRC='http://farm8.staticflickr.com/7209/6978440877_10b1fcffc4_o.jpg'/>
</TD>
What do I need to add? I tried some css like:
position:absolute; z-index:2; left: 50px; top: 1040px;
-but it just appeared on the page as text. What should I add/write so that I can control where I put my table?
When you make a table in HTML you at least need to define the table, rows, and cells (not sure if you had these already, just posting truncated code):
<table>
<tr>
<td> ... </td>
</tr>
</table>
When you define CSS it needs to be in the proper place. You have a few choices. First, you can put it inline in a tag like this:
<table style="attribute:value; attribute:value;">
Or you can define it in the <head> (preferred):
<head>
...
<style type="text/css">
table{
attribute:value;
attribute:value;
}
</style>
</head>
Finally, that 1000 pixel offset is pretty high. Get comfortable with both relative and absolute positioning. Absolute positioning can lead to a lot of issues for beginners who don't understand how layouts flow together in my experience.
Hopefully that will get you started. There are a lot of great resources out there.
Try the following style for <Body> and <TD> tag it will remove the left space.
<body style="margin:0; padding:0;">
<TD style="padding-left:0;" >
If still unable to fix, please provide the complete code.
I have what seems like a simple problem, but i have yet to find a solution. I have a series of divs which may vary in height, thought they will generally be the same width. I would like a fluid layout that basically ends up generating a variable number of columns as the page is resized. Perfect for float left. The problem is that when the divs are different heights, there ends up being a lot of white space vertically between the elements.
Clearly, the simple solution is to write some javascript to do all of this for me. But i would hate to have to resort to that if there's a css solution.
Here is a simple example:
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>Simple Float Example</title>
<style type="text/css">
.dv { border: solid 1px red; float: left; width: 300px; }
</style>
</head>
<body>
<div>
<div style="height: 40px;" class="dv"></div>
<div style="height: 20px;" class="dv"></div>
<div style="height: 60px;" class="dv"></div>
<div style="height: 20px;" class="dv"></div>
</div>
</body>
</html>
You'll see that when the page is very narrow, everything looks as you would expect. All of the divs stack up. If you expand the page to full size, yet again - everything looks fine. But when there are 2 or 3 columns, look how much extra space there is. I'd post an image, but my reputation does not yet permit me to do so.
Anyway, i experimented with various display and position settings, and i couldn't get it to really do what i want.
Any suggestions? Thanks!
-RP
Are you after this type of look?
http://desandro.com/resources/jquery-masonry/
If so, no, there is no easy way to handle that with pure CSS. You need a bit of JS as well.
There is no particularly good way to generically handle this with CSS.
Read this previous answer I wrote that goes over the various options, and shows that they don't work:
CSS Floating Divs At Variable Heights
You're stuck with JavaScript. Fortunately, the JavaScript you need has already been written in the form of a jQuery plugin:
jQuery Masonry
I've suggested the same thing before:
Position floated elements directly under each other
css alignment question
I have a problem with my site.I cant make the table appears on the img. It appears down of the image or up of the image. I need some help with the codes. Actually i dont want the img to reapet and to fit in users window everytime. The code to insert the img is this
<body oncontextmenu="return false;" background="bg_body.jpg">
And the code that a actually helped me but didnt solved the problem 100% because table didnt appears with img is this
<style> <!-- body { margin: 0px; } --> </style>
<img src='whatever' style='width: 100%; height: 100%;' />
if you want a background image to fit the size of the browser (which i'm guessing at, but if you have a 100% height and width on your image, that seems what you're after), you could do something like this:
<style type="text/css">
*{margin:0;padding:0;}
html,body{height:100%;}
.backgroundlayer { position:absolute;top:0;left:0;z-index:1; }
.toplayer { position:absolute;top:0;left:0;z-index:2; }
</style>
and then in the body of your code...
<body>
<img src="someimage.png" style="height:100%;width:100%;" class="backgroundlayer" />
<div class="toplayer">
my content above the image...it doesn't have to be a div...use a table if you want
</div>
</body>
Consider using CSS background properties.
HTML (something like this, un-tested):
<body ... style="background-image:url('bg_body.jpg'); background-repeat: no-repeat;">
If you want your background image to "resize" to the browser, you will have to hack it to work. One common way is probably to use two div tags; the first one will contain the image at 100% size, with absolute positioning. The second one contains your actual body content, with a higher z-value. It is a lot more work than you might think.
For detailed discussion on this, see this thread: http://www.htmlcodetutorial.com/help/ftopic4503.html
There is a couple things here that don't make too much sense:
"oncontextmenu="return false;" are you trying to run some sort of javascript? If so, you need to call a function before the "return false", like so:
<body onload="someFunction() return false;">
Also, I don't think you can set a background for an element the way you did it, it would be more like this:
<table style="background:path/to/my/image/...">
I'd love to help some more, but please explain yourself a little better.
ok, I'd suggest you do something like this:
Whether it is on an external style sheet, or embedded inside the head tags, you can set the image size with some simple CSS, like so:
<style type="text/css">
body{
background-image:url(../path/to/image);
background-repeat:no-repeat;
height:100%;
width:100%;
}
</style>
Try this to see if it works, I'll help you more if it doesn't.