Html code problem!
2 posters
Page 1 of 1
Html code problem!
In my html page, description cell below the submenu moved towards right and it's looking ugly
please help me to correct its position
And how to lower the "info grid" it is overlayed on navigation bar..
here is my html page code, you can understand my problem if you see it
please help me to correct its position
And how to lower the "info grid" it is overlayed on navigation bar..
here is my html page code, you can understand my problem if you see it
- Spoiler:
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js'></script>
<script type='text/javascript' src='http://css-tricks.com/examples/InfoGrid/js/infogrid.js'></script>
<style type="text/css">
body {
font: normal .8em/1.5em Arial, Helvetica, sans-serif, Georgia, serif;
background: transparent url(https://2img.net/r/ihimizer/img813/7752/13071862771.png) no-repeat 270px 20px;
width: 900px;
margin: 100px auto;
color: #666;
}
a {
color: #333;
}
#nav {
margin: 0;
padding: 7px 6px 0;
position: absolute;
top: 180px;
left: 180px;
background: #00aad4 url(http://www.webdesignerwall.com/demo/css3-dropdown-menu/img/gradient.png) repeat-x 0 -110px;
line-height: 100%;
border-radius: 1.5em;
-webkit-border-radius: 1.5em;
-moz-border-radius: 1.5em;
-webkit-box-shadow: 0 1px 3px rgba(0,0,0, .4);
-moz-box-shadow: 0 1px 3px rgba(0,0,0, .4);
}
#nav li {
margin: 0 5px;
padding: 0 0 8px;
float: left;
position: relative;
list-style: none;
}
/* main level link */
#nav a {
font-weight: bold;
color: #fff;
text-decoration: none;
display: block;
padding: 8px 20px;
margin: 0;
-webkit-border-radius: 1em;
-moz-border-radius: 1em;
text-shadow: 0 1px 1px rgba(0,0,0, .3);
}
#nav a:hover {
background: #000;
color: #fff;
}
/* main level link hover */
#nav .current a, #nav li:hover > a {
background: #fff url(http://www.webdesignerwall.com/demo/css3-dropdown-menu/img/gradient.png) repeat-x 0 -40px;
color: #000;
border-top: solid 1px #f8f8f8;
-webkit-box-shadow: 0 1px 1px rgba(0,0,0, .2);
-moz-box-shadow: 0 1px 1px rgba(0,0,0, .2);
box-shadow: 0 1px 1px rgba(0,0,0, .2);
text-shadow: 0 1px 0 rgba(255,255,255, 1);
}
/* sub levels link hover */
#nav ul li:hover a, #nav li:hover li a {
background: none;
border: none;
color: #000;
-webkit-box-shadow: none;
-moz-box-shadow: none;
}
#nav ul a:hover {
background: #00aad4 url(http://www.webdesignerwall.com/demo/css3-dropdown-menu/img/gradient.png) repeat-x 0 -100px !important;
color: #fff !important;
-webkit-border-radius: 0;
-moz-border-radius: 0;
text-shadow: 0 1px 1px rgba(0,0,0, .1);
}
/* dropdown */
#nav li:hover > ul {
display: block;
}
/* level 2 list */
#nav ul {
display: none;
margin: 0;
padding: 0;
width: 185px;
position: absolute;
top: 35px;
left: 0;
background: #ddd url(http://www.webdesignerwall.com/demo/css3-dropdown-menu/img/gradient.png) repeat-x 0 0;
border: solid 1px #b4b4b4;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
-webkit-box-shadow: 0 1px 3px rgba(0,0,0, .3);
-moz-box-shadow: 0 1px 3px rgba(0,0,0, .3);
box-shadow: 0 1px 3px rgba(0,0,0, .3);
}
#nav ul li {
float: none;
margin: 0;
padding: 0;
}
#nav ul a {
font-weight: normal;
text-shadow: 0 1px 0 #fff;
}
/* level 3+ list */
#nav ul ul {
left: 181px;
top: -3px;
}
/* rounded corners of first and last link */
#nav ul li:first-child > a {
-webkit-border-top-left-radius: 9px;
-moz-border-radius-topleft: 9px;
-webkit-border-top-right-radius: 9px;
-moz-border-radius-topright: 9px;
}
#nav ul li:last-child > a {
-webkit-border-bottom-left-radius: 9px;
-moz-border-radius-bottomleft: 9px;
-webkit-border-bottom-right-radius: 9px;
-moz-border-radius-bottomright: 9px;
}
/* clearfix */
#nav:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}
#nav {
display: inline-block;
}
html[xmlns] #nav {
display: block;
}
* html #nav {
height: 1%;
}
#page-wrap
.info-col { float: left; width: 132px; height: 100%; padding: 50px 0 0 0; }
.info-col h2 { text-align: center; font-weight: normal; padding: 25px 0; }
.image { height: 250px; text-indent: -9999px; display: block; border-right: 1px solid white; }
.India { background: url(https://2img.net/r/ihimizer/img831/6615/73188570.jpg) center center no-repeat; }
.Vehicles { background: url(https://2img.net/r/ihimizer/img706/1681/proximacar2jpg450295.jpg) center center no-repeat; }
.Medical { background: url(https://2img.net/r/ihimizer/img190/230/001medicalillustrationj.jpg) center center no-repeat; }
.Animals { background: url(https://2img.net/r/ihimizer/img805/9932/bird1wallpaper1024x7688.jpg) center center no-repeat; }
.Games { background: url(https://2img.net/r/ihimizer/img24/8479/gamejpg21001575.jpg) center center no-repeat; }
dt { padding: 5px; background: #900; color: white; border-bottom: 1px solid white; border-right: 1px solid white; }
dd { position: absolute; left: -9999px; top: -9999px; width: 299px; background: #900; padding: 10px; color: white; border-right: 1px solid white; }
dt:nth-of-type(1) { background: #004455; }
dd:nth-of-type(1) { background: #004455; }
dt:nth-of-type(2) { background: #0088aa; }
dd:nth-of-type(2) { background: #0088aa; }
dt:nth-of-type(3) { background: #00aad4; }
dd:nth-of-type(3) { background: #00aad4; }
dt:nth-of-type(4) { background: #5fbcd3; }
dd:nth-of-type(4) { background: #5fbcd3; }
dt:nth-of-type(5) { background: #216778; }
dd:nth-of-type(5) { background: #216778; }
dt:nth-of-type(6) { background: #164450; }
dd:nth-of-type(6) { background: #164450; }
.curCol { -moz-box-shadow: 0 0 10px rgba(0,0,0,0.2); -webkit-box-shadow: 0 0 10px rgba(0,0,0,0.2); z-index: 1; position: relative; }
</style>
</head>
<body>
<div>
<ul id="nav">
<li class="current"><a href="">Home</a></li>
<li><a href="">Forum</a>
<li><a href="">Medical</a>
<ul>
<li><a href="">Pre-Clinical</a>
<ul>
<li><a href="">Anatomy</a></li>
<li><a href="">Physiology</a></li>
<li><a href="">Bio-Chemistry</a></li>
</ul>
</li>
<li><a href="">Para-Clinical</a>
<ul>
<li><a href=""></a> Pharmacology</li>
<li><a href=""></a> Microbiology</li>
<li><a href=""></a> Pathology</li>
</ul>
</li>
<li><a href="">Clinical</a></li>
</ul>
</li>
<li><a href="#">Animals</a>
<ul>
<li><a href="#">Birds</a>
<ul>
<li><a href="#">Sub-Level Item</a></li>
<li><a href="#">Sub-Level Item</a>
<ul>
<li><a href="#">Sub-Level Item</a></li>
<li><a href="#">Sub-Level Item</a></li>
<li><a href="#">Sub-Level Item</a></li>
</ul>
</li>
<li><a href="#">Sub-Level Item</a></li>
</ul>
</li>
<li><a href="#">Mammals</a></li>
<li><a href="#">Reptiles</a></li>
<li><a href="#">Fishes</a>
<ul>
<li><a href="#">Sub-Level Item</a></li>
<li><a href="#">Sub-Level Item</a></li>
<li><a href="#">Sub-Level Item</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#">India</a></li>
<li><a href="#">Vehicles</a></li>
<li><a href="#">Games</a></li>
</ul>
</div>
<div id="page-wrap">
<div class="info-col">
<h2>India</h2>
<a class="image India" href="">View Image</a>
<dl>
<dt>sub menu</dt>
<dd>How to get rid of this cell misalignment.. how to position it correctly</dd>
<dt>sub menu</dt>
<dd>How to get rid of this cell misalignment.. how to position it correctly</dd>
<dt>sub menu</dt>
<dd>How to get rid of this cell misalignment.. how to position it correctly</dd>
<dt>sub menu</dt>
<dd>How to get rid of this cell misalignment.. how to position it correctly</dd>
<dt>sub menu</dt>
<dd>How to get rid of this cell misalignment.. how to position it correctly</dd>
<dt>sub menu</dt>
<dd>How to get rid of this cell misalignment.. how to position it correctly</dd>
</dl>
</div>
<div class="info-col">
<h2>Vehicles</h2>
<a class="image Vehicles" href="">View Image</a>
<dl>
<dt>sub menu</dt>
<dd>How to get rid of this cell misalignment.. how to position it correctly</dd>
<dt>sub menu</dt>
<dd>How to get rid of this cell misalignment.. how to position it correctly</dd>
<dt>sub menu</dt>
<dd>How to get rid of this cell misalignment.. how to position it correctly</dd>
<dt>sub menu</dt>
<dd>How to get rid of this cell misalignment.. how to position it correctly</dd>
<dt>sub menu</dt>
<dd>How to get rid of this cell misalignment.. how to position it correctly</dd>
<dt>sub menu</dt>
<dd>How to get rid of this cell misalignment.. how to position it correctly</dd>
</dl>
</div>
<div class="info-col">
<h2>Medical</h2>
<a class="image Medical" href="">View Image</a>
<dl>
<dt id="starter">sub menu</dt>
<dd>How to get rid of this cell misalignment.. how to position it correctly</dd>
<dt>sub menu</dt>
<dd>How to get rid of this cell misalignment.. how to position it correctly</dd>
<dt>sub menu</dt>
<dd>How to get rid of this cell misalignment.. how to position it correctly</dd>
<dt>sub menu</dt>
<dd>How to get rid of this cell misalignment.. how to position it correctly</dd>
<dt>sub menu</dt>
<dd>How to get rid of this cell misalignment.. how to position it correctly</dd>
<dt>sub menu</dt>
<dd>How to get rid of this cell misalignment.. how to position it correctly</dd>
</dl>
</div>
<div class="info-col">
<h2>Animals</h2>
<a class="image Animals" href="">View Image</a>
<dl>
<dt>sub menu</dt>
<dd>How to get rid of this cell misalignment.. how to position it correctly</dd>
<dt>sub menu</dt>
<dd>How to get rid of this cell misalignment.. how to position it correctly</dd>
<dt>sub menu</dt>
<dd>How to get rid of this cell misalignment.. how to position it correctly</dd>
<dt>sub menu</dt>
<dd>How to get rid of this cell misalignment.. how to position it correctly</dd>
<dt>sub menu</dt>
<dd>How to get rid of this cell misalignment.. how to position it correctly</dd>
<dt>sub menu</dt>
<dd>How to get rid of this cell misalignment.. how to position it correctly</dd>
</dl>
</div>
<div class="info-col">
<h2>Games</h2>
<a class="image Games" href="">View Image</a>
<dl>
<dt>sub menu</dt>
<dd>How to get rid of this cell misalignment.. how to position it correctly</dd>
<dt>sub menu</dt>
<dd>How to get rid of this cell misalignment.. how to position it correctly</dd>
<dt>sub menu</dt>
<dd>How to get rid of this cell misalignment.. how to position it correctly</dd>
<dt>sub menu</dt>
<dd>How to get rid of this cell misalignment.. how to position it correctly</dd>
<dt>sub menu</dt>
<dd>How to get rid of this cell misalignment.. how to position it correctly</dd>
<dt>sub menu</dt>
<dd>How to get rid of this cell misalignment.. how to position it correctly</dd>
</dl>
</div>
</div>
</body>
</html>
Re: Html code problem!
man that is one crazy sub menu if i ever seen one.. lol
So what you want the center thing removed?
Or do you want it somewhere else?
info added
yeah your going to have to explain exactly how you want this lined up
is this any closer? there are a few ways.so explain the best you can and i will try to get it right for you.
and why is this in every sub menu.
How to get rid of this cell misalignment.. how to position it correctly
i find it do be rather annoying... lol
where do you want it positioned?
you may want to start with creating new table and cells for the sub menus,
They way you have it in the code is just all messed up, i cant seem to get it right.
i wpuld postion the images the way you want them, then add the tables for the sub menus under that, unless you want them in the same table. there is a number of ways you can create it.. so i will help with what i can, but once again your going to have to explain how you want it and if you have any screen shots or links that will help as well.
so may be use this and then build the table/cells below all of this top content.
or you can add the images and links and use this,
the images will have to be re-sized to 161px X 274px
then once the images are added you can remove the border.
It's up to you, i dont have time to create the whole thing, but hopefully this will help you in the right direction.
http://www.forumsuccessors.com/h90-new-page-test-thingy
info added again
heheh the sky is the limit with some of this stuff,
I was just toying around with your images and did some flash.
you can use if you want, all you would have to do is add your links and titles.
Unless your trying for something different, either way I'll give you a hand if i can help.
But this is a lil silly
http://www.forumsuccessors.com/h91-new-page-test-thingy-2-with-flash
hey wait???
are all those boxes( sub menus ) actually supposed to be part of the drop down spy menu?
if so what i did is way off, and i think you will need to host a java file that needs to be added to the script?
Let me know.
So what you want the center thing removed?
Or do you want it somewhere else?
info added
yeah your going to have to explain exactly how you want this lined up
is this any closer? there are a few ways.so explain the best you can and i will try to get it right for you.
- Code:
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js'></script>
<script type='text/javascript' src='http://css-tricks.com/examples/InfoGrid/js/infogrid.js'></script>
<style type="text/css">
body {
font: normal .8em/1.5em Arial, Helvetica, sans-serif, Georgia, serif;
background: transparent url(http://img813.imageshack.us/img813/7752/13071862771.png) no-repeat 270px 20px;
width: 900px;
margin: 100px auto;
color: #666;
}
a {
color: #333;
}
#nav {
margin: 0;
padding: 7px 6px 0;
position: absolute;
top: 186px;
left: 225px;
background: #00aad4 url(http://www.webdesignerwall.com/demo/css3-dropdown-menu/img/gradient.png) repeat-x 0 -110px;
line-height: 100%;
border-radius: 1.5em;
-webkit-border-radius: 1.5em;
-moz-border-radius: 1.5em;
-webkit-box-shadow: 0 1px 3px rgba(0,0,0, .4);
-moz-box-shadow: 0 1px 3px rgba(0,0,0, .4);
}
#nav li {
margin: 0 5px;
padding: 0 0 8px;
float: left;
position: relative;
list-style: none;
}
/* main level link */
#nav a {
font-weight: bold;
color: #fff;
text-decoration: none;
display: block;
padding: 8px 20px;
margin: 0;
-webkit-border-radius: 1em;
-moz-border-radius: 1em;
text-shadow: 0 1px 1px rgba(0,0,0, .3);
}
#nav a:hover {
background: #000;
color: #fff;
}
/* main level link hover */
#nav .current a, #nav li:hover > a {
background: #fff url(http://www.webdesignerwall.com/demo/css3-dropdown-menu/img/gradient.png) repeat-x 0 -40px;
color: #000;
border-top: solid 1px #f8f8f8;
-webkit-box-shadow: 0 1px 1px rgba(0,0,0, .2);
-moz-box-shadow: 0 1px 1px rgba(0,0,0, .2);
box-shadow: 0 1px 1px rgba(0,0,0, .2);
text-shadow: 0 1px 0 rgba(255,255,255, 1);
}
/* sub levels link hover */
#nav ul li:hover a, #nav li:hover li a {
background: none;
border: none;
color: #000;
-webkit-box-shadow: none;
-moz-box-shadow: none;
}
#nav ul a:hover {
background: #00aad4 url(http://www.webdesignerwall.com/demo/css3-dropdown-menu/img/gradient.png) repeat-x 0 -100px !important;
color: #fff !important;
-webkit-border-radius: 0;
-moz-border-radius: 0;
text-shadow: 0 1px 1px rgba(0,0,0, .1);
}
/* dropdown */
#nav li:hover > ul {
display: block;
}
/* level 2 list */
#nav ul {
display: none;
margin: 0;
padding: 0;
width: 185px;
position: absolute;
top: 35px;
left: 0;
background: #ddd url(http://www.webdesignerwall.com/demo/css3-dropdown-menu/img/gradient.png) repeat-x 0 0;
border: solid 1px #b4b4b4;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
-webkit-box-shadow: 0 1px 3px rgba(0,0,0, .3);
-moz-box-shadow: 0 1px 3px rgba(0,0,0, .3);
box-shadow: 0 1px 3px rgba(0,0,0, .3);
}
#nav ul li {
float: none;
margin: 0;
padding: 0;
}
#nav ul a {
font-weight: normal;
text-shadow: 0 1px 0 #fff;
}
/* level 3+ list */
#nav ul ul {
left: 181px;
top: -3px;
}
/* rounded corners of first and last link */
#nav ul li:first-child > a {
-webkit-border-top-left-radius: 9px;
-moz-border-radius-topleft: 9px;
-webkit-border-top-right-radius: 9px;
-moz-border-radius-topright: 9px;
}
#nav ul li:last-child > a {
-webkit-border-bottom-left-radius: 9px;
-moz-border-radius-bottomleft: 9px;
-webkit-border-bottom-right-radius: 9px;
-moz-border-radius-bottomright: 9px;
}
/* clearfix */
#nav:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}
#nav {
display: inline-block;
}
html[xmlns] #nav {
display: block;
}
* html #nav {
height: 1%;
}
#page-wrap
.info-col { float: left; width: 132px; height: 100%; padding: 50px 0 0 0; }
.info-col h2 { text-align: center; font-weight: normal; padding: 25px 0; }
.image { height: 250px; text-indent: -9999px; display: block; border-right: 1px solid white; }
.India { background: url(http://img831.imageshack.us/img831/6615/73188570.jpg) center center no-repeat; }
.Vehicles { background: url(http://img706.imageshack.us/img706/1681/proximacar2jpg450295.jpg) center center no-repeat; }
.Medical { background: url(http://img190.imageshack.us/img190/230/001medicalillustrationj.jpg) center center no-repeat; }
.Animals { background: url(http://img805.imageshack.us/img805/9932/bird1wallpaper1024x7688.jpg) center center no-repeat; }
.Games { background: url(http://img24.imageshack.us/img24/8479/gamejpg21001575.jpg) center center no-repeat; }
dt { padding: 5px; background: #900; color: white; border-bottom: 1px solid white; border-right: 1px solid white; }
dd { position: absolute; left: -9999px; top: -9999px; width: 299px; background: #900; padding: 10px; color: white; border-right: 1px solid white; }
dt:nth-of-type(1) { background: #004455; }
dd:nth-of-type(1) { background: #004455; }
dt:nth-of-type(2) { background: #0088aa; }
dd:nth-of-type(2) { background: #0088aa; }
dt:nth-of-type(3) { background: #00aad4; }
dd:nth-of-type(3) { background: #00aad4; }
dt:nth-of-type(4) { background: #5fbcd3; }
dd:nth-of-type(4) { background: #5fbcd3; }
dt:nth-of-type(5) { background: #216778; }
dd:nth-of-type(5) { background: #216778; }
dt:nth-of-type(6) { background: #164450; }
dd:nth-of-type(6) { background: #164450; }
.curCol { -moz-box-shadow: 0 0 10px rgba(0,0,0,0.2); -webkit-box-shadow: 0 0 10px rgba(0,0,0,0.2); z-index: 1; position: relative; }
</style>
</head>
<body>
<p><br>
</p>
<div>
<ul id="nav">
<li class="current"><a href="">Home</a></li>
<li><a href="">Forum</a>
<li><a href="">Medical</a>
<ul>
<li><a href="">Pre-Clinical</a>
<ul>
<li><a href="">Anatomy</a></li>
<li><a href="">Physiology</a></li>
<li><a href="">Bio-Chemistry</a></li>
</ul>
</li>
<li><a href="">Para-Clinical</a>
<ul>
<li><a href=""></a> Pharmacology</li>
<li><a href=""></a> Microbiology</li>
<li><a href=""></a> Pathology</li>
</ul>
</li>
<li><a href="">Clinical</a></li>
</ul>
</li>
<li><a href="#">Animals</a>
<ul>
<li><a href="#">Birds</a>
<ul>
<li><a href="#">Sub-Level Item</a></li>
<li><a href="#">Sub-Level Item</a>
<ul>
<li><a href="#">Sub-Level Item</a></li>
<li><a href="#">Sub-Level Item</a></li>
<li><a href="#">Sub-Level Item</a></li>
</ul>
</li>
<li><a href="#">Sub-Level Item</a></li>
</ul>
</li>
<li><a href="#">Mammals</a></li>
<li><a href="#">Reptiles</a></li>
<li><a href="#">Fishes</a>
<ul>
<li><a href="#">Sub-Level Item</a></li>
<li><a href="#">Sub-Level Item</a></li>
<li><a href="#">Sub-Level Item</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#">India</a></li>
<li><a href="#">Vehicles</a></li>
<li><a href="#">Games</a></li>
</ul>
</div>
<div class="info-col">
<h2> </h2>
<a class="image India" href="">View Ima</a>
<dl>
<dt>sub menu</dt>
<dd>How to get rid of this cell misalignment.. how to position it correctly</dd>
<dt>sub menu</dt>
<dd>How to get rid of this cell misalignment.. how to position it correctly</dd>
<dt>sub menu</dt>
<dd>How to get rid of this cell misalignment.. how to position it correctly</dd>
<dt>sub menu</dt>
<dd>How to get rid of this cell misalignment.. how to position it correctly</dd>
<dt>sub menu</dt>
<dd>How to get rid of this cell misalignment.. how to position it correctly</dd>
<dt>sub menu</dt>
<dd>How to get rid of this cell misalignment.. how to position it correctly</dd>
</dl>
</div>
<div class="info-col">
<h2> </h2>
<a class="image Vehicles" href="">View Image</a>
<dl>
<dt>sub menu</dt>
<dd>How to get rid of this cell misalignment.. how to position it correctly</dd>
<dt>sub menu</dt>
<dd>How to get rid of this cell misalignment.. how to position it correctly</dd>
<dt>sub menu</dt>
<dd>How to get rid of this cell misalignment.. how to position it correctly</dd>
<dt>sub menu</dt>
<dd>How to get rid of this cell misalignment.. how to position it correctly</dd>
<dt>sub menu</dt>
<dd>How to get rid of this cell misalignment.. how to position it correctly</dd>
<dt>sub menu</dt>
<dd>How to get rid of this cell misalignment.. how to position it correctly</dd>
</dl>
</div>
<div class="info-col">
<h2> </h2>
<a class="image Medical" href="">View Image</a></div>
<div class="info-col">
<h2> </h2>
<a class="image Animals" href="">View Image</a>
<dl>
<dt>sub menu</dt>
<dd>How to get rid of this cell misalignment.. how to position it correctly</dd>
<dt>sub menu</dt>
<dd>How to get rid of this cell misalignment.. how to position it correctly</dd>
<dt>sub menu</dt>
<dd>How to get rid of this cell misalignment.. how to position it correctly</dd>
<dt>sub menu</dt>
<dd>How to get rid of this cell misalignment.. how to position it correctly</dd>
<dt>sub menu</dt>
<dd>How to get rid of this cell misalignment.. how to position it correctly</dd>
<dt>sub menu</dt>
<dd>How to get rid of this cell misalignment.. how to position it correctly</dd>
</dl>
</div>
<div class="info-col">
<h2> </h2>
<a class="image Games" href="">View Image</a>
<dl>
<dt>sub menu</dt>
<dd>How to get rid of this cell misalignment.. how to position it correctly</dd>
<dt>sub menu</dt>
<dd>How to get rid of this cell misalignment.. how to position it correctly</dd>
<dt>sub menu</dt>
<dd>How to get rid of this cell misalignment.. how to position it correctly</dd>
<dt>sub menu</dt>
<dd>How to get rid of this cell misalignment.. how to position it correctly</dd>
<dt>sub menu</dt>
<dd>How to get rid of this cell misalignment.. how to position it correctly</dd>
<dt>sub menu</dt>
<dd>How to get rid of this cell misalignment.. how to position it correctly</dd>
</dl>
</div>
</div>
</body>
</html>
and why is this in every sub menu.
How to get rid of this cell misalignment.. how to position it correctly
i find it do be rather annoying... lol
where do you want it positioned?
you may want to start with creating new table and cells for the sub menus,
They way you have it in the code is just all messed up, i cant seem to get it right.
i wpuld postion the images the way you want them, then add the tables for the sub menus under that, unless you want them in the same table. there is a number of ways you can create it.. so i will help with what i can, but once again your going to have to explain how you want it and if you have any screen shots or links that will help as well.
so may be use this and then build the table/cells below all of this top content.
- Code:
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js'></script>
<script type='text/javascript' src='http://css-tricks.com/examples/InfoGrid/js/infogrid.js'></script>
<style type="text/css">
body {
font: normal .8em/1.5em Arial, Helvetica, sans-serif, Georgia, serif;
background: transparent url(http://img813.imageshack.us/img813/7752/13071862771.png) no-repeat 270px 20px;
width: 900px;
margin: 100px auto;
color: #666;
}
a {
color: #333;
}
#nav {
margin: 0;
padding: 7px 6px 0;
position: absolute;
top: 165px;
left: 226px;
background: #00aad4 url(http://www.webdesignerwall.com/demo/css3-dropdown-menu/img/gradient.png) repeat-x 0 -110px;
line-height: 100%;
border-radius: 1.5em;
-webkit-border-radius: 1.5em;
-moz-border-radius: 1.5em;
-webkit-box-shadow: 0 1px 3px rgba(0,0,0, .4);
-moz-box-shadow: 0 1px 3px rgba(0,0,0, .4);
}
#nav li {
margin: 0 5px;
padding: 0 0 8px;
float: left;
position: relative;
list-style: none;
}
/* main level link */
#nav a {
font-weight: bold;
color: #fff;
text-decoration: none;
display: block;
padding: 8px 20px;
margin: 0;
-webkit-border-radius: 1em;
-moz-border-radius: 1em;
text-shadow: 0 1px 1px rgba(0,0,0, .3);
}
#nav a:hover {
background: #000;
color: #fff;
}
/* main level link hover */
#nav .current a, #nav li:hover > a {
background: #fff url(http://www.webdesignerwall.com/demo/css3-dropdown-menu/img/gradient.png) repeat-x 0 -40px;
color: #000;
border-top: solid 1px #f8f8f8;
-webkit-box-shadow: 0 1px 1px rgba(0,0,0, .2);
-moz-box-shadow: 0 1px 1px rgba(0,0,0, .2);
box-shadow: 0 1px 1px rgba(0,0,0, .2);
text-shadow: 0 1px 0 rgba(255,255,255, 1);
}
/* sub levels link hover */
#nav ul li:hover a, #nav li:hover li a {
background: none;
border: none;
color: #000;
-webkit-box-shadow: none;
-moz-box-shadow: none;
}
#nav ul a:hover {
background: #00aad4 url(http://www.webdesignerwall.com/demo/css3-dropdown-menu/img/gradient.png) repeat-x 0 -100px !important;
color: #fff !important;
-webkit-border-radius: 0;
-moz-border-radius: 0;
text-shadow: 0 1px 1px rgba(0,0,0, .1);
}
/* dropdown */
#nav li:hover > ul {
display: block;
}
/* level 2 list */
#nav ul {
display: none;
margin: 0;
padding: 0;
width: 185px;
position: absolute;
top: 35px;
left: 0;
background: #ddd url(http://www.webdesignerwall.com/demo/css3-dropdown-menu/img/gradient.png) repeat-x 0 0;
border: solid 1px #b4b4b4;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
-webkit-box-shadow: 0 1px 3px rgba(0,0,0, .3);
-moz-box-shadow: 0 1px 3px rgba(0,0,0, .3);
box-shadow: 0 1px 3px rgba(0,0,0, .3);
}
#nav ul li {
float: none;
margin: 0;
padding: 0;
}
#nav ul a {
font-weight: normal;
text-shadow: 0 1px 0 #fff;
}
/* level 3+ list */
#nav ul ul {
left: 181px;
top: -3px;
}
/* rounded corners of first and last link */
#nav ul li:first-child > a {
-webkit-border-top-left-radius: 9px;
-moz-border-radius-topleft: 9px;
-webkit-border-top-right-radius: 9px;
-moz-border-radius-topright: 9px;
}
#nav ul li:last-child > a {
-webkit-border-bottom-left-radius: 9px;
-moz-border-radius-bottomleft: 9px;
-webkit-border-bottom-right-radius: 9px;
-moz-border-radius-bottomright: 9px;
}
/* clearfix */
#nav:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}
#nav {
display: inline-block;
}
html[xmlns] #nav {
display: block;
}
* html #nav {
height: 1%;
}
#page-wrap
.info-col { float: left; width: 132px; height: 100%; padding: 50px 0 0 0; }
.info-col h2 { text-align: center; font-weight: normal; padding: 25px 0; }
.image { height: 250px; text-indent: -9999px; display: block; border-right: 1px solid white; }
.India { background: url(http://img831.imageshack.us/img831/6615/73188570.jpg) center center no-repeat; }
.Vehicles { background: url(http://img706.imageshack.us/img706/1681/proximacar2jpg450295.jpg) center center no-repeat; }
.Medical { background: url(http://img190.imageshack.us/img190/230/001medicalillustrationj.jpg) center center no-repeat; }
.Animals { background: url(http://img805.imageshack.us/img805/9932/bird1wallpaper1024x7688.jpg) center center no-repeat; }
.Games { background: url(http://img24.imageshack.us/img24/8479/gamejpg21001575.jpg) center center no-repeat; }
dt { padding: 5px; background: #900; color: white; border-bottom: 1px solid white; border-right: 1px solid white; }
dd { position: absolute; left: -9999px; top: -9999px; width: 299px; background: #900; padding: 10px; color: white; border-right: 1px solid white; }
dt:nth-of-type(1) { background: #004455; }
dd:nth-of-type(1) { background: #004455; }
dt:nth-of-type(2) { background: #0088aa; }
dd:nth-of-type(2) { background: #0088aa; }
dt:nth-of-type(3) { background: #00aad4; }
dd:nth-of-type(3) { background: #00aad4; }
dt:nth-of-type(4) { background: #5fbcd3; }
dd:nth-of-type(4) { background: #5fbcd3; }
dt:nth-of-type(5) { background: #216778; }
dd:nth-of-type(5) { background: #216778; }
dt:nth-of-type(6) { background: #164450; }
dd:nth-of-type(6) { background: #164450; }
.curCol { -moz-box-shadow: 0 0 10px rgba(0,0,0,0.2); -webkit-box-shadow: 0 0 10px rgba(0,0,0,0.2); z-index: 1; position: relative; }
</style>
</head>
<body>
<center>
<div>
<ul id="nav">
<li class="current"><a href="">Home</a></li>
<li><a href="">Forum</a>
<li><a href="">Medical</a>
<ul>
<li><a href="">Pre-Clinical</a>
<ul>
<li><a href="">Anatomy</a></li>
<li><a href="">Physiology</a></li>
<li><a href="">Bio-Chemistry</a></li>
</ul>
</li>
<li><a href="">Para-Clinical</a>
<ul>
<li><a href=""></a> Pharmacology</li>
<li><a href=""></a> Microbiology</li>
<li><a href=""></a> Pathology</li>
</ul>
</li>
<li><a href="">Clinical</a></li>
</ul>
</li>
<li><a href="#">Animals</a>
<ul>
<li><a href="#">Birds</a>
<ul>
<li><a href="#">Sub-Level Item</a></li>
<li><a href="#">Sub-Level Item</a>
<ul>
<li><a href="#">Sub-Level Item</a></li>
<li><a href="#">Sub-Level Item</a></li>
<li><a href="#">Sub-Level Item</a></li>
</ul>
</li>
<li><a href="#">Sub-Level Item</a></li>
</ul>
</li>
<li><a href="#">Mammals</a></li>
<li><a href="#">Reptiles</a></li>
<li><a href="#">Fishes</a>
<ul>
<li><a href="#">Sub-Level Item</a></li>
<li><a href="#">Sub-Level Item</a></li>
<li><a href="#">Sub-Level Item</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#">India</a></li>
<li><a href="#">Vehicles</a></li>
<li><a href="#">Games</a></li>
</ul>
</div>
<div id="page-wrap">
</div>
</center>
</body>
</html>
or you can add the images and links and use this,
the images will have to be re-sized to 161px X 274px
then once the images are added you can remove the border.
It's up to you, i dont have time to create the whole thing, but hopefully this will help you in the right direction.
http://www.forumsuccessors.com/h90-new-page-test-thingy
- Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type"
content="text/html; charset=UTF-8">
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script type="text/javascript"
src="http://css-tricks.com/examples/InfoGrid/js/infogrid.js"></script>
<style type="text/css">
body {
font: normal .8em/1.5em Arial, Helvetica, sans-serif, Georgia, serif;
background: transparent url(http://img813.imageshack.us/img813/7752/13071862771.png) no-repeat 270px 20px;
width: 900px;
margin: 100px auto;
color: #666;
}
a {
color: #333;
}
#nav {
margin: 0;
padding: 7px 6px 0;
position: absolute;
top: 165px;
left: 226px;
background: #00aad4 url(http://www.webdesignerwall.com/demo/css3-dropdown-menu/img/gradient.png) repeat-x 0 -110px;
line-height: 100%;
border-radius: 1.5em;
-webkit-border-radius: 1.5em;
-moz-border-radius: 1.5em;
-webkit-box-shadow: 0 1px 3px rgba(0,0,0, .4);
-moz-box-shadow: 0 1px 3px rgba(0,0,0, .4);
}
#nav li {
margin: 0 5px;
padding: 0 0 8px;
float: left;
position: relative;
list-style: none;
}
/* main level link */
#nav a {
font-weight: bold;
color: #fff;
text-decoration: none;
display: block;
padding: 8px 20px;
margin: 0;
-webkit-border-radius: 1em;
-moz-border-radius: 1em;
text-shadow: 0 1px 1px rgba(0,0,0, .3);
}
#nav a:hover {
background: #000;
color: #fff;
}
/* main level link hover */
#nav .current a, #nav li:hover > a {
background: #fff url(http://www.webdesignerwall.com/demo/css3-dropdown-menu/img/gradient.png) repeat-x 0 -40px;
color: #000;
border-top: solid 1px #f8f8f8;
-webkit-box-shadow: 0 1px 1px rgba(0,0,0, .2);
-moz-box-shadow: 0 1px 1px rgba(0,0,0, .2);
box-shadow: 0 1px 1px rgba(0,0,0, .2);
text-shadow: 0 1px 0 rgba(255,255,255, 1);
}
/* sub levels link hover */
#nav ul li:hover a, #nav li:hover li a {
background: none;
border: none;
color: #000;
-webkit-box-shadow: none;
-moz-box-shadow: none;
}
#nav ul a:hover {
background: #00aad4 url(http://www.webdesignerwall.com/demo/css3-dropdown-menu/img/gradient.png) repeat-x 0 -100px !important;
color: #fff !important;
-webkit-border-radius: 0;
-moz-border-radius: 0;
text-shadow: 0 1px 1px rgba(0,0,0, .1);
}
/* dropdown */
#nav li:hover > ul {
display: block;
}
/* level 2 list */
#nav ul {
display: none;
margin: 0;
padding: 0;
width: 185px;
position: absolute;
top: 35px;
left: 0;
background: #ddd url(http://www.webdesignerwall.com/demo/css3-dropdown-menu/img/gradient.png) repeat-x 0 0;
border: solid 1px #b4b4b4;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
-webkit-box-shadow: 0 1px 3px rgba(0,0,0, .3);
-moz-box-shadow: 0 1px 3px rgba(0,0,0, .3);
box-shadow: 0 1px 3px rgba(0,0,0, .3);
}
#nav ul li {
float: none;
margin: 0;
padding: 0;
}
#nav ul a {
font-weight: normal;
text-shadow: 0 1px 0 #fff;
}
/* level 3+ list */
#nav ul ul {
left: 181px;
top: -3px;
}
/* rounded corners of first and last link */
#nav ul li:first-child > a {
-webkit-border-top-left-radius: 9px;
-moz-border-radius-topleft: 9px;
-webkit-border-top-right-radius: 9px;
-moz-border-radius-topright: 9px;
}
#nav ul li:last-child > a {
-webkit-border-bottom-left-radius: 9px;
-moz-border-radius-bottomleft: 9px;
-webkit-border-bottom-right-radius: 9px;
-moz-border-radius-bottomright: 9px;
}
/* clearfix */
#nav:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}
#nav {
display: inline-block;
}
html[xmlns] #nav {
display: block;
}
* html #nav {
height: 1%;
}
#page-wrap
.info-col { float: left; width: 132px; height: 100%; padding: 50px 0 0 0; }
.info-col h2 { text-align: center; font-weight: normal; padding: 25px 0; }
.image { height: 250px; text-indent: -9999px; display: block; border-right: 1px solid white; }
.India { background: url(http://img831.imageshack.us/img831/6615/73188570.jpg) center center no-repeat; }
.Vehicles { background: url(http://img706.imageshack.us/img706/1681/proximacar2jpg450295.jpg) center center no-repeat; }
.Medical { background: url(http://img190.imageshack.us/img190/230/001medicalillustrationj.jpg) center center no-repeat; }
.Animals { background: url(http://img805.imageshack.us/img805/9932/bird1wallpaper1024x7688.jpg) center center no-repeat; }
.Games { background: url(http://img24.imageshack.us/img24/8479/gamejpg21001575.jpg) center center no-repeat; }
dt { padding: 5px; background: #900; color: white; border-bottom: 1px solid white; border-right: 1px solid white; }
dd { position: absolute; left: -9999px; top: -9999px; width: 299px; background: #900; padding: 10px; color: white; border-right: 1px solid white; }
dt:nth-of-type(1) { background: #004455; }
dd:nth-of-type(1) { background: #004455; }
dt:nth-of-type(2) { background: #0088aa; }
dd:nth-of-type(2) { background: #0088aa; }
dt:nth-of-type(3) { background: #00aad4; }
dd:nth-of-type(3) { background: #00aad4; }
dt:nth-of-type(4) { background: #5fbcd3; }
dd:nth-of-type(4) { background: #5fbcd3; }
dt:nth-of-type(5) { background: #216778; }
dd:nth-of-type(5) { background: #216778; }
dt:nth-of-type(6) { background: #164450; }
dd:nth-of-type(6) { background: #164450; }
.curCol { -moz-box-shadow: 0 0 10px rgba(0,0,0,0.2); -webkit-box-shadow: 0 0 10px rgba(0,0,0,0.2); z-index: 1; position: relative; }
</style>
</head>
<body style="color: white; background-color: rgb(255, 255, 255);"
alink="white" link="white" vlink="white">
<center>
<div>
<ul id="nav">
<li class="current"><a href="">Home</a></li>
<li><a href="">Forum</a>
</li>
<li><a href="">Medical</a>
<ul>
<li><a href="">Pre-Clinical</a>
<ul>
<li><a href="">Anatomy</a></li>
<li><a href="">Physiology</a></li>
<li><a href="">Bio-Chemistry</a></li>
</ul>
</li>
<li><a href="">Para-Clinical</a>
<ul>
<li> Pharmacology</li>
<li> Microbiology</li>
<li> Pathology</li>
</ul>
</li>
<li><a href="">Clinical</a></li>
</ul>
</li>
<li><a href="#">Animals</a>
<ul>
<li><a href="#">Birds</a>
<ul>
<li><a href="#">Sub-Level Item</a></li>
<li><a href="#">Sub-Level Item</a>
<ul>
<li><a href="#">Sub-Level Item</a></li>
<li><a href="#">Sub-Level Item</a></li>
<li><a href="#">Sub-Level Item</a></li>
</ul>
</li>
<li><a href="#">Sub-Level Item</a></li>
</ul>
</li>
<li><a href="#">Mammals</a></li>
<li><a href="#">Reptiles</a></li>
<li><a href="#">Fishes</a>
<ul>
<li><a href="#">Sub-Level Item</a></li>
<li><a href="#">Sub-Level Item</a></li>
<li><a href="#">Sub-Level Item</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#">India</a></li>
<li><a href="#">Vehicles</a></li>
<li><a href="#">Games</a></li>
</ul>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
</div>
</center>
<table
style="width: 833px; height: 278px; text-align: left; margin-left: auto; margin-right: auto;"
border="1" cellpadding="1" cellspacing="1">
<tbody>
<tr>
<td style="vertical-align: top;"><span
style="color: black;">image 1</span></td>
<td style="vertical-align: top;"><span
style="color: black;">image 2</span></td>
<td style="vertical-align: top;"><span
style="color: black;">image 3</span></td>
<td style="vertical-align: top;"><span
style="color: black;">image 4</span></td>
<td style="vertical-align: top;"><span
style="color: black;">image 5</span></td>
</tr>
</tbody>
</table>
<table
style="width: 838px; height: 214px; text-align: left; margin-left: auto; margin-right: auto;"
border="0" cellpadding="0" cellspacing="1">
<tbody>
<tr style="color: white;">
<td style="text-align: center;"><span
style="color: black;">Title 1</span></td>
<td style="text-align: center;"><span
style="color: black;">Title 2</span></td>
<td style="text-align: center;"><span
style="color: black;">Title 3</span></td>
<td style="text-align: center;"><span
style="color: black;">Title 4</span></td>
<td style="text-align: center;"><span
style="color: black;">Title 5</span></td>
</tr>
<tr>
<td
style="text-align: center; color: white; background-color: rgb(51, 102, 102);">1</td>
<td
style="background-color: rgb(51, 102, 102); text-align: center; color: white;">2</td>
<td
style="background-color: rgb(51, 102, 102); text-align: center; color: white;">3</td>
<td
style="background-color: rgb(51, 102, 102); text-align: center; color: white;">4</td>
<td
style="background-color: rgb(51, 102, 102); text-align: center; color: white;">5</td>
</tr>
<tr>
<td
style="background-color: rgb(51, 153, 153); text-align: center;">6<br>
</td>
<td
style="background-color: rgb(51, 153, 153); text-align: center;">7</td>
<td
style="background-color: rgb(51, 153, 153); text-align: center;">8</td>
<td
style="background-color: rgb(51, 153, 153); text-align: center;">9</td>
<td
style="background-color: rgb(51, 153, 153); text-align: center;">0</td>
</tr>
<tr>
<td
style="background-color: rgb(0, 204, 204); text-align: center;">A</td>
<td
style="background-color: rgb(0, 204, 204); text-align: center;">B</td>
<td
style="background-color: rgb(0, 204, 204); text-align: center;">C</td>
<td
style="background-color: rgb(0, 204, 204); text-align: center;">D</td>
<td
style="background-color: rgb(0, 204, 204); text-align: center;">E</td>
</tr>
<tr>
<td
style="background-color: rgb(37, 151, 189); text-align: center;">F</td>
<td
style="background-color: rgb(37, 151, 189); text-align: center;">G</td>
<td
style="background-color: rgb(37, 151, 189); text-align: center;">H</td>
<td
style="background-color: rgb(37, 151, 189); text-align: center;">I</td>
<td
style="background-color: rgb(37, 151, 189); text-align: center;">J</td>
</tr>
<tr>
<td
style="background-color: rgb(51, 153, 153); text-align: center;">K</td>
<td
style="background-color: rgb(51, 153, 153); text-align: center;">L</td>
<td
style="background-color: rgb(51, 153, 153); text-align: center;">M</td>
<td
style="background-color: rgb(51, 153, 153); text-align: center;">N</td>
<td
style="background-color: rgb(51, 153, 153); text-align: center;">O</td>
</tr>
<tr>
<td
style="background-color: rgb(0, 102, 0); text-align: center;">P</td>
<td
style="background-color: rgb(0, 102, 0); text-align: center;">Q</td>
<td
style="background-color: rgb(0, 102, 0); text-align: center;">R</td>
<td
style="background-color: rgb(0, 102, 0); text-align: center;">S</td>
<td
style="background-color: rgb(0, 102, 0); text-align: center;">T</td>
</tr>
</tbody>
</table>
<br>
</body>
</html>
info added again
heheh the sky is the limit with some of this stuff,
I was just toying around with your images and did some flash.
you can use if you want, all you would have to do is add your links and titles.
Unless your trying for something different, either way I'll give you a hand if i can help.
But this is a lil silly
http://www.forumsuccessors.com/h91-new-page-test-thingy-2-with-flash
hey wait???
are all those boxes( sub menus ) actually supposed to be part of the drop down spy menu?
if so what i did is way off, and i think you will need to host a java file that needs to be added to the script?
Let me know.
kirk- Forumaster
- Posts : 11037
Reputation : 653
Language : English,Vulcan,Klingon, Romulan,& Gorn
Re: Html code problem!
thanks for replying kirk..
The above code is just a demo..i didn't name the submenu items
i want exactly
like this example
and i want to place it below navigation bar
The above code is just a demo..i didn't name the submenu items
i want exactly
like this example
and i want to place it below navigation bar
Re: Html code problem!
oh??? wow yea that changes everything... lol
well what? all the give you is the source code and no directions?
it dont help me much with the code being in some other language?
i'll have to look at your first code again and see if i can figure something out?
well what? all the give you is the source code and no directions?
it dont help me much with the code being in some other language?
i'll have to look at your first code again and see if i can figure something out?
kirk- Forumaster
- Posts : 11037
Reputation : 653
Language : English,Vulcan,Klingon, Romulan,& Gorn
Re: Html code problem!
sorry for giving all the source code
Code for "info grid":
infogrid.js in head tag
in style sheet everything below #page wrap belongs to "info grid"
there is no problem with "info grid" code alone, but when i include the code with total html page then it is messing up!!
Code for "info grid":
infogrid.js in head tag
in style sheet everything below #page wrap belongs to "info grid"
there is no problem with "info grid" code alone, but when i include the code with total html page then it is messing up!!
Page 1 of 1
Permissions in this forum:
You cannot reply to topics in this forum