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;}
Related
Im trying for some while already to properly align my page. In jsfiddle it seems to be looking nice, but in my widescreen monitor the section tag floats all the way to the left and makes a big mess!
I think I'm doing something wrong with the floating... But still: this is an exercise from my course and it says that i NEED to use the sections as display:block and align them with floating.
I've been stuck in this for a good while and I my course tutors dont answer!
Hope somebody can show me where I'm being mistaken.
HTML:
<body>
<header class="menu">
<img class="imglogo" src="img/TotalLogo.png">
</header>
<section class="apres">
<p>Paraíso dos Nerds</p>
<img src="img/Personagens.png">
<p>Jogos, Consoles, Acessórios e Figuras de Ação</p>
</section>
<nav class="menu">
<ul>
<li>Total Control</li>
<li>Consoles</li>
<li>Jogos</li>
<li>Quiz</li>
<li>Compras</li>
</ul>
</nav>
<footer class="ender">
<p>Av. Irmãos Mário, 234<br>
Tel: (21) 1234-5678<br>
contato#tecontrol.com.br
</p>
</footer>
</body>
CSS:
root {
display: block;
}
body {
background-color: #CCCCCC;
color: #4466AA;
font-size: 16px;
font-family: Verdana, Liberation;
}
a{
text-decoration: none;
display:block;
}
a:visited{
color:#0000FF;
}
a:link{
color:#0000EE;
}
.menu{
color:#0000EE;
list-style-image:url(img/cogumelo.png);
width:170px;
line-height:50px;
}
.ender{
text-align:center;
font-size:16px;
padding-top:15px;
border-top:3px solid;
}
.apres{
text-align:center;
font-size:18px;
font-weight:bold;
}
.imgLogo{
border-bottom:2px solid;
}
/* Header, nav, section e footer */
header{
display:block;
margin-bottom:15px;
}
nav{
display:block;
width:240px;
float:left;
}
section{
display:block;
width:540px;
float:right;
}
footer{
clear:both;
}
nav li:hover{
color:#FFF;
background: #E2E2E2;
border-radius:5px;
-moz-border-radius:5px;
padding-right:3px;
padding-left:3px;
}
The link to jsfiddle is: http://jsfiddle.net/67jrj/1/
Thanks!
Set the width of your page to what you like, 960px is a good standard. Create a div for each element needed to float in an area then clear the float with the next area. Also, rearrange the order of your elements in your html so they appear as you need them to. I'm including my example of your page, at least what I think your asking. :)
HTML:
<div class="menu">
<ul>
<li>Total Control</li>
<li>Consoles</li>
<li>Jogos</li>
<li>Quiz</li>
<li>Compras</li>
</ul>
</div>
<div class="apres">
<p>Paraíso dos Nerds</p>
<img src="img/Personagens.png">
<p>Jogos, Consoles, Acessórios e Figuras de Ação</p>
</div>
<div class="ender">
<p>Av. Irmãos Mário, 234<br>
Tel: (21) 1234-5678<br>
contato#tecontrol.com.br
</p>
</div>
</body>
</html>
CSS:
body {
background-color: #CCCCCC;
color: #4466AA;
font-size: 16px;
font-family: Verdana, Liberation;
margin: 0 auto;
width:960px;
}
a{
text-decoration: none;
display:block;
}
a:visited{
color:#0000FF;
}
a:link{
color:#0000EE;
}
.menu{
color:#0000EE;
list-style-image:url(img/cogumelo.png);
width:170px;
float:left;
line-height:50px;
}
.ender{
text-align:center;
font-size:16px;
padding-top:15px;
border-top:3px solid;
clear:both;
}
.apres{
text-align:center;
font-size:18px;
font-weight:bold;
width: 350px;
margin: auto;
}
.imgLogo{
border-bottom:2px solid;
}
/* Header, nav, e footer */
.header{
display:block;
margin-bottom:15px;
width:960px;
}
.nav{
display:block;
width:240px;
float:left;
}
nav li:hover{
color:#FFF;
background: #E2E2E2;
border-radius:5px;
-moz-border-radius:5px;
padding-right:3px;
padding-left:3px;
}
Hope this helps!
Set standard width for header, section(s) and footer, or better, wrap them all in a div, assign a class to it and set margin to that class. There's nothing called "root" element, replace that with html (that is what they mean by root element).
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'm having some issues trying to style a menu in chrome. The menu looks fine in ltr mode, but in right to left mode it breaks in Chrome.
I have a fiddle of this here:
http://jsfiddle.net/YKger/
In firefox, the menu in ltr is "one - two - three", in rtl "three - two -one". It chrome it is always rendered as "one-two-three".
Any idea why this is happening, or how I can style this without the first 'li' spanning the whole menu?
Thanks,
Also, here's the code:
<!doctype html>
<head>
<style>
.navigation { float:right; }
ul#main-menu {
list-style-type: none;
direction:rtl;
}
li {
border: 2px solid black;
padding: 5px 10px;
position: relative;
}
ul#main-menu span#tail1 {
position:absolute;
bottom:-21px;
left:10px;
width:0;height:0;
border-color:#000000 transparent transparent transparent;
border-style:solid;
border-width:10px;
}
ul#main-menu span#tail2 {
position:absolute;
bottom:-18px;
left:10px;
width:0;height:0;
border-style:solid;
border-width:10px;
}
ul.inline li {
display:inline;
}
</style>
</head>
<body>
<nav class="navigation">
<ul id="main-menu" class="links inline clearfix main-menu">
<li class="menu-1501 first">One<span id='tail1'> </span>
<span id='tail2'></span></li>
<li class="menu-1014">Two<span id='tail1'></span><span id='tail2'></span></li>
<li class="menu-1759 active-trail last active">Three<span id='tail1'></span><span id='tail2'></span></li>
</ul>
</nav>
</body>
</html>
i think thats the easy way -
you should make both of your:
ul, li
{
direction:rtl;
}
Try this:
.navigation { float:right; }
ul#main-menu {
list-style-type: none;
direction:rtl;
}
li {
border: 2px solid black;
padding: 5px 10px;
position: relative;
}
ul#main-menu span#tail1 {
position:absolute;
bottom:-21px;
left:10px;
width:0;height:0;
border-color:#000000 transparent transparent transparent;
border-style:solid;
border-width:10px;
}
ul#main-menu span#tail2 {
position:absolute;
bottom:-18px;
left:10px;
width:0;height:0;
border-style:solid;
border-width:10px;
}
ul.inline li {
display:inline-block;
}
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
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).