I want to style the buttons on my own Facebook app like the normal Facebook UI,
e.g. tabs should look like that:
The apps is embed to an iframe so I (think I) can't use the CSS classes from FB?!
Sure you can...look into the source code from facebook for the source of their stylesheets. Or use FireBug in Firefox or Opera Dragonfly or any other web development plugin to get the CSS properties.
BUT don't recreate Facebook, I don't think that they would appreciate it!
What you are looking for is this: http://developers.facebook.com/docs/reference/fbml/tab-item/
It's called fb:tabs - Renders a group of standard Facebook navigation tabs. Must contain at least one fb:tab-item.
It's the part of FBML - Facebook Markup Language which they are deprecating and neither fb recommends you to use nor i recommend, its better to do it using css, but you can use it for as long as it works :)
Here you go, CSS for facebook style tabs:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<title>Facebook Style Tabs</title>
<style>
body {
background:#fff;
font-family:"Lucida Grande",Tahoma,Verdana,Arial,sans-serif;
font-size:11px;
margin:0px;
padding:0px;
text-align:left;
}
a {
color:#3b5998;
text-decoration:none;
}
a:hover {
text-decoration:underline;
}
.clearfix:after {
content:".";
display:block;
clear:both;
visibility:hidden;
line-height:0;
height:0;
}
html[xmlns] .clearfix {
display:block;
}
* html .clearfix {
height: 1%;
}
/**********************************************************NAVIGATION TABS************************************************************/
.fb-tabs {
border-bottom:1px solid #898989;
padding:3px 0px;
/* top and bottom,left and right */
}
.fb-tabs .left_tabs {
float:left;
padding-left:10px;
}
.fb-tabs .right_tabs {
float:right;
padding-right:10px;
}
.fb-tabitems {
display:inline;
list-style:none;
margin:0;
padding:0;
text-align: center;
}
.fb-tabitems li {
display:inline;
padding:2px 0px 3px;
/*top,left and right,bottom*/
background:#f1f1f1 url(http://www.facebook.com/images/components/toggle_tab_gloss.gif) top left repeat-x;
}
.fb-tabitems li a {
border:1px solid #898989;
color:#333;
font-weight:bold;
padding:2px 8px 3px 9px;
}
.fb-tabitems li a small {
font-size:11px;
font-weight:normal;
}
.fb-tabitems li a:focus {
outline:0px;
}
.fb-tabitems li.first a /*only for the first anchor of the list*/ {
border:1px solid #898989;
}
.fb-tabitems li a.selected {
background:#6d84b4;
border:1px solid #3b5998;
border-left:1px solid #5973a9;
border-right:1px solid #5973a9;
color:#fff;
margin-left:-1px;
}
.fb-tabitems li.last a.selected {
margin-left:-1px;
border-left:1px solid #5973a9;
border-right:1px solid #36538f;
}
.fb-tabitems li.first.last a.selected {
border:1px solid #36538f;
}
.fb-tabitems li a.selected:hover {
text-decoration: none;
}
</style>
</head>
<body>
<div class="fb-tabs clearfix">
<center>
<div class="left_tabs">
<ul class="fb-tabitems clearfix">
<li>NavbarLink1</li>
<li>NavbarLink2</li>
<li>NavbarLink3</li>
</ul>
</div>
<div class="right_tabs">
<ul class="fb-tabitems clearfix">
<li>NavbarLink1Right</li>
<li>NavbarLink2Right</li>
</ul>
</div>
</center>
</div>
</body>
</html>
Source: http://forum.developers.facebook.net/viewtopic.php?id=86504
Related
Some of my problem is I'm using the code from this Lynda.com video - the Fireworks stuff is just as imported, the rest of the CSS I used his stuff, right down to the colours. Yet I've messed up somewhere and I don't know where.
Code is below. My sprites and hovers are showing up fine, but they're displaying as a block of buttons rather than a line. I've tried float:left, display:block in various places, even re-exported my sprites as horizontal rather than standard to no avail.
<code>
#charset "UTF-8";
body {
margin:0;
padding:0;
background:#000;
}
header nav {
width:100%;
background:#333;
text-align:center;
position:relative;
font:Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, sans-serif;
height:98px;
border-bottom:12px solid black;
}
header nav ul {
padding:0;
margin:0;
list-style:none;
}
header nav ul li {
position:relative;
width:110px;
height;90px
float:left;
border-bottom:12px solid #000;
border-left:1px solid #333
border-right:1px solid #666;
}
header nav ul li:hover {
border-bottom-color:#FFC926;
}
header nav ul li a {
width:110%;
color:#FFF;
text-decoration:none;
display:inline;
float:left;
padding-top:75px
}
.navsymbol li{ background:url("https://dl.dropboxusercontent.com/u/50029017/untitled%20folder/navsymbol.png") no-repeat;}
li.nav_Home{ width:342px; height:70px; background-position:-10px -10px; }
li.nav_Home:hover{ width:342px; height:70px; background-position:-362px -10px; }
li.nav_Contact{ width:342px; height:70px; background-position:-714px -10px; }
li.nav_Contact:hover{ width:342px; height:70px; background-position:-1066px -10px; }
li.nav_Design{ width:342px; height:70px; background-position:-1418px -10px; }
li.nav_Design:hover{ width:342px; height:70px; background-position:-1770px -10px; }
</code>
And html:
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="nav.css">
</head>
<body>
<header>
<nav>
<ul class="navsymbol">
<li class="nav_Home"></li>
<li class="nav_Design"></li>
<li class="nav_Contact"></li>
</ul>
</nav>
</header>
</body>
</html>
It looks like you just have a typo:
header nav ul li {
position:relative;
width:110px;
height;90px /* should be- height:90px;*/
float:left;
border-bottom:12px solid #000;
border-left:1px solid #333
border-right:1px solid #666;
}
Example Apparently the sprite has gone 404, so the example isn't working now...
change
header nav ul li {
position:relative;
width:110px;
height;90px /* should be- height:90px;*/
float:left;
border-bottom:12px solid #000;
border-left:1px solid #333
border-right:1px solid #666;
}
to
header nav ul li {
position:relative;
width:110px;
height:90px;
float:left;
border-bottom:12px solid #000;
border-left:1px solid #333
border-right:1px solid #666;
}
and insert to css file
.navsymbol:after{
clear:both;
}
.navsymbol:after,.navsymbol:before{
display:table;
content:"";
}
Use http on the place of https in background url
DEMO HERE
.navsymbol li{ background:url("http://dl.dropboxusercontent.com/u/50029017/untitled%20folder/navsymbol.png") no-repeat;}
I am trying simply to center text horizontally in a form as follows:
<!DOCTYPE html>
<html>
<link rel="stylesheet" type="text/css" href="style.css">
<div id="contact-form">
<head-black>STEWARD'S WEEKLY REPORT</head-black><br>
</div>
</html>
contents of style.css:
#contact-form {
background-color:#F2F7F9;
width:925px;
padding:10px;
margin: 10px auto;
border: 6px solid #8FB5C1;
-moz-border-radius:25px;
-webkit-border-radius:25px;
border-radius:15px;
position:relative;
}
#contact-form head-black {
display:inline-block;
font-size:14px;
text-decoration:underline;
text-align:center;
}
The text stays left aligned.
<head-black> is non-standard HTML syntax. Use of custom tags should be avoided. Instead, use:
<h1 class="head-black">STEWARD'S WEEKLY REPORT</h1>
and CSS:
#contact-form {
background-color:#F2F7F9;
width:925px;
padding:10px;
margin: 10px auto;
border: 6px solid #8FB5C1;
-moz-border-radius:25px;
-webkit-border-radius:25px;
border-radius:15px;
position:relative;
text-align:center; /* put this here */
}
#contact-form .head-black {
display:inline-block;
font-size:14px;
text-decoration:underline;
}
jsfiddle
Edit
If you'd like to center only the <h1>, simply set it to display: block, and set the text-align: center in the h1 tag. Don't forget to remove the text-align: center from the #content-form CSS block. Do the following to the .head-black CSS:
#contact-form .head-black {
display:block;
font-size:14px;
text-decoration:underline;
text-align: center;
}
The jsfiddle above shows the new changes.
I want to create a contact me section on a website i'm making but the problem is my whole website has text-align:center and i am using a definition list for the contact information. is there a way i can still use the wrapper for my page but align the text to the left without it going out of the white border?
CSS:
#charset "utf-8";
html {
text-align: center
}
#container {
margin-left:auto;
margin-right:auto;
margin-top:50 auto;
margin-bottom:50 auto;
width:1000px;
background-color:#666666;
}
#body1 {
background-color:#666666;
width:1000px;
height:405px;;
border:3px solid #FFFFFF;
margin-top:50px auto;
}
#body2 {
background-color:#666666;
width:1000px;
height:800px;;
border:3px solid #FFFFFF;
margin-top:50px auto;
}
#body3{
background-color:#666666;
width:1000px;
height:500px;;
border:3px solid #FFFFFF;
margin-top:50px auto;
}
#body4{
background-color:#666666;
width:1000px;
height:500px;;
border:3px solid #FFFFFF;
margin-top:50px auto;
}
#body5{
background-color:#666666;
width:1000px;
height:500px;;
border:3px solid #FFFFFF;
margin-top:50px auto;
}
.navbar {
margin:0px;
background-color:#999;
text-align:center;
list-style:none;
border-bottom:none;
padding-left:0px;
}
ul.navbar li {
width:20%;
display:inline-block;
}
ul.navbar a {
color:white;
font-size:20px;
display:block;
width:100%;
margin:0px;
padding:10px 0px;
text-decoration:none;
}
ul.navbar a:hover {
color:#000000;
background-color:#CCC;
}
body {
background-color:#333333;
}
#portrait {
position:relative;
top:20px;
right:420px;
}
#headerhome {
position:relative;
bottom:130px;
left:50px;
font-size:30px;
text-decoration:underline;
font-family:arial;
color:#CCCCCC
}
#goal {
margin-left:40px;
text-align:left;
text-indent:40px;
position:relative;
bottom:110px
}
.tab {
margin-left:40px;
}
#contact {
position:relative;
right:390px;
text-align:left
}
HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="stylesheet" type="text/css" href="style.css" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Joe Scotto | Contact</title>
</head>
<body>
<div id="container">
<div id="body3">
<img src="banner.png" width="1000" height="100" />
<!--Navbar Start-->
<center>
<ul class="navbar">
<li>Home</li><li>About</li><li>Contact</li><li>Services</li><li>Biography</li>
</ul>
</center>
<!--Navbar End-->
<div id="contact">
<dl>
<dt><h3>Phone Number</h3></dt>
<dd>XXX-XXX-XXXX</dd>
<dt><h3>Email Address</h3></dt>
<dd>XXXXXX#gmail.com</dd>
</dl>
</div>
</div>
</div>
</body>
</html>
If i understand you correctly then your problem can be fixed using two things:
in #contact css add "!important" after the "text-align:left;" on the same line
add margin if it overlaps.
If this doesnt answer your question please send me a link so i can see what is happening.
hope i helped.
#contact {
text-align:left;
} Might work. position:relative; Try removing. Because CSS goes from top to bottom and over-writes the properties with new values.. Check this
If you want to keep the "contact block" in the body3 (which is centered), why you added the code - "right: 390px;" to the #contact, I do not see the reason. So if you delete it everything will be okay.
Have you tried this?
dl {
text-align: left;
}
Edit: I added the above to your css and the list was aligned to the left.
remove the text-align:center from css in html tag and add text-align attribute in every div tag so you will get align as you want
The following code shows a pop up menu.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>position ul</title>
<style type="text/css">
html, body, div, ul {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
#main {
position:relative;
width:950px;
height:30px;
margin:75px auto 0;/*75px beneath top of page, auto distance from page's right/left side*/
border:2px solid #8c8b4b;
}
#main li {
width:92px;
height:30px;
float:left;
list-style-type:none;
border:2px solid red;
}
#main li a { text-decoration:none; }
#main li ul li {
width:400px;
border:2px solid #8c8b4b;
height:30px;
}
li.menu1 { background-image:url('images/men1.png'); }
li.menu2 { background-image:url('images/men1.png'); }
.menu2 li a {
color:white;
font-weight:bold;
}
li.menu2 div {
position:absolute;
margin-left:-999em;
padding-top:200px;
}
li.menu2 ul {
top:400px;
list-style:none;
margin:0;
font-size:110%;
}
li.menu2:hover div { margin:0; }
li.menu2:hover ul li { clear:left; }
ul li ul.rounded-corner {
border:2px solid red;
height: 200px;
width:776px;
background-image:url(../banner/bg_to_sitepoint.gif);
background-repeat:no-repeat;
-webkit-border-radius:50px;
-moz-border-radius:50px;
border-radius:50px;
}
</style>
</head>
<body>
<ul id="main">
<li class="menu1">menu item1</li>
<li class="menu2">menu item2
<div>
<ul class="rounded-corner">
<li>submenu2 item1</li>
<li>submenu2 item2</li>
<li>submenu2 item3</li>
</ul>
</div>
</li>
</ul>
</body>
</html>
The submenu is consisted of a ul entity reesides inside a div.
I would like to change that ul's position within its' ancestor: a div.
I add: "top:100px;" to "li.menu2 ul" selector and see no impact whatsoever. "left" value is no good as well.
Can anyone explain me please why i cannot make that ul repositioned inside its' div?
How can i make it move to other place within the div?
Attached is a screen shot of the present page which i'd like to change.
Thanks a lot !
you can add padding-top: 100px to your CSS
li.menu2 ul {
top:400px;
list-style:none;
margin:0;
font-size:110%;
padding-top:100px;
}
take a look here if that's what you meant (and what I understood)
http://jsfiddle.net/9NqDd/
give this div
position:relative;
if adding
padding-top:100px;
won't work try
margin-top:100px;
instead.
Having a headache with IE. I have an image (24x24) which I'd like to display inline beside my username at the top navigation bar after logging in. It shows nicely in firefox, chrome. problem with IE version 7. The img breaks to another line, and other sibling items in the float back left.
CSS below:
#nav {
background:url("../images/nav-bg.jpg") repeat-x scroll 0 0 #FFFFFF;
height:35px;
line-height:35px;
}
#nav .menuitem{
padding: 0 7px;
cursor: pointer;
font-size: 11px;
float:left;
}
#nav .menuitem, #nav .menuitem a {
color:#CCCCCC;
}
#nav .menuitem:hover {
background-color:#333333;
}
#nav .menuitem img {
-moz-border-radius:3px;
-webkit-border-radius:3px;
border:1px solid #111;
float: right;
margin-top: 4px;
margin-left: 7px;
height:24px;
width:24px;
}
#nav .right {
float:right;
}
I have tried many variations but can't seem to fix the problem. I have also tried variations of the css below, but the image still doesn't show nicely inline.
#nav .menuitem img {
-moz-border-radius:3px;
-webkit-border-radius:3px;
border:1px solid #111;
float: right;
margin-top: 4px;
margin-left: 7px;
height:24px;
width:24px;
display:inline;
position:relative;
top: 0px;
line-height: 35px;
}
The HTML code as follows
<span class="menuitem right">Welcome, <a id="profile" href="http://localhost/usercp">user<img src="avatar24x24.jpg"></a></span>
I altered the css and html source. I only have IE6 to work with, but it looks consistent in Chrome and IE6. Try this:
http://work.arounds.org/sandbox/38/run
<!doctype html>
<html>
<head>
<title></title>
<style type="text/css" media="screen">
* { margin:0; padding:0; }
#nav {
background:url("../images/nav-bg.jpg") repeat-x scroll 0 0 #FFFFFF;
height:35px;
line-height:35px;
}
#nav .menuitem{
padding: 0 7px;
cursor: pointer;
font-size: 11px;
float:left;
}
#nav .menuitem, #nav .menuitem a {
color:#CCCCCC;
}
#nav .menuitem:hover {
background-color:#333333;
}
#nav .menuitem img {
-moz-border-radius:3px;
-webkit-border-radius:3px;
border:1px solid #111;
display:inline-block;
margin-top: 4px;
margin-left: 7px;
height:24px;
width:24px;
}
#nav a { display:inline-block; vertical-align:top; }
.lol { display:inline-block; }
#nav .right {
float:right;
}
</style>
<!--[if lt IE 8]>
<style>
#nav .menuitem a { display:inline; zoom:1; }
#nav .menuitem img { display:inline; zoom:1; border:1px solid red; vertical-align:top; }
</style>
<![endif]-->
</head>
<body>
<div id="nav">
<div class="right menuitem">
<span class="lol">Welcome,</span> <a id="profile" href="http://localhost/usercp">user</a> <a id="profile-img" href="http://localhost/usercp"><img src="http://cdn1.sbnation.com/profile_images/273745/battle_scars_fedor_emelianenko_by_wildestdreamz_small.jpg"></a>
</div>
</div>
</body>
</html>
This snippet suffered from the float:right width calculation bug and I had to use inline-block workaround to get it to work right.
Use a background image instead, like this:
<a style="background-image: url(avatar24x24.jpg);
background-repeat: no-repeat;
background-position: right center; padding-right: 30px;"
id="profile" href="http://localhost/usercp">user</a>
Should position it pretty well, tested it in Opera, IE8 compatability mode and Firefox. To display the entire image, tune the height of the elements around it.
You can use background-position to move the image around inside the surrounding element, there's more information on this at w3schools.com.
Alternatively, you can use margin to get more spacing (margin will create spacing that includes the background image).