|
CSS - Links Juming Around When I Bold The Text On Hover.
Hi everybody
I'm sure many of you have come across the problem where your links jump when you increase font size or bold your text when you hover over them. The reason obviously being that the anchor is pushed bigger because the text content increases in size, thus pushing all following links around. I've solved this problem before for links on top of each other by defining a line height. My problem is specifically for links next to each other. I have solved this by placing each anchor inside a div and specifying a specific width for each. Although this works, it is not overly elegant. I was wondering if someone out there has a better solution to this? Thanks in advance. Similar TutorialsHi. I created this test page and right now if you mouse over the link it will have a pop up details but that box is not on the right position. How can I make that red box show up right below the link? Also is it possible to have the pop up box show up near the mouse pointer? Let's it the link is very long and when it's mouse over but moving to the left. Can I have that box follow the mouse pointer? Hope you know what I mean? Also if my links are at the end of the line in the browser(near the scroll-up-down bar) and my data inside the box contains multiple lines how can I make the content appearance won't change? Sorry if I didn't explain that clear but I really appreciate if anyone can help me on this. Thank you!!! Here's the link: http://yourbestproduct.com/test2.html Please view the source code on that link!!! Hey, Just making a site for a friend and I have run into a block with the Hover tag. It works fine in IE but for some reason other browsers aren't working properly... Any ideas? I have put my source underneath, sorry its squashed up. I have also loaded the site to the domain but won't put the link - not sure if I'm allowed. Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"> <head> <title>Innovate Photography - Home</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <link rel="StyleSheet" href="style.css" type="text/css" media="screen" /> </head> <body> <div id="wrap"> <div id="header"> <img src="images/logo2.png" alt="logo - Innovate photography" width="780" height="62" /> </div> <ul id="nav_bar"> <li><b href="index.html">Home</b></li> <li><a href="about.html">About Us</a></li> <li><a href="gallery.html">Gallery</a></li> <li><a href="disability.html">Disability</a></li> </ul> <div id="slideshow"> <img src="images/index_page/1.jpg" alt="Slideshow Image 1" class="active" /> <img src="Images/index_page/2.jpg" alt="Slideshow Image 2"/> <img src="Images/index_page/3.jpg" alt="Slideshow Image 3"/> <img src="Images/index_page/4.jpg" alt="Slideshow Image 3"/> </div> <!--Java image gallery - Index Page --> <script type="text/javascript" src="jquery-1.2.6.min.js"></script> <script type="text/javascript"> /*** Simple jQuery Slideshow Script Released by Jon Raasch (jonraasch.com) under FreeBSD license: free to use or modify, not responsible for anything, etc. Please link out to me if you like it :) ***/ function slideSwitch() { var $active = $('#slideshow IMG.active'); if ( $active.length == 0 ) $active = $('#slideshow IMG:last'); // use this to pull the images in the order they appear in the markup var $next = $active.next().length ? $active.next() : $('#slideshow IMG:first'); var $sibs = $active.siblings(); var rndNum = Math.floor(Math.random() * $sibs.length ); var $next = $( $sibs[ rndNum ] ); $active.addClass('last-active'); $next.css({opacity: 0.0}) .addClass('active') .animate({opacity: 1.0}, 1000, function() { $active.removeClass('active last-active'); }); } $(function() { setInterval( "slideSwitch()", 5000 ); }); </script> <div id="content"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut et mi magna, non sodales augue. Aliquam porta, risus id euismod egestas, lacus velit tincidunt quam, in sodales enim urna et dui. Duis interdum libero at dolor aliquet nec ultricies lacus interdum. Proin non consequat erat. Sed varius, libero id bibendum aliquam, arcu augue ultrices dui, placerat laoreet dolor nibh et nunc. Ut dui magna, semper quis sagittis sed, faucibus ac ante. Nulla imperdiet tempor orci vel varius. Aliquam porta placerat tortor, non dignissim libero elementum ac. Mauris in magna in ligula tincidunt viverra non vestibulum elit. Etiam hendrerit leo non mauris consectetur nec blandit orci auctor. Sed felis felis, facilisis nec posuere ac, accumsan nec est. Aenean sapien magna, commodo ut sagittis gravida, varius eget magna. Etiam ligula sem, faucibus eget tristique quis, hendrerit vitae justo. Maecenas fermentum sollicitudin sodales. Ut non aliquet neque. Mauris sagittis gravida purus nec consequat. Sed in quam leo.</p> <p>Phasellus quis orci ligula. Curabitur quis neque ultricies ante adipiscing vehicula. Morbi blandit, purus dictum pharetra feugiat, magna ipsum lobortis velit, eu blandit turpis ipsum at arcu. Vestibulum non mauris felis. Curabitur viverra arcu eget tortor pellentesque a laoreet mauris mattis. Sed et ligula tortor, eget laoreet mauris. Integer nunc enim, tristique eu tempus at, vehicula non enim. Maecenas sed porttitor lorem. Nam ultricies, nisl rutrum vulputate facilisis, enim purus commodo elit, sed pretium tortor ligula quis lectus. Aliquam erat volutpat. Duis euismod placerat nisi ac adipiscing. Fusce varius pellentesque sapien, eu placerat neque mattis pharetra. Aenean mollis neque sed mi pretium sodales. Aenean fringilla rhoncus tincidunt. Sed vel odio et sem condimentum iaculis.</p> <p>In mollis posuere tortor, at euismod sem fermentum nec. Aenean euismod, neque sit amet tincidunt mattis, risus nunc bibendum mi, non malesuada purus eros ut urna. Donec accumsan sagittis nibh, auctor ultricies massa tincidunt et. Phasellus quam nunc, pretium eu dictum at, porttitor a dolor. Etiam nec odio felis, nec aliquam nibh. Sed eleifend, odio faucibus venenatis vulputate, orci neque mattis augue, sed consectetur tellus lorem a lacus. Aliquam diam ipsum, consectetur et tempus non, suscipit nec orci. Donec dignissim lobortis gravida. Integer ornare diam vitae elit tristique a auctor lorem condimentum. Sed sapien nisi, ullamcorper at gravida vitae, mollis vel mauris. In non tortor ante, nec scelerisque elit. Etiam tristique, magna quis tristique ultrices, nunc tellus tempus lorem, a suscipit tortor magna at dui.</p> </div> </div> </body> </html>
Code: /* Index Markup */ * { padding: 0px; margin: 0px; } body { background-color: #ffffff; margin:0; padding:0; border:0; min-width:700px; font-size:100%; } #wrap { width:750px; margin:0 auto; padding-top: 20px; } #header {width: 200px; padding-left: 0px;} #nav { margin:0 auto; font:Palatino; } #nav_bar { width: 100%; float: left; margin: 0 0 3em 0; padding: 0; list-style: none; font:Palatino; padding-left: 190px; } #nav_bar li { float: left;} #nav_bar li a { display: block; padding: 8px 15px; text-decoration: none; font-weight: bold; color: #069; border-right: 1px dotted #000; font:Palatino; } #nav_bar li b {display: block; padding: 8px 15px; text-decoration: none; font-weight: bold; color: #069; border-right: 1px dotted #000; font:Palatino; border-left: 1px dotted #000; } #nav_bar a:hover {color: #000;} #nav_bar b:hover {color: #000;} #nav_bar:hover {color: #000;} h2 { font:Palatino; font-size:15px; text-decoration: none; } /*** Slideshow positioning **/ #slideshow { position:relative; width: 570px; height: 400px; padding-bottom: 10px; } #slideshow IMG { position:absolute; top:55px; right: -40px; z-index:10; } #slideshow IMG.active { z-index:10; opacity:1.0; } #slideshow IMG.last-active { z-index:9; } #content { position: relative; width: 670px; padding-top: 20px; font:Palatino; font-size:12px; color: #1e54ef; padding-bottom: 20px; padding-left: 30px; } #photo { } #index_style { position:absolute; left:50px; top:150px;} #index_button { position:absolute; left:750px; top:400px; } #index_button a { font-size: 30px; font:Palatino; } #index_button a:hover {color: #1e54ef} #index_button a:link {text-decoration: none; font-family:Georgia,serif;}
Good day, I am a newbie, both to CSS and to these forums. I recently undertook a job to update a website for a charity and am dealing with the previous webmasters coding, both html and css. I am trying to modernize the site a bit, it is very 1997. I am running into a bit of trouble with the hover class on one of my pages. When a link has been visited, it no longer changes color and highlights on hover. I read on multiple forums, this one included that it is because you must define hover last, after visited, active, etc. I did this, but still does not work. I am using Firefox 2. Here is the code I am working with, sorry that is is a bit lengthy, I don't know what parts are important or not because when I just change the hover, link, visted part it doesn't work. The page I am working with is at beverlyfoundation . org / library / index . html /* THE BASICS */ body { font-family: Verdana, Helvetica, Arial, sans-serif; color: #eaf5ff; margin: 0px; padding: 0px; background-color: #c2d8ec; } p { margin-top: 0px; margin-right: 0px; margin-bottom: 14px; margin-left: 0px; } img { border: none; } a:link, a:visited { text-decoration: none; color: #EAF5FF; } a:active, a:hover { text-decoration: underline; color: #E51322; } /* HEADERS */ h1, h2, h3 { font-family: Helvetica, Arial, Verdana, sans-serif; margin: 0px 0px 14px; } h1 { font-size: 220%; text-align: right; font-style: italic; } h2 { font-size: 140%; } ul { list-style-position: outside; list-style-type: square; } /* TOP COLORED LINKS */ .navcells { text-align: center; vertical-align: middle; padding: 2px; font-weight: bold; font-size: 11px; } #navlinks a:link, a:visited { text-decoration: none; color: #EAF5FF; } #navlinks a:hover, a:active { text-decoration: underline; color: #EAF5FF; } /* LAYOUT */ #header { margin: 0px; padding: 0px; background-attachment: fixed; background-image: url(../images/header_gradient01_bg.jpg); background-repeat: repeat-x; background-position: left top; } #content { padding: 10px 20px 10px 10px; background-color: #0060BE; text-align: left; vertical-align: top; font-size: 12px; } #rightcolumn { background-color: #0060BE; padding: 10px; width: 220px; font-size: 11px; border-left-width: 1px; border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; border-top-color: #EAF5FF; border-right-color: #EAF5FF; border-bottom-color: #EAF5FF; border-left-color: #EAF5FF; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; } #splashrightcolumn { background-color: #0060BE; padding: 10px; width: 220px; font-size: 11px; } #rightcolumn img { margin-top: 0px; margin-right: 0px; margin-bottom: 10px; margin-left: 0px; } #rightcolumn p { margin-top: 0px; margin-right: 0px; margin-bottom: 7px; margin-left: 0px; } #rightcolumn h1 { font-size: 180%; text-align: center; font-style: italic; } #rightcolumn h2 { margin-top: 21px; margin-right: 0px; margin-bottom: 7px; margin-left: 0px; text-align: center; } #rightcolumn a:link, a:visited { text-decoration: none; color: #EAF5FF; } #rightcolumn a:hover, a:active { text-decoration: underline; color: #EAF5FF; } #threecolumn { padding: 10px; width: 220px; text-align: left; vertical-align: top; font-size: 12px; } #threecolumn a:link, a:visited { color: #EAF5FF; text-decoration: none; } #threecolumn a:hover, a:active { color: #EAF5FF; text-decoration: underline; } #footer { color: #EAF5FF; padding: 10px; font-size: 11px; text-align: left; vertical-align: top; line-height: 14px; } #footer a { color: #EAF5FF; text-decoration: none; } #address { color: #EAF5FF; padding: 10px; font-size: 11px; text-align: left; vertical-align: top; border-left-width: 1px; border-top-color: #EAF5FF; border-right-color: #EAF5FF; border-bottom-color: #EAF5FF; border-left-color: #EAF5FF; border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; } #address a { color: #EAF5FF; text-decoration: underline; } #address h2 { margin: 0px; } .threecolumns { color: #EAF5FF; padding: 10px; font-size: 11px; text-align: left; vertical-align: top; } .resourcestore p { margin-top: 0px; margin-right: 0px; margin-bottom: 4px; margin-left: 0px; } .gradientrow { background-image: url(../images/footer_bg01.jpg); } .copyright { font-size: 10px; } .resourcestore { padding: 10px; } Alright, here is what I have. Code: <font color="red">Discover</font> <font color="white">Laos</font><br> <font color="red">Discover</font> <font color="white">Politics</font><br> <font color="red">Discover</font> <font color="white">People</font><br> <font color="red">Discover</font> <font color="white">Art</font><br> <font color="red">Discover</font> <font color="white">Food</font><br> What I want is for each Discover Something to be a link, and when hovered over, the red "Discover" will change to white and the "Something" will change to red. HELP!! Can someone help me with this? The text shifts when you hover over the link. Why is this happening? I have searched the web for this one but still cannot figure it out. Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head profile="http://gmpg.org/xfn/11">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>temp</title>
<style type="text/css" media="screen">
#test {
height: 1%;
background-color:gray;
width:40%;
padding:2%;
}
a:hover,
a:active {
border-bottom: 2px solid black;
}
</style>
</head>
<body>
<div id="test">
Lorem ipsum dolor sit amet, <a href="#">consectetuer</a> adipiscing elit,
sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam
erat volutpat. Ut wisi enim ad minim veniam, quis nostrud.
</div>
</body>
</html>
Thanks Hi there, How do I make the background of a text field change color upon hover/rollover? Any help would be great! having an issue with trying to work out the best way to overcome my current issue. what i am trying to accomplish best case scenario is as i hover over a link i get a descriptive box over on the right of this describing what the link is preferable like the nav bar always visible near the top right . now i have got some examples of trying to get this to work but it not that good currently. I am currently using a span to accomplish this but have a few issues with it so far. the first two links are my css sheet and the verified html page but it doesn't look the way i want it. the third link is the page that is more like what i want. but still not 100% what i need. be aware my whole page is self sizing so absolute position with measurements are out of the question. Please help and if span is not the option whatever someone can suggest to put me on the right path. I currently using pure css and html for the page but running out of ideas if no suggestions will use java if that will accomplish the task needed be but prefer not too. CSS verified theknowledgeden .com / default .css Verified html theknowledgeden .com / ancient-afr .html non verified html but closer to what i am trying to accomplish. theknowledgeden .com / ancient -asia .html That's what a friend of mine is trying to do to her blog. She's been trying for the longest time to get the hover command to change some link text color into a gif image, but all she can manage is the background behind the text. If you don't get what I'm trying to say, this is a screen cap of what she has right now: img801.imageshack.us/i/screencap.png/ Basically, she want's to know if there's a way so that, rather than having the gif around her text, it would display inside of her text only so that the words would look like static. If anyone knows if this is even possible, please help me out. Thanks in advance. Hi everyone, I'm looking for a solution that I thought (hoped) would be simple. ...but of course is not. I use sprites for rollover effects so the hover attribute just changes the background image position. Everything works cool with the rollovers. What I would like to do, is make a text link that when rolled over will change a separate background image to it's hover state. I should add, that the the rollover image has it's own div and is separate from where the text link is located. To get a visual you can check the website (just remove the *) *onholdmusicsource*.com In the body section I would like to make each of the dark red section titles a link that when rolled over will change the hover state of the corresponding "more" button. Comments would be fine Ideas would be great Solutions would be fantastic Many Thanks- Hello great forum you guys got here! I am kinda new to CSS and need some help :S I have this link and I wrapped it with a plain simple box, but I also want the text to change from its default blue when I roll over it as well. Here is the CSS code Code:
.navigation {
width: 160px;
height: 18px;
padding:6px 6px;
padding-left: 15px;
margin-bottom:2px;
font-size:10px;
color: #333;
background-color: transparent;
display:block
}
.navigation:hover {
background-color: #CCC;
}
I want it so that the color turns red upon hover! Regards & Thank you in advance! I have been using <b>,<i>,<u> all along, but I was seeing things about strong and em with style sheets. I went to w3c.org and found this commment Quote: The following HTML elements specify font information. Although they are not all deprecated, their use is discouraged in favor of style sheets. What do they mean in favor of style sheets? You still need a tag in the text to make a word bold, why not <b>bold</b>? Can someone shed some light on this? Hi Folks, I've implemented a custom underline for all text links using background properties, but have found that my linked transparent PNG images are now affected with the underline as well. I've tried correcting this by applying background-image:none; to the affected PNGs -- I even used !important;. No luck. I also saw some mention of using the display:block; property to correct a similar problem. No luck. Suggestions? Thanks in advance! P.S. I was all set to post a link to a live example, but it seems new users can't post links? Hopefully the above description will suffice. The state titles are nice and bold on my mac browsers -- however, pc browsers won't make them bold. Here is a link to a windows xp screenshot: http://www.browsercam.com/projects/199027/3899787.jpg Any ideas? Hey guys, how do i put the bold command into a css sheet? I want to have bold consistantly throughout a page. ------- body { font-family: Arial; font-size: 13.5px; } td { font-family: Arial; font-size: 13.5px; } th { font-family: Arial; font-size: 13.5px; } .bodystyle { font-family: Arial; font-size: 13.5px; } .small { font-family: Arial; font-size: 9px; } .medium { font-family: Arial; font-size: 12px; } .big { font-family: Arial; font-size: 16px; } .xbig { font-family: Arial, Helvetica, sans-serif; font-size: 24px; } .expanded { font-family: Arial, Helvetica, sans-serif; font-size: 12px; line-height: 24px; letter-spacing: 2px; } .justified { font-family: Arial, Helvetica, sans-serif; text-align: justify; } .footer { font-family: "Times New Roman", Times, serif; font-size: 9px; color: #999999; } .box1 { padding: 3px; border-width: medium; border-style: solid; border-color: #CCCCCC #666666 #666666 #CCCCCC; } .box2 { font-style: italic; word-spacing: 2pt; padding: 3px; border: 1px solid; } The section of my site that this effects is a login area, so I can't provide a link... I can post some code if I need to... I have a div with this class applied to it. Code: .minidaysofweek div{
width:13.6%;
float:left;
font-weight:bold;
}
It was working fine here, but when I put it in my site template, the bold doesn't work. So I added color:blue; just for testing, and it changed the color... what would keep the font-weight from being applied? The minititle class isn't bolding either like it should... <edit>FF and IE effected</edit> I want to do something like: Submit but i dont know how to do it? i tried doing input value ="<span style="AK">S</span>ubmit" /> but it doesnt work.... I have a drop down menu located at http://www.fieldspianos.com/new/index.php If you hover over the menu items they turn black and white when you are right on the text but not if you are in the area surrounding it which is what I also need to occur. You can view the source on the page for the html but I will include the css below. This is the basic layout of the menu: Code:
<ul>
<li>About Us</li>
<ul>
<li><a href="#">Locations</a></li>
etc..etc..etc.. Here is the css: Code:
/*Begin Content of drop down menu*/
a {
outline:none;
}
* html div#dropdownmenu ul {
float: left;
}
* {
margin: 0;
padding: 0;
}
div#dropdownmenu {
float: left;
background-color: #C8C6C6;
font-size:11px;
font-family: Verdana, Arial, Helvetica, sans-serif;
}
div#dropdownmenu ul li {
list-style-type: none;
float: left;
background-color: #000000;
position: relative;
}
div#dropdownmenu ul li:hover {
list-style-type: none;
background-color: #000000;
}
/*Hides drop downs when not overed over and reveals them when they are hovered over.*/
body div#dropdownmenu ul li ul {
display: none;
}
body div#dropdownmenu ul li:hover ul {
display: block;
}
div#dropdownmenu ul li ul {
margin: 0;
width: 13em;
position: absolute;
left: -1px;
}
div#dropdownmenu ul li ul li {
width: 100%;
background-color:#bdb35e;
color: #660000;
border-bottom: 1px solid #000;
border-left: 1px solid #000;
border-right: 1px solid #000;
padding: 3px;
}
div#dropdownmenu ul li ul li:first-child {
border-top: 1px solid #000;
}
div#dropdownmenu ul li ul li:hover {
color: #FFFFFF;
background-color: #000000;
}
div#dropdownmenu ul li ul li a {
color: #660000;
text-decoration:none;
outline: none;
}
div#dropdownmenu ul li ul li a:hover {
color: #FFFFFF;
background-color: #000000;
text-decoration:none;
outline: none;
}
div#dropdownmenu ul li:hover ul, div#dropdownmenu ul li ul:hover {
display: block;
}
Any help is greatly appreciated, this seems like it would be a simple fix but I can't figure it out. Maybe I am overlooking some small detail. Thanks! Simple question, but i'm trying to create a decent sized space in between my links, and make them white. I can make my links white, but can't seem to change the space inbetween them. HTML Code: div id="bar-links"> <center> <div class="content box1"> <table width="500" border="0" align="center" cellpadding="0" cellspacing="0"> <tr> <td colspan="4"><img src="images/barlist_01.gif" width="500" height="23" alt=""></td> </tr> <tr> <td background="images/barlist_02.gif" width="20"></td> <td background="images/barlist_03.gif" width="456"> </p> <div id="bar-links"> <h4><a href="#" title="Riley's Pub">Riley's Pub</a> <a href="#" title="Ho Down Bar"style="color: #fff">Ho Down Bar</a> <a href="#" title="Depot Square"style="color: #fff">Depot Square Bar</a> <a href="#" title="Egans Pub"style="color: #fff">Egans Pub</a> </h4> </div> </td> <td background="images/barlist_04.gif" width="24"></td> </tr> <tr> <td colspan="4"><img src="images/barlist_05.gif" width="500" height="27" alt=""></td> </tr> </table> </div> CSS Code: #bar-links { text-indent:inherit; text-align:left; }
|
|||||||