Want to win a PS4? Go Premium and enter to win our High-Tech Treats giveaway. Enter to Win

x
?
Solved

CSS Position / Width

Posted on 2008-10-14
5
Medium Priority
?
841 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 400 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 43

Assisted Solution

by:David S.
David S. earned 100 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

Unordered lists (HTML ul tags) are very handy to create menus of all types, shapes and sizes.  All it takes is a little knowledge of CSS and the possibilities are endless. First off, you should know the general format for menus created using the …
When applying CSS to your HTML, there are many different ways to select which element(s) the CSS applies to.  Some of these selectors are more commonly known and used than others - Here are the more common ones: #X - Matches an ID of X .X - Matche…
In this tutorial viewers will learn how to position overlapping items using z-index in CSS. They will also learn the restrictions on the z-index property.  Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Red.…
In this Micro Tutorial viewers will learn how to create a CSS image sprite (In a later tutorial, viewers will learn how to use CSS and HTML to create a navigation menu using this sprite) Open a new Photoshop document with a width of (Icon width)x(N…
Suggested Courses

609 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