I want to make a menu with CSS sprites but there's not ONE browser on the planet that can read it. My problem can be found here.
My CSS is:
#menuMusica{
width:340px;
height:190px;
background:url('images/menuMusic.png') 0px 0px;
}
#menuMusica a:hover{
background: url('images/menuMusic.png') 0px -190px;
}
And my HTML:
<div id="menu">
<table cellspacing=100px>
<tr>
<td id="menuMusica" onmouseover="soundGuitar();">
<img src="images/menuP.png" border=0>
</td>
<td id="menuPhoto" onmouseover="soundPhoto();">
<img src="images/menuP.png" border=0>
</td>
</tr>
</table>
</div>
Change #menuMusica a:hover { to #menuMusica:hover {.
The problem is that the 'mouseout' background is applied to your td element, but your 'mouseover' background is applied to the a element inside of it. Since the a element doesn't fill up all the available vertical space, you can't see the rollover.
The quickest solution is to add display: block; to the styles for your a elements.
If you want to be consistent, you should also move the background CSS property from #menuMusica to #menuMusica a.
Related
I am trying to add a space between the image logo and the link .
Not sure what to do .
I tried adding space in the text but didn't work (> FAA/ATC NEXT DAY PLAN)
I am backend guy but sometimes need to mess with front end :(
<tr> <td> <img src="images/page_white_acrobat_small.png" align="absbottom" /> <a style="font-size: 12px" href = ""onclick="Popup.open({url:'PERTI_Plan.pdf',width:800,height:500,resizable:'yes', separateWindow:true});">FAA/ATC NEXT DAY PLAN</a></td></tr>
Unfortunately/fortunately, as you've now realized, multiple white space does not persist in the HTML layout.
CSS is your friend when it comes to formatting. You can add this rule to your stylesheet,
tr td img {
margin-right: 1rem;
}
Otherwise, if you don't have a stylesheet, try adding an in-line style to your image tag as follows,
<tr>
<td>
<img src="images/page_white_acrobat_small.png" style="margin-right: 1rem;" align="absbottom" />
<a style="font-size: 12px" href = ""onclick="Popup.open({url:PERTI_Plan.pdf',width:800,height:500,resizable:'yes', separateWindow:true});">FAA/ATC NEXT DAY PLAN</a>
</td>
</tr>
Notice here that I have added style="margin-right: 1rem" to your tag. This will apply this CSS rule directly to that tag, adding a margin on the right side with a size of 1 rem.
White space in your source code is truncated. Instead use a margin on the image or link.
E.g.
img {
margin-right: 2em
}
you need to give some margin here to give space between the image and link, you can give margin-left to a
td a{
margin-left: 1px;
}
or margin-right to img
td img{
margin-right: 1px;
}
you have sevral way to do this :
the better solution is by css you can do :
td img{
margin-right: 10px;
}
but if you do this you will affect all the td img of your page.
in that case i advise you to put a class on your td to affect only this element and it's better if you have a list of this kind of file.
<tr class="fileMoreIcon">
<td>
<img src="images/page_white_acrobat_small.png" align="absbottom" />
<a ...........
and in css
.fileMoreIcon img{
margin-right: 10px;
}
one other way is just to add a html space character
<tr>
<td>
<img src="images/page_white_acrobat_small.png" align="absbottom" />
<a style="font-size: 12px" href = ""onclick="Popup.open({url:PERTI_Plan.pdf',width:800,height:500,resizable:'yes', separateWindow:true});">FAA/ATC NEXT DAY PLAN</a>
</td>
</tr>
I have a table with text and images. I now want to add a few images and have them aligned to the bottom of the cell. What is the correct CSS to force an image to be aligned to the bottom left of a cell?
Here is the relevant CSS:
.bottomRight {
bottom: 0;
float: right;
}
.bottomLeft {
bottom: 0;
float: left;
}
Here is my html:
<td width="240">
<span style="float:right;margin-left: 1px; margin-bottom: 1px;">
<b></b>
</span>
Info
<br/><br/>
<img src="/Content/shortImage.png" class="bottomLeft">
<img class="bottomRight" height="35" width="35" title="Name" src="/Content/tallImage.jpg" >
</td>
The image tallImage.jpg does work and shows up at the bottom right but the shortImage.png which is smaller in height doesn't go all the way to the bottom of the table cell.
Any suggestions on how i get the shortImage and largeImage to both align to bottom of a table cell?
Use vertical-align:bottom;
If you differentiate your selected elements, why not use a class?
http://jsfiddle.net/SinisterSystems/x3vc7/2/
HTML:
<table>
<tr>
<td>Hello world</td>
<td class="image">
<img src="http://www.itworldcanada.com/wp-content/uploads/2013/08/Windows-XP-migration-FEature-Image-42x42.jpg" />
</td>
</tr>
</table>
CSS:
td {
height:200px;
border:1px solid #000;
}
.image {
vertical-align:bottom;
}
EDIT:
I said let us continue this discussion in chat. If your idea is to display non-tabuler-data. Read here about tabular data.
You Should Not Use a Table If:
The main purpose of the table is to position the contents on the page in some way. For example, to add spacing around an image, to place "bullet" icons on a list, or to force a block of text to act like a pull quote.
I'm having bad time trying to align a clickable element on the right of a text <input> element. It wouldn't be a problem if I would have fixed dimensions, but the <input> will be inside of a container with variable size. The resizing will be made with a js function.
I need to place the clickable element on the far right, inside the <td> and, the remaining space to be filled 100% by the <input>. At this moment I'm totally confused and I cannot come with a clean solution that doesn't involve nested tables inside table cell.
At this moment, the clickable is <a> tag, but I'm not even sure if that's the best approach.
Need some clear advice right now.
Here is the basic code:
<html>
<head>
<style type="text/css">
table{border-collapse:collapse;}
td{
border: 1px solid black;
padding: 2px;
}
.container{
width: 100px;/*this will be dinamically resized with JS*/
}
input[type="text"]{
width: 100%;
}
</style>
</head>
<body>
<table>
<thead>
<tr>
<td>
<div class="container">
<input type="text"><a href="#" onclick="/*call myFunc*/" >▲</a>
</div>
</td>
</tr>
</thead>
<tbody>
<tr>
<td>
data1
</td>
</tr>
</tbody>
</table>
</body>
</html>
Float the clickable element to right, wrap the input by a division and set a margin-right to it:
CSS:
input[type="text"] { width: 100%; }
.wrapper { margin-right: 25px; }
.clickable { float: right; }
HTML:
<a class="clickable" href="#" onclick="/*call myFunc*/" >▲</a>
<div class="wrapper">
<input type="text">
</div>
JSBin Demo
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
I am creating a web page, where I have an image that I want to place in the center. On the top of that image I want to have input boxes, labels, and a submit button.
I am trying to use this CSS
img.center
{
z-index:-1;
}
but this does not work. When I change the code to
img.center
{
position:absolute;
left:0px;
top:0px;
z-index:-1;
}
it makes the image go behind. But then as I used left:0px and top:0px ... it puts the image at location 0,0. But I want the image to stay in the center.
To keep the image in the center, I have added this: <div align="center">.
Is there any way, I can keep the image in the center and make it go behind the boxes, labes, and buttons too?
My HTML page looks like this (I tried to have a background image for my div tag, but no image is appearing on top of it):
<html>
<head>
<title>Question of the Week</title>
<style type="text/css">
body
{
background-image:url('images/background.jpg');
background-repeat:repeat-x;
}
.container
{
background-image:url('images/center.jpg');
background-repeat:no-repeat;
}
td.cntr {padding-top:50px;}
</style>
</head>
<body topmargin="0" leftmargin="0" rightmargin="0" bottommargin="0" marginwidth="0" marginheight="0">
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td><div align="left"><img src="images/logo.jpg"></div></td>
<td></td>
<td><div align="right"><img src="images/right_logo.jpg"></div></td></tr>
</table>
</tr>
<tr>
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td class="cntr">
<div id="container">
<input name="box" type="textbox" />
<input name="box" type="textbox" />
<input name="submit" type="submit" />
</div>
</td>
</tr>
</table>
</tr>
</table>
</body>
</html>
You can position both the image and the text with position:absolute or position:relative. Then the z-index property will work. E.g.
#sometext {
position:absolute;
z-index:1;
}
image.center {
position:absolute;
z-index:0;
}
Use whatever method you like to center it.
Another option/hack is to make the image the background, either on the whole page or just within the text box.
Well, put your image in the background of your website/container and put whatever you want on top of that.
Your container defined in HTML:
<div id="container">
<input name="box" type="textbox" />
<input name="box" type="textbox" />
<input name="submit" type="submit" />
</div>
Your CSS would look like this:
#container {
background-image:url(yourimage.jpg);
background-position:center;
width:700px;
height:400px;
}
For this to work though, you must have height and width specified to certain values (i.e. no percentages). I could help you more specifically if you wanted, but I'd need more info.
Make it a background image that is centered.
.wrapper {background:transparent url(yourimage.jpg) no-repeat center center;}
<div class="wrapper">
...input boxes and labels and submit button here
</div>
Try this code:
body {z-index:0}
img.center {z-index:-1; margin-left:auto; margin-right:auto}
Setting the left & right margins to auto should center your image.
Start at 0 and go up from there, rather than using -1. For instance, set the div containing your inputs and labels to a z-index of 100, and give the image you want to place behind it a z-index of 50.
Alternatively just set the image as the background-image of the div containing the inputs and labels. Since the image is probably illustrative and therefore presentational, it doesn't really need to be an actual img element.
There are two ways to handle this.
Background Image
Using z-index property of CSS
The background image is probably easier. You need a fixed width somewhere.
.background-image {
width: 400px;
background: url(background.png) 50% 50%;
}
<form><div class="background-image"></div></form>
I style my css in its own file. So I'm not sure how you need to type it in as your are styling inside your html file. But you can use the
Img{
position: relative
Top: 150px;
Left: 40px;
}
This would move my image up 150px and towards the right 40px. This method makes it so you can move anything you want on your page any where on your page If this is confusing just look on YouTube about position: relative
I also use the same method to move my h1 tag on top of my image.
In my html5 file my image is first and below that I have my h1 tag. Idk if this effects witch will be displayed on top of the other one.
Hope this helps.