Home1
Html code problem!! Sat Jun 04, 2011 10:21 pm
venu238
Registered Member
Posts : 13
Points : 13
Age : 35
Location : Hyderabad, AP, India
Browser :
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>
