Positioning problem with relativity

  • (2 Pages)
  • +
  • 1
  • 2

15 Replies - 863 Views - Last Post: 26 January 2009 - 01:55 PM

#1 sly  Icon User is offline

  • D.I.C Head

Reputation: 1
  • View blog
  • Posts: 134
  • Joined: 05-December 08

Positioning problem with relativity

Post icon  Posted 25 January 2009 - 11:39 PM

RESOLVED

This post has been edited by sly: 26 January 2009 - 02:39 PM

Is This A Good Question/Topic? 0
  • +

Replies To: Positioning problem with relativity

#2 thehat  Icon User is offline

  • awake ? web();
  • member icon

Reputation: 106
  • View blog
  • Posts: 951
  • Joined: 28-February 08

Re: Positioning problem with relativity

Posted 26 January 2009 - 02:28 AM

Hi Sly, It's all those margins that are causing you problems, especially expressed in percentages. To create a layout with 2 columns like I think you're trying to achieve, I would use either float or absolute positioning.

<head>
<style type="text/css">
div#container {
	  width:90%;
	  margin-left:4%;
}
div#left_col {
	  width:20%;
	  float:left;
}
div#right_col {
	  width:80%;
	  float:right;
}
</style>
</head>
<body>
<div id="container">
	  <div id="left_col">
			<!--  put your navigation divs here  -->
	  </div>
	  <div id="right_col">
			<!--  put your content divs here  -->
	  </div>
</div>
</body>



Now, when you put your boxes into the container divs, you don't have to set any widths on them. They should just fill the space given to them.
Was This Post Helpful? 0
  • +
  • -

#3 sly  Icon User is offline

  • D.I.C Head

Reputation: 1
  • View blog
  • Posts: 134
  • Joined: 05-December 08

Re: Positioning problem with relativity

Posted 26 January 2009 - 09:36 AM

resolved

This post has been edited by sly: 26 January 2009 - 02:39 PM

Was This Post Helpful? 0
  • +
  • -

#4 thehat  Icon User is offline

  • awake ? web();
  • member icon

Reputation: 106
  • View blog
  • Posts: 951
  • Joined: 28-February 08

Re: Positioning problem with relativity

Posted 26 January 2009 - 09:53 AM

Use pixel values for the container and inner divs if you want fixed widths. You may also be able to use a combination of percentage widths and pixel value min-widths, but that won't work on all browsers and so is probably best ignored.
Was This Post Helpful? 0
  • +
  • -

#5 sly  Icon User is offline

  • D.I.C Head

Reputation: 1
  • View blog
  • Posts: 134
  • Joined: 05-December 08

Re: Positioning problem with relativity

Posted 26 January 2009 - 10:02 AM

should my banner also go inside the container?
Was This Post Helpful? 0
  • +
  • -

#6 thehat  Icon User is offline

  • awake ? web();
  • member icon

Reputation: 106
  • View blog
  • Posts: 951
  • Joined: 28-February 08

Re: Positioning problem with relativity

Posted 26 January 2009 - 10:17 AM

It could do, if you want it to share the same margin values as elements in the container already. At the moment though, you seem to have it in the head section of the page. Browsers only display content that's within the <body> tag, so it's not going to show up if you leave it there!
Was This Post Helpful? 0
  • +
  • -

#7 sam_benne  Icon User is offline

  • D.I.C Addict
  • member icon

Reputation: 16
  • View blog
  • Posts: 732
  • Joined: 16-January 08

Re: Positioning problem with relativity

Posted 26 January 2009 - 10:29 AM

Looking at what you have done. The banner needs to be in the <body> tag. As for your problem i would suggest using fixed widths this way it doesn't change size when you make the screen smaller but you can make it move to the left (centering). Also the image tages for your menu are done wrong as they don't end "/>" but have a "</a>" as their ending if you want I could create a simple two column layout with a head and footer.
Was This Post Helpful? 0
  • +
  • -

