I am trying to make a Resumé for job applications now i have created a background and a small menu using CSS. Now my question:
Is there a way without using <frame>,<iframe>,<frameset> to make a area where I can target my links to without losing my menu.
When I was learning for ICT I got lessons in HTML/CSS and was learned to use the pages as a table and place an iframe on the right area you want it to.
Now I want to try html5/css3 to make a page working without the above.
my HTML
<html>
<head>
<title></title>
<link href="Style.css" rel="stylesheet" type="text/css">
</head>
<body>
<ul id="navigationMenu">
<li><a class="home" href="#"><span>Home</span></a></li>
<li><a class="about me" href="#"><span>About me</span></a></li>
<li><a class="kennis" href="#"><span>Kennis</span></a></li>
<li><a class="werkervaring" href="#"><span>Werkervaring</span></a></li>
</ul>
/body>
</html
my CSS
body{
background-image:url(*);
background-repeat:no-repeat;
background-size:cover;
font-family:Arial, Helvetica, sans-serif;
}
*{
/* A universal CSS reset */
margin:0;
padding:0;
}
#navigationMenu li{
list-style:none;
height:39px;
padding:2px;
width:40px;
}
#navigationMenu span{
/* Container properties */
width:0;
left:38px;
padding:0;
position:absolute;
overflow:hidden;
/* Text properties */
font-family:'Myriad Pro',Arial, Helvetica, sans-serif;
font-size:18px;
font-weight:bold;
letter-spacing:0.6px;
white-space:nowrap;
line-height:39px;
/* CSS3 Transition: */
-webkit-transition: 0.25s;
/* Future proofing (these do not work yet): */
-moz-transition: 0.25s;
transition: 0.25s;
}
#navigationMenu a{
/* The background sprite: */
background:url(*) no-repeat;
height:39px;
width:38px;
display:block;
position:relative;
}
/* General hover styles */
#navigationMenu a:hover span{ width:auto; padding:0 20px;overflow:visible; }
#navigationMenu a:hover{
text-decoration:none;
/* CSS outer glow with the box-shadow property */
-moz-box-shadow:0 0 5px #9ddff5;
-webkit-box-shadow:0 0 5px #9ddff5;
box-shadow:0 0 5px #9ddff5;
}
/* Green Button */
#navigationMenu .home { background-position:0 0;}
#navigationMenu .home:hover { background-position:0 -39px;}
#navigationMenu .home span{
background-color:#7da315;
color:#3d4f0c;
text-shadow:1px 1px 0 #99bf31;
}
/* Blue Button */
#navigationMenu .about { background-position:-38px 0;}
#navigationMenu .about:hover { background-position:-38px -39px;}
#navigationMenu .about span{
background-color:#1e8bb4;
color:#223a44;
text-shadow:1px 1px 0 #44a8d0;
}
/* Orange Button */
#navigationMenu .werkervaring { background-position:-76px 0;}
#navigationMenu .werkervaring:hover { background-position:-76px -39px;}
#navigationMenu .werkervaring span{
background-color:#c86c1f;
color:#5a3517;
text-shadow:1px 1px 0 #d28344;
}
/* Yellow Button */
#navigationMenu .kennis { background-position:-114px 0;}
#navigationMenu .kennis:hover{ background-position:-114px -39px;}
#navigationMenu .kennis span{
background-color:#d0a525;
color:#604e18;
text-shadow:1px 1px 0 #d8b54b;
}
/* Purple Button */
#navigationMenu .contact { background-position:-152px 0;}
#navigationMenu .contact:hover { background-position:-152px -39px;}
#navigationMenu .contact span{
background-color:#af1e83;
color:#460f35;
text-shadow:1px 1px 0 #d244a6;
}
Yes there is. Check out Miniport's source code on how to position the nav menu, within the <nav> div. Everything you want to do is shown there.
Specifically, what you're looking for is position: fixed
#nav
{
background-color: #282828;
text-align: center;
position: fixed;
left: 0;
top: 0;
width: 100%;
z-index: 10000;
cursor: default;
}
<html>
<head>
<title></title>
<link href="Style.css" rel="stylesheet">
<style>
/* move these into style.css */
.navigationTarget {
border: 1px solid #cccccc;
margin: 2em;
padding: 2em;
height: 400px;
}
</style>
</head>
<body>
<ul id="navigationMenu">
<li><a class="home" href="#home"><span>Home</span></a></li>
<li><a class="about me" href="#about"><span>About me</span></a></li>
<li><a class="kennis" href="#kennis"><span>Kennis</span></a></li>
<li><a class="werkervaring" href="#wer"><span>Werkervaring</span></a></li>
</ul>
<div class="navigationTarget">
<a name="home"></a> Home
</div>
<div class="navigationTarget">
<a name="about"></a> Home
</div>
<div class="navigationTarget">
<a name="kennis"></a> Home
</div>
<div class="navigationTarget">
<a name="wer"></a> Home
</div>
</body>
</html>
Related
I am trying to make 4 separate buttons in a layout in a foursquare type layout. (see attached image and pretend the boxes are the same size and equidistant from eachother) my issue is that i want the boxes to be in the center of the page no matter the browser window size, except i do not want the buttons to re-size when the page gets too small. I am drawing blanks at how to do this but it doesnt seem to hard.
body{
font-family: Arial, Helvetica, Sans-Serif;
font-size:1em;
padding:0;
margin:0;
}
#content{
position:relative;
}
/* Banner Styling */
#banner {
display:inline-block;
}
#banner a{
text-decoration:none;
color:black;
}
#banner h1{
float:left;
padding-left:1em;
padding-right:auto;
}
#banner #logo{
position:absolute;
top:0px;
right:0px;
}
/* Navigation Styling */
Nav {
margin-top:2em;
}
Nav ul{
margin:0;
padding:0;
overflow:hidden;
list-style-type:none;
background-color: #1666af;
padding-left:2em;
min-width:1532px;
}
Nav ul li{
float:left;
text-align:center;
}
Nav li a{
border: 1px solid #1666af;
padding:.3em 2em .3em 2em;
display: block;
background-color: #1666af;
color:White;
text-decoration:none;
}
Nav .current{
background-color:green;
border:1px solid green;
}
Nav li a:hover{
border: 1px solid #278efc;
background-color:#278efc;
}
/* BUTTONS */
#buttons{
position:relative;
left:50%;
}
#buttons a{
width:330px;
height:210px;
display:inline-block;
text-align:center;
color:white;
text-decoration:none;
border-radius:6px;
margin-top:50px;
box-sizing:border-box;
padding-top:89px;
}
/* CDW Button */
#button1{
border:1px solid black;
background-color:green;
transition: background-color 1.0s;
}
#button1:hover{
background-color:yellow;
}
/* ADR button */
#button2{
border:1px solid black;
background-color:blue;
transition: background-color 1.0s;
}
#button2:hover{
background-color:red;
}
/* GoGatway Button */
#button3{
border:1px solid black;
background-color:red;
transition: background-color 1.0s;
height:60px!important;
padding-top:20px!important;
}
#button3:hover{
background-color:teal;
}
/* AAS button */
#button4{
border:1px solid black;
background-color:orange;
transition: background-color 1.0s;
height:60px!important;
padding-top:20px!important;
}
#button4:hover{
background-color:brown;
}
<!DOCTYPE html>
<html>
<head>
<link href="css/styles.css" rel="stylesheet" type="text/css" />
<title>Website</title>
</head>
<body>
<div id="content">
<div id="banner">
<h1>Website</h1>
<img id="logo" src="images/imagehere" alt="imagehere" />
</div>
<nav>
<ul>
<li><a class="current" href="default.htm"> Home</a></li>
<li>Placeholder</li>
<li>Placeholder</li>
<li>Placeholder</li>
<li>Placeholder</li>
<li>Placeholder</li>
</ul>
</nav>
<div id=buttons>
Placeholder
Placeholder
Placeholder
Placeholder
</div>
</div>
</body>
</html>
<div id=buttons>
<!--create a div here-->
<div class="container" style=" width:100%, height:540px">
<!--inside this div you create a new div for your foursquares-->
<div class="forsquare">
<!--use something like canvas to create the graphic or
use something like canvas to get the image how you would like it
you can also create a image and map it to create different a href
elements that links from the square-->
</div>
</div>
Whenever I resize my screen, everything on screen stays where it is and a scroll bar appears... except for the my horizontal list. It keeps moving along with the screen and then becoming multiple layers and messing up. Is there a way for me to keep the list from moving? Previously I tried adding {white-space: nowrap} to the #primary_nav_wrap ul item. However, this then causes the drop down under "committee" to become a horizontal drop down rather than a vertical drop down menu. Is there a way to simply make the entire list not move and an the same time not cause the drop down to change? Could I just affect the parent and not the child?
Here's the CSS
#topbar{
background-color: #636363;
height:2.4em;
position:absolute;
width:81.8em;
margin: auto;
top:0;
}
#topbar2{
background-color: #636363;
height:2.4em;
position:absolute;
width:81.8em;
margin:auto;
top:10em;
z-index:-1;
}
#title{
font-family:basic title font;
color:#ffffff;
position: absolute;
top:-0.6em;
font-size:1.6em;
left:17.4em;
z-index:1;
white-space: nowrap;}
#logo {
position:absolute;
top:2.6em;
left:36.5em;
z-index:1;
width:9em;
}
#text
{font-family:basic title font;
color:#636363;
position: absolute;
left:8em;
top:0.2em;
font-size:4em;
min-width:100%
z-index:1;}
#text2
{font-family:basic title font;
color:#636363;
position: absolute;
left:11.6em;
top:0.2em;
font-size:4em;
z-index:1;}
body {
color: #fff;
font-family: 'open sans';
font-size: 1.1em;
text-align: center;
text-decoration:none;
font-weight:100;
display:inline;
overflow-x:none;
overflow-y: scroll;
}
#primary_nav_wrap
{
margin-top:15px
z-index:100;
}
#primary_nav_wrap ul
{
list-style:none;
position:absolute;
float:left;
margin:0;
top:10em;
left:7em;
padding:0;
text-align:center;
}
#primary_nav_wrap ul a
{
display:block;
text-decoration:none;
font-weight:700;
font-size:12px;
line-height:32px;
padding:0 15px;
font-family: 'open sans';
font-weight:100;
font-size: 0.9em;
color: #ffffff;
text-align:center;
padding-top:0.3em;
padding-bottom:0.3em;
padding-right:4em;
padding-left:4em;
}
#primary_nav_wrap ul li
{
position:relative;
float:left;
margin:0;
padding:0;
display: inline-block;
float: none;
margin: 0 -3px 0 0;
}
#primary_nav_wrap ul ul
{
display:none;
position:absolute;
top:100%;
left:0%;
text-align:left;
background-color:#636363;
z-index:100;
}
#primary_nav_wrap ul ul li
{
float:none;
width:187px;
padding-left:1em;
padding-right:1em;
}
#primary_nav_wrap ul ul a
{
line-height:120%;
padding:10px 15px;
}
#primary_nav_wrap ul ul ul
{
top:0;
left:100%
}
#primary_nav_wrap ul li:hover > ul
{
display:block
}
.hvr-fade {
display: inline-block;
vertical-align: middle;
-webkit-transform: translateZ(0);
transform: translateZ(0);
box-shadow: 0 0 1px rgba(0, 0, 0, 0);
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-moz-osx-font-smoothing: grayscale;
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-property: color, background-color;
transition-property: color, background-color;
}
.hvr-fade:hover, .hvr-fade:focus, .hvr-fade:active {
box-shadow: inset 0 2px 10px -5px #000000;
background-color: #2098d1;
color: white;
z-index:1
}
#bottomtext {
position:absolute;
bottom:-83%;
left:43%;
font-family:"myriad pro";
font-weight:300;
color:black;
font-size:0.8em;
z-index:10000;}
#bottomtext2 {
position:absolute;
bottom:-89%;
left:44%;
font-family:"myriad pro";
font-weight:200;
color:black;
font-size:0.6em;
z-index:1000000}
#bottom {
width:100%;
height:15%;
background-color: white;
position:absolute;
bottom:-88%;
z-index:1000;
}
And HTML
<!DOCTYPE html>
<html>
<head>
<meta charset='UTF-8'>
<link rel="stylesheet" type="text/css" href="execs2.css"/>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<meta name="robots" content="all,index,follow" />
<title>KAS</title>
<meta name="description" content="Create a sticky navigation bar that remains fixed to the top after scroll" />
</head>
<body bgcolor="#F0F0F0">>
<p id="title">SOUTHERN TAIWAN MODEL UNITED NATIONS</p>
<p id="intro"></p>
<p id="text">20 </p>
<p id="text2">15 </p>
<p id="bottomtext">Kaohsiung American School <br>
www.kas.tw </p>
<p id="bottomtext2">(c) 2015 by STMUN PRESS TEAM</p>
<div id="bottom"></div>
<img id="logo" src="images/logo2.png">
<div id="topbar"></div>
<div id="topbar2"></div>
<div id="midbar2"></div>
<div id="midbar3"></div>
<div id="bar"></div>
<div id="bar2"></div>
<div id="box"></div>
<div id="textbox"></div>
<nav id="primary_nav_wrap">
<ul>
<li class="hvr-fade" class="current-menu-item">HOME</li>
<li class="hvr-fade" >INTRODUCTION</li>
<li class="hvr-fade">COMMITTEES
<ul>
<li class="hvr-fade">Security Council</li>
<li class="hvr-fade">CDIS</li>
<li class="hvr-fade">ECOSOC</li>
<li class="hvr-fade">HRC</li>
<li class="hvr-fade">General Assembly 1</li>
<li class="hvr-fade">General Assembly 2</li>
<li class="hvr-fade">General Assembly 3</li>
</ul>
<li class="hvr-fade">CONTACT</li>
<li class="hvr-fade">NEWS</li>
<li class="hvr-fade">MORE</li>
</ul>
</nav>
</body>
</html>
THANKS!!
You were almost there.
Add as you did
#primary_nav_wrap
{
white-space: nowrap;
....
}
And add also
#primary_nav_wrap ul ul li
{
float:left;
....
}
Instead of
#primary_nav_wrap ul ul li
{
float: none;
....
}
Regards.
If you dont want the LI to resize, just put it in a div tag and set the style of the div something like width= 200px etc. if you want it to resize to a base point then stop then in the style use something like min-width= 150px
So I've been trying to work on my website creation skills and was reading various tutorials concerning html/css developing. The problem I now have run into is that when I alter the size of my page the view gets incredibly altered. I was under the assumption that when the view changed it would keep it's structure but have a smaller view window (not the case).
Does the problem lie with me using percent values instead of pixels? Is there a better way to structure my design to make it responsive to window size alterations?
This is my HTML
<html>
<html lang="en">
<head>
<title> MyWebsite</title>
<link rel="stylesheet"type="text/css" href="style.css">
</head>
<body>
<div id="containerColumn1">
<div id="Fill1"> </div>
</div>
<div id="containerTopLogo">
<div id="FillTopLogo"> </div>
</div>
<div class="menu-wrap">
<nav class="menu">
<ul class="clearfix">
<li>Home</li>
<li>
Services <span class="arrow">▼</span>
<ul class="sub-menu">
<li> Option 1</li>
<li> Option 2</li>
<li> Option 3</li>
</ul>
</li>
<li>
Services2 <span class="arrow">▼</span>
<ul class="sub-menu">
<li> Option 1</li>
<li> Option 2</li>
<li> Option 3</li>
</ul>
</li>
<li> Contact Us</li>
<li> Site Map</li>
</ul>
</nav>
</div>
<div id="containerPicture">
<div id="headerPicture"> </div>
</div>
<div id="container">
<div id="header"> </div>
</div>
<div id="containerColumn2">
<div id="Fill2"> </div>
</div>
</body>
</html>
This is my style.css
body {
background: #FFFFFF url('body-bg.jpg');
}
.clearfix:after {
display:block;
clear:both;
}
/*COLUMNS TO CENTER PAGE*/
#containerColumn1 {
width:18.2%;
margin-top: 0%;
margin-left: 0%;
padding: 0;
border: 5px groove #000;
}
#Fill1 {
background: red;
height:100%;
}
#containerTopLogo {
width:61.3%;
margin-left:18.4%;
margin-top:-47.4%;
height:23%;
position: absolute;
border: 5px groove #000;
}
#FillTopLogo {
background: green;
height:100%;
}
#containerColumn2 {
width:18%;
margin-top: -49.82%;
margin-left: 80%;
height:100%;
position:absolute;
padding: 0;
border: 5px groove #000;
}
#Fill2 {
background: red;
height:100%;
}
/*Menu Outline*/
.menu-wrap {
width:50%;
box-shadow: 0px 1px 3px rgba(0,0,0,0.2);
background:#000000;
}
/* Height of menu (Home)(*MARGIN*) AND LEFT-RIGHT PLACEMENT(*WIDTH*)*/
.menu {
width: 61.5%;
margin:0%;
position: absolute;
left:19%;
top: 25%;
border-style: groove;
border-width: 5px;
border-color: #000000;
}
.menu li{
margin:0px;
list-style:none;
font-family:'Ek Mukta';
}
.menu a {
transition:all linear 0.15s;
color:#000000;
}
.menu li a:hover > a .menu .current-item a{
color:#FFF000;
}
.menu .arrow {
font-size:11px;
line-height:0%;
}
/* Top of the Page */
.menu > ul > li {
float:left;
display:inline-block;
position:relative;
font-size:19px;
}
/* Menu Item spacing (Vertical/Horizontal) */
.menu > ul > li > a {
/* Menu Spacing Vert/Hor */
padding:10px 30px;
display:inline-block;
text-shadow:0px 1px 0px rgba(0,0,0,0.4);
}
.menu > ul > li:hover > a, .menu > ul > .current-item > a{
background:#FFFFFF;
}
/* Bottom Level */
.menu li:hover .sub-menu {
z-index:1;
opacity:1;
}
.sub-menu {
width:100%;
padding:5px 0px;
position:absolute;
top:100%;
left:0px;
z-index:-1;
opacity:0;
transition:opacity linear 0.15s;
box-shadow: 0px 2px 3px rgba(0,0,0,0.2);
background:#FFFFFF;
border-style: groove;
border-width: 5px;
border-color: #000000;
}
.sub-menu li {
display:block;
font-size:16px;
}
.sub-menu li a {
padding:10px 30px;
display:block;
}
.sub-menu li a:hover, .sub-menu .current-item a{
background:#FFFFFF;
}
/*END OF MENU TOOLBAR*/
#containerPicture {
width:62%;
margin-top: -31.7%;
margin-left: 18.6%;
padding: 0;
border: 5px groove #000;
}
#headerPicture {
background: yellow;
height:20%;
}
#container {
width: 62%;
margin-top:-0.5%;
margin-left: 18.6%;
padding: 0;
border: 5px groove #000;
}
#header {
background: blue;
height: 50%;
}
I would like to state that I have used a drop down menu provided by Seb Kay. His website: http://inspirationalpixels.com/tutorials/creating-a-dropdown-menu-with-html-css. I only state this as a reference so that he is at least acknowledged for his craftsmanship.
Your problem comes from the vertical margin and padding rules in your css. This is a little counterintuitive but this rules, when defined with percentage, doesn't take as reference the height, but instead they take the width as reference, so all 4 margins are equal. Example:
If you have: margin: 5%, the top and left margin are the same and they don't depend on the height of the conteiner for the top and bottom margins and the with for the right and left.
For padding it is the same.
So, my solution: if you don't really need a percentage layout, I recomend you to use ems for the vertical margins and paddings. Otherwise, if you need to mantain proportions, you can use vh units. The vh units are like a percentage that refers not to the height of the parent but the height of the window, so it is great to mantain proportions on a page when you want to avoid scrolling and yet keep percentage.
I wonder if someone can help me. This is my first site, and although I have tried to solve as many problems for myself as I can, I have reached a point where I am staring at the screen dribbling at the mouth hitting the refresh key hoping by magic it will resolve itself.
The problem is that although the site seems to work fine in FF, Chrome and IE9+, in versions of IE8 and below, the horizontal navigation bar is invisible. There is a gap where it should be, and the links do work, but the sprite images are not visible.
This site is not yet online so unfortunately I cant give you a link to it, only code.
I do apologise if there is a glaringly obvious and simple answer that Ive been too stupid to spot.
Thankyou for your time.
Jon
<!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" />
<link rel="stylesheet" href="style.css" type="text/css" media="screen" />
<title>Alan J. Warde Chartered Surveyor</title>
</head>
<body id="home">
<div id="wrap"><!--wrap starts-->
<img src="images/header.jpg" alt="header" />
<ul id="nav"><!--nav starts-->
<li class="home">Home</li>
<li class="about">About</li>
<li class="services">Services</li>
<li class="contact">Contact</li>
</ul><!--nav ends-->
<div id="main_content"><!--start of main_content-->
<div id="sidebar"><!--start of sidebar-->
<div class="listbox"><!--start of listbox-->
<div class="inner_sidebar">
<ul>
<li>Building Surveys</li>
<li>Valuations</li>
<li>Structural Engineering</li>
<li>Quantity Surveying</li>
<li>Loss Adjusting</li>
</ul>
</div><!--end of inner_sidebar-->
</div><!--end of listbox-->
</div><!--end of sidebar-->
<div id="homecontent"><!--start of Homecontent-->
<div id="inner_content"><!--start of inner_content-->
<h1>A J Warde Chartered Surveyor</h1>
<p>CONTENT</p>
<div id="contact"><!--start of contact-->
<p><img src="images/phone1.png" alt="phone" style="float:left;" />CONTENT</p>
</div><!--end of contact-->
</div><!--end of inner_content-->
</div><!--end of Homecontent-->
</div><!--end of main_content-->
<div id="footer">
<div id="footer_inside">
Registered Company 055012
<ul id="footer_nav"><!--nav starts-->
<li class="home">Home</li>
<li class="about">About</li>
<li class="services">Services</li>
<li class="contact">Contact</li>
</ul><!--nav ends-->
</div><!--end of Footer-inside-->
</div><!--end of footer-->
</div><!--wrap ends-->
</body>
</html>
#charset "utf-8";
/* CSS Document */
/*RESETS AND BASIC SETUP*/
* {margin:0; padding:0;}
html {overflow-y:scroll; overflow: -moz-scrollbars-vertical; }
body {
font: 62.5% "Times New Roman", Times, serif;
background-color: #322e2e;
}
/*TYPOGRAPHY*/
h1 {
padding:10px 0 20px 0;
text-align:center;
font-size:2.4em;
color:#003399;
text-shadow:1px 1px #69F;
}
h2 {
padding:5px 0 5px 0;
text-align:center;
font-size:1.1em;
color:#003399;
text-shadow:1px 1px #69F;
}
/*BASIC ELEMENT STYLING*/
ul {list-style:none inside;}
p {font-size:1.8em; line-height:1.2em; margin-bottom:1.2em; font-weight:bold; color:#333;}
a {outline:none;}
a {text-decoration:none;}
a img {border:none;}
/*END RESET*/
/*STRUCTURE AND THINGS*/
#wrap {
width:995px; /*for IE*/
margin:auto;
background:url(images/content.jpg)repeat-y;
}
html>body #wrap { /*IE hack*/
width:975px;
}
#main_content {
padding:0;
}
#homecontent {
background:url(images/contentimg.jpg) no-repeat;
height:478px;
width:633px;
float:right;
margin-right:12px; /*pushes div closer to left*/
margin-top:2px;
position:relative;
}
#servicescontent {
background:url(images/servicesnewbg.jpg) no-repeat;
height:478px;
width:633px;
float:right;
margin-right:12px; /*pushes div closer to left*/
margin-top:2px;
position:relative;
}
#inner_content {
padding:20px;
position:relative;
}
#contact { /*this is just to centre-align the contact details on home page*/
position:absolute;
left:150px;
width: 330px;
text-align:center;
}
#contact p {
color:#0000FF;
}
#left_col {
border:1px solid red;
float:left;
height:478px;
width:313px;
margin-left:15px; /*pushes div closer to right*/
margin-top:20px;
position:relative;
}
#contactdetails {
position:absolute;
left:50px;
}
#sidebar {
float:left;
background:url(images/sidebar.jpg) no-repeat;
height:478px;
width:313px;
margin-left:15px; /*pushes div closer to right*/
}
.inner_sidebar {
padding:20px 0 80px 0px;
font-size:1.4em;
}
.listbox {
width:230px;
margin-left:10px;
}
.inner_sidebar ul li {
font-size:1.4em;
padding:5px;
margin:5px 0 45px 5px;
font-weight:bold;
color:#FFF;
border:1px solid #FFF;
border-radius:3px;
background-color:rgba(0, 0, 25, 0.5);
}
/*TOP OF PAGE NAVIGATION*/
ul#nav {
}
ul#nav li {
display:inline;
}
ul#nav li a {
display:block;
height:54px;
text-indent:-9999px;
float:left;
}
ul#nav li.home a {
width:404px;
background:url(images/homenav.jpg)top center no-repeat;
}
ul#nav li.about a {
width:160px;
background:url(images/aboutnav.jpg)top center no-repeat;
}
ul#nav li.services a {
width:160px;
background:url(images/servicesnav.jpg)top center no-repeat;
}
ul#nav li.contact a {
width:251px;
background:url(images/contactnav.jpg)top center no-repeat;
}
ul#nav li a:hover {
background-position: center center;
}
body#home li.home a, body#about li.about a, body#services li.services a, body#contact li.contact a {
background-position: bottom center;
}
/*FOOTER*/
#footer {
height:96px;
background:url(images/footer.jpg) no-repeat;
clear:both;
}
#footer_inside {
text-align:center;
width:500px;
margin:auto;
padding:10px 0 0 0;
color:#CCCCCC;
font-size:1.4em;
}
ul#footer_nav li {
display:inline;
padding:0px;
margin:0px;
}
ul#footer_nav li a {
color:white;
text-decoration:none;
padding:0 10px;
border-right:1px solid white;
line-height:25px;
}
ul#footer_nav li:last-child a { /*last child selector to remove last border seperator*/
border:none;
}
Looks like you need to put spaces between the url() and top on each background property.
Lower version IEs have 'hasLayout' attribute that is only in IE.
You could find out about it.
ul#nav {
/* set width and height */
}
I think this might works.
How to create a fixed header like Twitter/Facebook on the top of the page ?
I am testing with this but when I am resizing my browser, complete design distorted
<div id="head">
<div id="logo">
</div>
<div style="display:inline;">
<input style="margin-top:3px;" class="searchbox" type="text"/>
</div>
<ul>
<li>
Home
<li>
<li>
Profile
</li>
<li>
Actions
</li>
<li>
Invite Friends
</li>
</ul>
</div>
<div id="content">
</div>
Style
html {
height:100%; /* fix height to 100% for IE */
max-height:100%; /* fix height for other browsers */
padding:0; /*remove padding */
margin:0; /* remove margins */
background:#fff; /*color background - only works in IE */
/* hide overflow:hidden from IE5/Mac */
/* \*/
overflow:hidden; /*get rid of scroll bars in IE */
/* */
}
body {
height:100%;
max-height:100%;
min-width:960px;
overflow:hidden;
padding:0;
margin:0;
font: 13px/1.5 Helvetica Neue,Arial,Helvetica,'Liberation Sans',FreeSans,sans-serif;
}
#content {
display:block;
height:100%;
max-height:100%;
overflow:auto;
position:relative;
z-index:3;
word-wrap:break-word;
top:45px;
}
#head {
position:absolute;
margin:0;
top:0;
display:block;
width:100%;
height:40px;
-moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
background:#333333;
background: -moz-linear-gradient(center top , #736F6E, #111111) repeat scroll 0 0 transparent;
}
#logo a {
background: url("2.gif") no-repeat scroll 6px 2px transparent;
color: #FFFFFF;
display: block;
height: 100%;
margin-right: 5px;
outline: medium none;
text-indent: -9999px;
width: 140px;
float:left;
}
.searchbox{
-moz-border-radius: 4px 4px 4px 4px;
-moz-box-shadow: 0 1px 0 #444444;
background: none repeat scroll 0 0 #666666;
border: 1px solid black;
color: #CCCCCC;
font: 13px Arial,sans-serif;
padding: 6px 5px 4px 26px;
width: 215px;
float:right;
}
.searchbox:focus {
background: none repeat scroll 0 0 #eeeeee;
border: 1px solid #999999;
}
#head ul {
margin:0;
padding:0;
background:transparent;
height:100%;
margin-left:60px;
padding-left:660px;
padding-top:10px;
}
#head ul li { display:inline;}
#head ul li a { padding-left:10px; color:#BABABA; text-decoration:none;}
#head ul li a:hover { color:#FFFFFF; }
Edit
Sample
http://jsfiddle.net/zerotoinfinite2006/tTmSH/embedded/result/
Your #head element needs to have fixed positioning to make it float at the top. This will make it stay at the top all of the time. Try using this
#head {
position:fixed;
margin:0px;
top:0px;
left:0px;
display:block;
width:100%;
height:40px;
-moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
background:#333333;
background: -moz-linear-gradient(center top , #736F6E, #111111) repeat scroll 0 0 transparent;
}
Take a look at Twitter's bootstrap:
http://twitter.github.com/bootstrap/#navigation
You might be better just reusing it.
The HTML:
<!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" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>WebSpeaks.in</title>
</head>
<body>
<div id="head">
<div id="logo">
</div>
<form style="display:inline;">
<input style="margin-top:3px;" class="searchbox" type="text"/>
</form>
<ul>
<li>
Home
<li>
<li>
Profile
</li>
<li>
Messages
</li>
<li>
Who To Follow
</li>
</ul>
</div>
<div id="content">
<div>
<table>
<tr>
<td>How to hide 'Add Item' button in Magento Backend Grid</td>
</tr>
<tr>
<td>Learn Simple Method Chaining in PHP </td>
</tr>
<tr>
<td>Create Simple Paint Canvas using JavaScript</td>
</tr>
<tr>
<td>Quickview: My First Magento Extension</td>
</tr>
<tr>
<td>Disabling Right Click on Web Page/DIV, Disabling Text Copy From a Web Page</td>
</tr>
<tr>
<td>Google like Instant Preview using jQuery & base64 Image Encoding in PHP</td>
</tr>
<tr>
<td>Stylish Bubbly Image Gallery with jQuery</td>
</tr>
<tr>
<td>Image Zoom Effect with jQuery</td>
</tr>
</table>
</div>
</div>
</body>
</html>
The CSS:
html {
height:100%; /* fix height to 100% for IE */
max-height:100%; /* fix height for other browsers */
padding:0; /*remove padding */
margin:0; /* remove margins */
border:0; /* remove borders */
background:#fff; /*color background - only works in IE */
/* hide overflow:hidden from IE5/Mac */
/* \*/
overflow:hidden; /*get rid of scroll bars in IE */
/* */
}
body {
height:100%;
max-height:100%;
overflow:hidden;
padding:0;
margin:0;
border:0;
font: 13px/1.5 Helvetica Neue,Arial,Helvetica,'Liberation Sans',FreeSans,sans-serif;
}
#content {
display:block;
height:100%;
max-height:100%;
overflow:auto;
padding-left:100px;
position:relative;
z-index:3;
word-wrap:break-word;
top:45px;
}
#head {
position:absolute;
margin:0;
top:0;
display:block;
width:100%;
height:40px;
-moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
background:#333333;
background: -moz-linear-gradient(center top , #333333, #111111) repeat scroll 0 0 transparent;
}
#logo a {
background: url("twitter_logo_right.png") no-repeat scroll 20px 9px transparent;
color: #FFFFFF;
display: block;
height: 40px;
margin-right: 5px;
outline: medium none;
text-indent: -9999px;
width: 140px;
float:left;
}
.searchbox{
-moz-border-radius: 4px 4px 4px 4px;
-moz-box-shadow: 0 1px 0 #444444;
background: none repeat scroll 0 0 #666666;
border: 1px solid black;
color: #CCCCCC;
font: 13px Arial,sans-serif;
padding: 6px 25px 4px 6px;
width: 215px;
float:left;
}
.searchbox:focus {
background: none repeat scroll 0 0 #eeeeee;
border: 1px solid #999999;
}
#head ul {
margin:0;
padding:0;
background:transparent;
height:100%;
margin-left:60px;
padding-left:60px;
padding-top:10px;
}
#head ul li { display:inline;}
#head ul li a { padding-left:20px; color:#BABABA; text-decoration:none;}
#head ul li a:hover { color:#FFFFFF; }
table tr td{height:100px; width:300px; -moz-border-radius:12px; background-color:#C6C6C6; margin:botton:30px;}
table tr td a{color: #007B9F; font-size:1.5em; text-decoration:none;}