Gamerz
-
Posts
116 -
Joined
-
Last visited
Never
Gamerz's Achievements
Member (2/5)
0
Reputation
-
Since the mods have removed my external image of what I would like the elements positioned, below is the attached image. [attachment deleted by admin]
-
Hi, So I need serious help on positioning 5 elements on a webpage. I already have a layout design setup, and I already have the CSS/HTML for the elements itself...I just need help positioning them to where I want it... So firstly, here is how I would hope it would like it: Now, here is the layout design without the elements: <!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" /> <title></title> <link href="http://www.uploadmyfiles.net/display/style.css" rel="stylesheet" type="text/css" /> </head> <body> <div id="main"> <div class="container"> <div id="header"> <ul id="menu"> <li><a href="">Link1</a></li> <li><a href="">Link2</a></li> <li><a href="">Link3</a></li> </ul> <ul id="menu_left"> <li><a href="" class="active">Left1</a></li> <li><a href="">Left2</a></li> <li><a href="">Left3</a></li> <li><a href="">Left4</a></li> </ul> </div> <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> [b][color="Red"]<!-- The main contents such as the elements is to be placed here. Don't forget to delete the <br> tags before this comment when adding elements. -->[/color][/b] </div> <div style="clear:both"></div> </div> </div> </div> </center> <div id="footer"> <div class="container"> <div class="footer_column long"> <h3>Copyright</h3> <p> Some text here....</a> </p> </div> <div class="footer_column"> <h3>Links</h3> <ul> <li><a href="">Link1</a></li> <li><a href="">Link2</a></li> <li><a href="">Link3</a></li> <li><a href="">Link4</a></li> <li><a href="">Link5</a></li> </ul> </div> <div class="footer_column"> </div> </div> </div> </body> </html> Now, the following are the HTML and the CSS codes for the elements. Note they are just html and css, and haven't been positioned yet. This is where I need your help. As you see on the first screenshot, that is how I want the elements at: The "Unique Share Link" at the top: ----- <div class="shared_link" align="center"> <b>Unique Share Link: <input type="text" value="http://www.groupdrop.net/Jy5q3Y" size="30"></b> </div> .shared_link { border:1px solid gray; border-width:medium; width:500px; } ----- ================================================ Search Menu: ----- <div class="search"> <form method="get" class="searchform" action="search.php"> <input name="q" type="text" class="s" value="Search for a File..." onblur="if (this.value == '') {this.value = 'Search for a File...';}" onfocus="if (this.value == 'Search for a File...') {this.value = '';}" /> <input type="image" src="images/search.png" class="searchsubmit" value="Search" /> </form> </div> .search { float:right; display:block; width:260px; height:29px; } ----- ================================================ Left Navigation Menu: ----- <div id="sidebar"> <div class="block_inside"> <h3>Statistics</h3> <ul> <li><a href="">RSS Feed</a></li> <li><a href="">Email Updates</a></li> </ul> <h3>Categories</h3> <ul> <li><a href="">News</a></li> <li><a href="">Marketing</a></li> <li><a href="">General</a></li> <li><a href="">Great Sites</a></li> </ul> <h3>Archives</h3> <ul> <li><a href="">June 2008</a></li> <li><a href="">May 2008</a></li> <li><a href="">April 2008</a></li> <li><a href="">March 2008</a></li> </ul> </div> </div> #sidebar { float:left; width:225px; background-color:#e2dddc; border:1px solid #a3a09e; } #sidebar .block_inside { background:none; background-color:#e2dddc; } #sidebar h3 { font-size:20px; line-height:23px; } #sidebar ul { margin:10px 0px 30px 0px; padding:0px; } #sidebar ul li { list-style:none; margin:0px 0px 5px 0px; padding:0px; } #sidebar ul li a { color:#7f7d78; } #sidebar ul li a:hover { color:#0172dd; text-decoration:none; } ----- ================================================ Dotted-Center Box: ----- <div id="dotted-center" style="height:200px; overflow:auto;"> <p>Welcome to your group's GroupDrop page.</p> </div> #dotted-center { border: 1px dashed #000; height: 200px; width: 750px; } ----- ================================================ Right Navigation Menu: ----- <div id="sidebar_right"> <div class="block_inside_right"> <h3>Quick Links</h3> <ul> <li><a href="">RSS Feed</a></li> <li><a href="">Email Updates</a></li> <li><a href="">RSS Feed</a></li> </ul> </div> </div> #sidebar_right { float:right; width:225px; height:20px; background-color:#e2dddc; border:1px solid #a3a09e; } #sidebar_right .block_inside_right { background:none; background-color:#e2dddc; } #sidebar_right h3 { font-size:20px; line-height:23px; } #sidebar_right ul { margin:10px 0px 30px 0px; padding:0px; } #sidebar_right ul li { list-style:none; margin:0px 0px 5px 0px; padding:0px; } #sidebar_right ul li a { color:#7f7d78; } #sidebar_right ul li a:hover { color:#0172dd; text-decoration:none; } -----