I am trying to put text over an image. Something like this (i have changed the background image for propriety reasons)
The tool/app i am working with has following limitations -
Using negative margins don't work
Using position:absolute and position:relative don't work
fancy stuff like grid and flexbox also dont work
I know i know. You all are thinking "what the heck is it?". But if any one of you used salesforce visualforce email templates, you will know what i am talking about.
So i need to implement it without them. I want the image to retain its aspect ratio as i compress and expand browser window.
When i use background image html tag, i notice that background image does not maintain it's aspect ratio. In full screen mode, it stretches horizontally (actual image i am using has drawing of animated characters in it, which visible look horizontally stretched out)
<div style="color:white; background-image: url('images\background.png');max-width: 100%;height: auto;overflow: hidden;background-size: 100% 100%;">
But when i use an img tag, image fits the full screen nicely, and maintains its aspect ratio when i change browser window size
<img src="images/background.png" style="display: block;max-width: 100%;min-width: 100%;height: auto">
So i figured i need to come up with a solution without using background image (or negative margin or position:relative) and somehow get text on it.
I read a post where a guy suggested a hack using tables -
How to put text over an image without absolute positioning or setting the image as backbround
It seems to work to an extend. I need help fixing it. Here is the final code i have-
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div>
<table>
<tr>
<td></td>
<td rowspan=2 colspan=2><img src="images/background.png" style="display: block;max-width: 100%;min-width: 100%;height: auto"></td>
</tr>
<tr>
<td rowspan=2 colspan=2><h1 style="margin-top: 5rem;padding-bottom: 25rem; text-align: center; color:white">Thank you for submitting feedback</h1></td>
</tr>
</table>
</div>
</body>
</html>
Issue i am facing is if i compress browser window too much, the text float above the blue image, as shown below
Any help would be appreciated. Both text and image are part of table. Is there a way to make sure they stay within table boundaries, so they stay overlapped?
You need to align the image on the top in <td> element, because its default is middle. That is why it is being aligned that way and giving space above and below.
So, add vertical-align: top to <td> element.
td {
vertical-align: top;
}
Related
I need to display a table like this, but have the rows all be the same height even though the images in the table have varying sizes. The table needs to be responsive, so that everything resizes as the window size is changed.
The current code for each row is this:
<tr width="100%" height="10%" style="background-color:rgba(158,158,158,1); color: #FFFFFF">
<td width="25%" style="margin:0; padding:4" align="left">Wed <b>Sep 29</b></td>
<td width="100%" style="padding:4;display:flex; align-items:center; justify-content: center;" align="center"># <img src="https://upload.wikimedia.org/wikipedia/commons/8/81/Pittsburgh_Pirates_logo_2014.svg" width="15%" style="padding:4"> Pirates</td>
<td width="25%" style="padding:4;margin:0" align="right">6:35 PM</td>
</tr>
And the full code is here.
The problem with this is that the row sizes vary depending on the size of the logo. You can see that the logo for the Pirates is larger than the logo for the Cardinals, so the row height is taller for the Pirates.
I have succeeded in resizing the logo to be the same height as the row, based on this answer. This involved positioning the logo absolutely, though. The code for this is here (see the 7th row where I made the change). The problem with this approach is then that I can't figure out how to display the text (the # symbol and the team name) together inline with the team logo. Obviously I can't use display inline block because I've positioned the logo absolutely. So, my question is: how can I resize the team logo to be the height of the row while also displaying the logo inline with the text (centered)?
Scrap the abspos approach.
For the all the img logos, remove width='15%' attribute.
Add a vh height property that changes with the height of the window, e.g.
<tr>
...
<img src="pirates.svg" style="padding:4; height: 10vh;"> Pirates</td>
...
</tr>
<tr>
...
<img src="reds.svg" style="padding:4; height: 10vh;"> Pirates</td>
...
</tr>
I just started learning HTML today and was wondering how to have generic width so it fits the screen perfectly across every screen resolution?
Here is my current code, I tried using percents but code no worky!
<!doctype html>
<html>
<head>
<title>Home</title>
</head>
<body>
<table align="center" cellspacing="0" cellpadding="0">
<tr>
<td width="70%">
<a href="">
<img src="Resource/Header.png">
</a>
</td>
</tr>
</table>
</table>
</body>
</html>
If you want your table to span the full width of the screen you should define it like this:
<table align="center" cellspacing="0" cellpadding="0" style="width: 100%;">
...
In general don't use the width attribute but rather the style attribute
Also noted in the comments, it's better to use semantic markup and put your CSS in external files, but if your just starting out, it's probably a good way to get going.
Some other links you might find useful:
https://developer.mozilla.org/en-US/docs/Web/CSS/Tutorials
http://getbootstrap.com/ => Advanced CSS framework (I would advice you to learn the basics first)
It's unclear exactly what you're trying to do. One interpretation is that you're trying to have an image left-aligned inside a box which occupies 70% of the page's width (here showing Resource/Header.png to be 300 pixels wide):
In that case, you need to add two empty columns and fix the table's width to 100% of the page:
<table width="100%" align="center" cellpadding="0" cellspacing="0">
<tr>
<td width="15%"></td>
<td width="70%"><img src="Resource/Header.png"></td>
<td width="15%"></td>
</tr>
</table>
Try it on JSFiddle.
It's also a possibility that you want the image to take the whole 100% of the cell—that is, 70% of the page. In that case, you need to fix the width of the image to 100%:
<table width="100%" align="center" cellpadding="0" cellspacing="0">
<tr>
<td width="15%"></td>
<td width="70%"><img src="Resource/Header.png" width="100%"></td>
<td width="15%"></td>
</tr>
</table>
Try it on JSFiddle.
…but tables are for tabular data, not for layout.
Fortunately, every result we've achieved up to now is trivial to achieve using CSS. We need a container and an image:
<header> <!-- header is a new tag in HTML 5; use something else if you want -->
<img src="Resources/Header.png">
</header>
Then, you need to style it up with some CSS:
header {
width: 70%;
margin: 0 auto;
}
Try it on JSFiddle.
I think the margin: 0 auto; line requires some explanation. We are using shorthand style, where we first provide the vertical margins and then the horizontal margins. It is equivalent to
margin-left: auto;
margin-right: auto;
margin-top: 0;
margin-bottom: 0;
We don't actually care about the margin-top and margin-bottom; what actually makes it do anything is the margin-left and margin-right. When one of the margins is auto, the browser will use that margin to fill up any extra space. When both are auto, it will evenly distribute the space between them, thus evenly padding out both sides and centering our element.
Now say we want the latter style we achieved with the table. Then we give the img all of the space within that element:
header > img {
width: 100%;
}
Try it on JSFiddle.
Note that we only needed to change the CSS, and none of the HTML needed to change. This is one advantage of using CSS over tables for layout—change the styles in one place, everything that uses those styles is updated. Also note that the code using CSS is shorter, although this isn't always the case.
…but we still aren't accessible.
If you have an image, always add an alt attribute. The alt attribute is supposed to be a replacement for the image if the user agent cannot display the image, or if the user is blind, etc. For your header, whatever text appears would be fine:
<img src="Resources/Header.png" alt="Frank's Flower Shop">
For purely decorative elements, alt="" should be used. (Yes, an empty alt is better than no alt—but only when it is purely decorative.) Refrain from describing what it is—instead, provide content that could adequately replace the image. (e.g., “screenshot” is bad; “the main window contains a toolbar and a content viewing area” is much better.)
But if it's a header, a search engine might put less weight on the alt text of an image than if it were right there. It turns out that there's a trick we can do with CSS to achieve this. First, write out the HTML as it would appear to a search engine or user with a screenreader:
<header>
<h1>Frank's Flowers</h1>
</header>
Then we can put the image as a background on the h1 and dedent the text out of view:
h1 {
width: 300px;
height: 100px;
background: url(Resources/Header.png) no-repeat;
text-indent: -10000px;
}
Ta-da! Unfortunately, it's harder to combine this approach with scaling the image. In newer browsers, you can use background-size, but that was only introduced in CSS 3. For greatest compatibility, you may want to consider using plain text where possible and aligning that over a decorative background or just not scaling it.
I have a table (dim: 100px * 500px) with background image - 1px*10px.
I write the background code in css:
background: white url(../Images/line.png) repeat-x scroll top center;
But I want to convert it to html code in the table tag not css code,
like:
<table bgcolor="#FFF" background=".....">
How can I convert this code to HTML?
This is not good.
But :
<table background="http://yoursite/images/bg.png" width="500" height="500">
<tr>
<td>This is a test ...</td>
</tr>
</table>
<table style="background: white url(../Images/line.png) repeat-x scroll top center;">
If you want to style an element inline, just write the style attribute and the CSS properties into (like in this example).
You may need to adapt the path, if your CSS file is not located in the same place like your HTML document, and that's the first problem that occurs when you style elements inline.
It's better to do this via a CSS file, because your HTML markup becomes cleaner and it will be less expensive to make changes to your layout.
I have a HTML table, I would like to show an image as the content of a <td> element, and make the image occupy the whole <td> content area, so, I did the following thing:
<td id="my-img">
<img border="0" src="images/my.png" alt="Logo" width="60px"/>
</td>
I also used CSS to define the width of <td> which has the same width value as the <image> tag:
#my-img{
width: 60px;
}
But, the image does not occupy the whole <td> area, there are white spaces around the image always, why? how to get rid of it? (I am sure the white spaces are not from the PNG image file)
Try what Nick Brunt wrote, but also include the following for the css for the image:
margin: 0px;
Two things:
Firstly, when defining width as an attribute of an html tag, you don't need the px, just width="60" will do.
Secondly, the spaces around the image are probably caused by padding around the table cell. Add this CSS:
#my-img{
width: 60px;
padding: 0px;
}
As a side note, simply changing the width of the picture will cause it to stretch, you need to make sure you change the height as well otherwise the aspect ratio will be off.
Table cells have padding on them by default, which pushes the content in from the border.
You can either do:
<table cellpadding="0">
or you can do
<td style="padding: 0">
Depending on if you want to apply the zero padding to all table cells or just that specific table cell.
Also, providing the entire table in your question might allow us to help you further.
Try a different doctype for your html document:
http://www.w3schools.com/tags/tag_doctype.asp
XHTML sometimes solves similar problems.
If this doesn't help, consider using my.png as a background with background-repeat: no-repeat css style.
#my-img{
width: 60px;
background: no-repeat url(images/my.png);
}
I've got a site that I am working on that has greebles on the top left, top right, bottom left and bottom right corners. The full width of this is roughly 1100px. The actual content area is within the 960px layout.
I want the site to be properly centered right down to 960px, with the extra imagery disappearing out the right and left, but not causing any horizontal scrolling provided it is over 960px.
All four images are seperate files (can't really join them) and there is already a background image. Did I mention that they are added through CSS, rather than as in-file images?
Thanks!
Edit: This really has to work in IE6. Not my choice :(
You can use overflow: hidden in the CSS for your body tag (or whatever container tag you have your main content in) to prevent scrollbars. Some browsers allow you to constrain that just to horizontal or vertical content (-ms-overflow-x and overflow-x in your case, because you're dealing with the horizontal overflow; there are corresponding y styles). I think these are / are going to be part of CSS3, according to this link.
I'm sorry folks, but the only way I can see this working including IEs 6 and 7 is using tables.
Working example: Here
The "Greeble" text (I don't really know what a greeble is :) distorts the resizing somewhat, that'll disappear when the columns have background images only.
Issues: The columns need to contain something to be rendered by IE. The I built in will prevent the complete disappearance of the right and left columns. You will have to find a way around that, maybe with a 1x1 Pixel image or something. You will always have to have some content - even if just 1 pixel wide - in all columns.
Relies on: Tables with an unspecified width rendering the way they do. I think this is pretty reliable, tough.
Tested in: IE 5.5 and greater, Firefox
To anybody who dares downvote this because tables are evil: Find me a better, CSS-based solution that works in IE6 as well, and I will gladly remove mine.
HTML: No separation between markup and CSS, no semantics, just the working prototype.
<body style="margin: 0px">
<table style="width: 100%; height: 100%" border="0"
cellspacing="0" cellpadding="0">
<tr>
<td style="background-color: orange; height: 50%; color: white">
Greeble top left
</td>
<!-- The content area -->
<td style="width: 960px" rowspan="2">
<!-- This is important, serves as min-width replacement. -->
<div style="width: 960px; text-align: center">
I will always be 960 pixels wide
</div>
</td>
<td style="background-color: blue; color: white">
Greeble top right
</td>
</tr>
<tr>
<td style="background-color: blue; height: 50%; color: white">
Greeble bottom left
</td>
<td style="background-color: green; height: 50%; color: white">
Greeble bottom right
</td>
</tr>
</table>
</body>
I think I've worked out a ludicrously simple way of doing it: Add an empty div for each corner element, position it relatively and then give it a negative (or high positive for the rhs) margin - seems to work in IE 6 too.
Thanks for all the ideas though.
Not sure if you solved this, but I think it is possible using background images. If you layer the images on top of one another, without specifying a width for their containing divs, you should be able to pull it off. Here's the basics:
<body style="background: url(body-bg.png);">
<div style="background: url(greeble1.png);"></div>
<div style="background: url(greeble2.png);"></div>
<div style="background: url(greeble3.png);"></div>
<div style="background: url(greeble4.png);"></div>
<div class="wrapper" style="width: 960px;">
<p>Main Content Area</p>
</div>
</body
I think you'd need to use a bit of JS to position each of the greeble background images depending on the size of the image and the viewport, but it should be possible.