The forum of the forums
Welcome to the Official Support Forum of Forumotion!

To take full advantage of everything offered by our forum, please log in if you are already a member, or join our community if you've not yet.



Create a free forum like this one.

Html code problem!

View previous topic View next topic Go down

Html code problem!

Post by venu238 on June 4th 2011, 6:14 pm

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

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(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: 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(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>

<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>

venu238
Forumember

Male Posts : 109
Reputation : 0
Language : English
Location : Hyderabad

http://medico.forum.com.bz

Back to top Go down

Re: Html code problem!

Post by kirk on June 7th 2011, 12:05 am

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.

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 Razz

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

Male Posts : 11037
Reputation : 651
Language : English,Vulcan,Klingon, Romulan,& Gorn

Back to top Go down

Re: Html code problem!

Post by venu238 on June 7th 2011, 5:04 am

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

venu238
Forumember

Male Posts : 109
Reputation : 0
Language : English
Location : Hyderabad

http://medico.forum.com.bz

Back to top Go down

Re: Html code problem!

Post by kirk on June 7th 2011, 5:17 am

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?




kirk
Forumaster

Male Posts : 11037
Reputation : 651
Language : English,Vulcan,Klingon, Romulan,& Gorn

Back to top Go down

Re: Html code problem!

Post by venu238 on June 7th 2011, 9:58 am

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!!

venu238
Forumember

Male Posts : 109
Reputation : 0
Language : English
Location : Hyderabad

http://medico.forum.com.bz

Back to top Go down

Re: Html code problem!

Post by venu238 on June 8th 2011, 11:19 am

bump

venu238
Forumember

Male Posts : 109
Reputation : 0
Language : English
Location : Hyderabad

http://medico.forum.com.bz

Back to top Go down

View previous topic View next topic Back to top


 
Permissions in this forum:
You cannot reply to topics in this forum