We Keep Coding

CSS issues none sense

I am trying to perfect my jQuery menu.
However I run on some CSS issues and I'm stuck. Here's my issues.
#nav {
list-style: none;
margin: 0;
padding: 0;
margin-bottom: 20px;
}
#nav li {
position: relative;
margin: 0;
font-size: 15px;
border-bottom: 1px solid #fff;
padding: 0;
}
#nav li ul {
opacity: 0;
height: 0px;
}
#nav li a {
font-style: normal;
font-weight: 400;
position: relative;
display: block;
padding: 16px 25px;
color: #fff;
white-space: nowrap;
z-index: 2;
text-decoration: none
}
#nav li a:hover {
color: #c0392b;
background-color: #ecf0f1;
}
#nav ul li {
background-color: #e74c3c;
color: #fff;
display: block;
list-style: disc;
}
#nav li:first-child {
border-top: 1px solid #fff;
}
#nav ul {
margin: 0;
padding: 0;
}
#nav .fa { margin: 0px 17px 0px 0px; }
.logo {
width: 100%;
padding: 21px;
margin-bottom: 20px;
box-sizing: border-box;
}
#logo{
color: #fff;
font-size: 30px;
font-style: normal;
}
.sidebar-icon {
position: relative;
float: right;
text-align: center;
line-height: 1;
font-size: 25px;
padding: 6px 8px;
color: #fff;
}
.disp {
opacity: 1!important;
height:auto!important;
transition: height 100ms ease-in-out;
transition-delay: 300ms;
}
I run on some CSS issues and I'm stuck. Here's my issues.
I run on some CSS issues and I'm stuck. Here's my issues.

To sum it up:
To add paddings to links without icons, wrap all text inside items into <span> (only those that have no <span> yet) and add padding-left to spans that have no icon before them:
nav li span:first-child {
padding-left: 24px;
}
Display borders only for items that are last in the group:
nav li:not(:last-child) {
border-bottom: 1px solid #aaa;
}
The scrollbar appears because you have min-width rule specified. Do not do it. It will mess up small screens because it will never collapse. Also remove padding-right: 65px; and padding-right: 280px; - they are bogus.
Here's the final fiddle: https://jsfiddle.net/pjb7jzjk/36/
P. S. I suggest you to add overflow-y: scroll rule to .sidebar-nav to make it scrollable on screens with small height.

Ad.1 - try to add
#nav li > ul > li {
padding-left: 3em;
}

Javascript codes not working in fluid layouts + Adobe CS6 Dreamweaver

