|
CSS - Make Div Invisible As It Passes Another
I have a site with a cityscape and need text/image div to appear to pass behind skyscrapers. The javascript for all the div motions are worked out.
I had planned to just overlay a higher z-index graphic of the skyscraper where I wanted the text to pass behind, but as the site now requires the ability to scale the images on a window resize, that has become difficult if not impossible to make work seamlessly. So what I would like to do is have one div (textDiv) pass behind another (towerDiv) that shows through to the background, but when it does, it is hidden in the same way it would have been if passing behind a div with an image or background. Is it possible to make a div behave this way with css configuration? Z-index Visible 30 towerDiv 20 >-------textDiv---------> >-------------> 10 CityCityCityCityCityCityCityCityCityCityCityCityCityCity An alternative I've thought of would be to have the textDiv jump from one div container to another somehow, but that would require javascript and I'll place that question there. Thanks Similar TutorialsHi, I am using this class for .textbox, input.text_class, select.select_class{ font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 9px; color: #000000; background-image: url(./textbox_shadow.gif); height: 18px; width: 160px; margin: 0px; padding: 0px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; border-top-color: #BFBFBF; border-right-color: #E2E2E2; border-bottom-color: #EEEEEE; border-left-color: #C8C8C8; } for text box , how can I made tghe text box invisible or hidden style.display = "none"; inner circle design Ok. If you view this page in Firefox(any version) it works fine with the rollovers and all. When viewed in IE, when you mouseover the portion to the left of the about us button, the contact us button acts as if it were being rolled over. I used a JavaScript rollover, and styled it with CSS. I'm thinking the problem lies in the CSS, although it is valid(as is the XHTML page). Can anyone steer me in the right direction? Thanks. Hello all, Site is here. As you can see, there are 4 links along the top. They are all images controlled by CSS. Here's the XHTML code I am working on: Code: <div id="logonav"> <ul> <li id="ln1"><a accesskey="k" href="./" title="To The Main Page"></a></li> <li id="ln2"><a accesskey="t" href="timeline/" title="A little about me"></a></li> <li id="ln3"><a accesskey="i" href="about/" title="Info about this little web space"></a></li> <li id="ln4"><a accesskey="c" href="contact" title="Contact Me"></a></li> </ul> </div> As you can see, there is NO actual value for the anchor: nothing. Well, the WAI-AAA validator doesn't like that. There has to be something there. The problem is that if I add text there it, of course shows up on the page. I don't want that, I want my images... So, can I add the text, but make it invisible somehow? I've played with transparencies a bit, but nothing's working. Anyone know any tricks? The CSS code that controls them is he Code:
#logonav {
background : url(./pix/MenuBar.jpg) no-repeat;
height:40px;
width : 780px;
}
#logonav ul {
margin : 0;
padding : 0;
white-space : nowrap;
list-style : none;
}
#logonav li {
float : left;
width : 130px;
text-align : center;
margin-left : 25px;
}
#logonav li a {
font : bold 0.9em Arial, Helvetica, sans-serif;
text-decoration : none;
display : block;
line-height : 26px; /* trick provided by trx */
height : 26px;
}
#ln1 a {
background : url(./pix/home_off.gif) no-repeat;
font : bold 0.9em Arial, Helvetica, sans-serif;
text-decoration : none;
display : block;
line-height : 26px; /* trick provided by trx */
height : 26px;
color : #B04F4F;
}
#ln1 a:visited {
background : url(./pix/home_click.gif) no-repeat;
}
#ln1 a:hover {
background : url(./pix/home_mouse.gif) no-repeat;
}
#ln2 a {
background : url(./pix/time_bio_off.gif) no-repeat;
font : bold 0.9em Arial, Helvetica, sans-serif;
text-decoration : none;
display : block;
line-height : 26px; /* trick provided by trx */
height : 26px;
color : #B04F4F;
}
#ln2 a:visited {
background : url(./pix/time_bio_click.gif) no-repeat;
}
#ln2 a:hover {
background : url(./pix/time_bio_mouse.gif) no-repeat;
}
#ln3 a {
background : url(./pix/about_off.gif) no-repeat;
font : bold 0.9em Arial, Helvetica, sans-serif;
text-decoration : none;
display : block;
line-height : 26px; /* trick provided by trx */
height : 26px;
color : #B04F4F;
}
#ln3 a:visited {
background : url(./pix/about_click.gif) no-repeat;
}
#ln3 a:hover {
background : url(./pix/about_mouse.gif) no-repeat;
}
#ln4 a {
background : url(./pix/contact_off.gif) no-repeat;
font : bold 0.9em Arial, Helvetica, sans-serif;
text-decoration : none;
display : block;
line-height : 26px; /* trick provided by trx */
height : 26px;
color : #B04F4F;
}
#ln4 a:visited {
background : url(./pix/contact_click.gif) no-repeat;
}
#ln4 a:hover {
background : url(./pix/contact_mouse.gif) no-repeat;
}
Just as an example, I'll add "Home" to the bar in red text. Bsaically, I figure that still has to be there, but invisible! How? Thanks! Chris This is the weirdest thing, and I don't know what is wrong, and its driving me crazy. I have the following html code. Code: <body> <div id="container_bg"> <div id="container"> <div id="brand_bar"> <div id="logoleft"> Logo1 </div> <div id="logoright"> Logo2 </div> </div> <div class="header"> Big Image goes here </div> <div class="body"> <div id="left"> Left Column </div> <div id="right"> Right Column </div> </div> </div> </div> <div class="clear"></div> <div id="footer_bg"> Footer goes here </div> </body> </html> The css is as follows... Code:
body {
margin: 0px;
background: #CCC;
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
text-align: center;
}
.clear {
clear: both;
}
#logoleft {
float: left;
width: 350px;
}
#logoright {
width: 347px;
}
#container_bg {
width: 768px;
margin: 0px auto;
background-image: url(../images/container_bg.gif);
background-repeat: repeat-y;
padding-bottom: 20px;
}
#footer_bg {
width: 768px;
height: 40px;
margin: 0px auto;
background-image: url(../images/footer_bg.gif);
}
#container {
width: 700px;
margin: 0px auto;
text-align: left;
}
#left {
float: left;
width: 250px;
}
#right {
width: 450px;
}
The weird thing is...I can't make left and right add up to 700 or its "bigger" than its container. I actually have to make the total add up to 697 or they won't stay on the same line. Is there just a mysterious 3 px space between divs...or am I missing something? The same with logoleft and logoright...if I make them the same (350px) to add up to 700px...it won't stay on the same line...what is going on? How would I change this to make list elements invisible? At the moment it just greys them out? div.sideBox ul li.disabled { display: block; padding: 2px 0 2px 7px; border-top: 1px solid #ccc; color: #777777; } So Id like to make the element basically like it doesnt exist. I dont want any spaces left over. Ive tried this div.sideBox ul li.disabled2 { visibility:hidden; } but it leaves an empty space. Hi all! I have some DIVs and I want only one of them to be visible. Here is some simplified code: Code:
<p>
<a href="javascript:void(0);" onclick="document.getElementById('div1').style.visibility='visible';document.getElementById('div2').style.vis ibility='hidden';">Show DIV 1</a>
<a href="javascript:void(0);" onclick="document.getElementById('div1').style.visibility='hidden';document.getElementById('div2').style.visi bility='visible';">Show DIV 2</a>
</p>
<div id="div1" style="visibility:visible">
this is the content of div 1
<br/>line 2
<br/>line 3
</div>
<div id="div2" style="visibility:hidden">
this is the content of div 2
<br/>line 2
</div>
By clicking the <a> link, one DIV becomes visible, the other is hidden. The problem is that there is a gap between them, both in FF2 and IE7. Can someone explain me why there is this gap, and if there is a way I can remove it? TIA Alex Hi Guys, Is there a way to make a DIV invisible in IE but still available for mouse events? I have an arrows image used for navigating a map, I have placed invisible DIV boxes at select places on the arrows image and have various events triggered when these DIV's are clicked, this works fine in FF but in IE (as per usual) if the DIV doesn't have its backgroundColor set then the mouse events don't fire, it is like IE is saying 'the user can't see them therefore they aren't there'. Is there any way around this? P.S I can't use any kind of opacity (as it will effect the map image below the arrow image) and I have to use DIV's, slicing the image or <map> aren't an option for this. Cheers, Chris Ok, I know IE is buggy, but this one has been driving me nuts for a while now... I'm applying borders to the edges of a div as shown by A list apart. Pretty simple stuff and I have it working perfectly under Mozilla Firefox. IE on the other hand isn't taking it so well (imagine that). The thing is, it's like nothing I've ever seen. I changed some positioning on the page one night and ever since then it's been doing it. The lower right hand image is just not rendering. What's worse, is if I add a border to the element it will displace things as a border should but the border itself doesn't show up! I don't know how I managed to muck things up this way, but I would appreciate a hand with it if anyone has any ideas. Here is the IE Screenshot and the Firefox Screenshot Also... The CSS and The HTML I am looking for a way (preferably using CSS) to make an I-beam or cursor inside a text field to become invisible. This may be achieved by changing its color to match the bgcolor, by making it invisible altogether, or even simply to get it to stop blinking (when the bg color is black). Any help would be appreciated. Does anyone have any idea what could be happening to my main menu - it dissappears in Safari! Hobo Can someone show the the CSS to make the unordered list to the right of the picture display the same way in IE as it does in FF? HERE is my link. Many thank yous from the CSS noob. Hi, I'm working on redeveloping my site using CSS (learning CSS as I go), and for the most part it's fine. I'm having a bit of a problem getting my footer (containing links to Terms & Conditions, copyright notice, etc.) to display at the bottom of the page. I have a div called MainSection as follows : #MainSection { position: absolute; border: 1px solid #000033; top: 100px; left: 1px; width: 777px; z-index: 0; } Within that, I have 3 divs - WhereYouAre, LeftPanel and MainBodyContent, as follows: .WhereYouAre { position: absolute; width: 500px; top: 8px; left: 205px; font-family: Verdana, Arial, Helvetica, sans-serif; font-weight: bold; font-size: 12px; text-decoration: none; color: #000033; } #LeftPanel { position:absolute; top: 3px; left: 3px; width: 190px; border: 1px solid #000033; } #MainBodyContent { position: absolute; border: 1px solid #000033; padding: 0px 5px 5px 5px; top: 5px; left: 200px; width: 567px; z-index: 0; } Then at the bottom, after the closing </div> for the MainSection, I have my div called BottomNav: #BottomNav{ position:inherit; margin:10px; border-top: 1px solid #000033; border-bottom: 1px solid #000033; width: 780px; left: 0px; } The BottomNav keeps appearing at the top of thepage instead of at the bottom - I've tried different values (inherit / relative, etc) to see can I get something to work, but no good so far... and I can't set the positon to absolute as the location of the BottomNav depends on the length of the MainSection. Thanks a lot for any suggestions, J. Hi... Can any body tell me how to make effect mentioned below. http://forums.devshed.com/archive/t-175080 Basically i am a designer, and i am new to programming. When the above mentioned page will open, there are links in blue color i.e "Firewall", "Backup", "internet", "Viruses", "VPN", etc etc. I need this type of effect for my web site, can any body tell me how to make this.... Thanks http://www.webpagedesignrus.co.uk/DECS Code: #container {
margin: auto;
width: 100%;
display: block;
text-align: center;
height: 100%;
}
#middle {
text-align: left;
margin: auto;
width: 600px;
height: 100%;
background-color: #FFF;
}
#main {
margin: auto;
background-color: #FFF;
border-left: solid black 1px;
border-right: solid black 1px;
width: 650px;
height: 100%;
cell-padding: 0px;
cell-spacing: 0px:
}
I can't get the white part to be 100% height... I need it to go to the bottom of the page... Please help... Sorry for the boring thread. What I am basically trying to do is make a grid of numbers (its for a small calendar), and I want to do it using css. Would appreciate any suggestions for the best way to go about it. (an expample is the HTML code that it would be) Code: <table width="150" border="1"> <tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td></tr> <tr><td>8</td><td>9</td><td>10</td><td>11</td><td>12</td><td>13</td><td>14</td></tr> <tr><td>15</td><td>16</td><td>17</td><td>18</td><td>19</td><td>20</td><td>21</td></tr> <tr><td>22</td><td>23</td><td>24</td><td>25</td><td>26</td><td>27</td><td>28</td></tr> <tr><td>30</td><td>31</td><td>32</td><td>33</td><td>34</td><td>35</td><td>36</td></tr> </table> I am not to bad at the css thing but this got me foxed... I started of by indenting the margin of each <td> as <div> and appling a more negative of a top margin for each one... it started to get confusing! Cheers, Hi I am new to flex and i am suppose to change the css file so that it references a a swc file instead of an programmatic skin. I know the syntax is classreference... for the action script. I just want to to know what i should replace it as. Thanks A column on the left side of the page 200 pixels wide (reserved for a vertically orientated textbased navigation bar). The background colour of this area should be black. An area to enter content that is 800 pixels wide with a white background. Any help appreciated. Basically on this page here -> http://www.prxa.info/area51/profile.php?info=1 The copyright molds into the right column and i wish it to stay below both the left and right, how would i go about doing that? |
|||||||