asked on

CSS Position / Width

Hi Guys,

Can some one tell me if I doing this right and how I can change the width of th red box (the bottomliner) to be the same as the green header without the logo and be positioned on the bottom, I am after setting the height attribute but not sure how I got it?

Also if some one could recommend a good place to learn css positioning, I seem to read the same stuff and it not make sence?

thanks

John

<!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=iso-8859-1" />
<title>JD</title>
<style type="text/css">
<!--
#page {
	height:100%;
	width: 100%;
}
#header {
	height:112px;
	background-color: green;
}	
#logo {
	float:left;
	bottom:0px;
	display: block;
	clear: none;
}
 
#search-form {
	float:right;
	border:1px solid #CECED0;
	font-size:1.1em;
	margin:0 6px 0 0;
	min-height:16px;
	padding-left:1px;
	padding-top:1px;
	width:260px;
}
#search-form input {
	display:block;
	float:left;
}
 
#navigation {
	display: block;
	float: left;
	width: 180px;
	height: auto;
	background-color: green;
 
}
 
#flashboxcentre{
	display: block;
	float: left;
	width: 700px;
	height: 250px;
	background-color: #61DE07;
}
#textboxcentre{
	display: block;
	padding-top:10px;
	text-indent: 10px;
	float: left;
	width: 700px;
	background-color: #006600;	
}
#bodyholder{
	height:100%;
	margin-top:auto;
	margin-bottom: auto;
}
#bottomliner{
	background-color:#FF0000;
	position:relative;
	float:left;
	top: 92px;
	height:20px;
}
 
body {
	background-color: yellow;
}
 
#new{
float:right;
background-color:#999999;
width:100%;
 
}
	
-->
</style>
<script src="Scripts/AC_RunActiveContent.js" type="text/javascript"></script>
</head>
 
<body>
 
 
<div id="page">
	
	<div id="header">
	  <div id="logo"> <img src="admins/images/logo.gif" width="179" height="112" alt="logo" /></div>
	  
	  <div id="search-form">
			<form method="get" action="/search/Search.shtml;jsessionid=196BA6106B64C21DC0DDEEC6391FC9C8">
				<div>
					  <input type="text" autocomplete="off"/>
				      <input class="rollover" type="image" title="Search" alt="Search" src="/images/search_btn.png"/>
				          </p>
				</div>
			</form>
	  </div>
		  <div id="bottomliner">Home | Products | Contact Us</div>
  </div>
 
	
<div id="bodyholder">
 
  <div id="navigation">
      <script type="text/javascript">
AC_FL_RunContent( 'codebase','http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0','width','180','height','550','src','flash/navigation','quality','high','pluginspage','http://www.macromedia.com/go/getflashplayer','bgcolor','#006600','movie','flash/navigation' ); //end AC code
</script><noscript><object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0" width="180" height="550">
        <param name="movie" value="flash/navigation.swf" />
        <param name="quality" value="high" /><param name="BGCOLOR" value="#006600" />
        <embed src="flash/navigation.swf" width="180" height="550" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" bgcolor="#006600"></embed>
      </object></noscript>
	</div>
	<div id="flashboxcentre">
      <script type="text/javascript">
AC_FL_RunContent( 'codebase','http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0','width','700','height','250','title','slide show','src','flash/slide','quality','high','pluginspage','http://www.macromedia.com/go/getflashplayer','movie','flash/slide' ); //end AC code
      </script>
      <noscript>
      <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0" width="700" height="250" title="slide show">
        <param name="movie" value="flash/slide.swf" />
        <param name="quality" value="high" />
        <embed src="flash/slide.swf" width="700" height="250" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash"></embed>
      </object>
      </noscript>
    </div>
	<div id="textboxcentre">
      <p>Welcome to Filip Siwek Power Equipment and Garden Machinery. </p>
      <p>&nbsp;</p>
      <p>&nbsp;</p>
      <p>&nbsp;</p>
      <p>&nbsp;</p>
      <p>&nbsp;</p>
      <p>&nbsp;</p>
      <p>&nbsp;</p>
      <p>&nbsp;</p>
    </div>
  </div>
 
</div>
 
 
 
 
 
</body>
</html>

Open in new window

Rapturer

Hi John,

I tested this locally...and this CSS will lay out your red nav bar like you need (or at least like I understand your need)

Also, a great COMPLETELY FREE resource for learning CSS among other things is the W3 schools"

http://www.w3schools.com/

And for CSS:
http://www.w3schools.com/css/css_intro.asp

They have live demos you can modify and play around with...this is what you are looking for!!

Hope this helps.

Best,

Rapturer

#bottomliner{
        background-color:#FF0000;
        position:absolute;/*************Your page as it is currently, it is better to use absolute positioning*********************/
				width:698px; /*************This sets the width of the actual element*********************/
        left:709px;  /*************This sets the distance from the left of the page*********************/
        bottom: 1px; /*************This sets the distance from the bottom*********************/
        height:20px;
				
}

Open in new window

jdunneuk

ASKER

Hi Rapturer,

Thanks for the responce, I am trying to do it without using any absolute lay outs, due to screen resoultion changing and that...

Any ideas on how to do it without the absolute positioning method

thanks

John

ASKER CERTIFIED SOLUTION

Rapturer

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

SOLUTION

David S.