I have a nav with five buttons that display on top of each other. I have set the height set to the height of just one of the buttons and my overflow set to visible. The four buttons display on top of the div I have below my nav like they should. However, these buttons move elements within my div down and don't display on top of them. If you're confused, you can see what I mean with my JSFiddle link at the bottom of this post.
What I want is for the last four buttons in my nav to overlap anything below it without offsetting it.
Here's my html:
<body>
<div id="mobile"></div>
<nav>
<ul id='nav'>
<li><icon><img src="images/home-icon.png"></icon>Home</li>
<li><icon><img src="images/skills-icon.png"></icon>Skillsets</li>
<li><icon><img src="images/gallery-icon.png"></icon>Gallery</li>
<li><icon><img src="images/about-icon.png"></icon>About</li>
<li></icon>Contact</li>
</ul>
</nav>
<div id="main">
<h1>Test</h1>
<h2>Test</h2>
<p>Test</p>
</div>
</body>
And here's my CSS:
/***
Style sheet template for all web sites
****/
/*Fix display for old browsers*/
header, nav, footer, section, article, aside{
display:block;
}
/*Reset Browser Defaults*/
body, div, header, nav, footer, section, article, aside, h1, h2, h3, h4, h5, h6, p, ul, ol, li{
margin:0;
padding:0;
}
body{
background-color:#fff;
color:#000;
font-size:14px;
font-family:Arial;
text-decoration:none;
}
/*CSS properties for document*/
header{
padding:2%;
position:relative;
margin:0 0 0px 0;
color:rgba(255, 255, 255, .9);
}
header h1{
font-size:64px;
}
header div#mobile{
height:0px;
display:block;
}
#logo_div{
min-height:84%;
min-width:26%;
max-height:84%;
max-width:26%;
position:relative;
margin-bottom:1%;
}
#logo_div img{
position:absolute;
top:0;
left:0;
float:right;
-moz-border-radius:4px;
-webkit-border-radius:4px;
border-radius:4px;
display:block;
height:100%;
}
img.logo{
z-index:99;
border:2px solid black;
}
header img.logo:hover {
opacity: .8 !important;
border:2px solid darkgray;
}
nav{
background-color:rgba(195, 165, 131, .0);
text-align:justify;
margin:auto;
width:94%;
height:27px;
overflow:visible;
float:none;
margin-top:2%;
margin-bottom:2%;
position:relative;
font:Calibri, 'Asul', serif, "Times New Roman", Times;
font-size:.7em;
-moz-box-sizing:borderbox;
-webkit-box-sizing:borderbox;
box-sizing:borderbox;
z-index:10;
}
nav ul{
height:27px;
overflow:visible;
}
nav ul li{
list-style-type:none;
}
nav a{
width:100%;
height:27px;
margin:0;
padding:0;
float:left;
-moz-box-sizing:border-box;
-wbkit- box-sizing:border-box;
box-sizing:border-box;
border-top: 1px solid #d4b873;
background: #d6ba65;
background: -webkit-gradient(linear, left top, left bottom, from(#8c7738), to(#d6ba65));
background: -webkit-linear-gradient(top, #8c7738, #d6ba65);
background: -moz-linear-gradient(top, #8c7738, #d6ba65);
background: -ms-linear-gradient(top, #8c7738, #d6ba65);
background: -o-linear-gradient(top, #8c7738, #d6ba65);
padding:0;
text-shadow: rgba(0,0,0,.4) 0 1px 0;
color: white;
font-size: 2em;
font-family: Georgia, serif;
text-decoration: none;
vertical-align: middle;
text-align: left;
text-align:left;
-moz-box-sizing:borderbox;
-webkit-box-sizing:borderbox;
box-sizing:borderbox;
border:none;
}
nav a:hover{
background: #785a28;
color: #ccc;
}
nav a:active{
border-top-color: #5c441b;
background: #5c441b;
}
icon{
display:inline-block;
vertical-align:top;
margin-right:10px;
padding:0;
position:relative;
height:100%;
width:27px;
background-color:rgba(255, 255, 255, .4);
}
icon img{
width:60%;
margin:20%;
}
#main{
background-color:red;
width:100%;
float:none;
margin:auto;
padding:20px;
text-align:justify;
-moz-box-sizing:border-box;
-wbkit- box-sizing:border-box;
box-sizing:border-box;
}
div#main img{
width:320px;
margin-top:15px;
}
#main h1{
background-color:red;
}
#main h2{
background-color:green;
margin:5px 10px -5px 4px;
color:#444;
}
div#main h3{
font-size:16px;
}
#main p{
background-color:blue;
margin:10px 2%;
font-size:14px;
}
#main ul li{
list-style-type:disc;
margin:0px 0px 4px 36px;
font-size: 15px;
}
#main ul li a{
text-decoration:none;
}
Here's a JSFiddle
If you were looking to keep the nav in the same position as your original fiddle, apply the position absolute to the ul element and not the nav element. you would also need to set a width to the ul element.
nav ul{
height:27px;
overflow:visible;
position:absolute;
width: 100%;
}
fiddle
Whenever you want an element to overlap another element, a few things have to be true:
The overlapping element (in this case, the nav tag) needs to have position: absolute;
The parent of the overlapping element needs to have position: relative;
Fixed up JSFiddle
Related
I was wondering if anyone could help me with an issue I'm having. I wanted the text "Liam's Digital Portfolio" to be in the centre of the webpage at the top in line with the navigation bar text. In addition, I then wanted the navigation bar to be on the far right hand corner as shown within the codepen link http://codepen.io/ldocherty1/pen/qRowVK.
I have only started programming and this is my second day and really want to improve, apologies if the code is not in the correct structure.
Below is my HTML code, within the codepen is my CSS if needed.
<div id="Navagationbar">
<ul>
<li><b>HomePage</b></li>
<li><b>Portfolio</b></li>
<li><b>Contact Us</b></li>
<li><b><center>Liam's Digital Portfolio<center></b></li>
</ul>
</div>
</body>
</html>
Thanks,
Liam.
I wish you all the best with your coding journey :) I will give you an easy solution to get the desired effect. First off, cut the padding-top from the body in the css:
padding-top: 180px;
Now from your html, remove
<li><b><center>Liam's Digital Portfolio<center></b></li>
Since this is your page title, it is standard practice to have it inside of h1 tags. Then we can center it with simple css. The html will look like this:
<h1 class="title">Liam's Digital Portfolio</h1>
<div id="Navagationbar">
<ul>
<li><b>HomePage</b></li>
<li><b>Portfolio</b></li>
<li><b>Contact Us</b></li>
</ul>
</div>
And now we can simply add this to the css
.title{text-align:center;}
With the padding-top removed and this added, the title will be in the center of the page inline with the navigation bar. I see you have a lot of issues with your css so I suggest you go through a good tutorial, like this one from w3schools http://www.w3schools.com/css/ . I hope this helps, and good luck!
Make the HTML changes as below
<ul>
<li><b>HomePage</b></li>
<li><b>Portfolio</b></li>
<li><b>Contact Us</b></li>
<li style="position:absolute;right:45%"><b>Liam's Digital Portfolio</b></li>
</ul>
CSS changes as below
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
h1 {
font-family:Arial;
color:white;
font-size:10pt;
text-align:center;
}
li a:hover:not(.active) {
background-color:grey;
}
#Navagationbar {
font-family:Arial;
color:white;
font-size:10pt;
text-align:center;
}
#Navagationbar ul {
list-style:none;
float:right;
margin:0;
padding:0;
}
#Navagationbar ul li {
display:block;
list-style:none;
margin:0;
padding:0;
}
#Navagationbar ul li a {
display:block;
margin:0 0 0 1px;
padding:3px 10px;
color:white;;
text-decoration:none;
line-height:1.3em;
}
#Navagationbar ul li a:hover {
color:white;
}
#Navagationbar ul li a.active,
#Navagationbar ul li a.active:hover {
color:white;
}
body {
margin:0;
}
.page{
min-height:-590px;
background:linear-gradient(45deg, #999, #FFF);
}
#footer{
list-style:none inside none;
margin:0;
padding:0;
position:fixed;
right:0;
bottom:0;
left:0;
height:50px;
background-color:#1f1f1f;
font-size:0;
}
#footer li {
font-family:Arial;
float: right;
color:white;
font-size:10pt;
display:inline-block;
text-align:center;
height:50px;
padding:0 20px;
line-height:3.3;
border-right:1px solid #000;
border-left:1px solid #333;
}
#footer li {
font-family:Arial;
float: left;
color:white;
font-size:10pt;
display:inline-block;
text-align:center;
height:50px;
padding:0 20px;
line-height:3.3;
border-right:1px solid #000;
border-left:1px solid #333;
}
#footer li:last-child {
border-right:0;
}
body {
background:url('https://static.pexels.com/photos/34088/pexels-photo.jpg');
position:static;
height:400px;
background-attachment:fixed;
background-repeat:no-repeat;
background-size:cover;
}
I'm using the following codes (HTML and CSS) and by using the code you are unable to scroll up or down the page via mouse scroll or within the browser (Scroll bar on the right is not there)
HTML:
<div id="head">
<div id="logo">
</div>
<form style="display:inline;">
<input style="margin-top:3px;" class="searchbox" type="text"/>
</form>
<ul>
<li>
Searh
<li>
<li>
FAQ
</li>
<li>
Links
</li>
<li>
Legal
</li>
</ul>
</div>
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;}
If you are able to help could you please use Code examples on how to fix it please :)
EDIT: Example / Code Editor = http://jsfiddle.net/BctHr/
Check your css:
overflow:hidden; /* get rid of scroll bars in IE */
for html, and for body
remove that line, or change to : overflow:scroll;
http://www.w3schools.com/cssref/pr_pos_overflow.asp
Overflow in the body should be auto or scroll.
and also because you have no content div
I have a problem regarding HTML and CSS.
Design include zig zag "border". Those zig-zag comes at the top and bottom of the page.
Between those borders is white paper. Paper must be under zig-zag borders.
Here is how it looks at the top of the page now:
And here is how it looks at the bottom of page:
Here is my HTML:
<div id="glava">
<div id="ogrodje-glava">
<div id="scr"></div>
<div id="rob-glave"></div>
<div id="logo"></div>
</div>
</div>
<div id="sredina">
<div id="ogrodje">
<div id="leva"></div>
<div id="desna">
<div class="vsebina"></div>
</div>
</div>
and here is my CSS:
#CHARSET "UTF-8";
h1, h2, h3, h4, h5, h6, p, body, td {margin:0; padding:0;}
body { font-family:"Palatino Linotype", "Book Antiqua", Palatino, serif ; background-color: #fff; background-image: url("../img/papir-ozadje.jpg"); background-repeat: repeat-all;}
td {font-size:13px; min-width:50px;}
table {padding-bottom:15px}
.clear {clear:both;}
a {text-decoration:none; color:#333}
#glava {background-image: url("../img/background-head.png");
background-repeat: repeat-x;
width:100%;
height:210px;
margin-top:10px;
}
#ogrodje-glava {width:1025px; margin: 0 auto; padding:0; height:210px; }
#noga {background-image: url("../img/background-noga.png");
background-repeat: repeat-x;
width:100%;
height:160px;
position:relative;
}
#crta {width:100%; border:1px solid white; position:absolute; top:15px;}
#logo { background-image: url("../img/logo.gif");
background-repeat: no-repeat; width:172px; height:172px;
margin-left:35px;
position:relative;
top:-10px;
}
#scr { background-image: url("../img/scr.gif");
background-repeat: no-repeat; width:817px; height:41px;
float:right; margin-top:85px;}
#rob-glave {width:800px; height:84px;
float:right;
/*background-image: url("../img/background-head2.gif");
background-repeat: repeat-x;*/
}
#sredina { width:100%; background-image: url("../img/ozadje-papir.jpeg");
background-repeat: repeat-y;}
#ogrodje {width:1030px; margin: 0 auto; min-height:750px; padding:0; /*border:1px solid black;*/}
#ogrodje #leva {width:230px; min-height:750px; /*border:1px solid black;*/ margin:0; padding:0; float:left;}
#ogrodje #desna {width:800px; min-height:750px; max-height:750px; /*border:1px solid green;*/ margin:0; padding:0;
background-color:#fff; float:left; overflow: auto; padding-bottom:10px; position:relative; }
.letnice {margin-top:20px; border-bottom:1px solid #828284; height:10px; margin-bottom:40px;}
.letnice ul {width:100%; margin: 0 auto; padding:0; margin:0; }
.item-106, .item-107, .item-108, .item-109, .item-110 { float:left; width:90px; list-style:none;
background-image: url("../img/letnica.png");
background-repeat: no-repeat; height:25px; text-align:center; margin-left:45px;
}
.item-110 {margin-left:70px;}
.texti { padding-left:10px;}
.jeziki ul {/*width:510px; height:30px; background-image: url("../img/jeziki-ozadje.jpg");
background-repeat: no-repeat; */ width:510px; height:30px;
background-color:#f1efe5; margin-left:70px; }
.jeziki li {float:left; width:123px; height:30px; }
.jeziki .item-102 { list-style-image: url("../img/english.gif"); padding-top:5px; padding-right:2px; }
.jeziki .item-103 { list-style-image: url("../img/france.gif"); padding-top:5px; padding-right:2px;}
.jeziki .item-104 { list-style-image: url("../img/english.gif"); padding-top:5px; padding-right:2px;}
.jeziki .item-105 { list-style-image: url("../img/france.gif"); padding-top:5px; padding-right:2px;}
.jeziki a {text-decoration:none; color:#666; font-size:13px; }
.jeziki .current a{color:#BE1E2D;}
.letnica p {text-decoration:none; color:#333; padding-top:5px; }
#galerija { height:750px; width:133px; margin:0 auto;}
#galerija .slika { width:133px; height:100px; float:left; margin-top:5px; border:8px solid white;}
#galerija .slika-h { visibility:hidden;}
.besedilo { padding:0px; margin:0px;}
.besedilo p {font-size:13px; }
.besedilo h1 {font-size:20px; color:#000; /*border:1px solid black;*/ text-transform:uppercase; padding-bottom:10px;}
.besedilo h2 {font-size:15px; color:#BE1E2D; /*border:1px solid blue;*/}
.besedilo h3 {font-size:13px; color:#000; font-style:italic;}
/** PROGRAMME ***/
h4 {font-size:25px; color:#000;} /* programme podnaslov */
/*.besedilo p {font-size:13px; }
.besedilo h1 {font-size:23px; color:#000; padding-top:15px; border:1px solid black;}
.besedilo h2 {font-size:19px; color:#000; border:1px solid blue;}
.besedilo h3 {font-size:16px; color:#BE1E2D; }
*/
#info {width:1030px; margin: 0 auto; height:150px; font-size:13px;}
#info .prazen {width:300px; height:145px; float:left;}
#info .info {width:200px; height:145px; float:left; padding-top:15px;}
#info .info2 {width:200px; height:145px; float:left; padding-top:15px;}
#info .info3 {width:200px; height:145px; float:left; padding-top:15px;}
#info .info h4 {background-image: url("../img/info-noga.gif"); background-repeat: no-repeat; height:30px; margin-top:5px;}
#info .info p {padding-left:15px;}
#info .info p .ime {font-style:italic; }
#info .info2 p .ime {font-style:italic; }
#info .info3 p .ime {font-style:italic; }
/***** JOOMLA *****/
.item-page {padding-left: 40px; padding-top:10px; padding-right: 70px; padding-bottom:10px;}
.item-page p {text-align:justify;}
.item-page hr { border:1px dotted #BE1E2D; margin-right:300px;}
.item-page .logo{margin:0 auto;}
.item-page .home {font-size:15px;}
Any suggestions how should I resolve problem?
Best regards
I think that what you're looking for is the z-index attribute.
http://www.w3schools.com/cssref/pr_pos_z-index.asp
Here is the page I am working on: http://www.sackling.com/new_arrivals.php
It seems to look good in all browsers except ie7.
I can't seem to figure out a way to make it work properly in all browsers it must be something with the way I am trying to stack my divs..
This is the important css:
#menuwrap {
width:940px;
height:84px;
position:relative;
z-index:99999;
}
.top_menu_container {height:60px;}
.menu_holder {width:980px; z-index:9999;}
.menu_right_bottom {width:220px; }
/*Menu Start */
.navtest{list-style:none;}
.navtest ul li {
display: block;
position: relative;
float: left;
cursor:pointer;
z-index:9999;
position:static;
}
.navtest ul li a {
text-transform:uppercase;
font-size: 11px;
display: block;
text-decoration: none;
color: #3F3F41;
padding: 5px 21px 5px 20px;
margin-left: 1px;
white-space: nowrap;
z-index:9999;
font-weight:normal;
text-shadow: 0px 1px 1px rgba(0,0,0,0.3);
}
.navtest ul li ul { opacity:0.80; width:141px; display:none; }
.navtest ul li:hover ul{ display: block; position: absolute; z-index:9999; }
.navtest ul li:hover li { float: none; z-index:9999;}
.navtest ul li:hover a { background: #fff; z-index:9999; color: #999; } /* main menu rollover color change */
.navtest ul li a:active {text-shadow: 0px 0px 0px rgba(0,0,0,0);} /*main menu click */
.navtest ul li:hover li a:hover { background: #c0c1c0; z-index:9999;} /*hover over background of dropdown */
.navtest ul li:hover ul li a {color:#000;} /* color of drop down on main rollover */
.top_buttons .navtest ul li a { font-size: 10px; } /* top menu row font */
*{margin:0; padding:0;}
body { margin: 0 auto; font-size: 13px; color: #333333; }
html, body { color: #000000; margin:0; padding:0; height:100%; font-family:"Lucida Grande","Lucida Sans Unicode","Lucida Sans","DejaVu Sans","Bitstream Vera Sans","Liberation Sans",Verdana,"Verdana Ref",sans-serif; }
.header_space { height: 15px;; clear: both; width:940px; margin:0 auto;}
.wrapper {width:940px; margin-left:20px; margin-right:20px; background:#fff; overflow:hidden; margin:0 auto; }
.container {min-height:100%; height: auto !important; height:100%; margin: 0 auto -25px; width:980px; background:URL(images/bg_sides.jpg) repeat-y #f4f4f4; }
.contentContainer {width:980px;}
.banner_listings {margin:0; padding:0; height:293px; width:940px;}
.category_product_style {padding:10px 0px 0px 13px;}
#account_content {background: url(/images/account_nav_bg.png) repeat-x left top; margin-top:35px;}
/* =Account nav */
#account_nav {margin-bottom:55px; margin-top:35px; background: url(/images/account_nav_bg.png) repeat-x left top; float: left; width: 180px;}
#account_nav h2, .table_legend h2, #account_credits h2 { font-size:125%;}
/***********header stuff ************************/
.styled-select {padding-top:6px;}
#searchwrapper {
width:246px; /*follow your image's size*/
height:26px;/*follow your image's size*/
background:#ccc;
background-repeat:no-repeat; /*important*/
padding:0px;
margin:0px;
position:relative; /*important*/
}
#searchwrapper form { display:inline ; }
.searchbox {
border:none; /*important*/
background-color:transparent; /*important*/
background-image:url(images/blank_search.gif);
position:absolute; /*important*/
top:7px;
left:9px;
width:225px;
height:14px;
color:#fff;
font-size:14px;
margin:0px;
}
.searchbox_submit {
border:none; /*important*/ /*important*/
background: url(images/searcharrow.jpg) no-repeat;
position:absolute; /*important*/
top:3px;
left:225px;
width:15px;
height:20px;
margin:0px;
}
Try removing all whitespaces within the ul's in the menu - IE7 renders 2 spaces just above the first menu.
EDIT: i think it's the redundant ul/li - try changing ul class"navtest" to div class="navtest", and remove the li in the left & right menu...
I believe your issue is with the ul#nav-test element. For some reason you have a ul nested within an li within a ul. Was this a mistake or have you done this for a reason?
See line 92 :
<ul class="navtest" >
<li>
<ul>
<li>Fall Catalog</li>
<li>Contact us</li>
</ul>
</li>
</ul>
Remove the additional ul and this will probably resolve your issue as IE7 is assigning a 16px offset from the top of the second ul.
So your HTML becomes:
<ul class="navtest" >
<li>Fall Catalog</li>
<li>Contact us</li>
</ul>
hey guys i'm trying to create a navigation system similar to the one you can find on starbucks.com. Here is the link to my sample: http://dl.dropbox.com/u/73992/js_tests/test.htm I am accomplishing the effect with navigation sample on the bottom but as you can see there are positioning problems. You can find the CSS in the source code. I figured this is the best way to test it. Thank you in advance for any help I can get it.
as per the suggestion here's the css
*
{
margin:0;
padding:0;
}
#nav
{
position:relative;
margin-top:3em;
margin-left:3em;
}
#nav ul
{
list-style-type:none;
}
#nav ul li
{
position:relative;
margin-top:10px;
}
#nav ul li ul li
{
margin-top:0px;
}
#nav ul li h1
{
font-size:15px;
font-weight:bold;
text-align:center;
color:#000000;
background-color:#F7FF88;
border:solid 5px black;
width:100px;
height:30px;
border-bottom:none;
z-index:20;
}
.content
{
position:relative;
width:300px;
background-color:#F7FF88;
border:solid 5px black;
}
.content form
{
display:block;
margin:10px 10px 10px 10px;
}
.content p
{
text-align:left;
display:block;
margin:10px 10px 10px 10px;
}
.gallery
{
margin:10px 10px 10px 10px;
background-color:#ffffff;
border:solid 1px black;
}
.gallery img
{
display:inline-block;
margin:10px 5px 10px 0px;
float:left;
}
/*
This next section is identical but represents what happens w/ the absolute positioning.
*/
.content2
{
position:absolute;
width:300px;
background-color:#F7FF88;
border:solid 5px black;
top:30px;
z-index:-5;
}
.content2 form
{
display:block;
margin:10px 10px 10px 10px;
}
.content2 p
{
text-align:left;
display:block;
margin:10px 10px 10px 10px;
}
.clear
{
clear:both;
}
if this helps this is what I am trying to accomplish
Give this a try. Change the position from absolute to relative, and remove the 30px top margin. You should be able to get the same effect as the 3 examples above yours.
.content2
{
position: relative;
width:300px;
background-color:#F7FF88;
border:solid 5px black;
z-index:-5;
}
[EDIT]
First off, remove the "border-bottom:none;" so your h1 will still have bottom borders for that tabbed effect.
#nav ul li h1
{
font-size:15px;
font-weight:bold;
text-align:center;
color:#000000;
background-color:#F7FF88;
border:solid 5px black;
width:100px;
height:30px;
z-index:20;
}
Give your h1 a class, let's say "tabbed"
<li><h1 class="tabbed">Ex. 1</h1>
And probably use some negatives for your CSS.
h1.tabbed {
position:absolute;
top:-28px;
}
Give this one a try.
Put display:inline; on li
And float:left; on ul
I think it's your big problem, if I had understand well your problem.
float : left can solve your positioning problem. You have to add just two lines in your css
#nav ul li {
float: left;
margin: 0 15px;
position: relative;
}