Jump to content
  • Advertisement
Sign in to follow this  
plywood

[web] 2 CSS problems...

This topic is 3082 days old which is more than the 365 day threshold we allow for new replies. Please post a new topic.

If you intended to correct an error in the post then please contact us.

Recommended Posts

Hi, (1) My web page has two main divs: #top-banner, and #page-content. The #top-banner is where my nav menu as well as other info will be, including a logo image that I currently have sitting inside a div called #main-logo. I simply want the image/logo to have be 10 pixel offset from the top-left corner of #top-banner, but nothing I am doing is working. See code below. (2) The #top-banner div also has a nav menu called #menus. Right now, at least in Firefox, they are showing up directly below the #main-logo div. I want the #menus div to be pushed down to the bottom of the entire #top-banner and off to the right (maybe 50 pixels past dead-center). Here is the code for the page:
<!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" />
    </head>
    
    <body>
	<style type="text/css">
    <!--
		body,td,th 
		{
			font-family: Arial, Helvetica, sans-serif;
			font-size: 14px;
		}
		
		body 
		{
			margin-left: 0px;
			margin-top: 0px;
			margin-right: 0px;
			margin-bottom: 0px;
		}
		
		a:link 
		{
			text-decoration: none;
		}
		
		a:visited 
		{
			text-decoration: none;
		}
		
		a:hover 
		{
			text-decoration: underline;
		}
		
		a:active 
		{
			text-decoration: none;
		}
		
		#top-banner
		{
			background-image: url(x.jpg);
			position: absolute;
			height: 165px;
			width: 100%;
			left: 0px;
			top: 0px;
			border-bottom-width: 1px;
			border-bottom-style: solid;
			border-bottom-color: #5A595A;
		}
		
		#main-logo
		{
			postition: absolute;
			border-top: 10px;
			border-left: 10px;
		}
		
		#menus a:link
		{
			color = rgb(0,255,0);
		}
		
		#menus 
		{
			padding:0px;
		}
		
		#menus li 
		{
			list-style:none;
			float:left;
		}
		
		#menus li a
		{
			color: rgb(0,255,0);
			font-weight: bolder;
		}	
		
		#page-content
		{
		}
		
		.box
		{
		}
		
		.box h1
		{
		}
		
		.box ol
		{
		}
		
		#elevator-pitch
		{
		}
		
		#all-contact-forms
		{
		}
	-->
    </style> 
       <div id="top-banner">
            <div id="main-logo">
            	<a href="./DefaultGamma.php"><img src="y.jpg"/></a>
            </div>
            <ul id="menus">
                <li><a class= "menu-link" href="./DefaultGamma.php">Home</a> :: </li>
                <li>&nbsp;<a class= "menu-link" href="./CompanyGamma.php">Company</a> :: </li>
                <li>&nbsp;<a class= "menu-link" href="./ServicesGamma.php">Services</a> :: </li>
                <li>&nbsp;<a class= "menu-link" href="./PhilosGamma.php">Philos</a></li>
            </ul>
        </div>
        <div id="page-content">
        </div>
    </body>
</html>

Please let me know if you have any suggestions. Here is a link to that page: http://abatherapyautism.com/m.php Thanks, ply

Share this post


Link to post
Share on other sites
Advertisement
Quote:
Original post by plywood...I simply want the image/logo to have be 10 pixel offset from the top-left corner of #top-banner...



#main-logo
{
padding-top: 10px;
padding-left: 10px;
}



Quote:
Original post by plywood...I want the #menus div to be pushed down to the bottom of the entire #top-banner and off to the right (maybe 50 pixels past dead-center)....



#top-banner
{
position: absolute;
height: 165px;
width: 100%;
...
}
#menus
{
position: absolute;
right: 50px;
bottom: 0px;
margin: 0px;
padding:0px;
}

Share this post


Link to post
Share on other sites
Sign in to follow this  

  • Advertisement
×

Important Information

By using GameDev.net, you agree to our community Guidelines, Terms of Use, and Privacy Policy.

We are the game development community.

Whether you are an indie, hobbyist, AAA developer, or just trying to learn, GameDev.net is the place for you to learn, share, and connect with the games industry. Learn more About Us or sign up!

Sign me up!