|
CSS - Creating Width-defined Mouseovers Without 'onmouseover'
Hi,
I've been running into a specific issue in projects for months now, and it's beginning to drive me nuts. I'm sure there must be a way to do what I'm trying to do. The situation will usually be something like this: I'll have a vertical menu in list form. All of the menu items are to be 150 pixels wide with a background image, and that background image will change when the link is hovered over. The links themselves, though, are not all the same text and therefore not the same width. I cannot get CSS to implement a width to links, and when using CSS like the below, that's a necessity to get the same width background hover image on each link. CSS/HTML: css Code: Original - css Code <style type="text/css"> ul{} ul li{ background: url(someimage.gif) no-repeat #FFF; width: 150px; } ul li a:hover, ul li.active a:hover { background: url(someimage_over.gif) } </style> <ul> <li><a href="#">Link One</a></li> <li><a href="#">Link Number Two</a></li> <li><a href="#">Link Three</a></li> <li><a href="#">Link Number Four (4)</a></li> </ul>
I hope that illustrates what I'm trying to get across, but maybe not. Basically, I need a way to use CSS to change the background of multiple areas of the same width within which the <a> sizes may not be the same. I'm having trouble explaining this. Let me know if you need it further explained.. otherwise, I'd greatly appreciate any input. Thanks in advance! Similar TutorialsHi I have this small problem with one of my sites when viewed in IE *surprise surprise* Let's say I have a div called "foo". I specify a width and set a padding of 10px. Code:
<style>
.foo {
width: 100px;
padding: 10px;
}
</style>
<div class="foo">Bar</div>
Firefox, Opera and Mozilla interprets this as an element which's "text area" is 100px and there's an additional 10px on both sides. So the actual width of the div is 120px. IE doesn't interpret it like that. If I set widht=100px, then the actual width is 100px regardless if I have paddings or not. Now these different types of interprations are causing me a head ache. Is there any "trick" to make the div to be equally wide in all browsers? If not, I guess the only option is to use tables - Kimppa I'm trying to create a full width bar across the page. My current attempt is at: http://www.mixicon.com/dev/test.html It is currently working in Safari, but not in Firefox.I'm open to opinions in what I might be missing here, any thoughts? I'm mostly happy with how it looks in Safari, so I need any help to get it there in other browsers. The attached image shows what it should look like. I'm beginning to suspect that this just isn't possible without javascript, but I'm throwing it out here just in-case I get lucky. Basically, what I want is a square-div that is no more than 90% of the window-height or 90% of the window-width, and will scale to fit the smaller of the two sizes. So, say the viewable area of the page is 800 x 600, the div would scale to be 540 by 540. If the size were 400 x 500, then it would be 360 by 360. I know that of course it's trivial to do with fixed-width divs by specifying a size in pixels, but is there any-way to do it for anything else? Images work nicely, as they will try to remain at the same aspect-ratio when stretched. I'm trying to make a nice simple interface composed of a few large, elements, that is able to scale seamlessly from desktop to mobile screen-sizes. Hello, I just took a look at my site in IE7. I know the coding is far from pure, but it's still simple, and I didn't expect any problems. It looks fine in Firefox and Safari. Is style="padding-right:15px" not allowed in an img tag? Why does the mouseover effect in the menu not work? Code: #sidebar {
margin: 0 0 0 0;
width: 160px;
}
#sidebar .menu {
list-style: none;
margin: 0 0 0 0;
padding: 0;
width: 150px;
border-bottom: 1px solid #e8e8e8;
}
#sidebar .menu li {
border-top: 1px solid #e8e8e8;
color: #999;
font-family: 'Lucida Grande', 'Lucida Sans Unicode', 'Lucida Sans', Verdana, Arial, sans-serif;
font-size: 12px;
font-weight: normal;
padding: 2 0 2 10;
width: 150px;
}
#sidebar .menu li:hover {
background-color: #f8f8f8;
}
#sidebar .menu li a {
color: #2E86D0;
display: block;
padding: 0px;
text-decoration: none;
width: 140px;
}
#sidebar .menu li.active:hover {
background-color: #e8e8e8;
}
THANKS for the help! Hi guys, just want to ask for help and if this is possible? I have a textlink inside of a row ,and I want to highlight the row color when mouseovers on that row or textlink. (maybe row color white will change to gray.) pls help. thanks in advance Hi, I have hit the "wall" in my knowledge of CSS while trying to implement a "flex-width-equal-height-sidebar-layout" style of layout as a skin/theme for a message board system and need some help. My trouble occurs when a direct link to the post is used (instead of following the menu navigation system) where the top menu information/links area (the area between the banner and the post) is chopped off... The relevant portion of the CSS seems to be the .col_wrap {margin-top: 10px; border: 0; overflow: hidden; float: left; width: 100%; position: relative; z-index: 10; clear: both;} portion of my CSS because if I take out the overflow:hidden declaration then the menu portion of the skin/theme/layout shows correctly but the sidebar the shows the part which should be hidden at the bottom and the footer completely vanishes from view! My apologies but this is the best I can do without having the ability to post pics or urls which could better explain what is wrong and frankly speaking I don't know how anyone here can help given my inability to show the problem but hopefully someone knows or has run into this problem before or can offer some resources that may be of assistance.... i ve been playing with my page and been trying to modify the width of the page (divs) according to the browswer's width. The problem is i want the navigation menu on left to be fixed width (say 200px) and the center div and the right column to be variable width. Also, i want to set a minimum width , so that the floating divs dont roll below the navigation menu. here s the link to the page. try reducing ur browser windows size . the content div rolls down under theleft nav menu. http://ccc.1asphost.com/pacemakerpr...r/cicuitlab.htm Also , i get wierd result in netscape navigator. please help I have an absolutely positioned <div> containing a block of text. I have not specified a width for this <div>. This <div> is nested within another <div> for which I have specified a width of 200px. So something like: html4strict Code: Original - html4strict Code <div style="position: relative; width: 200px;"> <div style="position: absolute; top: 10px; left: 20px; z-index: 100;"> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Curabitur eu purus a tellus mollis consequat. Phasellus aliquam sapien quis mauris. </div> </div> <div style="position: relative; width: 200px;"> Since the absolutely positioned <div> is not part of the page's normal flow, I would expect that its width would expand according to its contents (and the browser window's boundries). Instead, in Firefox only, the width of the absolutely positioned <div> expands only to the width of its parent - in this case 200px. Am I doing something wrong? or is there a workaround for this? I have seen a design which I find pretty interesting where in the main site is aligned left and fixed width at say 700px wide. Yet the footer seems to span the entire screen. The header also seems to use the entire screen width but that is beign accomplished with the background image, but this footer goes all the way to end of the screen and naturally adjusts itself under all the content. Is there a way to get this effect? hey guys i have my nav xhtml set up as Code: <!-- define navigation layer --> <div id="nav"> <!-- define navigation --> <ul id="nav"> <li id="navone"><a href="band.php?id=news"><img src="images/news_off.jpg"alt="News" /></a></li> <li id="navtwo"><a href="#"><img src="images/band_off.jpg" alt="Band" /></a></li> <li id="navthree"><a href="band.php?id=shows"><img src="images/shows_off.jpg" alt="Shows" /></a></li> <li id="navfour"><a href="#"><img src="images/sights_off.jpg" alt="Sights" /></a></li> <li id="navfive"><a href="#"><img src="images/sounds_off.jpg" alt="Sounds" /></a></li> <li id="navsix"><a href="#"><img src="images/merch_off.jpg" alt="Merch" /></a></li> <li id="navseven"><a href="#"><img src="images/contact_off.jpg" alt="Contact" /></a></li> <li id="naveight"><a href="#"><img src="images/links_off.jpg" alt="Links" /></a></li> <li id="navnine"><a href="#"><img src="images/forum_off.jpg" alt="Forum" /></a></li> <!-- close navigation --> </ul> <!-- close navigation layer --> </div> with the css Code: #nav {
width:625px;
height:57px;
background: #e8ddc1;
color: #333333;
margin: 0px;
padding: 0px;
border: 0px;
}
#nav ul li {
float:left;
margin: 0px;
padding: 0px;
border: 0px;
list-style: none;
}
#nav img {
margin: 0px;
padding: 0px;
border: 0px;
}
because i have the div defined as nav and the ul defined as nav it's coming up as a duplicated error. when i try to change the names or assign classes the alignment goes to pot! any ideas where im going wrong? I'm at the very very very begaining of a table-less design (my first, actually). The problem is, since I have decided to have a non-fixed width, when the browser is minimized, at a certain point the design breaks. See it here (please don't make fun! it's just the start): SiliconSatan.com/test.php I'd like to set a minimum width, probably on the container <div>, so at a certain point it sort of becomes like a fixed width? No smaller than a set width? [EDIT] Also, I have a question about background color mismatch, but it was not quite OT for the CSS forum: http://forums.devshed.com/web-desig...e7t-403266.html Hello, (please also see attached/uploaded style sheet) I'm puzzled why (in the following code) the TEST #2 table renders as required (i.e. 2 rows in 1 column, all with the same cell WIDTH) but the table in TEST #1 seems to render the table cells (i.e. 2 columns in 1 row) without a common cell WIDTH. How can I get all the cells (there are plenty more!) in table TEST #1 to all be exactly the same width (preferably 85px)? Code: <link rel="stylesheet" type="text/css" href="http://thinet/cgi-bin/thinetStyleSheet.css"> TEST #1 <table class="menu" border=1 CELLPADDING=2> <tr> <td class="pinkButtons"><a title="Treats menu" href='http://thinet/theread/forumdisplay.php?s=&forumid=82'>Treats</a></td> <td class="pinkButtons"><a title="New Starters, Leavers and Transfers" href='http://thinet/theread/forumdisplay.php?s=&forumid=41'>Joiners etc.</a></td> </tr> </table> <P> TEST #2 <table class="menu" border=1 CELLPADDING=2> <tr><td class="pinkButtons"><a title="Treats menu" href='http://thinet/theread/forumdisplay.php?s=&forumid=82'>Treats</a></td></tr> <tr><td class="pinkButtons"><a title="New Starters, Leavers and Transfers" href='http://thinet/theread/forumdisplay.php?s=&forumid=41'>Joiners etc.</a></td></tr> </table> I don't think I've quite grasped the idea of CSS yet?!?! Any help/pointers would be appreciated. Thanks, Andy Ok. Here's the problem: I have a asp.net 1.x datagrid inside a floated div and I want the datagrid to stretch the width of the div. This div is in the center of two other floated divs. Is there a way to make a table go 100% the width of its container div? Css code: Code:
/* left bar: */
#navBar{
width: 185px;
float: left;
}
/* right bar: */
#rightModulesContainer {
width: 130px;
margin: 0;
padding: 0px 0px 0px 10px;
float: right;
}
/* center content: */
#content{
padding: 0px 5px 0px 0px;
margin-top:0;
margin-bottom:0;
margin-left:4px;
margin-right:0px;
float: left;
text-align:left;
/*display: inline;*/
}
/* contained in #container: */
#dataGridContainer{
margin: 0;
padding-bottom: 10px;
min-width:360px;
}
.categoryGridStyle {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
font-style: normal;
color: #000000;
width:100%;
}
and here is the layout of the divs: Code: <div id="navBar">left navigation bar here (tree view)</div> <div id="rightModulesContainer">right side bar here</div> <div id="content"><div id="dataGridContainer">datagrid here</div></div> Thanks for your help in advance. I've been messing with this for a while - trying to get it to work cross browser is driving me nuts. I've tried placing the divs in containers and floating the containers, I've tried everything I can think of... Is it possible to define a style class and then reference that in another user defined class so that you don't have to have 12 classes with only very minor differences? Hi, For SEO reasons I'm trying to add an < H1 > tag around some text and have that text appear as the other text in a paragrah. The problem is any text I put in the h1 tags don't seem to wrap in IE or NS. Instead, if it needs to wrap it puts it on the next line. For example, if I had something that looked like: The quick brown fox jumped over the fence and ate the cat And I surround "brown fox jumped" in h1 tags, in IE and NS it would look like: The quick brown fox jumped over the fence and ate the cat Does that make sense? Any solution to that? The style I'm using is simply Code:
h1
{
position:relative;
font: 12px/14px Verdana;
display:inline;
margin:0;
}
TIA! I have a header div with a background image - it's basically a pair of hands holding a banner - the arms extending to the sides of the window. I'm trying to work it so that, no matter how wide or thin the window, the arms will always extend to the sides. So when you make it smaller, the image will disappear beyond the viewing window. This happens automatically on the right-hand side, but the image is stopping it on the left. Is there a way to set a min-width, which is smaller then the image itself, so that when the window is shrunk the image starts to disappear on either side until it reaches the min-width? I'm trying to get it so the arms will disappear and stop at the hands. Or can anyone suggest an alternative solution? I tried to do it with background and header image, with the arms on the background, so when the top image moves it looks like the arms move with it. That worked great until I started using a patterned background. Full width: |---------------------------------------| |AAAAAAAAHHH BBBBBBBBBBBBBB HHHAAAAAAAAA| |---------------------------------------| Shrunk width: ------- |------------------------| -------- AAAAAAA |AHHH BBBBBBBBBBBBBB HHHA| AAAAAAAA ------- |------------------------| -------- Grey bit outside window edge. | Window side A Arms H Hands B Banner I hope that makes sense. I expect there's an easy solution but I've been trying to figure it out for several hours and could do with someone else's perspective. Thanks. I have a page with an ASP.NET Gridview on it...this Gridview is located in a child DIV inside a parent DIV. That Gridview can often go wider than the parent DIV width set. In IE6 the MAINDIV (Parent DIV) would expand to fit the expanded Gridview contained within the child DIV. In IE7 the DIV will not expand so it overlaps the DIV and looks bad. I want that MainDiv to dynamically grow with the child DIV width, like it did in IE6. Please see my code below. I want the MainDiv to remain ~800px unless it is pushed out further. Thanks for any ideas on a fix for this. Whenever I try min-width it just blows the parent DIV out to 100% screen size. Code:
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
</head>
<body style="width:100%;text-align:center;background-color:#68838B" onload="loadpage();">
<form id="frmMain" runat="server">
<div id="mainDiv" style="position:relative;top:10px;width:800px;height:auto; background-color:white;border:solid 1px #666666">
<div id="contentDiv" style="text-align:left;width:797px; padding:3px 3px 3px 3px;">
<asp:ContentPlaceHolder ID="contentBody" runat="server"></asp:ContentPlaceHolder>
</div>
</div>
</form>
</body>
</html>
For reasons of compliance with the SEC, I can't use cascading style sheets, but rather, I have to generate style attributes for each individual element (e.g.
Code:
<p style="width:436pt; margin:0pt; padding:6pt 0pt 0pt 20pt;
font-family:serif; font-weight:normal; color:#000000;
font-size:10pt; text-align:left; font-style:normal;
line-height:12pt; background-color:#FFFFFF;" >text </p>
don't get me started on how rediculous this is). Its stupid, but it works. What I can't figure out is how to apply something like Code: <style type="text/css" media="print">
hr {visibility:hidden}
</style>
to <hr style" ??? "/> any suggestions would be much appreciated -LG I am trying to run a javascript that constructs a menu but must use absolute positioning. I can put the menu correctly where I want it by setting parameters of left and top from origin. However... this doesn't work too well for a page consisting of 800px tables centered for looking good in any resolution 800x600 and up. So I was wondering if it is possible to use absolute positioning and define an origin using anchor tags or something like that. Any help please? I found some neat css code to display an image file to the user, but text to the search engines (which count more for internal linking when it comes to seo). The sample code I found uses an h3 tag and is as follows: Code:
<h3 id="header">
<span>Revised Image Replacement</span>
</h3>
/* css */
#header {
width: 329px;
height: 25px;
background-image: url(sample-opaque.gif);
}
#header span {
display: none;
}
(full explanation found at: http://www.mezzoblue.com/tests/revised-image-replacement/) I tried to do so on my site using anchor text, but can't get it to work. Nothing shows up at all Code:
<a href="Apply_Now_Surety_Bond.htm" id="blank_button"><span>Apply</span></a>
/* css */
#blank_button a{
width: 93px;
height: 52px;
background-image: url(apply.jpg);
}
#blank_button span {
display: none;
}
You can see that the "Apply" button does not appear at: www*bryantsuretybonds*com/new (it should be the first one on the left) |
|||||||