HTML - Window Dimensions and Text Position HELP!

Author

Message

That C++ Nerd

19

Years of Service

User Offline

Joined: 30th Dec 2006

Location:

Posted: 7th Oct 2009 23:55 Edited at: 29th Aug 2010 19:20

Link

Your signature has been erased by a mod because it's too big--- 300k!?

Back to top

Profile PM

Rudolpho

20

Years of Service

User Offline

Joined: 28th Dec 2005

Location: Sweden

Posted: 8th Oct 2009 00:44

Link

I'm not quite sure if it's what you're after, but you can set positions to percentages of the surrounding container's dimensions (which might be the full page, or a table, div, etc.).

For example <image width = "50%" ...>.

Back to top

Profile PM Email Website

dab

21

Years of Service

User Offline

Joined: 22nd Sep 2004

Location: Your Temp Folder!

Posted: 8th Oct 2009 03:24

Link

You could do something like:

<div id="mainContainerDiv" style="width: 400px; margin-left: auto; margin-right: auto; background-color: #FF0000;">
This is centered text!!
</div>

The margin-left,-righ: auto should do the trick. Assuming of course this is what you want. Remember you have to set the width for this to work, especially with div's.

Back to top

Profile PM Email Website

That C++ Nerd

19

Years of Service

User Offline

Joined: 30th Dec 2006

Location:

Posted: 8th Oct 2009 03:41 Edited at: 29th Aug 2010 19:21

Link

Your signature has been erased by a mod because it's too big--- 300k!?

Back to top

Profile PM

Phaelax

DBPro Master

23

Years of Service

User Offline

Joined: 16th Apr 2003

Location: Metropia

Posted: 8th Oct 2009 07:01

Link

If I recall correctly, absolute positioning is relative to the container the element is in. But I might be wrong.

Back to top

Profile PM Email Website

dab

21

Years of Service

User Offline

Joined: 22nd Sep 2004

Location: Your Temp Folder!

Posted: 8th Oct 2009 08:39 Edited at: 8th Oct 2009 08:41

Link

Phaelax: I'm pretty sure absolute is from 0,0 at the top left of the view port (page). Relative position is 0,0 of its container.

And That C++ Nerd: here is a very rough example. I simply re-made the Twitter page you showed. Maybe something useful will come from it. If you need me to explain anything just let me know

http://www.dabberz.com/examples/example1-2009-10-7/

Back to top

Profile PM Email Website

That C++ Nerd

19

Years of Service

User Offline

Joined: 30th Dec 2006

Location:

Posted: 9th Oct 2009 03:45 Edited at: 29th Aug 2010 19:21

Link

Your signature has been erased by a mod because it's too big--- 300k!?

Back to top

Profile PM

dab

21

Years of Service

User Offline

Joined: 22nd Sep 2004

Location: Your Temp Folder!

Posted: 9th Oct 2009 05:26

Link

Sure thing!

<!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>Example Centering</title> 
</head> 
<body> 
	<!-- 
		What this does: 
		 // These 2 lines center the main div. 
		margin-left: auto;
		margin-right: auto; 
		// This line is needed since divs usually take up 100% width.
		// You can't center something taking up the whole screen ;)
		width: 700px;     
		// This simply sets the background color :D
		background-color: #F99E77;

-->
	<div id="contentCenterDiv" style="width: 700px; margin-left: auto; margin-right:auto; background-color: #F99E77;"> 
	
	<img src="image/logo.PNG" alt="Logo" /> <= That's the logo alright!<br /><br /> 
	
	<img src="image/button2.PNG" alt="[CLICK ME2]" style="float: left;" /> 
	
	<img src="image/button.PNG" alt="[CLICK ME]" style="float: right;" /> 
	
	<div id="contentClearFloats" style="clear:both;"></div><br /> 
	
	And that's all folks!
	</div> 
</body> 
</html>

+ Code Snippet

<!-- This declare the type -->
<!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>Example Centering</title> 
</head> 
<body> 
	<!-- 
		What this does: 
		 // These 2 lines center the main div. 
		margin-left: auto;
		margin-right: auto; 
		// This line is needed since divs usually take up 100% width.
		// You can't center something taking up the whole screen ;)
		width: 700px;     
		// This simply sets the background color :D
		background-color: #F99E77; 

	-->
	<div id="contentCenterDiv" style="width: 700px; margin-left: auto; margin-right:auto; background-color: #F99E77;"> 
	<!-- This really isn't anything special. Just an image that defaults to being on the left -->
	<img src="image/logo.PNG" alt="Logo" /> <= That's the logo alright!<br /><br /> 
	<!-- 
		the style="float: left;" is the most important. 
		This moves this "element" to the left. You can apply this to divs.
	-->
	<img src="image/button2.PNG" alt="[CLICK ME2]" style="float: left;" /> 
	<!-- 
		As with the above, this moves to the right. You CAN do more than 1 item
		that float the same way.
 	-->
	<img src="image/button.PNG" alt="[CLICK ME]" style="float: right;" /> 
	<!-- 
		the clear:both; allows you to 'correct' the content container. 
		I forget the exact reason for using it, but it is just needed to make things work.
	 -->
	<div id="contentClearFloats" style="clear:both;"></div><br /> 
	<!-- And this is aligned like normal, on the left. :) -->
	And that's all folks!
	</div> 
</body> 
</html>

Back to top

Profile PM Email Website

BiggAdd

Retired Moderator

21

Years of Service

User Offline

Joined: 6th Aug 2004

Location: != null

Posted: 22nd Oct 2009 10:36

Link

Quote: "Phaelax: I'm pretty sure absolute is from 0,0 at the top left of the view port (page). Relative position is 0,0 of its container."

Actually Phaelax is right. Positioning is always relative to its container (If the container has position: relative specified).

Run this:

+ Code Snippet

<html>
<head>

<style type="text/css">
body {
	padding: 50px;
}

div{
	display: block;
	width: 200px;
	height: 200px;
	background: #999;
	margin: 1px;
}

div#relative {
	position: relative;	
}

div.text {
	width: auto;
	height: auto;
	background: #FCF;
	position: absolute;
	top: 10px;
	left: 50px;
}
</style>

</head>

<body>

<div>
<div class = "text" >Block 1</div>
</div>
<div id = "relative">
<div class = "text" >Block 2</div>
</div>

</body>
</html>

Fixed positioning is always to the browser 0,0

Back to top

Profile PM

Sorry your browser is not supported!

Programming Talk / HTML - Window Dimensions and Text Position HELP!