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!
Related
I am trying to convert an existing element in my HTML page to a link, the element has additional css functions to scale it when you hover your mouse over it.
<!DOCTYPE html>
<html>
<head>
<style>
.lefthotbarbtn{
float:left;
padding:12px;
font-family:Verdana,sans-serif;
transition:0.3s;
}
.lefthotbarbtn:hover{
float:left;
padding:12px 32px;
font-family:Verdana,sans-serif;
background-color:#d3d3d3;
border-radius:69px;
color:#0f0f0f;
font-family:Verdana,sans-serif;
}
.contactusbtn{
float:right;
padding:12px;
background-color:white;
border-radius:69px;
color:black;
font-family:Verdana,sans-serif;
transition:0.3s;
}
.contactusbtn:hover{
float:right;
border-radius:0px;
padding:12px 24px;
background-color:#d3d3d3;
border-radius:69px;
color:#0f0f0f;
font-family:Verdana,sans-serif;
}
</style>
</head>
<body>
<div class="lefthotbarbtn">Home</div>
<div class="lefthotbarbtn">Who Are We?</div>
<div class="lefthotbarbtn">Products</div>
<div class="lefthotbarbtn">Help!</div>
<div class="contactusbtn">contact us</div>
</div>
</body>
</html>
I have tried various ways of converting each individual into a link without deleting existing information but whenever I did, the text would either disappear or move. What I want to be able to do is simply have the text as a link without changing the appearance of it and I can't figure out how.
Please mention the things you have tried in future.
I'll say a few things:
If all you want is to make them into link simply use the a link tag.
To me it seems like your building a header. Use nav with ul li with a. Keeps things clean and generally good practice.
If you want to go down this route you can can convert div to a and then use css to design the a however you like.
But If there is a problem with that try you can also do this (Not a good idea in general, why?):
<div class="lefthotbarbtn">Who Are We?</div>
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 have a full page iframe, but in chrome the scroll bar initially loads then disappears, the room is there for it, and you can use it but it's not visible. Works perfect in safari and firefox and chrome on pc, however on a mac you see the well of the scroll bar, but the bar itself is missing.
body,html{
height:100%;
overflow:hidden;
}
#me-branding-bar{
overflow:hidden;
width:100%;
height:40px;
position:relative;
background-color:#ff9900;
}
#me-content{
height:100%;
width:100%;
position:relative;
border:1px solid #ff9900;
}
#me-content iframe{
border:1px solid #000;
overflow:scroll;
}
<div id="me-branding-bar">
</div>
<div id="me-content">
<iframe border="0" frameborder="0" hspace="0" vspace="0" marginheight="0" marginwidth="0" src="<?php echo $url;?>" style="overflow:visible;height:100%;width:100%;" height="100%" width="100%"></iframe>
</div>
http://jsfiddle.net/RYwty/
Why does the scrollbar disappear in an <iframe> when using Chrome on a Mac?
That's a pretty broad question when your <iframe> contains an entire page from an external site. Let's break it down into a few steps.
The following examples assumes that you use Chrome on a Mac.
Make a simple test
Create a very simple HTML page, put it in an <iframe>, and view it in Chrome on a Mac (DEMO).
The scrollbar does not disappear. Everything seems fine. So it's most likely something on the external site is causing the problem.
Debug the external site
The symptom is that the scrollbar actually appears for a very short time before it disappears, but the page is still scrollable. Maybe JavaScript is causing the problem? Let's disable JavaScript and try it out.
It turns out the scrollbar does not disappear when JavaScript is disabled. So something loaded by JavaScript is causing the problem. Further debugging reveals that a flash object is the culprit.
Make another test
Create two simple HTML test pages and add a flash object to one of them. Put them into different <iframe>s and compare them to see the difference.
<object type="application/x-shockwave-flash"></object>
It turns out the one with a flash object does not have a visible scrollbar.
Conclusion
The scrollbar does not disappear in a normal <iframe>, but the ones with a flash object. It may be a bug, or it may be an intentional dirty hack. Many flash ads and videos are served in <iframe>s and having a scrollbar in them isn't pretty.
But the point is, you are serving external contents in your <iframe> and these are things that you have no control of.
<iframe src="<?php echo $url;?>"></iframe>
Maybe you can try your best to solve an issue or two, but there are dozens of things happening in an external page that can break things here and there. People can even prevent their sites from being placed in an <iframe> with a little help from JavaScript and HTTP headers. As long as the page loads, you should be happy about it. Don't bother too much about minor details like the disappearing scrollbar. Only worry about it when the page isn't actually scrollable. You are talking a scrolling on a Mac. Most of the time this is done by gestures, not scrollbars.
If you do want more control of the external contents, consider loading it on server side with cURL and modifying the contents with HTML parsers.
The code below seems to solve the iframe scrollbar problem in Chrome on a Mac.
This fix is cross-browser compatible with Firefox, Safari, and Opera on Mac and PC.
jsfiddle
HTML:
<div id="me-branding-bar"></div>
<div id="me-content">
<iframe src="http://tsn.ca" height="100%" width="100%" class="iframeclass"></iframe>
</div>
CSS:
body,html{height:100%;overflow:hidden;}
#me-branding-bar{overflow:hidden;z-index:102;width:100%;height:40px;position:relative;background-color:#ff9900;}
#me-content{height:100%;width:100%;position:relative;border:1px solid #ff9900;}
#me-content iframe{border:1px solid #000;}
.iframeclass::-webkit-scrollbar {
width:10px;
}
.iframeclass::-webkit-scrollbar-track {
-webkit-border-radius:5px;
border-radius:5px;
background:rgba(0,0,0,0.02);
}
.iframeclass::-webkit-scrollbar-thumb {
-webkit-border-radius:5px;
border-radius:5px;
background:rgba(0,0,0,0.3);
}
.iframeclass::-webkit-scrollbar-thumb:hover {
background:rgba(0,0,0,0.3);
}
.iframeclass::-webkit-scrollbar-thumb:window-inactive {
background:rgba(0,0,0,0.3);
}
Remove the styles from your html and add scrolling="yes" >> http://jsfiddle.net/95Tes/
<!--same code as before just remove your css styles from the html -->
*{
margin:0;
padding:0;
}
html, body{
height:100%;
width:100%;
}
#me-branding-bar{
width:100%;
height:10%;
position:relative;
background-color:#ff9900;
display:block;
}
#me-content{
display:block;
height:90%;
width:100%;
position:relative;
border:none;
}
#me-content iframe{
border:none;
display:block;
overflow:auto;
}
::-webkit-scrollbar{-webkit-appearance: scrollbarthumb-vertical;}
ant try that link 1 link 2
jsfiddle
This code may help you.I do not have mac so please do not give any negative points,I hope.I want to say you do not use different style in css rule as well as html style.Here you used like that
<iframe border="0" frameborder="0" hspace="0" vspace="0" marginheight="0" marginwidth="0" src="http://www.tsn.ca" style="overflow:visible;height:100%;width:100%;"></iframe>
#me-content iframe{
border:1px solid #000;
overflow:scroll;
}
See the image in the other tab or save the image at first and see it to more clear!
Please use this code which I have modified css as well as html
<style>
*{
margin:0px;
paddinig:0px;
}
body,html{
height:100%;
overflow:hidden;
}
#me-branding-bar{
overflow:hidden;
width:100%;
height:40px;
position:relative;
background-color:#ff9900;
}
#clearboth {
clear:both;
}
#me-content{
height:calc(100% - 40px);
width:100%;
position:relative;
border:1px solid #ff9900;
box-sizing:border-box;
-moz-box-sizing:border-box; /* Firefox */
}
#me-content iframe{
border:1px solid #000;
overflow:scroll;
width:100%;
height:100%;
}
</style>
Here is the modified html
<div id="me-branding-bar">
</div>
<div id="clearboth"></div>
<div id="me-content">
<iframe border="0" frameborder="0" hspace="0" vspace="0" marginheight="0" marginwidth="0"
src="http://www.tsn.ca"></iframe>
</div>
Hope it will work!
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...
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..