HTML/CSS Help - Positioning Elements

Gamerz · November 23, 2010

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

-----

Gamerz · November 23, 2010

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]

Sign In

HTML/CSS Help - Positioning Elements

Recommended Posts

Gamerz

Link to comment

Share on other sites

Gamerz

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information