|
CSS - Problem Keeping Thumbnails In Fixed Position Upon Hover
I'm really tired, so this may be a dumb question. I'm having problems keeping thumbnails fixed in their position. I want them to have a 1px yellow border when I hover over them. I can get the border but when I hover over them the other images move slightly. I have the thumbnails set up inside a <ul>. Here's the pertinent CSS:
Code: #thumbcontainer {
margin-left: auto;
margin-right: auto;
margin-top: 10px;
margin-bottom: 0px;
padding: 10px 10px 0px 0px;
width: 840px;
background-color: #000000;
}
a img {
border: none;
margin: 4px 4px 10px 4px;
}
a img: link {
border: 1px solid #000000;
}
a img: visited {
border: 1px solid #000000;
}
a img:hover {
border: 1px solid #e5cb43;
}
a img: active {
border: 1px solid #000000;
}
ul.content {
list-style-position: outside;
padding: 0px; margin: 0px;
border: none;
background-color: #000000;
width: 850px;
text-align: center;
}
li.content {
margin: 0px;
padding: 0px;
list-style-type:none;
}
What are my options? Thanks in advance! Similar TutorialsHello all, still a little new to css layout problem-shooting in older browsers, so thanks for your help in advance! I'm having a problem which is only occurring in Internet Explorer 6, but I just can seem to figure out what's wrong. if you look at the page in any other browser, you can see the header <div> stretches the width: 100%, but in IE6, the header <div> does not extend all the way to the left, but rather starts where the margin:auto Main <div> tag starts from the left side. What I am lost on is that the footer <div> performs this just fine, but it's position is not fixed and there is no z-index. here is the code for both, and thanks again for having a look: #header { width: 100%; height: 107px; display: block; position: fixed; margin: 0px; padding: 0px; background-color: #000000; background-image: url(../images/main/bhs_design_header_gradient.jpg); z-index: 100; } #footer { width: 100%; height: 35px; display: block; background-color:#000000; margin-top: 10px; clear: both; text-align: center; font-family: Arial, Helvetica, sans-serif; font-size: 11px; font-weight: bold; color: #EBEAE8; margin: 0px; background-image: url(../images/main/bhs_design_footer_gradient.jpg); } Hi folks, I'm working on a website at the moment and having some issues 'fixing it' for Internet Explorer. The design scrolls horizontally, and using 'position:fixed;' on certain elements keeps them on the page while the rest scrolls - this works fine in Safari / Camino / Firefox etc. but as we know position:fixed; is broken in IE. I tried applying the fix found at http://web.tampabay.rr.com/bmerkey/...tion-fixed.html but this only seems to work for regular vertical scrolling pages - when scrolled horizontally the "fixed" elements still scroll with the page. Is there any way possible to get this to work? I really really want to avoid any of those javascript "jumpy" scripts to reposition the element all the time. Thanks all. Hi Guys, Firstly, I'd like to apologise for posting this, this is my first css site that I'm working on and I've just noticed some problems that have appeared with testing with IE6 (I normally use Firefox and last time I tested in IE 6 things were working ok!) The problem is that my Block hover doesn't now seem to work and neither does my image border hover either. On top of that my positioning for 2 small boxes has suddenly gone a little awol too! Site is fine in Firefox, see here However when I check this in IE, the hovers and a couple of boxes have really messed up and I've spent hours with this, but not getting anywhere, so any assistance would be greatfully received! My style sheet is here Again, any pointers would be much appreciated Best regards Jon P.S I've been using Firebug with much success for Firefox, but not sure what to use for IE, any suggestions? How can I fix a Div a set distance below another Div without a set height? I'm trying to have the contact information for a site to always appear in a right div next to the main content div. I would like it to always appear in the top right of the div, no matter how much the user scrolls down. This way, the information is always visible. I tried experimenting with background images in certain divs, but Firefox (but not IE) was having trouble displaying it the way I wanted. I've seen it in action before, so I'll post a URL if i can find where. I am not an expert on developing websites, but I've been able to get our site up and running without much challenge. I used a menu I found on www.dynamicdrive.com that allowed you to have our menu in a horizontal or verticle layout. We don't use frames in our site but we wanted a frames-type look. So we use the menu in the vertical layout. What I'd like to do is find a way to keep the menu on the screen as people scroll down. I've seen other websites do this and have looked at a couple that were recommended from a previous post, but I can't figure out how to make it work propertly. Our website is www.indyartistgroup.com. If someone could take a look at the site and suggest some ideas on how to make the menu on the left hand side stay on screen no matter how low you scroll I would appreciate it. I'm out of options at this point. Thanks for the help. John ok my site works perfect in ffox but when i load it in ie the fixed position dose not work :'( why not?, if i go back in firefox it will i am trying to do this example here w3schools.c0m/css/tryit.asp?filename=trycss_position_fixed the o, in .com has been changed to 0 so i could post. sorry the text " Some more text " I wish to had dead center on the right side of the page, not near the top like that, mainly, i wish to put two more lines of text just under it as well, all being dead center of the page, on the right, i cannot figure it out, any help please? Since position:fixed does not work in IE, are there any other ways to achieve the fixed effect, without using javascript? Please look at this URL http://www.finance.samif.com/Koelkast When I select any check box on left column then one pop up is display on screen. This image shows properly in Fire fox. When I scroll up down then image is fixed in fire fox. Vertically and Horizontal But when I used IE and select check box on bottom left menu then I can't see pop up image. Because this is not display vertically middle or it is not fixed. Please give me idea or suggestion how I can fix it. Thanks I'll start with my code. code:--------------------------------------------------------------------------------<?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>Untitled Document</title> <style type="text/css"> body { height: 100%; width: 100%; overflow: hidden; margin: 0px; padding: 0px; } #menu { position: absolute; display:block; bottom:0px; left:0px; width:100%; border:1px solid #002E80; background-color: #E5EFFF; } #content{ padding: 5px; width: 100%; height: 100%; overflow: auto; z-index: 100; } </style> </head> <body> <div id="content"> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. </div> <div id="menu"> <table width="100%" border="0"> <tr> <td><div align="left"> <input type="button" name="prevBut" value="<< Prev" /> </div></td> <td><div align="right"> <input type="button" name="nextBut" value="Next >>" /> </div></td> </tr> </table> </div> </body> </html> -------------------------------------------------------------------------------- The problem falls on the positioning of the scrollbar. I need it to be over my bottom menu. Right now it falls below the menu. Why is this? Hi all, I've got a site which you have to scroll horizontally to view the content (different eh?), but I want the menu to stay in a fixed position on the left side of the screen. Can anyone tell me if/how I can do this? Cheers! I have a scrolling div on a page. Within the div is a tabular form. I want to place a button that is has a fixed position within the div. So if the HTML code is like this: Code: <div id="div1"> <div id="buttonID"></div> <form> <table> <tr> <td> </td> </tr> </table> <form> </div> The css I thought would achieve what I wanted is Code:
#div1{
div1 CSS goes here.
}
#div1 #buttonID{
position: fixed;
top: 300px;
left: 20px;
}
However, while the button is fixed, its position is fixed in relation to the page, not within the div which is annoying. Can anyone point out what I'm doing wrong here? Can a sumbit button for a form be located outside the form or does it matter? The layout in question: Page: http://www.westeros.org/ASoWS/index-Frames.html CSS (general): http://www.westeros.org/ASoWS/ASoWS-All-Frames.css CSS (IE): http://www.westeros.org/ASoWS/ASoWS-IE.css In Mozilla the above CSS 'frames' layout is mostly working, save that I can't figure out a way to hide the text above the header and below the footer. Is that at all doable with this layout? In IE, however, the header, footer and sidecolumns are all over the place. I have another CSS 'frames' layout (see the links below), which does work in IE, and part of the problem with the new layout seems to be that IE really doesn't like having left and right values specified for the header and footer. However, without those, I don't know how to make sure that they start and stop 10px away from the edge. Any workarounds for that that anyone can think of? Old CSS 'frames' layout (does work in IE): Page: http://www.westeros.org/BoD/ CSS (general): http://www.westeros.org/BoD/BoD-All.css CSS (IE): http://www.westeros.org/BoD/BoD-IE.css Hello! I'm working on a website right now and have sort of dived in further than I understand conditional CSS. The website is he www.kekoz.com I have that little menu in the upper right and the info in the lower right. I like those being fixed so when the user scrolls they are always up there. But I can't figure out how to make them stop from colliding with the main pictures when you change the height of the page. Any help would be grand! Right now they're position super simple: Code: #links{ position:fixed; top: 20px; right:20px; width:300px; }
Code: #info_box{ position:fixed; bottom: 25px; right:10px; width:550px; }
I tried to set a minimum height on them, but I think that would have to do with some sort of a container around them. Or maybe I'm just going about it all wrong. Also a couple other things I'm sort of thinking. I would like the "Scroll this way" thing to always be centered between the lower edge of the pictures and the bottom of the window. Not %100 sure how to get that set up. And the last thing I'm thinking for this page, which I'm not sure is all CSS would be to have the "scroll this way" thing actually fade based on the scroll position. I think this might be Jquery but thought I'd throw it out there to see if anyone had any advice. Hello all i am having trouble with getting a layer to stay put when i school down the page. This is my code: Code:
#Layer1 {
position:absolute;
width:64px;
height:73px;
z-index:1;
left: 0px;
top: 101px;
}
<div id="Layer1">
<div align="left"><img src="images/gun.gif" width="58" height="73" /></div>
</div>
Everytime i scroll down the image goes with it. I need it stay where i put it without moving at all. If anyone could help then that would be great David Hello, Is there a method by which we can use position:fixed in Internet Explorer 5.5 and 6.0 ? I have searched google but did not find anything really useful. Please help me. I have seen this done but can't find any examples at the moment, but what I am looking to emmulate is have a page that required vertical scrolling. On either the left or right hand side is (for example) a square image and directly below it is a menu. When the user scrolls down the page the image goes off the top but the menu sticks to the top so is always visable. When the user scrolls back up as soon as the image starts to appear it pushes the menu back down so it is sat below the image. If i used position:fixed I can keep the menu in the same place when scrolling but I would like it to rise to the top of the browser when space is availble when scrolling. Make sense? Hi All, I have been working on this validated site - http://www.edgeandbarrett.com/zub/test2/logo.htm and it works on all browsers, mac and pc, all apart from IE7 (and 6 of course with fixed). When viewing it, on ie7, it seems the padding is not being read, so the fixed navigation, is overlapping my content. This is the css - Code:
* {
margin : 0;
padding : 0;
}
img {
display : block;
border : 0;
}
body {
background-color : #eeeeee;
font-family : helvetica, arial, sans-serif;
line-height : 18px;
}
hr, .hide {
position : absolute;
top : 0;
left : 30px;
}
#site {
width : 870px;
margin : auto;
}
#header {
position : fixed;
display : inline;
height : 100%;
width : 200px;
top : 30px;
background : #eeeeee;
z-index : 4;
}
#logo {
position : relative;
top : 10px;
z-index : 5;
}
.picbar {
position : relative;
padding-top : 5px;
padding-bottom : 5px;
margin-top : 22px;
margin-bottom : 12px;
border-top : 1px solid #9f9f9f;
border-bottom : 1px solid #9f9f9f;
z-index : 6;
}
.menu {
position : relative;
width : 190px;
z-index : 7;
}
.menu .title {
font : bold 13px Georgia, "Times New Roman", Times, serif;
color : #333333;
padding : 5px 0 5px 0;
}
.menu .title a {
text-decoration : none;
color : #333333;
}
.menu .title a:hover {
text-decoration : none;
color : #940f04;
}
.menu .title a:visited {
text-decoration : none;
color : #940f04;
}
.menu ul {
list-style-type : none;
}
.menu ul li {
padding-bottom : 2px;
}
.menu ul li a {
font : normal 12px Arial;
color : #333333;
padding : 7px 0 7px 0;
line-height : 17px;
text-decoration : none;
}
.menu ul li a:visited {
color : #940f04;
}
.menu ul li a:hover {
color : #940f04;
}
.menu h1 {
padding : 5px 0 5px 0;
font-family : Georgia, "Times New Roman", Times, serif;
font-size : 13px;
color : #333333;
}
.menu a {
color : #333333;
text-decoration : none;
}
.menu a:hover {
color : #940f04;
}
#container {
position : relative;
background-color : #fff;
width : 650px;
margin-left : 220px;
padding-top : 90px;
z-index : 3;
}
#container h1 {
padding-bottom : 10px;
padding-bottom : 10px;
font-family : Georgia, "Times New Roman", Times, serif;
font-size : 13px;
color : #333333;
}
#container h2 {
padding-bottom : 10px;
padding-bottom : 10px;
font-size : 13px;
color : #333333;
}
#container p {
padding-bottom : 10px;
font-size : 13px;
color : #333333;
border-bottom : 1px solid #9f9f9f;
}
#container a {
color : #000;
text-decoration : none;
}
#container a:hover {
color : #940f04;
}
.pic {
padding-top : 5px;
padding-bottom : 5px;
margin-bottom : 18px;
border-top : 1px solid #9f9f9f;
border-bottom : 1px solid #9f9f9f;
}
.text {
background-color : #fff;
width : 420px;
padding-bottom : 30px;
font-size : 13px;
color : #333333;
}
.about {
background-color : #fff;
width : 420px;
padding-bottom : 30px;
margin-bottom : 20px;
font-size : 13px;
color : #333333;
border-bottom : 1px solid #9f9f9f;
}
.ser {
background-color : #fff;
float : left;
width : 210px;
padding-bottom : 15px;
font-size : 13px;
color : #333333;
}
.ser2 {
background-color : #fff;
float : left;
width : 210px;
padding-left : 8px;
padding-top : 47px;
padding-bottom : 15px;
font-size : 13px;
color : #333333;
}
.test {
background-color : #fff;
width : 420px;
padding-bottom : 30px;
font-size : 13px;
color : #333333;
}
.line {
background-color : #fff;
float : left;
width : 420px;
padding-bottom : 15px;
margin-bottom : 20px;
border-bottom : 1px solid #9f9f9f;
}
#footer {
position : relative;
background-color : #fff;
width : 650px;
margin-left : 220px;
padding-top : 20px;
padding-bottom : 20px;
border-top : 1px solid #9f9f9f;
z-index : 1;
}
#footer p {
font-family : Georgia, "Times New Roman", Times, serif;
font-size : 12px;
color : #505050;
text-align : left;
}
#footer a {
color : #505050;
text-decoration : none;
}
#footer a:hover {
color : #940f04;
}
I have no idea the fix, have tried display:inline; and had a look around, but am not sure what the exact problem is, and am quite new so all a bit confusing. Any help would be really useful!!! i have also uploaded 2 screenshots. one how it looks on all other browsers . . . and one on IE7!!! http://www.edgeandbarrett.com/zub/test2/how%20it%20should%20look.png http://www.edgeandbarrett.com/zub/test2/ie7.png Its the only issue i have before i can complete site . . . . . . and really want to crack on!!!!!! Thanks, Orwel Hello, I am trying to have make a 'facebook' style toolbar fixed to the bottom of the screen. This works on desktop browsers except Mobile Safari on the iPhone (due to the 'viewport' way of rendering the page). Is their a workaround for this? I have seen doctyper's method but can't get it to work. Thanks |
|||||||