|
CSS - Css Iframe Positioning (facebook Like Box)
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 Similar TutorialsHi 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 please close thread I have problem with footer DIV in this layout (the order of DIV's in code after <body> should be - content, left, right, right2, header, footer - positioned centraly with fixed values): It needs to be sticked to fit after content of 4 column DIV's like it is in example. http://www.split.info/dev/less-content/ http://www.split.info/dev/more-content/ Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Title of website</title>
<style type="text/css">
<!--
body {margin: 0px 0px 0px 0px; background-image:url(images/bg.jpg); background-position:center; background-repeat:repeat-y;}
#wrapper {width: 1000px; margin: 0 auto; text-align: left; position: relative;}
#contentPane {width: 468px; float: left; position: absolute; margin-left: 3px; padding: 0px 0px 0px 0px; background-color:#0099FF; left: 126px; top: 150px;}
#leftPane {width: 125px; float: left; left: 0px; position: absolute; background-color: #99FFFF; top: 150px;}
#rightPane {width: 173px; float: right; right: 226px; background-color:#999966; position: absolute; top: 150px;}
#rightPane2 {width: 220px; float: right; right: 0px; background-color:#99FF00; top: 150px; position: absolute;}
#headwide {background-image: url(images/head_bg.jpg); background-position: center; background-repeat: no-repeat; width: 100%; height: 142px; position: absolute; top: 0px;}
#header {margin: 0pt auto; width: 1000px; background-color:#CC6600; height: 142px; }
#footer {position: absolute; width: 100%; top: auto; bottom: 0px; background-color: #CCFFCC; height: 50px;}
-->
</style>
</head>
<body>
<div id="wrapper">
<div id="contentPane">Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
</div>
<div id="leftPane">Left Pane area<br>
Left Pane area<br>
Left Pane area<br>
Left Pane area<br>
Left Pane area<br>
Left Pane area<br>
Left Pane area<br>
Left Pane area<br>
Left Pane area<br>
</div>
<div id="rightPane">Right Pane area<br>
Right Pane area<br>
Right Pane area<br>
Right Pane area<br>
Right Pane area<br>
Right Pane area<br>
Right Pane area<br>
Right Pane area<br>
Right Pane area<br>
</div>
<div id="rightPane2">Right Pane 2 area<br>
Right Pane 2 area<br>
Right Pane 2 area<br>
Right Pane 2 area<br>
Right Pane 2 area<br>
Right Pane 2 area<br>
Right Pane 2 area<br>
Right Pane 2 area<br>
</div>
</div>
<div id="headwide">
<div id="header">Header area</div>
</div>
<div id="footer"><strong>Content from above 4 column div's need to push footer DIV below (after them)! </strong>Footer area that is on bottom of div with biggest height (content, left, right or right 2 pane)... foooter follow right after end of content from those div's (regular behaviour of next table row below any of those 4 columns). Current state like it is in this document happens that if you add more data f.i. in content area (outside one screen), it will go trough footer... So footer can be either moved in code after rightpane2 div after end of wrapper. Pls help. Thx!</div>
</body>
</html>
Content from above 4 column div's need to push footer DIV below (after them)! Foooter need to follow right after end of content from those div's (regular behaviour of next table row below any of those 4 columns). Current issue like it is in this layout happens that if you add more data f.i. in content area (outside one screen), it will go trough footer... So in your resolution footer can be also moved in code after rightpane2 DIV, after end of wrapper. Pls help. Thx! Echo 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 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 Hello friends, Need some help with CSS layer positioning, which for the last couple of days has been the cause of much frustration. I am updating my site, and am converting some of my code to be more semantic. The test page, which looks 'right' is here. The semantic version, which now places the footer and sidebar within their own divs is here (I have removed the javascript and other text to keep things as simple as possible): The problems I am experiencing: The side bar, shaded blue for clarity is now 'outside the box', see the first link to see how it should be; There is a gap between the bottom of the extra div and the top of the footer div; The positioning of the sidebar is affecting the header/nav - try mousing over 'contact'; In short, I am trying to convert my existing layout to this, but can't seem to get there. Here is what I am striving for: Code: |------------------------------------ | Navigation | |------------------------------------ |Breadcrumbs <p> | ------------------------------------- | | | | Content | Sidebar | | | | ------------------------------------- | Optional Extra | ------------------------------------- | Footer | ------------------------------------- Any help much appreciated! Hello, I have a flash movie that keeps moving out of place when the browser size is altered. How can I make it so the movie stays in one spot no matter what the browser size? Hello, I am a complete newb to CSS and I am trying to position on image on my page, what is the correct syntax (the html, and CSS) for me to be able to place an image where ever i want on the screen? Thanks so much for the help Hi all, hoping someone can help me with what feels like it should be a simple problem, but one I can't work out. Apologies if the problem seems too obvious to you, I'm a total noob at this. I basically have two div objects within a space beneath the header. These are a video player, which is fine, and a scrolling menu. Presently the menu (navigation.php) is off the bottom-right, beneath the video, and I simply want to force it to the TOP right, parallel with the player. My code is below, and I'm looking for an elegant css solution if possible. Any more info needed, just ask. I took a grab, but the forum won't let me post links. Cheers in advance. </style> </head> <body bgcolor="#B94F1F"> <div id="container"> <div id="header"><?php include("header.php"); ?></div> <div id="wrapper"> <p id='preview'>The player will show in this paragraph</p> Words here? <p>Paragraph <p>Paragraph <script type='text/javascript' src='swfobject.js'></script> <script type='text/javascript'> var s1 = new SWFObject('player.swf','player','640','380','9'); s1.addParam('allowfullscreen','true'); s1.addParam('allowscriptaccess','always'); s1.addParam('flashvars','file=xxx'); s1.write('preview'); </script> <div id="navigation" style="width:300px;height:430px;overflow:auto;border-width:1px;border-color:000000;border-style:solid;"> <font size=2> <div id="header"><?php include("navigation.php"); ?></div> </font></div> Allright first off this is the first time I have written any web based code in over a year, so its *NOT* cross browser, compliant in any way shape or form, it just works to make the design come together in firefox... what I am looking for is the menu bar to have the carrot (the downward pointing triangle) centered ON TOP OF whatever page you are on CURRENTLY) page is he http://www.gr-p.com/test2.html what should I be aiming for as far as CSS, or should I start from scratch.. I want suggestions (not necisarily for you to fix my code.) I need to learn again and thats the only way I am going to Hi bit of a newbie but confused by following code; The images all display ok and the rounded gif work ok but I get a gap between the divs (highlighted below). Is it margins/paddings? Pulling hair out! Thanks, Bill. .child { width: 200px; background-color:green; background-image: url(unt.bmp) ; } .parent {margin: 0; padding: 0} .bl1 {background: url(_round_bl.gif) bottom left no-repeat ;background-color: blue;width: 200px } .br1 {background: url(_round_br.gif) bottom right no-repeat;} .tl1 {background: url(_round_tl.gif) top left no-repeat;} .tr1 {background: url(_round_tr.gif) top right no-repeat;} </style> </head> <body> <div class="parent"> <div class="child"> <div class="tl1"> <div class="tr1"> <h2>Hello </h2> </div> </div> </div> /* When displayed in browser the above is separated from the following by a gap of around 20 odd px */ <div class="bl1"> <div class="br1"> <h2>Hello</h2> </div> </div> </div> </body> </html> Hi all, Im doing a bit of work, for which the URL can be found at: (URL address blocked: See forum rules)~gj311/webeng and the css is at (URL address blocked: See forum rules)~gj311/webeng/webeng.css Ignore the lack of content for now if you would (URL address blocked: See forum rules)=newthread&f=116# Smilie I am trying to make the "top" div appear at the top of the page with no gap, currently this works in IE but in firefox 2 and opera there is a gap showing the lighter bluey/grey background colour, is this because I am using width 100%? It is probably a very newbish question but any help would be appreciated. Cheers Okay I need help with this CSS, I am very new with CSS I am having trouble positioning this Navigation Bar to the right, it is stuck to the left, and I need it to be so it will always stay on top of everything. My HTML Page The Code. Code: <head><noscript></noscript><!-- --><script type="text/javascript" src="http://www.freewebs.com/p.js"></script><script SRC="http://mytubeforum.webs.com/jquery-1.3.2.min.js"></SCRIPT>
<script type="text/javascript">
function nav(){
$('div#nav ul li').mouseover(function() {
$(this).find('ul:first').show();
});
$('div#nav ul li').mouseleave(function() {
$('div#nav ul li ul').hide();
});
$('div#nav ul li ul').mouseleave(function() {
$('div#nav ul li ul').hide();;
});
};
$(document).ready(function() {
nav();
});
</script>
<style type="text/css">
/*NAVBAR CODE*/
#nav{
width: 460px;
padding:460px;
float: right;
align: right;
position: absolute;
background:url(http://i34.tinypic.com/5bzbmd.png);
background-repeat: no-repeat;
height:38px;
line-height:32px;
padding:0 10px;
}
#nav ul,
#nav ul li
{
margin:0;
padding:0;
list-style:none;
}
#nav ul li{
float:left;
display:block;
}
#nav ul li a:link,
#nav ul li a:visited{
color:#000000;
font-size:14px;
font-weight:bold;
text-decoration:none;
padding:0 30px 0 10px;;
margin-top:3.5px;
display:block;
}
#nav ul li a:hover{
color:#3b414c
}
#nav ul li ul li{
float:none;
display:block;
}
#nav ul li ul li a:link,
#nav ul li ul li a:visited{
color:#444;
font-size:12px;
font-weight:bold;
text-decoration:none;
padding:0 20px;
clear:both;
border-bottom:solid 1px #DEDEDE;
-moz-border-radius-bottomleft: 10px;
-webkit-border-bottom-left-radius: 10px;
-moz-border-radius-bottomright: 10px;
-webkit-border-bottom-right-radius: 10px;
}
#nav ul li ul li a:hover{
color:#3b414c;
background:#EBEFF7;
}
.submenu {
position: absolute;
width: 140px;
background: #efefef;
padding:20px;
border:solid 1px #b2b2b2;
border-top:none;
z-index: 1000;
display:none;
line-height:26px;
padding: 15px;
-moz-border-radius-bottomleft: 10px;
-webkit-border-bottom-left-radius: 10px;
-moz-border-radius-bottomright: 10px;
-webkit-border-bottom-right-radius: 10px;
}
</style>
</head>
<body>
<div id="nav">
<ul>
<li><a href="#">MyTube</a>
<ul class="submenu">
<li><a href="/forum.htm">Home</a></li>
<li><a href="/portal.htm">Portal</a></li>
<li><a href="/arcade-f12/">Arcade</a></li>
<li><a href="/calendar.htm">Calendar</a></li>
<li><a href="/search.forum">Search</a></li>
<li><a href="/faq.htm">FAQ</a></li>
<li><a href="/memberlist.forum">Members</a></li>
<li><a href="/groupcp.forum">Groups</a></li>
<li><a href="/MyTube-Chat-h2.htm">Chatbox</a></li>
</ul>
</li>
<li><a href="#">Messages</a>
<ul class="submenu">
<li><a href="/msg.forum?folder=inbox">Inbox</a></li>
<li><a href="/msg.forum?folder=sentbox">Sentbox</a></li>
<li><a href="/msg.forum?folder=outbox">Outbox</a></li>
<li><a href="/msg.forum?folder=savebox">Saved Mail</a></li>
</ul>
</li>
<li><a href="#">Profile</a>
<ul class="submenu">
<li><a href="http://mytube.7forum.net//profile.forum?mode=editprofile">Information</a></li>
<li><a href="http://mytube.7forum.net//profile.forum?mode=editprofile&page_profil=preferences">Preferences</a></li>
<li><a href="http://mytube.7forum.net//profile.forum?mode=editprofile&page_profil=signature">Signature</a></li>
<li><a href="http://mytube.7forum.net//profile.forum?mode=editprofile&page_profil=avatars">Avatar</a></li>
<li><a href="http://mytube.7forum.net//profile.forum?mode=editprofile&page_profil=friendsfoes">Friends & Foes</a></li>
</ul>
</li>
<li><a href="#">Log In | Out</a>
<ul class="submenu">
Under Construction<hr>
<li><a href="/profile.forum?mode=register">Register</a></li>
<li><a href="/login.forum?connexion">Login</a></li>
</ul>
</li>
</div>
Please Help Me, Thank you. Hi, I can't figure out why my top nav won't stay in place in ie. Here's what I have for my nav. Works everywhere but ie, its position (just the height) it's off. Thanks much for any help. Simone div.navigation { position: relative; left:160px; top: 140px; line-height:0; border : 0 solid #000000; overflow : auto; width : 50%; font-size : 20px; font-weight: bold; margin: 0px 0 0 0px; } div.left { width : 45%; float : left; } div.right { width : 30%; float : right; } a.navigation { border-bottom : 5px solid #99c37f; text-decoration : none; color : #4c2110; font-size: 20px; } a.navigation:hover { border-bottom : 5px solid #99c37f; text-decoration : none; color : #4c2110; font-size: 20px; } I am getting slightly different displays with using div sections on my layout. I am using relative positioning mostly with a webpage with a bar across the top, bar down left hand side . In the content area I have another 3 sections. In IE it looks fine but in FF there is spaces left at very top and between another section in main area. Basically if i use absolute positioning it works for both but not relative positioning of sections in FF. Is there an issue with relative positioning in ff? I can give my code but that is about 100 lines. I'm trying to build an example layout that I plan to use in a website. My goal is simple, I want a content section to grow as the the content gets bigger and place a footer after that division that is as wide as the page. Here's the code I'm currently using: (the problem I'm having right now is that the footer section is rendering at the top.. How can I get this to be placed at the bottom of the page, after the content section?) Help me please <html> <head> <title>TESTING 1 2 3</title> <style type="text/css"> <!-- body { margin: 0px; padding: 0px; } #mrbig { background: #f0f; width: 800px; } #header { position: absolute; background: #0f0; width: 800px; height: 100px; } #leftcol { position: absolute; background: #f00; top: 100px; width: 150px; height: 500px; } #content { background: #fff; position: absolute; float: left; width: 650px; top: 100px; left: 175px; height: 500px; } #footer { position: relative; left:111px; background: #00f; width: 800px; height: 100px; } --> </style> </head> <body> <div id="mrbig"> <div id="header">Header Section</div> <div id="leftcol">Left Section</div> <div id="content">Content SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent Section Content SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent Section</div> </div> <div id="footer">Footer Section</div> </body> </html> Due to popular demand, I have decided to bite the bullet and make the switch from tables to css and divs in layout designs. Obviously, since I am unfamiliar with this practice, I have run into an issue. I am trying to add a link to the right side of my title div, which has a bottom border of 1px...I am not sure how to go about doing this without going down a line or the link not positioning itself to the right... Here is what I have so far: HTML Code: Code: <div class="title" align="left"> <div style="display: inline;"><b>News Updates:</b></div> <!-- The below link needs to align to the right side --> <div style="display: inline;" class="font" align="right"><a href="javascript:void(0);">Add News</a></div> </div> CSS Code: Code: .font { font-size: 0.7em; }
.title {
font-size: 1.6em;
color: #0033FF;
border-bottom: 1px solid #0033FF;
}
I have no idea how to go about this and it seems like it would be so simple. Any help is appreciated. I have inputted some css popup text on roll over for some social bookmarking buttons on a new blog skin. (pkevan.blogspot) The problem I am having is placing where they pop-up. I can't use an absolute position because who knows where a post will be along with multiple posts. Right now there floating underneath the icons at the left hand side. I want the text to appear to the right of the icons inline with them. I'm having trouble positioning them there though. Any help, or properties that might be useful will be greatly appreciated. Thanks in advance. Heres what I have applied so far. div#socialbookmarks a span {display: none; } div#socialbookmarks a:hover span {display: block; float: left; position: inline; top: 0px; left: 0px; width: 20px; padding: 0px; margin: 0px; z-index: 0; color: #4AAAFA; background: transparent; } Hello all! Well I'm just designing my personal website, and I'm encountering a problem with positioning div elements. (This is going to be a very basic question that I couldn't find anywhere.) To understand the exact problem I am having, here are the links: lightblu.com/4/1.html lightblu.com/4/2.html Notice in the first one, it is perfectly fine. In the second, when I add more text, it just overlaps everything, including the footer and the bg color. It only works fine when I add more text on those right boxes. So question is, what should I do so that when I add text either on the left side OR on the right side, the background expands accordingly? Thanks for all your help! |
|||||||