#8 sly  Icon User is offline

  • D.I.C Head

Reputation: 1
  • View blog
  • Posts: 134
  • Joined: 05-December 08

Re: Positioning problem with relativity

Posted 26 January 2009 - 10:29 AM

then why does it show on my screen?
Was This Post Helpful? 0
  • +
  • -

#9 thehat  Icon User is offline

  • awake ? web();
  • member icon

Reputation: 106
  • View blog
  • Posts: 951
  • Joined: 28-February 08

Re: Positioning problem with relativity

Posted 26 January 2009 - 10:32 AM

What browser are you using?

The <head> section is for information about the page, and a place to put scripts and styles. I would really recommend that you don't put display content there as the results can be unpredictable.

This post has been edited by thehat: 26 January 2009 - 10:33 AM

Was This Post Helpful? 0
  • +
  • -

#10 sam_benne  Icon User is offline

  • D.I.C Addict
  • member icon

Reputation: 16
  • View blog
  • Posts: 732
  • Joined: 16-January 08

Re: Positioning problem with relativity

Posted 26 January 2009 - 10:35 AM

They can still work its just they are not formatted right.
Was This Post Helpful? 0
  • +
  • -

#11 sly  Icon User is offline

  • D.I.C Head

Reputation: 1
  • View blog
  • Posts: 134
  • Joined: 05-December 08

Re: Positioning problem with relativity

Posted 26 January 2009 - 10:35 AM

ok thanks! its fixed now, but how can i center my copyright information on the bottom of the page? its centered with the right column but not the whole page itself.
Was This Post Helpful? 0
  • +
  • -

#12 sam_benne  Icon User is offline

  • D.I.C Addict
  • member icon

Reputation: 16
  • View blog
  • Posts: 732
  • Joined: 16-January 08

Re: Positioning problem with relativity

Posted 26 January 2009 - 10:43 AM

Have a look at this I quickly did.

<!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>
<title>Dwemer Kingdom</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<div id="maincontainer">

<div id="topsection"><div class="innertube"><a href="index.html"><img src="images/dk.PNG"alt="logo" width="700" height="138" border="0" alt="logo" /></a></div></div>

<div id="contentwrapper">
<div id="contentcolumn">
<div class="innertube">
<div class="headlinelist">        
<h3> News and Announcements </h3>
<br />
<center><b>Dwemer Kingdom</b></center>
<p>
Dwemer Kingdom is the one place you do and do not want to be. Ending glouriously 
will bring you fame and power, but only you and your mind will prevail the 
challenges brought to you in this world. You will start out as a dwarf picking 
out the way you look and your gender. You next will be set of on a mine where 
you will learn the skills you need to survive in Dwemer Kingdom, because trust 
me without them you wil fail. Once you have gotten the basics down you are off 
to Dwemer kingdom "The Land of the Dwarves!"
</p>
<p>
At Dwemer Kingdom every citizen is required to create their own fort in which to 
protect themself from mystical creatures who lerk the night time. Make sure your 
fort can defend your life or be ready to battle evil things!
</p> 
</div>
</div>
<div class="innertube">
<h5>Recent Articles</h5>
</div>
<ul>
<div class="moreTitle">Dwemer Kingdom</div>
<div class="moreDate">Janurary 20th 2009</div>
<li><a href="article1.html"target="_blank">Read More...</a></li>
<br />
<div class="moreTitle">Dwemer Kingdom</div>
<div class="moreDate">Janurary 20th 2009</div>
<li><a href="index.html"target="_blank">Read More...</a></li>
<br />
<div class="moreTitle">Dwemer Kingdom</div>
<div class="moreDate">Janurary 20th 2009</div>
<li><a href="index.html"target="_blank">Read More...</a></li>
</ul>
</div>
</div>
</div>

