Jump to content

HTML/CSS Help - Positioning Elements

Gamerz

By Gamerz
in CSS Help

 Share

Recommended Posts

Gamerz Member

Gamerz

Posted
Posted

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:

gd-ss.png

 

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

-----

Link to comment
https://forums.phpfreaks.com/topic/219548-htmlcss-help-positioning-elements/
Share on other sites
This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
 Share
Go to topic listing
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.