WebArtz - The Web Design Forum
Welcome to WebArtz, Guest!

WebArtz is a nice place for discussions related to web designing and coding. We help our members to code their own website templates with HTML and CSS. We give them advice on various issues.

To know more about WebArtz Forum, visit the About Us page.

At the moment, you are viewing the forum as a guest. As a guest you can't make post and participate in discussions. You need to register and become a member of the forum. Click the register link below and become a part of this forum.

Thank You


You are not connected. Please login or register

View previous topic View next topic Go down  Message [Page 1 of 1]

1 Html code problem!! on Sat Jun 04, 2011 10:21 pm

venu238


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

2 Re: Html code problem!! on Wed Jun 08, 2011 8:05 pm

Fatal Dawn


Registered Member
Registered Member
What I first saw:


Something I tested is by changing the left positioning.
Try changing the left value on the sumbenus from 0px to -40px:

Code:
<dd style="top: -1px; left: 0px; position: relative; ">How to get rid of this cell misalignment.. how to position it correctly</dd>

Code:
<dd style="top: -1px; left: -40px; position: relative; ">How to get rid of this cell misalignment.. how to position it correctly</dd>

Again another visual to compare to what I first saw:

3 Re: Html code problem!! on Tue Jun 14, 2011 11:03 pm

venu238


Registered Member
Registered Member
it didn't worked

4 Re: Html code problem!! on Wed Jun 15, 2011 3:05 am

Unknown Data

avatar
Registered Member
Registered Member
Add this to the stylesheet.
Code:
dd {
margin : 0px;
}

http://woops.dk

5 Re: Html code problem!! on Wed Jun 15, 2011 10:34 pm

Drogba921


Registered Member
Registered Member
I don't know why you'd use a definition list, it'd automatically indent it. What UD gave you would work though

http://www.codinghelp.org

6 Re: Html code problem!! on Wed Jan 30, 2013 3:54 pm

rhae29


Registered Member
Registered Member
try to use the web page maker. it is easier than coding.

Sponsored content


View previous topic View next topic Back to top  Message [Page 1 of 1]

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