|
CSS - How Do I Show A Div On Top Of A Facebook Fan Page
I have a div that is inside an iframe on my facebook fan page. It uses the facebox function and works fine, however when it is shown, it is only on top of the iframe inside the fan page, how do I make it appear over the entire facebook fan page?
Tim Similar TutorialsI've started using a JavaScript carousel script on my website, http://www.rockitdesign.co.uk/new/. When I loaded the page in Firefox and safari every image in the carousel would appear and then all but the top would disappear which is how it should be. Sorry for the bad explanation, any way to stop this? My problem is pretty obvious when you look at the following link. Currently only the first three links in the list in the middle work. (Firewall, power backups, tape backup system): http://www.zacwittedesign.com/jeremy/network.html They show/hide correctly, but I need them to end up on top of eachother. I don't know how to do this without using the absolute positioning, but I can't use that because it needs to be reletive to the rest of the page. Can't I somehow anchor the layers at the same point? Thanks, Zac Following sample is from http://www.code-couch.com/jeff/snippets/general/tektips-navigation-example.html is what I am trying to reference to create a template. But how do I how keep the state of Menu on each requested page any help is appreciated. The following menu is saved in a separate jsp file i.e. navs.jsp. I include this navigation jsp file in all of my files. Initially the drop down looks like: Code: . Ask.Jeeves . [+] Google.com . [+] Yahoo.com Now clicking [+] in front of Google.com will look like. Code:
. Ask.Jeeves
. [-] Google.com
. Google.co.ie
. Google.co.ie
. [+] Google.co.nz
. [+] Yahoo.com
Lets's say now if I click on Google.co.ie it takes me to sample.jsp and on this requested page (sample.jsp) how can I show the following menu hierarchy with Google.co.ie bold/underlined/colorchanged showing what menu content I clicked and am viewing the appropriate content i.e. Code:
. Ask.Jeeves
. [-] Google.com
. Google.co.ie
. Google.co.ie
. [+] Google.co.nz
. [+] Yahoo.com
Same way clicking Google.com or Yahoo.com or Ask.Jeeves shows you the following hierarchy on the requested page with higlight/bold/colored the link we just selected. i.e. Code: . Ask.Jeeves . [+] Google.com . [+] Yahoo.com Any time clicking on the menu takes me to some page but on that page I want to show th hierarchy of the menu all the way to which is recently clicked with different color setting. Here is the source for the above: 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>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1"/>
<meta http-equiv="content-language" content="en"/>
<title>Test Harness</title>
<style type="text/css">
ul li ul {display:none;list-style-type: none;}
#myNav li a:hover {
color: blue;
}
#myNav li a:active {
color: #FF0000;
background: #FFFFFF;
}
#myNav { list-style-image: url(page.GIF); }
</style>
<script type="text/javascript">
<!--
function initNav() {
var navObj = document.getElementById('myNav');
var ulCollection = navObj.getElementsByTagName('li');
for (var loop = 0; loop < ulCollection.length; loop++) {
if(ulCollection[loop].getElementsByTagName('ul').length > 0) {
/* we have an LI that contains a UL */
if (ulCollection[loop].getElementsByTagName('span').length > 0) {
/* there is at least one SPAN tag present */
ulCollection[loop].getElementsByTagName('span')[0].innerHTML = "[<a href=\"javascript://\" onclick=\"this.innerHTML=this.innerHTML=='+'?'-':'+';temp=this.parentNode.parentNode.getElementsByTagName('ul')[0].style;temp.display=temp.display=='block'?'none':'block';\">+</a>] ";
}
}
}
}
window.onload = initNav;
//-->
</script>
</head>
<body>
<ul id="myNav">
<li><a href="http://www.askjeeves.com">Ask.Jeeves</a></li>
<li><span></span><a href="http://www.google.com">Google.com</a>
<ul>
<li><a href="http://www.google.co.uk">Google.co.uk</a></li>
<li><a href="http://www.google.co.ie">Google.co.ie</a></li>
<li><span></span><a href="http://www.google.co.nz">Google.co.nz</a>
<ul>
<li>*3*</li>
<li>*4*</li>
</ul>
</li>
</ul>
</li>
<li><span></span><a href="http://www.yahoo.com">Yahoo.com</a>
<ul>
<li><a href="http://www.yahoo.co.uk">Yahoo.co.uk</a></li>
<li><a href="http://www.yahoo.co.nz">Yahoo.co.nz</a></li>
</ul>
</li>
</ul>
</body>
</html>
Any help is really appreciated thanks. Hi there, I need some help with positioning an iFrame via CSS so that it stays permanently in one place (anchored). It is for the Like Box social plugin by Facebook: developers.facebook.com/docs/reference/plugins/like-box see the test page link: (URL address blocked) The iFrame position should be permanently fixed on the left side of the site - currently, the iFrame moves around when the browser window is resized - I also need the browser window to show the scroll bar at the bottom if the site and iFrame doesn't fit in the width of the browser. See the code I'm currently using: <iframe scrolling="no" frameborder="0" allowtransparency="false" style="border: medium none; overflow: hidden; height: 482px; background-color: rgb(255, 255, 255); top: 94px; width: 210px; position: fixed; left: 902px; right: 1px;" src="(URL address blocked)=111544920248&width=250&connections=5&stream=true&header=true&height=482"></iframe> Help will be greatly appreciated! Thanks Hi everybody ! I'm having some trouble with a site i'm currently working on at (s328005659.onlinehome.fr/) the problem i'm experiencing is with facebook "like button" in the bar at the bottom, i haven't found a way to make it align with the other bookmark buttons on its left. It'd be great if you could help me with this issue... Thanks in advance, Joe Hey All, I'm currently testing out an idea for using Facebook Comments within a clients site. The space given to input the is very limited so I have implemented an auto scroll using Mootools. Everything seems OK but when you go to the page the scroll bar is not present, so you are unable to scroll down to see the comments towards the bottom and click the page numbers. The only way in which I can make the scroll bar show is if I right click and click Inspect Element both on Firefox and Chrome (it works perfectly!!!). I would appreciate it greatly if someone could have a look and let me know what I am missing and where I have gone wrong. The link to the page is http://www.theblitzparty.com/communityspirit/comments Thanks Hey everyone, I'm trying to create a facebook type toolbar (at the bottom of the page) that people could easily include on their webpages for advertising purposes... I'm just wondering if someone could give me a hand so far my css looks like this: <style type="text/css"> html, body { height:100%; margin-bottom: 25px; } html.use_scroll_wrapper { overflow:hidden; } #bottom_bar { position:fixed; padding-left: 4px; padding-right: 4px; bottom:0; left: 15px; right: 15px; height: 25px; background:url(bar.jpg) repeat-x top left; border-right: solid 1px #b5b5b5; border-left: solid 1px #b5b5b5; border-top: solid 1px #b5b5b5; z-index: 3; } </style> however I see a few problems.... first I don't want them to have to change the css on their page.... I'd much rather them just include and iframe or some php code also... in internet explorer... it seems that the bar remains at the bottom of the page... and doens't stay at the bottom of the window while scrolling... as it does in FF3. thanks for any tips you can provide... my guess is that I will be using css,javascript, and php to perform the tasks I want... I hope this is enough information to provide... thanks so much I am generating a list with PHP that is going to be printed out and hung up for display. I would prefer if the following weren't printed. 1) Top Left - Page Title (I know I can have this disappear by having a blank title, but I would prefer to have one) 2) Top Right - Page URL 3) Bottom Left - Page number (ex: 1 of 2) 4) Bottom Right - Date Is there any way to print the list without these? I wasn't sure if there is some css I can use, or if this is something that the printer prints automatically. Thanks ...center the menus under my sample header banner? Thank you so much in advance! Here is the page: http://www.toplinepublishing.com/thisisasamplepage.html and here is the css file: http://www.toplinepublishing.com/dropdown.css Thanks! Just curious as to what i'm doing wrong here, its the #content block that isn't working. Any help that could be provided would be greatly appreciated. css Code: Original - css Code body { font-family: Verdana, Tahoma, Arial; color: #FFFFFF; font-size: 11px; } .bg { width: 100%; position: absolute; top: 0; left: 0; z-index: 5000; } #pagecontent { width: 800px; height: 600px; position: relative; z-index: 6000; margin: auto; } #content { width: 800px; background-color: #999999; } #latesttut { width: 381px; height: 150px; border: 3px solid #FFFFFF; float: left; padding-left: 5px; padding-right: 5px; } #latestblog { width: 381px; height: 150px; border: 3px solid #FFFFFF; float: right; padding-left: 5px; padding-right: 5px; } #seperator { width: 800px; height: 5px; float: left; } #latestnews { width: 784px; height: 213px; border: 3px solid #FFFFFF; padding-left: 5px; padding-right: 5px; float: left; } #footer { width: 800px; position: absolute; bottom: 0; } .nav { background-image: url('images/blank1pxl.jpg'); } a:link { text-decoration: none; color: #0066CC; font-size: 9px; } a:hover { text-decoration: underline; color: #0066CC; font-size: 9px; } a:visited { text-decoration: none; color: #0066CC; font-size: 9px; } a:active { text-decoration: none; color: #0066CC; font-size: 9px; }
I'm pretty new to website design. I have a lot of programming experience (C++, Java, Python) but very little HTML/CSS experience. I'm learning Django right now and am having trouble with my presentation. I'm hoping someone here can help me. I'm not sure how many here know Django so I'll try and skip over as much of that as I can. I have a somewhat cookie-cutter CSS stylesheet I'm using so I can learn the environment. Below are snippets of my .html files and .css file. base.html Code:
<body>
<div id="header">
<div id="title">
<div id="innertitle">
{% block header %}{% endblock %}
</div>
</div>
</div>
index.html Code:
{% block header %}
<h1>Signal Auctions</h1>
{% endblock %}
main.css Code:
#header {
margin:0 auto;
}
#title {
padding:20px 20px;
margin:0 auto;
background:#333 url('images/titlebg.png') repeat-x scroll 50% 50%;
}
#innertitle {
width:90%;
margin:0 auto;
}
h1 {
font-size:3em;
padding-left:10px;
}
The problem is that I can't seem to get the image images/titlebg.png to display. I don't think it's an issue with pathing - I have other images in the same location that do display and I use the same method to call them. Any thoughts? ok there is this trick that i saw that you can get a div to "act" as an iframe, by that i mean have it with a scroll bar and all but not call the info from a diff page like an iframe, anyone know what im talking about? I'm looking for a way to show / hide a DIV triggered buy mousing over / clicking on a tab. The action will not navigate away from the page, just show / hide the DIV. I found this script: http://www.dynamicdrive.com/dynamicindex1/ddtabmenu.htm But it seems like a lot of JS overhead. Is there a simpler way? Please look at www clean and creative dot com in any browser on a PC or MAC and you'll see the logo.png show up ... BUT once you jump on a pc and view the site in Internet Explorer, the logo just disappears? Its weird because none of the styling is messed up, just a missing logo.png? Can anyone help me out on this? Hey, The comments show different/incorrect for people who use Internet Explorer 7 to visit my website. Firefox, Chrome, Safari, and IE8+ etc all show the comments correctly. My website is: http://www.lilwaynehq.com/2011/05/2...tunes/#comments Here is an example of what it looks like in IE7: I need it to look like this: Does anyone know the problem and how I can fix it? I will also be using an IE7 specific style sheet to make it easier. Thanks. http://invalidheart.org/test/about.html i can't get my black 1px border to show on the left and right side of my menu in IE, i can't put border-left 1px solid, etc. because they are blocks and it adds them in between too and messes it up.. it works in firefox but no ie, any ideas? Good Day, I am trying to figure out why my CSS Rollover images are not showing up in FireFox, but do in IE. Below are links to my pages and CSS, and if anyone can give me some suggestions, ideas I would be very grateful!!! Brook http://www.karmaimports.net/centercss.htm http://www.karmaimports.net/cssrollover.css what is should look like: http://www.karmaimports.net/center.htm |
|||||||