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.
Related
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...
I have a table where I want to force page breaks before certain TR's when printing, so I searched around and found Applying "page-break-before" to a table row (tr), seemed simple enough: set display to block and use page-break-before as usual. However, it doesn't seem to be working (at least not in Chrome 59, Windows). For example:
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
tr.break-here {
display: block;
page-break-before: always;
}
</style>
</head>
<body>
<table>
<tr class="break-here"><td colspan="2">
<tr><td colspan="2">section
<tr><td>a<td>b
<tr><td>a<td>b
<tr><td>a<td>b
<tr class="break-here"><td colspan="2">
<tr><td colspan="2">section
<tr><td>a<td>b
<tr><td>a<td>b
<tr><td>a<td>b
<tr class="break-here"><td colspan="2">
<tr><td colspan="2">section
<tr><td>a<td>b
<tr><td>a<td>b
<tr><td>a<td>b
</table>
</body>
</html>
When printed, all three of those sections are on the same page, but it should be three separate pages.
There was a suggestion there to use a pseudo-element, which I tried to no avail. There was also a suggestion to ensure the TR's TD contained a block-level element, so I tried putting empty div's in the relevant cells in that example, also with no change.
There is also How to apply CSS page-break to print a table with lots of rows?, where I've tried:
This answer: No effect:
tr.break-here { display:block; page-break-after:always; }
tr.break-here { page-break-after:always; }
What am I doing wrong here? How do I do this? I'm also a little confused because the answer on the linked question seems well received with no issues noted in comments. Splitting the table into three tables is not an option, as I need column widths (which are auto-fit to complex content) to be identical on all pages.
I found a solution based on this answer and some experimentation, I have no idea why it works:
<tr>
<td>
<div></div>
<div style="page-break-before:always"></div>
All of the following are important:
No page break styling on the tr.
The cell must contain at least two divs.
Any div except the first must be page-break-before:always.
If the cell only contains one div it doesn't work. Unlike in that answer, clear:both does not seem to matter, nor does the third div.
I was unable to find a working solution that did not involve adding divs to the tr (e.g. with pseudo-elements).
So this is what I'm doing for now, although I wouldn't mind somebody explaining what's going on here or, more importantly, why the solution in the original linked question (display:block; page-break-before:always; on the tr) did not work for me.
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 can't get this to center. I've tried adding aligns everywhere, and every different combination of tags. I know the HTML isn't great... but I'm just trying to get something functional right now - not worrying about best practices.
<table class='navbar' width='100%'>
<tr>
<td class='navbar'>
<a href='#' class='cta cta-big cta-red'><center><span class='icon-go'>No</span></a></center>
</td>
<td class='navbar'>
<center><a href='#' class='cta cta-big cta-yellow'><span class='icon-download'>Maybe</span></a></center>
</td>
<td class='navbar'>
<center><a href='#' class='cta cta-big cta-green'><span class='icon-check'>Yes</span></a>
</td>
</tr>
</table>
Any help would be appreciated! Thanks!
These answers show there are different kinds of "centering" in CSS, let's call these two text centering and block centering. The 'text-align' property governs where lines of text flush up, right, left, center, justified (right and left with extra padding between the words to make them flush up). This is what usually is thought of as "centering", and what you can see as icons in WYSIWYG text editing.
When you do layout you often have another centering task, you want one box to be in the center of another box. By the CSS way of thinking this is the box model (almost everything is a box to CSS), and you can reformulate "center this box inside that box" into "make sure that the left margin and the right margin of the inner box are the same". For instance if the outer box is 200 pixels wide, and the inner box is 120 pixels wide, you want the left margin = right margin, or in other words each margin will have to be 40 pixels. (40+120+40 = 200).
Hard-coding this is a lot of calculation, and it will break if either box changes size. Fortunately we have the margin: auto value which does it for us (it does "OK, this box is 120 pixels wide, we have room for 200 pixels, then I'll split the extra 80 in half and give it to each margin"), and it will keep working even when the layout (and box sizes) change.
Finally we have vertical alignment. CSS doesn't do that satisfactory yet, but there is a trick. See http://www.w3.org/Style/Examples/007/center for more on this.
Oh, and the HTML 'center' element mixed those two above models, but it didn't do it very well. I would advise you to stay away from the center tag (besides it is a good idea to keep style apart from markup).
Get rid of the <center> tags:
<table class='navbar' width='100%'>
<tr>
<td class='navbar'>
<a href='#' class='cta cta-big cta-red'><span class='icon-go'>No</span></a>
</td>
<td class='navbar'>
<a href='#' class='cta cta-big cta-yellow'><span class='icon-download'>Maybe</span></a>
</td>
<td class='navbar'>
<a href='#' class='cta cta-big cta-green'><span class='icon-check'>Yes</span></a>
</td>
</tr>
</table>
And use CSS to do the centering:
table {
text-align:center;
}
Demo: http://jsfiddle.net/w7rWx/
"Not worrying about best practices" is often a difficult way to "get something functional", especially cross-browser. It's in your best interest to at least make an effort, consider adopting a different approach towards HTML/CSS.
Try this css.
.center {
float: none;
margin: 0 auto;
padding: 0;
position: relative;
}
margin: 0 auto; does the trick of centering. BTW, mentioning the width attribute also will make sure that the right and left margins depending on the window size.
In the first <td>, you have your HTML organized like so:
<a><center><span></span></a></center>
You're closing the tags in the wrong order; from the other two lines, it looks like you meant to do:
<center><a><span></span></a></center>
And in the third <td>, you didn't close the <center> at all.
Here's a fiddle with those changes made, and it looks like it works.
As already said: get rid of the center tag…
As for code Wesley Murch already gave you a very good answer though it will apply to all your table. I you want your style to apply only to a few elements try this:
.center{
text-align:center;
}
And apply it to "td" element by writing:
<td class='navbar center'>
<a href='#' class='cta cta-big cta-green'><span class='icon-check'>Yes</span></a>
</td>
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