Solved

CSS Position / Width

Posted on 2008-10-14
5
833 Views
Last Modified: 2010-04-21
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

0
Comment
Question by:jdunneuk
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 2
  • 2
5 Comments
 
LVL 1

Expert Comment

by:Rapturer
ID: 22719500
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

0
 
LVL 3

Author Comment

by:jdunneuk
ID: 22719534
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
0
 
LVL 1

Accepted Solution

by:
Rapturer earned 100 total points
ID: 22720166
Hi John,

Understood...the way around the different screen sizes is to use absolute with percentage based attributes.

So instead of 709px....start with 80% and adjust it from there.

Relative positioning can get very tricky...especially when you are just beginning to learn css.

Don't get me wrong, Relative positioning is a great tool but can be frustrating to learn and is much more difficult IMHO to use throughout an entire page.

Also - Don't forget to add some attributes to your HTML element in your CSS.

Best,

Rapturer



0
 
LVL 42

Assisted Solution

by:David S.
David S. earned 25 total points
ID: 22720270
You may find this useful: http://www.dynamicsitesolutions.com/css/layout-techniques/

Here's one way to do it:

#header {
  background-color: green;
  height: 112px;
  padding: 1px 0 0;
}
#bottomliner {
  background-color: #FF0000;
  height: 20px;
  margin: 92px 0 0 179px;
  position: relative;
}

Open in new window

0
 
LVL 3

Author Closing Comment

by:jdunneuk
ID: 31506204
thanks for the help guys :)
0

Featured Post

Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Introduction If you're like most people, you have occasionally made a typographical error when you're entering information into an online form.  And to your consternation, the browser remembers the error, and offers to autocomplete your future entr…
This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
In this tutorial viewers will learn how add a full-size background image to a webpage using CSS3. Create a new HTML document with an internal stylesheet.: In CSS, define the html element to have a background image. Use a high resolution image.: In t…
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…

705 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question