HTML/CSS Help - Positioning Elements

**ImplantedMind** · 11-23-2010, 06:39 AM

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:

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

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


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

Code:

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

-----

**Beverleyh** · 11-23-2010, 08:17 AM

I think you need to clean up the code a bit and compile a properly structured web page first.

It looks like you've lifted a layout from an existing site and are trying to customise it with your own content? Anyway, if I were you, I'd systermatically remove the elements that you dont need, along with their corresponding CSS, and just leave what you do before you start manipulating it.

Once you have that, provide a link to your page so we can see where you're at and somebody will be able to help with your next steps.

**ImplantedMind** · 11-23-2010, 10:46 PM

No, the template is made by myself. I attached a picture on what I would like it to look like since the mods deleted the image. But um, could you help me out specifically with this a bit? I have msn or aim..you?

**molendijk** · 11-24-2010, 09:04 PM

This looks like what you want. I'm not sure, though.

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>

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

<style type="text/css">
body,html{overflow-x: hidden}
.shared_link {border:1px solid gray; border-width:medium; width:500px; position:absolute; left:50%;margin-left:-250px; top:50px;z-index:1;
}
.search {position: absolute; top:50px; right:1px; display:inline; width:260px; height:29px;
}
#sidebar {position:absolute; left:0px;z-index:1; top:50px; width:225px; background-color:#e2dddc; border:1px solid #a3a09e;
}
#sidebar_right {position:absolute;top: 50px; right:1px; 
}
#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 {text-align: center; border: 1px dashed #000; height:180px; width: 450px;
}
</style>

</head>

<body>
<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>
<div id="dotted-center">
<p>Home</p>
</div>
<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>
<div class="shared_link" align="center"><b>Unique Share Link: <input type="text" value="http://www.groupdrop.net/Jy5q3Y" size="30"></b></div>
<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>
<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>main content<br>main content<br>main content

<!-- 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. --></div>
<div style="clear:both"></div>
</div>
<div id="footer">
<div class="container">
<div class="footer_column long">
<h3>Copyright</h3>
<p>Some text here....</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>

===
Arie Molendijk.

**ImplantedMind** · 11-26-2010, 04:44 AM

This turned out to be:

Thread: HTML/CSS Help - Positioning Elements

Thread Tools

Search Thread

HTML/CSS Help - Positioning Elements

Bookmarks

Bookmarks

Posting Permissions