I recently applied a hover feature to a set of buttons. When applied to a different website the coding was fine. When applied to this site the link/hotspot goes to the next button. For example: I have buttons home/about/gallery/blog/prints/contact and you would think with the dimensions set in CSS style sheet that the link would only apply to those dimensions. Not with this one. The link/hotspot shows linked to index.shtml from the edge of the table to the other side of the home button. There are spaces between buttons but the link/hotspot goes 50%across the space until it hits the next buttons link/hotspot. And the final button "contact" spans across to the opposite edge of the table. Any clues as to what I am doing wrong?
CSS:
div.nav-home {
margin-top: 10px;
margin-bottom: 0px;
margin-left: 130px;
Margin-right: -60px;
background-position: right top;
background-repeat: no-repeat;
width: 75px;
height: 64px;
}
#home {
background-image: url('img/home.png');
}
#home:hover {
background-image: url('img/home_hover.png');
}
Index.shtml:
<table width="1213" height="64" align="center" background="img/tablebg2.png">
<!--#include file="menubuttons.html" -->
menubuttons.html:
<tr>
<td align="center" width="75">
</div>
</td>
<td align="center" width="86">
</div>
</td>
<td align="center" width="94">
<a href="/gallery.shtml" title="GALLERY" ><div id="gallery" class="nav-gallery">
</div></a>
</td>
<td align="center" width="63">
</div>
</td>
<td align="center" width="85">
<a href="/prints.shtml" title="PRINTS" ><div id="prints" class="nav-prints">
</div></a>
</td>
<td align="center" width="103">
<a href="/contact.shtml" title="CONTACT" ><div id="contact" class="nav-contact">
</div></a>
</td>
</tr>
FIXED: (maybe not properly?)
I have only been coding for 2 months and have a pretty good idea on how to write it out, but I don't know what everything means such as the DIV tag. I know I was searching on here last night and I assumed I was to put the div inside a TD.
I was able to fix everything by simply adding a few spacer.png's before the first button in between each set of buttons and after the last button. This also fixed my spacing issues on the sides.
Thanks for the help. I simply am trying to find an easy way to make my buttons change on hover. This method was the first I found last night on here and am now trying to perfect it.. well in my head at least. I need to research on the unordered list a little because I have heard that that makes things more simple...
Here is the link(based off the back end of a site I recently finished) www.blackmarkettattoos.com/amysesco/index.shtml
I think the problem is the fact that you are using DIV, which is a container tag inside table's cell, and for both you apply style (to the DIV as class and to the TD as inline).
Generally, it is better to create menus with lists, but if you must use the code you provided, then try to remove width: 75px; from the div.nav-home.
Check these two links for how to create CSS menus with lists:
css.maxdesign.com.au
Dynamic Drive CSS Library
Related
SOLVED by P. Leger:
In my CSS I simply added/changed the vertical-align to top.
This worked for me
I am developing a simple schedule where the admin can manage users and add users to a specific date.
I want the '+' icon at the top of <td> inside a <table>.
Because if there are 3 people planned in on Monday and there are 2 people planned in on thuesday, the icons will be outlined by each other.
This is how it is right now:
You see the red line is straight if there are an equally number of values in a table
This is how I want it (photoshopped):
The red lines are in all rows straight.
The red lines are just an indication on how I want it to be (because in real they aren't there of course).
My code right now inside the <td></td>:
echo '<img src="../rooster/images/add.png" width="15" align="left" class="imgtable"><br/>
</div>';
And the class imgtable:
.imgtable {
float:top;
}
I tried every position and float. But I just need something that the image is fixed inside the table.
Currently I am just using a simple image, but I prefer using a font awesome icon.
I hope that you will understand my question.
Thanks for reading
Just position the icon absolutely and make sure the cell (, or whatever the icon's parent is) is positioned relatively. Then you can position the icon with left/right, and top/bottom.
<td style="position relative...">
<img src="..." style="position: absolute; left: 5px; top: 5px">
</td>
that should position them all in the same spot relative to their parent (the table cell).
Example: https://jsfiddle.net/silvertail/cej23cbh/
There is no float: top.
float: left | right | none | inherit
I think, you don't want the <a ...><img src=... /></a> fixed, but at the top of <td>. Therefore you have to access the <table> id or class. And from there the <td>. And set vertical-align: top.
HTML
<table id="myTable">
<tr>
<td>box</td>
...
</tr>
...
</table>
CSS
#myTable td {
vertical-align: top;
}
Example
The items in my table are not center. I'm still a beginner and know that it is bad practice to use tables these days but I feel I should start from the beginning. I have 2 items that I would like to center in the middle of the screen in the same row. Currently, the images are to the left.
<table>
<tr align="center">
<td>
<a href="http://sourceforge.net/">
<img src="Resource/download.png">
</a>
</td>
<td>
<a href="http://sourceforge.net/">
<img src="Resource/info.png">
</a>
</td>
</tr>
</table>
Just going to post this as a seperate answer, because of how horrible the convention to use attributes for styling is. Don't ever use attributes for styling. See the MDN attributes list. See all those thumbs down next to the attribute name? They mean: 'Don't use this attribute'. It does still work, but it's just horrible. Like using deprecated tags like center, using deprecated attributes is just really bad habit. The MDN article mentions how to achieve the same thing as what you'd do with the attribute, but without the deprecated HTML.
In this situation, use:
<table style="width:100%;border:1px solid black;">
and:
<tr style="text-align:center;">
The final fiddle would be this.
Jatin gave you a solution, but he didn't explain it. Your align attribute is set properly and it's working, but the table is only as wide as its contents. The text is centered within the table as you intended, but the table itself isn't centered. Since the table is left-justified by default, it looks like it's not centered.
Especially as a beginner, you should try to do things the right way. It'll be much easier for you later if you adopt good practices early. A table is the wrong thing for what you're trying to do.
An important habit to get into is to put only your content, like text and pictures, into the HTML and put all the code that controls how it looks into CSS. Although the align property is valid (in HTML 4), it means you're putting something that controls the appearance into the HTML. The same goes for the border and width properties.
This is how you should control the appearance of a table:
HTML
<table>
<tr>
<td>
<img src="Resource/download.png">
</td>
<td>
<img src="Resource/info.png">
</td>
</tr>
</table>
CSS
table {
border: 1px solid gray;
}
td {
border: 1px solid gray;
text-align: center;
}
A better way might be like this:
HTML
Google
Yahoo
CSS
a {
display: block;
width: 50%;
float: left;
text-align: center;
}
If you wanted to center more than just a couple of links, you may want to put it into a block or a paragraph.
I put something up on CodePen that shows a few examples of how to accomplish this: http://codepen.io/Ghodmode/pen/iaEvh
Working Fiddle
Small Change:
<table width="100%" border="1">
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'm developing an email and would like an image to show up only on a mobile device.... So I created an empty <td> with a span inside, and styled the span to have a background image.
The problem is, I'd like the image to take up a whole row, instead of being right next to the headline. I tried clear:both and display:block but I'm not sure why it's not working. I also tried setting the width to 100% but that just throws everything off... any suggestions?
http://jsfiddle.net/pEDSn/
.test {
width: 41px;
height: 41px;
background-image: url('http://placehold.it/41x41');
background-repeat: no-repeat;
background-size: 41px 41px;
display: block;
clear: both !important;
}
because of the arrangement of 3 in your single row, the table layout is enforced over the and css.
I would suggest moving your h1 into a separate row.
<tr>
<td> <!-- first td you are using as a spacer --> </td>
<td> <span><!-- this is where your image is --></span> </td>
<td> <!-- last column is here --> </td>
</tr>
<tr>
<td colspan="3"><h1><!-- place your heading text here --></h1></td>
</tr>
I added an empty row with the class "test" and it worked... check it out:
<table id="headline_body_copy_top" width="532" border="0" cellspacing="0" cellpadding="0">
<td align="left" valign="top">
<h1 style="padding:0; margin:0;"><font size="5"><span class="headline_text">Ficaborio vellandebis arum inus es ema gimus, quibus vent.</span></font></h1>
</td>
</tr>
<tr>
<td height="25" class="marginResize">
<!-- spacer -->
</td>
</tr>
http://jsfiddle.net/pEDSn/2/
Using a background-image in this technique is not supported across major email clients. You should inline the tag for all the clients that do not support css in the style tag. Also, background-image does not work in Outlook, unless it is in the <body> tag.
If you want it to show the image only on mobile, you'd be better off using a normal image tag and hiding it with display:none;, then in a media query, overriding to display:block;. This would still not work for the inline-only clients like Gmail, but it is the better way to do it.
So I have a site - on the Input Customer/Save Customer I have some buttons - they display correctly in IE 9 but not in Chrome (the functionality works fine in both) - its just for the appearence that I want to get it looking right in both.
So this is how it should look (IE 9)
And this is how it looks in Chrome (incorrect)
I have been trying different stuff in the source below - but havenet got it working in both Chrome and IE yet so maybe someone can spot something I'm missing.
<div class="PanelPadd" style="margin-top: 10px; text-align: right; padding: 5px; height:25px;">
<div id="Div8" style="text-align: right; float: right;">
<table>
<tr>
<td valign="middle" style="padding-right: 5px;">
<a id="FindCorrAddress" href="javascript:pageSMCustomerCreate.doRequest(2)">Find Addresses</a></td>
<td valign="middle" style="padding-right: 5px;">
<a id="ClearCAddress" href="javascript:pageSMCustomerCreate.doClearCAddress()">Clear</a></td>
<td valign="middle" style="padding-right: 5px;">
<asp:ImageButton ID="ImageButton4" ImageUrl="./images/buttons/SaveCustomer.gif" runat="server"
OnClick="OnSaveCustomer" /></td>
</tr>
</table>
</div>
</div>
There is nothing special done in any style sheet with the Class PanelPadd - a background color is set and a border is set as below.
.PanelPadd { background-color:#EFEFEF; border:solid #AAAAAA 1px; }
You do not show enough of your style code to analyze the problem. But I am assuming that you are setting a certain width to FindCorrAddress and ClearCAddress.
Because of minimal font-rendering differences, or rounding errors, or maybe even differences in the box model (are you running IE9 in Compatibility View?), a certain width that fits on one browser may not fit on another.
The best solution is to set no width at all, and to let the contents flow and define the width of the containers themselves.
Also, please remove the <table>. Using tables for layout is very bad style and asking for trouble.