<div id="leftcolumn">
<div class="innertube">
<h2> Main </h2>
<li><img src="images/home.gif" /><a href="index.html"><b>Home</b></a></li>
<li><img src="images/home.gif" /><a href="index.html"><b>Register</b></a></li>
<li><img src="images/home.gif" /><a href="index.html"><b>Play Now!</b></a></li>
<li><img src="images/forums.png" /><a href="http://dwemerkingdom.ulmb.com/smf/index.php"><b>Forums</b></a></li>
<li><img src="images/help.gif" /><a href="FAQ.html"><b>FAQ</b></a></li>
<li><img src="images/news.gif" /><a href="news.html"><b>News</b></a></li>
<li><img src="images/stafflist.png" /><a href="staff.html"><b>Staff List</b></a></li>
<li><img src="images/comingsoon.png" /><a href="comingsoon.html"><b>Coming Soon</b></a></li>
 
<h4>Features</h4>
<li><img src="images/screenshots.png" /><a href="screenshots.html"><b>Screenshots</b></a></li>
<li><img src="images/premium.png" /><a href="upgrade.html"><b>Upgrade your 
account</b></a></li>
<li><img src="images/poll.png" /><a href="poll.html"><b>Polls</b></a></li>
<li><img src="images/article.png" /><a href="articles.html"><b>Articles</b></a></li>

</div>
</div>

<div id="footer">
Copyright  2009 sclyfe Inc. All rights reserved.

Use of this website is subject to our <a href="terms.html">Terms & Conditions</a> and <a href="privacy.html">Privacy Policy</a>.

</div>

</div>
</body>
</html>


The CSS

body{
margin:0;
padding:0;
line-height: 1.5em;
}

b{font-size: 110%;}
em{color: red;}

#maincontainer{
width: 840px; /*Width of main container*/
margin: 0 auto; /*Center container on page*/
}

#topsection{
background: #EAEAEA;
height: 90px; /*Height of top section*/
}

#topsection h1{
margin: 0;
padding-top: 15px;
}

#contentwrapper{
float: left;
width: 100%;
}

#contentcolumn{
margin-left: 200px; /*Set left margin to LeftColumnWidth*/
}

#leftcolumn{
float: left;
width: 200px; /*Width of left column*/
margin-left: -840px; /*Set left margin to -(MainContainerWidth)*/
background: #C8FC98;
}


#footer{
clear: left;
width: 100%;
background: black;
color: #FFF;
text-align: center;
padding: 4px 0;
}

#footer a{
color: #FFFF80;
}

.innertube{
margin: 10px; /*Margins for inner DIV inside each column (to provide padding)*/
margin-top: 0;
}




(Dynamic Drive)
Was This Post Helpful? 0
  • +
  • -

#13 thehat  Icon User is offline

  • awake ? web();
  • member icon

Reputation: 106
  • View blog
  • Posts: 951
  • Joined: 28-February 08

Re: Positioning problem with relativity

Posted 26 January 2009 - 10:44 AM

I often have copyright lines and such in a div separate to any other containers. Put them at the end of the page, and use a fixed width in conjugation with automatic margins to center it.

<!--  page's html -->
<div id="copyright">some text</div>
</body></html>



div#copyright {
	  margin:0 auto;
	  width:600px; /* or whatever you want */
}


Was This Post Helpful? 0
  • +
  • -

#14 sly  Icon User is offline

  • D.I.C Head

Reputation: 1
  • View blog
  • Posts: 134
  • Joined: 05-December 08

Re: Positioning problem with relativity

Posted 26 January 2009 - 11:02 AM

thanks!
Was This Post Helpful? 0
  • +
  • -

#15 sly  Icon User is offline

  • D.I.C Head

Reputation: 1
  • View blog
  • Posts: 134
  • Joined: 05-December 08

Re: Positioning problem with relativity

Posted 26 January 2009 - 11:41 AM

RESOLVED

This post has been edited by sly: 26 January 2009 - 02:37 PM

Was This Post Helpful? 0
  • +
  • -

  • (2 Pages)
  • +
  • 1
  • 2