I have started learning responsive web sites. As a part of it I started using Fluid Grid Layout with Dreamviewer CS 6. But the problem is that java script functions are not working for toggles.
[------------------------------Nav Bar(nav)--------------------------------------------------------------------] [profile]
As shown in the figure profile div has a drop down menu and for the nav bar when the screen width is below 480, horizontal nav bar will convert will change to vertical bar and has a toggle to show submenu.
help me out
//right click disable
$(function() {
$(this).bind("contextmenu", function(e) {
e.preventDefault();
});
});
//drop down -logout
$(document).ready(function() {
$(".account").click(function() {
var X=$(this).attr('id');
if(X==1) {
$(".submenu").hide();
$(this).attr('id', '0');
} else {
$(".submenu").show();
$(this).attr('id', '1');
}
});
//Mouse click on sub menu
$(".submenu").mouseup(function() {
return false;
});
//Mouse click on my account link
$(".account").mouseup(function(){
return false;
});
//Document Click
$(document).mouseup(function(){
$(".submenu").hide();
$(".account").attr('id', '');
});
});
#charset "utf-8";
/* Simple fluid media
Note: Fluid media requires that you remove the media's height and width attributes from the HTML
http://www.alistapart.com/articles/fluid-images/
*/
img, object, embed, video {
max-width: 100%;
}
/* IE 6 does not support max-width so default to width 100% */
.ie6 img {
width:100%;
}
/*
Dreamweaver Fluid Grid Properties
----------------------------------
dw-num-cols-mobile: 5;
dw-num-cols-tablet: 8;
dw-num-cols-desktop: 12;
dw-gutter-percentage: 25;
Inspiration from "Responsive Web Design" by Ethan Marcotte
http://www.alistapart.com/articles/responsive-web-design
and Golden Grid System by Joni Korpi
http://goldengridsystem.com/
*/
/* Mobile Layout: 480px and below. */
#media only screen and (max-width: 480px) {
.gridContainer {
margin-left: auto;
margin-right: auto;
width: 87.36%;
padding-left: 1.82%;
padding-right: 1.82%;
}
#nav {
clear: none;
float: left;
text-align : center;
margin-left: 4.1666%;
width: 58.3333%;
display: block;
}
#nav > ul {
border: 1px solid #e5e5e5;
border-radius: 5px;
list-style-type: none;
margin: 0;
padding: 0;
max-width: 200px;
}
#nav > ul > li a {
display: block;
text-decoration: none;
padding: 10px;
color: #666;
}
#nav > ul > li > a {
border-bottom: 1px solid #e5e5e5;
}
#nav > ul > li > a:hover {
color: #000;
background: #e5e5e5;
}
#nav > ul > li > a.active {
background: #e5e5e5;
}
#nav > ul > li ul {
display: none;
padding: 10px 20px 10px 30px;
border: none;
border-bottom: 1px solid #e5e5e5;
}
#nav > ul > li ul li {
padding-left: 5px;
}
#nav > ul > li ul li a {
border: 0;
padding: 5px 10px 5px 0;
}
#nav > ul > li ul li a:hover {
color: #000;
}
#nav > ul > li.dropdown {
position: relative;
}
#nav > ul > li.dropdown:after {
content: "";
position: absolute;
right: 10px;
top: 14px;
border-top: 5px solid transparent;
border-bottom: 5px solid transparent;
border-left: 5px solid #686868;
}
#nav > ul > li.dropdown.open:after {
content: "";
position: absolute;
right: 12px;
top: 17px;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-top: 5px solid #686868;
}
#profile {
clear: none;
float: left;
margin-left: 20.1666%;
width: 16.6666%;
display: block;
color: #555;
text-align:left;
}
.submenu {
background: #fff;
position: absolute;
top: -12px;
left: -20px;
z-index: 100;
width: 135px;
display: none;
margin-left: 10px;
padding: 40px 0 5px;
border-radius: 6px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.45);
clear:both;
}
#profile li a {
color: #555555;
display: block;
font-family: arial;
font-weight: bold;
padding: 6px 15px;
cursor: pointer;
text-decoration:none;
}
#profile li a:hover {
background:#155FB0;
color: #FFFFFF;
text-decoration: none;
}
a.account {
font-size: 11px;
line-height: 16px;
color: #555;
position: absolute;
z-index: 110;
display: block;
padding: 11px 0 0 20px;
height: 28px;
width: 121px;
margin: -11px 0 0 -10px;
text-decoration: none;
cursor:pointer;
}
.root {
list-style:none;
margin:0px;
padding:0px;
font-size: 11px;
padding: 11px 0 0 0px;
border-top:1px solid #dedede;
}
}
/* Tablet Layout: 481px to 768px. Inherits styles from: Mobile Layout. */
#media only screen and (min-width: 481px) {
.gridContainer {
width: 90.675%;
padding-left: 1.1625%;
padding-right: 1.1625%;
}
#nav {
clear: none;
float: left;
margin-left: 2.5641%;
width: 74.3589%;
display: block;
text-align : center;
}
#nav ul ul {
display : none;
}
#nav ul li:hover > ul {
display : block;
}
#nav ul {
background-color : #fff;
margin-top : 10px;
padding : 0 20px;
list-style : none;
position : relative;
display: inline-block;
zoom: 1;
*display: inline;
margin-right : -80px;
font-family :'Lato', sans-serif;
text-transform : uppercase;
font-size : 1em;
}
#nav ul li {
float : left;
}
#nav ul li:hover {
border-bottom : 5px solid #339966;
color : #fff;
}
#nav ul li a:hover {
color : #ffffff;
background : #1bbc9b;
}
#nav ul li a {
display : block;
padding : 0.3em 0.8em;
font-family :'Lato', sans-serif;
font-size : 0.9em;
color : #444;
text-decoration : none;
}
#nav ul ul {
background-color : #fff;
border-radius : 0;
padding : 0;
position : absolute;
top : 100%;
box-shadow : 0 0 9px rgba(0, 0, 0, 0.15);
z-index: 999999
}
#nav ul ul li {
float : none;
position : relative;
font-family :'Lato', sans-serif;
text-transform : uppercase;
font-size : 0.85em;
}
#nav ul ul li a {
padding : 0.4em 1.2em;
color : #000;
font-family :'Lato', sans-serif;
text-transform : uppercase;
font-size : 1em;
}
#nav ul ul:before {
content :"";
display : block;
height : 20px;
position : absolute;
top : -20px;
width : 100%;
}
#profile {
clear: none;
float: left;
margin-left: 12.5641%;
width: 10.2564%;
display: block;
color: #555;
text-align:left;
}
.submenu {
background: #fff;
position: absolute;
top: -12px;
left: -20px;
z-index: 100;
width: 135px;
display: none;
margin-left: 10px;
padding: 40px 0 5px;
border-radius: 6px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.45);
clear:both;
}
#profile li a {
color: #555555;
display: block;
font-family: arial;
font-weight: bold;
padding: 6px 15px;
cursor: pointer;
text-decoration:none;
}
#profile li a:hover {
background:#155FB0;
color: #FFFFFF;
text-decoration: none;
}
a.account {
font-size: 11px;
line-height: 16px;
color: #555;
position: absolute;
z-index: 110;
display: block;
padding: 11px 0 0 20px;
height: 28px;
width: 121px;
margin: -11px 0 0 -10px;
text-decoration: none;
cursor:pointer;
}
.root {
list-style:none;
margin:0px;
padding:0px;
font-size: 11px;
padding: 11px 0 0 0px;
border-top:1px solid #dedede;
}
}
/* Desktop Layout: 769px to a max of 1232px. Inherits styles from: Mobile Layout and Tablet Layout. */
#media only screen and (min-width: 769px) {
.gridContainer {
width: 88.5%;
max-width: 1232px;
padding-left: 0.75%;
padding-right: 0.75%;
margin: auto;
}
#nav {
clear: none;
float: left;
margin-left: 1.6949%;
width: 83.0508%;
display: block;
text-align : center;
}
#nav ul ul {
display : none;
}
#nav ul li:hover > ul {
display : block;
}
#nav ul {
background-color : #fff;
margin-top : 10px;
padding : 0 20px;
list-style : none;
position : relative;
display: inline-block;
zoom: 1;
*display: inline;
margin-right : -80px;
font-family :'Lato', sans-serif;
text-transform : uppercase;
font-size : 1em;
}
#nav ul li {
float : left;
}
#nav ul li:hover {
border-bottom : 5px solid #339966;
color : #fff;
}
#nav ul li a:hover {
color : #ffffff;
background : #1bbc9b;
}
#nav ul li a {
display : block;
padding : 0.3em 0.8em;
font-family :'Lato', sans-serif;
font-size : 0.9em;
color : #444;
text-decoration : none;
}
#nav ul ul {
background-color : #fff;
border-radius : 0;
padding : 0;
position : absolute;
top : 100%;
box-shadow : 0 0 9px rgba(0, 0, 0, 0.15);
z-index: 999999
}
#nav ul ul li {
float : none;
position : relative;
font-family :'Lato', sans-serif;
text-transform : uppercase;
font-size : 0.85em;
}
#nav ul ul li a {
padding : 0.4em 1.2em;
color : #000;
font-family :'Lato', sans-serif;
text-transform : uppercase;
font-size : 1em;
}
#nav ul ul:before {
content :"";
display : block;
height : 20px;
position : absolute;
top : -20px;
width : 100%;
}
#profile {
clear: none;
float: left;
margin-left: 6.6949%;
width: 6.7796%;
display: block;
}
.submenu {
background: #fff;
position: absolute;
top: -12px;
left: -20px;
z-index: 100;
width: 135px;
display: none;
margin-left: 10px;
padding: 40px 0 5px;
border-radius: 6px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.45);
clear:both;
}
#profile li a {
color: #555555;
display: block;
font-family: arial;
font-weight: bold;
padding: 6px 15px;
cursor: pointer;
text-decoration:none;
}
#profile li a:hover {
background:#155FB0;
color: #FFFFFF;
text-decoration: none;
}
a.account {
font-size: 11px;
line-height: 16px;
color: #555;
position: absolute;
z-index: 110;
display: block;
padding: 11px 0 0 20px;
height: 28px;
width: 121px;
margin: -11px 0 0 -10px;
text-decoration: none;
cursor:pointer;
}
.root {
list-style:none;
margin:0px;
padding:0px;
font-size: 11px;
padding: 11px 0 0 0px;
border-top:1px solid #dedede;
}
}
<!doctype html>
<!--[if lt IE 7]> <html class="ie6 oldie"> <![endif]-->
<!--[if IE 7]> <html class="ie7 oldie"> <![endif]-->
<!--[if IE 8]> <html class="ie8 oldie"> <![endif]-->
<!--[if gt IE 8]><!-->
<html class="">
<!--<![endif]-->
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Untitled Document</title>
<link href="scripts/boilerplate.css" rel="stylesheet" type="text/css">
<link href="css/fluidcss.css" rel="stylesheet" type="text/css">
<!--
To learn more about the conditional comments around the html tags at the top of the file:
paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/
Do the following if you're using your customized build of modernizr (http://www.modernizr.com/):
* insert the link to your js here
* remove the link below to the html5shiv
* add the "no-js" class to the html tags at the top
* you can also remove the link to respond.min.js if you included the MQ Polyfill in your modernizr build
-->
<!--[if lt IE 9]>
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<script src="scripts/respond.min.js"></script>
<script src="scripts/func1.js"></script>
<script type="text/javascript" src="scripts/jquery.min.js"></script>
<script type="text/javascript" src="scripts/jquery.ajax.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('.verticalnav > li > a').click(function(){
$(this).parent().toggleClass('open');
$(this).siblings().toggle();
});
});
</script>
</head>
<body>
<div class="gridContainer clearfix">
<div id="nav">
<ul>
<li class="dropdown">Home</li>
<li class="dropdown">Portfolio
<ul>
<li>Active Directory</li>
<li>HelpDesk</li>
<li>CTS</li>
<li>Exchange/Infra</li>
<li>Others</li>
</ul>
</li>
<li class="dropdown">Downloads</li>
<li class="dropdown">Blog</li>
<li class="dropdown">News</li>
<li class="dropdown">Contact US</li>
</ul>
</div>
<div id="profile">
<a class="account" >Account</a>
<div class="submenu">
<ul class="root">
<li ><a href="#Dashboard" >Dashboard</a></li>
<li ><a href="#Profile" >Profile</a></li>
<li >Settings</li>
<li >LogOut</li>
</ul>
</div>
</div>
</div>
</body>
</html>

