I have been trying to make a Table based navigation bar made of 5 side by side images that, when hovered and clicked, "highlight" using reduced opacity on :active and :hover with a light background color. For example
.navbright {
background-color:#FFC39A;
}
.navbright:hover {
opacity: 0.6;
}
.navbright:active {
opacity: 0.3;
}
The problem is the implementation of the background color. It is always sitting lower than the image by a few pixels. All the solutions I've researched have not worked, i.e. border-collapse:collapse; margin-bottom:-3px; setting all borders padding spacing margins to 0 etc etc.
I would like to find a Table solution based around eliminating the extra space/ background space. If this is not possible, perhaps someone can tell me how to construct the same construct using strictly CSS instead of a table.
The one case where I got it to "work" is when I used divs, and set the background-color as part of the div's class i.e.:
<td><div class="navbright"><img src="/images/Home.jpg" alt="" width="200"></div></td>
However, with this solution there was an annoying extra line appearing during the :active phase, which is unresolved here: CSS HTML line appearing on div :active not to mention the fact that the background image ceased working...
So I set out to solve it using table bgcolor. I cannot get rid of the extra background color showing up beneathe the table no matter what I do. I am exhausted, and need expert help. Here's the table coding:
<table id="page" align="center" width="1000" height="37">
<tr>
<td><a class="navbright" href="http://www.criticalawakening.com"><img src="/images/Home.jpg" alt=""></a></td>
<td><a class="navbright" href="http://www.criticalawakening.com/Articles.html"><img src="/images/Articles.jpg" alt=""></a></td>
<td><a class="navbright" href="http://www.criticalawakening.com/Forum.html"><img src="/images/Forum.jpg" alt=""></a></td>
<td><a class="navbright" href="http://www.criticalawakening.com/Store.html"><img src="/images/Store.jpg" alt=""></a></td>
<td><a class="navbright" href="http://www.criticalawakening.com/Contact.html"><img src="/images/Contact.jpg" alt=""><a></a></td>
</tr>
with #page basically being an attempt to collapse the extra space
#page td {
padding:0; margin:0;
}
#page {
border-collapse: collapse;
}
Any help is appreciated. And also, if someone has a good idea for a CSS only design without tables to achieve the same thing please let me know. Basically, its a 1000px wide centered column.
Wow, that was a ton of work. I found a solution, perhaps not THE best solution.
First, I set the TABLE to house the background color, and displayed it as a BLOCK...
<table style="display:block;position:relative;top:0px;" align="center" height="37" width="1000" bgcolor="#FFC39A" cellpadding="0" cellspacing="0">
I decided to approach it with a simple inline-series of images. I set the IMAGE as the .navbar class, and changed its rules as following:
.navbright {
position: relative;
top: 0px;
}
Taking away the whole background task from the class entirely. Setting the positions to relative allowed much more flexibility with the positioning, even though they are both modified by 0px... go figure...
There is still one last glitch of a border showing upon :active around my links but that is another question... CSS HTML line appearing on div :active
Related
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;
}
I'm fairly new to html/css. I have a bit of code I'm wondering if you guys can help me modify. So. I'm working on a gallery where I am cropping the images by making them the background of a table (simplified to two columns, it's actually a 3x3 grid):
<table cellpadding="0" border="0">
<tr>
<td width="275px" height="200px" align="center" background="images/kitchen/1.jpg"></td>
<td width="275px" height="200px" align="center" background="images/kitchen/2.jpg"></td>
</tr>
</table>
Now what I'm trying to do is either have the full images popup on mouse hover or have the image blow up on mouse hover where the other images would be pushed out of the way naturally (where the image would alternate to the full size and back on mouse contact/removal)
A helpful bit of code I was able to find was this one but I can't figure out how to make it work with the table and I also don't know how to make the "Required text" field disappear when I roll over it with the mouse.
html:
Required text<img src="image url" />
CSS:
a img { display:none; }
a:hover img { display:block; }
A couple noob questions but thanks for the help!
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);
}