Position of the div

Question

RinzLove 0 Newbie Poster

10 Years Ago

Hi, I've problem positioning the div. I would like to have the div (id=new, id=cd) position beside .navmenu instead of below .navmenu

Please see the code. Many thanks..

<div class="catalog">
<blockquote>
<h1 style="text-align: right;"><marquee direction="right">Free Shipping Islandwide for Purchase above S$100<img src="images/plane.png" width="70" height="40" alt=""/></marquee></h1><br />
<div id="left">
<div>
<p style="text-align: left; color: #006; font-family: Arial, Helvetica, sans-serif; font-size: large; font-weight:bold;">CATALOG</p>
<ul id="navmenu">  
<li><a href="#" onclick="show('CD'); hide('New'); hide('VCD')">CD +</a></li>
<li><a href="#" onclick="show('VCD'); hide('CD'); hide('New')">VCD/DVD +</a></li> 
</ul>
</div>
<div id="New" style="display:block;">
<table style="margin: auto; color:#006; position:inherit; font-weight:bold;">
<tr>
<td colspan="5"><img src="images/NewRelease.gif" alt=""/></td>
</tr>
<tr>
<td style="text-align: left; color: #000; font-size: medium;">
<u>VCD/DVD</u>
</td>
</tr>
<tr>
<td><img src="images/album_sm6.gif" width="130" height="130" /></td>
<td><img src="images/album_sm7.gif" width="130" height="130" /></td>
<td><img src="images/album_sm8.gif" width="130" height="130" /></td>
<td><img src="images/album_sm9.gif" width="130" height="130" /></td>
<td><img src="images/album_sm10.gif" width="130" height="130" /></td>
</tr>
<tr>
<td>G.e.m The Best Of</td>
<td>Miss You Much Leslie</td>
<td>Shaking The Habitual</td>
<td>DJ Box</td>
<td>Arrival</td>
</tr>
<tr>
<td>G.e.m</td>
<td>Leslie</td>
<td>The Knife</td>
<td>Paul Oakenfold</td>
<td>Leslie Cheung</td>
</tr>
<tr>
<td>S$35.90</td>
<td>S$35.90</td>
<td>S$35.90</td>
<td>S$35.90</td>
<td>S$35.90</td>
</tr>
<tr>
<td><form action="qty_form.asp">
Qty<input type="text" name="">
<img src="images/cartbtn.jpg" width="30" height="30" /></td>
<td>Qty<input type="text" name="">
<img src="images/cartbtn.jpg" width="30" height="30" /></td>
<td>Qty<input type="text" name="">
<img src="images/cartbtn.jpg" width="30" height="30" /></td>
<td>Qty<input type="text" name="">
<img src="images/cartbtn.jpg" width="30" height="30" /></td>
<td>Qty<input type="text" name="">
<img src="images/cartbtn.jpg" width="30" height="30" /></form></td>
</tr>
</table>
</div>
<div id="CD" style='display:none'>
<table style="margin: auto; color:#006; position:inherit; font-weight:bold;">

</table>
</div>

<!-- CSS STYLE -->

.catalog {
    background-image: url(images/background.png);
    background-repeat: repeat;
    float: right;
    clear: none;
    width: 1024px;
    height: auto;
    font-family: Tahoma, Geneva, sans-serif;
    font-size: 12px;
    text-align:center;
    padding-top: 0px;
    padding-right: 0px;
    padding-bottom: 0px;
}

#CD {
    font-family: Tahoma, Geneva, sans-serif;
    font-size: 12px;
    text-align:center;
}

#New {
    font-family: Tahoma, Geneva, sans-serif;
    font-size: 12px;
    text-align:center;
}

#left {
    background-image: url(images/background.png);
    background-repeat: repeat;
    float: left;
    min-height: 300px;
    height: auto;
    clear: none;
    width: 210px;
    padding: 0px;
    z-index: 10;
}

<!-- END OF CSS STYLE -->

div position web-design

4 Contributors
4 Replies
256 Views
2 Days Discussion Span
Latest Post 10 Years Ago Latest Post by IIM

All 4 Replies

ansaripk 0 Newbie Poster

10 Years Ago