Do these following changes:
Replace the bind function.
$(function() {
$(document).bind("contextmenu", function(e) {
e.preventDefault();
});
$("body").bind("contextmenu", function(e) {
e.preventDefault();
});
});
You have given:
var X = $(this).attr('id');
if (X == 1) {
But there's no single element or element with .account has an ID and none has an ID with 1.
These event handlers do not make any sense:
$(".submenu").mouseup(function() {
return false;
});
$(".account").mouseup(function(){
return false;
});
Why have you given them?
And finally, this is not gonna work:
$(document).mouseup(function(){
$(".submenu").hide();
$(".account").attr('id', '');
});
The whole JavaScript screws up the whole page's working. So you need to extensively correct them before you do anything!

adding an image to css breadcrumbs

I want to use these nice breadcrumbs jsfiddle.net/orihadar/bugvgbf5/ but I need to add image above each text, so each LI will include both an image and text under this image (both horizontally centered).
Any attempt to do so destroy the nice look of these breadcrumbs.
Any idea how can I do it?
Following is the CSS:
ul{
margin: 0;
padding: 0;
list-style: none;
}
#breadcrumbs-two{
overflow: hidden;
width: 100%;
}
#breadcrumbs-two li{
float: left;
margin: 0 .5em 0 1em;
}
#breadcrumbs-two a{
background: #ddd;
padding: .5em 1em;
float: left;
text-decoration: none;
color: #444;
text-shadow: 0 1px 0 rgba(255,255,255,.5);
position: relative;
}
#breadcrumbs-two a:hover{
background: #99db76;
}
#breadcrumbs-two a::before{
content: "";
position: absolute;
top: 50%;
margin-top: -1.5em;
border-width: 1.5em 0 1.5em 1em;
border-style: solid;
border-color: #ddd #ddd #ddd transparent;
left: -1em;
}
#breadcrumbs-two a:hover::before{
border-color: #99db76 #99db76 #99db76 transparent;
}
#breadcrumbs-two a::after{
content: "";
position: absolute;
top: 50%;
margin-top: -1.5em;
border-top: 1.5em solid transparent;
border-bottom: 1.5em solid transparent;
border-left: 1em solid #ddd;
right: -1em;
}
#breadcrumbs-two a:hover::after{
border-left-color: #99db76;
}
#breadcrumbs-two .current,
#breadcrumbs-two .current:hover{
font-weight: bold;
background: none;
}
#breadcrumbs-two .current::after,
#breadcrumbs-two .current::before{
content: normal;
}

