css:
.myim {
width:50;
height:50;
}
.mydiv {
float:right;
position:absolute;
-index:2;
}
.myim:hover {
width:50;
height:50;
position:absolute;
z-index:2;
filter:alpha(opacity=95);
filter:alpha(opacity=95) !important;
opacity: 0.98 !important;
-moz-opacity:11;
}
html:
<div class='mydiv'>
<img class='myim'>
</div>
I want that whenever the mouseover is done on the image it should have little bit of transparency.
All above coding works well in FF, but it's not working in IE at all.
Thanks in advance
Since I remember, IE doesn't identify hover for non-a tags.
hover can be applied only to anchot tags....
the better solution for your query is to use jquery. its very simple to learn and build good website.
for jquery video tutorials see this link http://net.tutsplus.com/articles/web-roundups/jquery-for-absolute-beginners-video-series/. if you are a newbee to jquery this video tutorial will be so useful..
Related
I am designing a very basic webpage, with basic HTML and CSS.
So, I have designated a subpage for my "blog":jx-s-potato.glitch.me
On the page,by writing the following code:
<body>
<h1 id="title1"><u>The Blog</u></h1>
</body>
I expected "The Blog" to show up with an underline.However, only "The Blo" got underlined. I thought that this was a problem with my browser so I used Safari to view it.The problem remained.
Is there something wrong about my code? Please help!
A workaround would be to use some styling and mimic the underline.
I used Pseudo-element after here, but you can do whatever you like.
u{
position:relative;
text-decoration:none;
}
u:after{
content: '';
width: 100%;
height:2px;
background-color: black;
position:absolute;
left:0;
bottom:4px;
}
<h1 id="title1"><u>The Blog</u></h1>
I would like to change the background color of the jquery mobile 1.4.5 pages. I have google around and found what some people suggest as the correct css overrides to do this. However, nothing works for me.
My CSS overrides are the last CSS file loaded in my app so I would expect that the below classes override the jqm css but they don't.
Does anybody know the correct way to do it?
Here is the JSfiddle
UPDATE:
See updated fiddle.
CSS:
.ui-page {
background:#296BC1;
}
.ui-overlay-a, .ui-page-theme-a, .ui-page-theme-a .ui-panel-wrapper
.ui-content {
background:#296BC1;
}
This worked for me
.ui-overlay-a,
.ui-page-theme-a,
.ui-page-theme-a .ui-panel-wrapper {
background-color: #FFF !important;
}
This code should work:
.ui-page{
background-color: #faaaff !important;
}
Try this
div[data-role=page][data-theme=a] {
background:#fff;
}
I am wondering if any of you have any tricks to make this happen, or if I'm completely overthinking this.
I have MANY images being used and the most efficient (and easiest) way to make these images show up is to use the CSS background:url("link"); property where link is the proper link to my image file. This prevents cluttering of my html files as well.
The issue is that the above code is found in over 50 different ids, each pointing to a different image and I need to resize the images, however I would REALLY like to not have to put the following code under each and every id.
background-size:180px 239px;
background-repeat:no-repeat;
To put this simply:
I have CSS that looks something like this...
My "ID"s
#image1
{
background:url("../Images/image1.png");
}
#image2
{
background:url("../Images/image2.png");
}
#image3
{
background:url("../Images/image3.png");
}
My class
.myClass
{
width:180px;
height:239px;
background-size:180px 239px;
background-repeat:no-repeat;
}
Note that by entering this code all will seem normal, however if you change the values in background-size (say to 100px 239px you will notice the issue that I am experiencing)
And a typical use of this in html would be as the following:
<div id="image1" class="myClass"></div>
A jsfiddle of this issue can be found here: jsfiddle
The anticipated result is shown under the text in the fiddle.
How would I go about coding this so that it remains clean?
I would like to note that I am trying to keep my CSS and JS separate. I am looking for a purely CSS way for coding this. I need control of all the id's background-properties from one single location.
Any help with this is greatly appreciated, thank you.
Change background to background-image and it will work :)
#image1
{
background-image:url("http://upload.wikimedia.org/wikipedia/commons/thumb/3/3b/Bolognese_Image.jpg/180px-Bolognese_Image.jpg");
}
#image2
{
background-image:url("http://www.phy.duke.edu/~kolena/Recommended.gif");
}
.myClass
{
width:180px;
height:239px;
background-size:100px 239px;
background-repeat:no-repeat;
border:2px solid red;
}
/*------------------------------------*/
#thisIsWhatIWantItToLookLike
{
background-image:url("http://www.senoja.nl/images/mainecoons/galleryxamina/xamina1.jpg");
background-size:100px 239px;
background-repeat:no-repeat;
}
.mySadClass
{
width:180px;
height:239px;
border:2px solid blue;
}
<div id="image1" class="myClass"></div>
<div id="image2" class="myClass"></div>
<p>This above images should show up like the one below does, squished</p>
<div id="thisIsWhatIWantItToLookLike" class="mySadClass"></div>
background-size: 100px 239px !important;
background-repeat: no-repeat !Important;
Add these two properties to your class
DEMO
i'm using marquee it words fine n FF but the content disappears as soon as the beginning of content reached the end of the marquee http://www.mawk3y.net/alsoos/kaseem/
HTML code
<div class="news">
<marquee behavior="scroll" scrollamount="20" direction="right" onmouseover="stop()" onmouseout="start()">
تجرية الشريط الاخباريتجرية الشريط الاخباريتجرية الشريط الاخباري
</marquee>
css code:
.news, marquee{
width:904px;
height:42px;
float:right;
}
.news a{
line-height:42px;
height:42px;
float:right;
display:inline-block;
float:right;
padding:0 10px;
}
hello please user smoothdivscroll js css
smoothdivscroll
The marquee tag is deprecated. You should probably use CSS and/or javascrpit to achive the best result.
perhaps create your own in jquery, should be pretty easy to do. Here has some good examples
http://remysharp.com/demo/marquee.html
more control too!
I'm certain it's something super stupid, but I've been stuck for a while, now... So, I have images on a website, and I'd like them to move slightly on hover.
So I have in the HTML:
<img class="thumb" src="somefile"/>
And in the CSS:
img.thumb {
position:relative;
top:0px;
background:#333399;
}
img.thumb:hover {
position:relative;
top:5px;
background:#00CCCC;
}
The backgrounds are there just to see whether something is happening. Actually, the background doesn't change, so the hover is never taken into account. Does anyone have an idea why that could be??
EDIT
Thanks a lot, everyone!
I actually solved it by throwing in a:
a > img.thumb:hover {
position:relative;
top:2px;
}
Which worked. Still not exactly sure why it didn't work just with img.thumb:hover...
Here is the solution.
The HTML:
<div>
<img class="thumb" src="http://www.google.co.in/images/srpr/logo4w.png"/>
</div>
The CSS:
img.thumb {
position:relative;
top:0px;
}
img.thumb:hover {
position:relative;
top:5px;
background:#00CCCC;
}
I hope this helps.
Your code should work, I have checked it here: http://cssdesk.com/XcV2D
Some other styles should be impacting...