check i have made correction and this code is works fine as you want.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
    .catalog {
    background-image: url(images/background.png);
    background-repeat: repeat;
    float: right;
    clear: none;
    width: 1024px;
    height: auto;
    font-family: Tahoma, Geneva, sans-serif;
    font-size: 12px;
    text-align:center;
    padding-top: 0px;
    padding-right: 0px;
    padding-bottom: 0px;
    }
    #CD {
    font-family: Tahoma, Geneva, sans-serif;
    font-size: 12px;
    text-align:center;
    }
    #New {
    font-family: Tahoma, Geneva, sans-serif;
    font-size: 12px;
    text-align:center;
    }
    #left {
    background-image: url(images/background.png);
    background-repeat: repeat;
    float: left;
    min-height: 300px;
    height: auto;
    clear: none;
    width: 180px;
    padding: 0px;
    z-index: 10;
    }
#right { float:right;}
</style>
</head>

<body>
    <div class="catalog">
        <h1 style="text-align: right;"><marquee direction="right">Free Shipping Islandwide for Purchase above S$100<img src="images/plane.png" width="70" height="40" alt=""/></marquee></h1><br />
    <div id="left">
    <p style="text-align: left; color: #006; font-family: Arial, Helvetica, sans-serif; font-size: large; font-weight:bold;">CATALOG</p>
    <ul id="navmenu">
    <li><a href="#" onclick="show('CD'); hide('New'); hide('VCD')">CD +</a></li>
    <li><a href="#" onclick="show('VCD'); hide('CD'); hide('New')">VCD/DVD +</a></li>
    </ul>
    </div>

    <div id="right">
    <div id="New" style="display:block;">
    <table style="margin: auto; color:#006; position:inherit; font-weight:bold;">
    <tr>
    <td colspan="5"><img src="images/NewRelease.gif" alt=""/></td>
    </tr>
    <tr>
    <td style="text-align: left; color: #000; font-size: medium;">
    <u>VCD/DVD</u>
    </td>
    </tr>
    <tr>
    <td><img src="images/album_sm6.gif" width="130" height="130" /></td>
    <td><img src="images/album_sm7.gif" width="130" height="130" /></td>
    <td><img src="images/album_sm8.gif" width="130" height="130" /></td>
    <td><img src="images/album_sm9.gif" width="130" height="130" /></td>
    <td><img src="images/album_sm10.gif" width="130" height="130" /></td>
    </tr>
    <tr>
    <td>G.e.m The Best Of</td>
    <td>Miss You Much Leslie</td>
    <td>Shaking The Habitual</td>
    <td>DJ Box</td>
    <td>Arrival</td>
    </tr>
    <tr>
    <td>G.e.m</td>
    <td>Leslie</td>
    <td>The Knife</td>
    <td>Paul Oakenfold</td>
    <td>Leslie Cheung</td>
    </tr>
    <tr>
    <td>S$35.90</td>
    <td>S$35.90</td>
    <td>S$35.90</td>
    <td>S$35.90</td>
    <td>S$35.90</td>
    </tr>
    <tr>
    <td><form action="qty_form.asp">
    Qty<input type="text" name="">
    <img src="images/cartbtn.jpg" width="30" height="30" /></td>
    <td>Qty<input type="text" name="">
    <img src="images/cartbtn.jpg" width="30" height="30" /></td>
    <td>Qty<input type="text" name="">
    <img src="images/cartbtn.jpg" width="30" height="30" /></td>
    <td>Qty<input type="text" name="">
    <img src="images/cartbtn.jpg" width="30" height="30" /></td>
    <td>Qty<input type="text" name="">
    <img src="images/cartbtn.jpg" width="30" height="30" /></form></td>
    </tr>
    </table>
    </div>
    <div id="CD" style='display:none'>
    <table style="margin: auto; color:#006; position:inherit; font-weight:bold;">
    </table>
    </div>
    </div>

</body>
</html>

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

RinzLove 0 Newbie Poster · Answer 1 · 2013-05-03T10:51:21+00:00

Hi Ansaripk, Thanks. I've tried. The div position at the very left side of the page. You can see from the 497ef7d1f545f3b5bcbbd3754a2809f6 attached pic.

phfilly 26 Junior Poster · Answer 2 · 2013-05-04T15:27:29+00:00

You should try changing the position from inherit to absolute! Then you would have much more control over the div tag.

Like for example:

#cd,new{
    position:absolute;
    left: 15%;
    top: 20%;
    etc...
}

Hope this helps!

IIM 163 Master Poster · Answer 3 · 2013-05-05T12:54:11+00:00

Check this http://stackoverflow.com/questions/13063076/line-breaks-between-divs-render-a-space-how-to-eliminate-it-from-html

you must use the css style display: inline-block; to remove break between two divs.

Position of the div

Recommended Answers Collapse Answers

All 4 Replies

Recommended Answers