Something like this?
You need to be more clear on what you are trying to achieve here.
http://jsfiddle.net/bugvgbf5/4/
<ul id="breadcrumbs-two">
<li>
<a>
<img src="https://www.gravatar.com/avatar/0dadd597898bbd33e37fe684fa07aa2d?s=24&d=identicon&r=PG"/>
<br/>
bkbgbhighb
</a>
</li>

How do dynamically resize a image - CSS / HTML

I'm trying to dynamically resize a .png image to whatever text is put on the box. As you can see from the printscreen it doesn't resize dynamically to fit the text in the box. I have no idea how to make it work ... the link to that page is here. I've tried formatting the padding, margins and adding classes and divs to that, but it didn't work. A link to the website can be found here.
So the problem in the
<div id='page' class='container'>:
<div id="page-bg1">
<div id="page-bg2">
<div id="page-bg3">
<div id="page" class="container">
<div class="box-style2" id="content">
<h2 class="title">Services</h2>
<p>Our experience and business ethics have evolved over several decades of working in the cleaning industry. We understand the importance of supervision, training, communication, and customer satisfaction. The facility types we serve include commercial, healthcare, corporate, education, industrial, manufacturing, and auto dealerships
</p>
<h2>Building Maintenance Services:</h2>
<ul>
<li><b>Contract Custodial Cleaning:</b> Outsourcing of custodial cleaning is a way for corporate clients to reduce their direct costs while ensuring that quality control standards are met. We can work within your existing cleaning specifications or custom design a complete program for your nightly cleaning requirements, including all labor, cleaning equipment and complete supervision. Additional value-add features include consumable product inventory control, periodic project cleaning, and quality control site audits.
</li>
<li><b>Certified Cleanroom Attendant Services: </b>
Cleanroom cleaning is a highly-specialized function and critical part of our clients’ quality control standards. We can develop and implement a program that will conform to your protocols. Our Attendants are trained and certified in all areas of contamination control including waste removal, gowning procedures, cleaning techniques and equipment handling.
</li>
</ul>
</div>
<div id="sidebar">
<div id="box2" class="box-style2">
<h2 class="title">Specialized Cleaning Services</h2>
<ul class="style3">
<li>ESD and composition tile floor refinishing and maintenance</li>
<li>Carpet and area rug cleaning</li>
<li>Cubicle fabrics partition and upholstery cleaning</li>
<li>Kitchen and cafeteria cleaning</li>
<li>Window and glass cleaning</li>
<li>Wall and ceiling cleaning</li>
</ul>
</div>
<div id="box3" class="box-style2">
<h2 class="title">Additional Services</h2>
<ul>
<li>Post-construction cleanup</li>
<li>Temporary hourly-rate personnel</li>
<li>Matron/day porters</li>
<li>Pressure washing</li>
<li>Painting</li>
<li>Relamping</li>
<li>Mold and mildew treatments</li>
<li>Fabric and carpet soil protection</li>
<li>Carpet deodorizing</li>
<li>Floor mat purchase and rental programs</li>
<li>Flame retardant applications</li>
<li>Static control applications</li>
<li>Seasonal school dormitory cleaning</li>
</ul>
</div>
</div>
</div>
</div>
</div>
The CSS is here:
html, body {
height: 100%;
}
body {
margin: 0px;
padding: 0px;
background: url(palette/png/Background/bg.png) repeat left top;
font: 14px/26px "Arvo", Georgia, "Times New Roman", Times, serif;
//color: #94856A;
color: #0020C2;
}
a
h1, h2, h3 {
margin: 0px;
padding: 0px;
font-family: 'Arvo', serif;
}
p, ol, ul {
margin-top: 0px;
}
strong {
}
a {
color: #789329;
}
a:hover {
text-decoration: none;
}
a img {
border: none;
}
img.border {
}
img.alignleft {
float: left;
}
img.alignright {
float: right;
}
img.aligncenter {
margin: 0px auto;
}
hr {
display: none;
}
.image-wrapper {
position : relative;
}
.scale-image {
display : block;
width : auto;
max-width : 75% ;
}
/** WRAPPER */
#wrapper {
background: url(palette/png/Background/bg.png) repeat left top;
}
#main-bg {
background: url(palette/png/Background/bg_combined.png) repeat center top;
}
.container {
width: 1000px;
margin: 0px auto;
}
.clearfix {
clear: both;
}
/** HEADER */
#header {
}
/** LOGO */
#logo {
height: 183px;
background: url(images/fmn_200.jpg) no-repeat center top;
text-align: center;
text-transform: uppercase;
}
#logo h1, #logo p {
margin: 0px;
}
#logo h1 {
padding-top: 107px;
letter-spacing: 2px;
line-height: 25px;
font-size: 25px;
color: #FFFFFF;
}
#logo h1 a {
text-decoration: none;
color: #FFFFFF;
}
#logo p {
padding-top: 15px;
letter-spacing: 1px;
line-height: 14px;
font-size: 14px;
color: #776D5C;
background: url(image/fmn_200.jpg);
}
/** MENU */
#menu {
height: 100px;
background: url(images/crop.png) repeat center top;
}
#menu ul {
height: 69px;
margin: 0px;
padding: 31px 0px 0px 0px;
list-style: none;
line-height: normal;
text-align: center;
}
#menu li {
display: inline;
}
#menu a {
display: inline-block;
margin: 0 30px;
text-decoration: none;
font-weight: bold;
text-transform: uppercase;
text-decoration: none;
line-height: 68px;
font-size: 14px;
color: #FFFFFF;
}
#menu a:hover {
text-decoration: underline;
}
/** PAGE */
#page-bg1 {
overflow: hidden;
background: url(palette/png/CBG/cbg_shadow.png) repeat-x left bottom;
}
#page-bg2 {
background: url(palette/png/CBG/cbg_shadow.png) repeat-y center top;
}
#page-bg3 {
background: url(palette/png/CBG/cbg_combined.png) repeat center bottom;
}
#page {
overflow: hidden;
padding: 50px 0px 50px 0px;
}
.homepage #page {
height: auto !important;
height: 380px;
min-height: 380px;
}
/** SLIDERTRON */
#slidertron {
position: relative;
width: 900px;
height: 300px;
margin: 0px auto;
}
#slidertron .viewer {
width: 900px;
height: 290px;
overflow: hidden;
}
#slidertron .reel {
}
#slidertron .slide {
float: left;
width: 640px;
height: 260px;
background: #FFFFFF;
}
#slidertron .slide img {
padding: 9px;
border: 1px solid #E4E2DE;
}
#slidertron .indicator {
position: absolute;
bottom: 0px;
width: 100%;
height: 16px;
cursor: default;
user-select: none !important;
-khtml-user-select: none !important;
-moz-user-select: none !important;
-o-user-select: none !important;
-webkit-user-select: none !important;
}
#slidertron .indicator ul {
margin: 0px;
padding: 0px;
list-style: none;
text-align: center;
}
#slidertron .indicator li {
display: inline;
}
#slidertron .indicator li.active {
}
#slidertron .indicator a {
display: inline-block;
width: 16px;
height: 16px;
margin: 0px 3px;
background: url(images/slidertron_01.png) no-repeat -16px -258px;
text-indent: -9999em;
}
#slidertron .indicator li.active a {
background-position: 0px -258px;
}
#slidertron .navigation a {
position: absolute;
top: 1px;
display: block;
width: 125px;
height: 258px;
background: url(images/slidertron_01.png) no-repeat;
text-indent: -9999em;
}
#slidertron .navigation a.previous {
left: -1px;
background-position: 0px 0px;
}
#slidertron .navigation a.next {
background-position: 100% 0px;
right: -1px;
}
/** CONTENT */
#content {
float: left;
width: 600px;
padding-left: 50px;
}
.two-column2 #content {
float: right;
padding-right: 50px;
padding-left: 0px;
}
#wide-content {
overflow: hidden;
padding: 0px 50px;
}
/** SIDEBAR */
#sidebar {
float: right;
width: 260px;
padding-right: 50px;
}
.two-column2 #sidebar {
float: left;
padding-left: 50px;
padding-right: 0px;
}
#sidebar .title {
font-size: 18px;
}
/** FOOTER BLOCK */
#footer-block-wrapper {
overflow: hidden;
padding-bottom: 40px;
}
#footer-block-bg {
overflow: hidden;
padding-bottom: 30px;
background: url(palette/png/Background/bg_bar.png) repeat-y center top;
}
#footer-block-bgtop {
background: url(palette/png/Background/bg_bar.png) no-repeat center top;
}
#footer-block {
overflow: hidden;
width: 860px;
height: auto !important;
padding: 70px 70px 0px 70px;
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
color: #6C5F48;
}
#footer-block h2 {
margin: 0px;
padding: 0px 0px 20px 0px;
text-transform: uppercase;
font-size: 16px;
font-weight: bold;
color: #FFFFFF;
}
#footer-block #column1 {
float: left;
width: 240px;
margin-right: 70px;
}
#footer-block #column2 {
float: left;
width: 240px;
}
#footer-block #column3 {
float: right;
width: 240px;
}
/** FOOTER */
#footer {
padding: 50px 0px 70px 0px;
}
#footer p {
margin: 0px;
padding: 0px 0px 0px 0px;
text-align: center;
font-family: Arial, Helvetica, sans-serif;
color: #2F2518;
}
/** BOX 1 */
#box1 .title1, #box1 .title2 {
text-align: center;
}
/** BOX 2 */
#box2 {
margin-bottom: 30px;
}
/** BOX STYLE 1 */
.box-style1 {
}
.box-style1 .title1 {
padding: 0px 0px 5px 0px;
text-shadow: 1px 1px 1px #FFFFFF;
text-transform: uppercase;
font-weight: bold;
font-size: 26px;
color: #3C3223;
}
.box-style1 .title2 {
padding: 0px 0px 15px 0px;
text-shadow: 1px 1px 1px #FFFFFF;
text-transform: uppercase;
font-weight: normal;
font-size: 15px;
color: #8A7C60;
}
/** BOX STYLE 2 */
.box-style2 {
}
.box-style2 .title {
padding: 0px 0px 5px 0px;
letter-spacing: 1px;
text-transform: uppercase;
font-size: 26px;
font-weight: bold;
color: #3C3223;
}
.box-style2 .byline {
letter-spacing: 1px;
text-transform: uppercase;
font-size: 15px;
font-weight: normal;
color: #8B806F;
}
/** LINK STYLE 1 */
.link-style1 {
display: inline-block;
height: 48px;
margin: 9px 0px 0px 0px;
background: url(images/bio_2.png) repeat-x left top;
}
.link-style1 a {
display: inline-block;
height: 48px;
background: url(images/bio_1.png) no-repeat left top;
line-height: 48px;
text-decoration: none;
text-transform: uppercase;
font-family: 'Arvo', serif;
font-size: 14px;
font-weight: bold;
color: #FFFFFF;
}
.link-style1 span {
display: inline-block;
padding: 0px 30px 0px 30px;
background: url(images/bio_3.png) no-repeat right top;
color: #FFFFF;
}
/** LINK STYLE 2 */
.link-style2 {
display: inline-block;
background: url(images/homepage09.gif) no-repeat left 3px;
margin-top: 20px;
padding-left: 30px;
text-decoration: none;
color: #9F9788;
}
/** LINK STYLE 3 */
.link-style3 {
background: url(images/homepage10.gif) no-repeat left 2px;
padding-left: 30px;
text-decoration: none;
color: #9F9788;
}
/** LIST STYLE 1 */
ul.style1 {
margin: 0px;
padding: 0px;
list-style: none;
}
ul.style1 li {
}
ul.style1 a {
color: #6C5F48;
}
/** LIST STYLE 2 */
ul.style2 {
margin: 0px 0px 10px 0px;
padding: 10px 0px;
list-style: none;
}
ul.style2 li {
float: left;
margin-right: 9px;
}
/** LIST STYLE 3 */
ul.style3 {
margin: 0px 0px 0px 0px;
padding: 0px 0px;
list-style: none;
}
The images which needs to be resized are palette/png/CBG/cbg_combined.png and palette/png/CBG/cbg_shadow.png, presented in the divs #page-bg3, #page-bg2 and #page-bg1. That's the image that I wanted to resize according to the div text presented in that box.. I'm also adding a screenshot so you guys can have an idea of the problem.
What can I do to make it work? I only need this central banner to be able to dynamically resize.
I'm also adding a screenshot of how I wanted the page to look like:

Basically, I have cropped your background and used it in a differnt way. You can get the images from the following link:
#page-bg1
#page-bg2
#page-bg-3
And here's my code:
#page-bg1 {
overflow: hidden;
background: url(https://dl.dropboxusercontent.com/u/23887590/cbg_combined2.png) center;
}
#page-bg2 {
background: url(https://dl.dropboxusercontent.com/u/23887590/cbg_combined.png) repeat-y center top;
}
#page-bg3 {
background: url(https://dl.dropboxusercontent.com/u/23887590/cbg_combined1.png) no-repeat center bottom;
}
Little Explanation:
#page-bg1 is the background behind and outside the box.
#page-bg-2 is a vertically repeating background inside the box where you put your content.
#page-bg-3 is a backgroud with dashed border at the bottom of your content box which doesn't repeat but is always fixed at the bottom.

How to build a yahoo styled navigation bar? [closed]

Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions asking us to recommend or find a tool, library or favorite off-site resource are off-topic for Stack Overflow as they tend to attract opinionated answers and spam. Instead, describe the problem and what has been done so far to solve it.
Closed 9 years ago.
Improve this question
Hi I am looking to build a navigation bar similar to yahoos, however I was unable to find an example. Some of the features I am looking for are a sticky navigation bar, that kind of looks like it pops out of it's place when the user scrolls.
CSS
* { margin: 0; padding: 0; }
html { overflow-y: scroll; }
body {
font: 62.5% Arial, Helvetica, sans-serif;
background: #FFFFFF;
}
ul { list-style: none inside; }
p { font-size: 1.2em; line-height: 1.2em; margin-bottom: 1.2em; }
a img { border: none; }
.floatleft { float: left; }
.floatright { float: right; }
.clear { clear: both; }
a {
text-decoration: none;
outline: none;
color: #335588;
}
a:hover {
text-decoration: underline;
}
#top-bar {
background: #330000;
min-height: 60px;
padding: 0 10px;
font-size: 1.3em;
font-weight: bold;
}
#right-side {
float: right;
padding-top: 15px;
}
#right-side img {
border: 1px solid white;
vertical-align: middle;
}
#right-side a {
color: white;
border-left: 1px solid white;
height: 10px;
padding-left: 10px;
}
#right-side a.first {
border: none;
padding: 0;
}
#left-side {
float: left;
padding-top: 15px;
padding-left: 20px;
color: white;
font-size: 20px;
}
#sub-menu {
background: white;
min-height: 20px;
padding: 5px 10px 0 10px;
}
#sub-menu ul {
display: block;
color: #000000;
}
#sub-menu ul li {
height: 18px;
padding: 5px 10px 0 5px;
position: relative;
float: left;
margin-right: 10px;
color: #000000;
}
#sub-menu ul li:hover {
background: red;
height: 10px;
}
#sub-menu ul li a {
display: block;
float: left;
height: 23px;
position: relative;
top: -5px;
right: -5px;
padding-right: 3px;
color: #000000;
font-weight: bold;
font-size: 1.1em;
text-decoration: none;
}
#sub-menu ul li a span {
position: relative;
top: 6px;
}
#sub-menu ul li ul {
display: none;
position: absolute;
top: 29px;
left: 0px;
width: 150px;
border: 1px solid #ccc;
background: white;
padding: 10px 0 0 0;
}
#sub-menu ul li ul li {
float: none;
padding: 0; margin: 0;
height: 100%;
}
#sub-menu ul li ul li:hover {
background: none;
}
#sub-menu ul li ul li a {
display: block;
float: none;
margin-left: -5px;
padding: 5px 0 0 10px;
width: 140px;
}
#sub-menu ul li ul li a:hover {
background: #000000;
}
HTML
<div id="top-bar">
<img src="images/logo.png" alt="TEST" class="floatleft" />
<div id="left-side">
TEST
</div>
<div id="right-side">
Logout
</div>
</div>
<div id="sub-menu">
<ul>
<li></li>
<li></li>
<li></li>
</ul>
</div>
here is an updated jsfiddle, i got the line to show up but it still wont be sticky jsfiddle.net/cc48t/1549

It's probably not purely CSS. With jQuery, you can put something like this:
$(window).scroll(function() {
$(this).scrollTop() > 0 ? $('body').css('background', '#f0f') : $('body').css('background', '#0f0');
}).scroll();
Fiddle