Solved

CSS Position / Width

Posted on 2008-10-14
5
824 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
  • 2
  • 2
5 Comments
 
LVL 1

Expert Comment

by:Rapturer
Comment Utility
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
Comment Utility
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
Comment Utility
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
Comment Utility
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
Comment Utility
thanks for the help guys :)
0

Featured Post

How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

Join & Write a Comment

This is a how to build your own CSS3 slideshow and when I say CSS3 I mean just CSS with no javascript in sight! There a few examples online of how to do this but most just show you an example without any explanation, others make it more complicat…
Browsers only know CSS so your awesome SASS code needs to be translated into normal CSS. Here I'll try to explain what you should aim for in order to take full advantage of SASS.
In this Micro Tutorial users will learn how to embed custom fonts into websites using @font-face in CSS Select a font: Ensure the EULA allows you to use @font-face: Download the font: Get the browser-compatible files you need: Edit your CSS       - Name …
In this tutorial viewers will learn how to position items using CSS's three positioning types Create a new HTML document with an internal stylesheet.: Create another div in CSS and name it Absolute : Type "position:absolute;" and "top:10px; left:50p…

762 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

Need Help in Real-Time?

Connect with top rated Experts

11 Experts available now in Live!

Get 1:1 Help Now