Javascript Disabled Detected

You currently have javascript disabled. Several functions may not work. Please re-enable javascript to access full functionality.

0

div in middle....?

Started by davidandersson, Feb 24 2006 08:34 AM

You cannot reply to this topic
Go to first unread post

14 replies to this topic

#1 davidandersson

Young Padawan

Members
6 posts

Posted 24 February 2006 - 08:34 AM

ok i got this splash screen as index for my website..and i want it in middle and center of browser..center is no problem..but to get it in middle is hard...ive searched for it but cant find it :S

Back to top

#2 raenef

Code Enforcer

Members
540 posts

Location:Battle Creek, Michigan
Interests:Web Development and Graphic Design

Posted 24 February 2006 - 08:46 AM

Edit: OH like height middle...sorry about that, I'll look into that one.

Edit Again: Ok I found these resources for ya:
http://www.quirksmod.../centering.html
http://www.wpdfd.com...03.htm#footnote
http://www.jakpsatweb.cz/css/css-vertical-...r-solution.html

Also to aide even further in your search try looking for "css vertical centering"
Good Luck :love:

Edited by raenef, 24 February 2006 - 09:00 AM.

Back to top

#3 coolaid

P2L Jedi Master

Members
1,435 posts

Gender:Male
Interests:i wonder..

Posted 24 February 2006 - 09:56 AM

and here is the coded page strait up: http://www.wpdfd.com...eadcentre4.html

if you already know css just look at the source code.

Back to top

#4 davidandersson

Young Padawan

Members
6 posts

Posted 24 February 2006 - 10:29 AM

ok now i tried it ..i copied the codes from that link...and putted my own picture in the div...it worked if i had the webbrowser window Full...but if i made the window smaller, the pic wasnt in the middle,center...i had to school all the way to left to see pic...but in full window it worked :S

Back to top

#5 davidandersson

Young Padawan

Members
6 posts

Posted 24 February 2006 - 11:23 AM

w8 i think i worked it out now..its almost 100% working now. ..thx for replies!

Back to top

#6 coolaid

P2L Jedi Master

Members
1,435 posts

Gender:Male
Interests:i wonder..

Posted 24 February 2006 - 07:34 PM

besides... no one is gonna browse a site with a window not maximized.... think about it, you dont browse sites in small windows either..

Back to top

#7 greg

Jedi In Training

Members
499 posts

Location:New York City
Interests:Fine art, web and graphic design, naval architecture, chess, and sports.

Posted 24 February 2006 - 11:21 PM

That's a pretty nifty trick, coolaid. I use the method they mentioned to center objects horizontally, but if you want to center objects vertically, you can cut a corner by simply doing this:

body {
v-align: center;
}

Clearly a lot shorter and simpler than their suggestion.

Back to top

#8 coolaid

P2L Jedi Master

Members
1,435 posts

Gender:Male
Interests:i wonder..

Posted 24 February 2006 - 11:30 PM

if v-align actually worked in any browser i woulda been quick to spread the word. test it out for yourself, ifyou get it to work, please put it online so i can see

Back to top

#9 greg

Jedi In Training

Members
499 posts

Location:New York City
Interests:Fine art, web and graphic design, naval architecture, chess, and sports.

Posted 25 February 2006 - 11:11 AM

I'm on a different computer right now, one which I'd rather not be doing testing on. I'll take your word for it, however. Which browsers don't support it?

Edited by greg, 25 February 2006 - 11:11 AM.

Back to top

#10 _Speed_

Guests

Posted 25 February 2006 - 01:45 PM

davidandersson, on Feb 24 2006, 07:29 AM, said:

ok now i tried it ..i copied the codes from that link...and putted my own picture in the div...it worked if i had the webbrowser window Full...but if i made the window smaller, the pic wasnt in the middle,center...i had to school all the way to left to see pic...but in full window it worked :S

If you resized your browser on the site that coolaid linked to, then it should automatically resize it. I think it really is resizing it, but the image you are displaying might be too large, therefore does not look correctly positioned on your screen.

Here is the css you actually need if you are going to use the site coolaid linked to as your guide.

#horizon		
	{
	color: white;
	background-color: #0ff;
	text-align: center;
	position: absolute;
	top: 50%;
	left: 0px;
	width: 100%;
	height: 1px;
	overflow: visible;
	visibility: visible;
	display: block
	}

#content	
	{
	font-family: Verdana, Geneva, Arial, sans-serif;
	background-color: #f00;
	margin-left: -125px;
	position: absolute;
	top: -35px;
	left: 50%;
	width: 250px;
	height: 70px;
	visibility: visible
	}
.bodytext 
	{
	font-size: 14px
	}
.captions  
	{
	color: white;
	font-size: 10px;
	line-height: 14px;
	font-family: Verdana, Geneva, Arial, sans-serif;
	text-align: left
	}

#caption1	
	{
	padding-left: 6px;
	border-left: 1px dashed #66c;
	position: absolute;
	top: -80px;
	left: -200px;
	width: 250px;
	height: 80px;
	visibility: visible;
	display: block
	}

#caption2	
	{
	padding-left: 6px;
	border-left: 1px dashed #66c;
	position: absolute;
	top: 92px;
	left: 125px;
	width: 250px;
	height: auto;
	visibility: visible;
	display: block
	}

The "caption" arent really necessary unless you want to use it as intended on the site.
Here is the html code:

		<div id="horizon">
			<div id="content">
				<div class="bodytext"><div id="caption1" class="captions">The cyan box 'horizon' is positioned absolutely 50% from the top of the page, is 100% wide and has a nominal height of 1px. Its overflow is set to  'visible'.</div>
					This text is<br>
					<span class="headline">DEAD CENTRE</span><br>
					and stays there!
					<div id="caption2" class="captions">The red 'content' box is nested inside the 'horizon' box and is 250px wide, 70px high and is positioned absolutely 50% from the left - but has a negative margin that is exactly half of its width, -125px. To get it to centre vertically, it has a negative top position that is exactly half of its height, -35px.</div>

				</div>
			</div>
		</div>

This is the entire code

<style type="text/css" media="screen"><!--
#horizon		
	{
	color: white;
	background-color: #0ff;
	text-align: center;
	position: absolute;
	top: 50%;
	left: 0px;
	width: 100%;
	height: 1px;
	overflow: visible;
	visibility: visible;
	display: block
	}

#content	
	{
	font-family: Verdana, Geneva, Arial, sans-serif;
	background-color: #f00;
	margin-left: -125px;
	position: absolute;
	top: -35px;
	left: 50%;
	width: 250px;
	height: 70px;
	visibility: visible
	}
	.captions  
	{
	color: white;
	font-size: 10px;
	line-height: 14px;
	font-family: Verdana, Geneva, Arial, sans-serif;
	text-align: left
	}

#caption1	
	{
	padding-left: 6px;
	border-left: 1px dashed #66c;
	position: absolute;
	top: -80px;
	left: -200px;
	width: 250px;
	height: 80px;
	visibility: visible;
	display: block
	}

#caption2	
	{
	padding-left: 6px;
	border-left: 1px dashed #66c;
	position: absolute;
	top: 92px;
	left: 125px;
	width: 250px;
	height: auto;
	visibility: visible;
	display: block
	}
body {
	background-color: #333333;
}
	
	--></style>
	
			<div id="horizon">
			<div id="content">
			  <div class="bodytext">
				  <div id="caption1" class="captions">Here is the example </div>
				  <p>You can put text here to center it.<br>
				  Or you can place an image.<br>
				<img src="http://www.pixel2life.com/images/header_logo.gif" width="276" height="93"></p>
			  </div>
			</div>
		</div>

Back to top

#11 dEcade

P2L Staff

P2L Staff
1,850 posts

Gender:Male
Location:Saskatoon, Saskatchewan
Interests:Guitar, Programming, Storm Chasing, Games (Designing and playing), Hockey, Photography

Posted 25 February 2006 - 08:51 PM

okay try this:

body
{
margin: 0 auto;
text-align: center;
/* Blah Blah Blah */
}
#THE_CENTERED _THING
{
margin: 0 auto;
/* Blah Blah Blah */
}

dEcade

Edited by dEcade, 25 February 2006 - 10:36 PM.

Back to top

#12 greg

Jedi In Training

Members
499 posts

Location:New York City
Interests:Fine art, web and graphic design, naval architecture, chess, and sports.

Posted 25 February 2006 - 10:22 PM

There's no such property as "vertical-align," where did you find that? Also, the auto margin doesn't work in IE.

Back to top

#13 dEcade

P2L Staff

P2L Staff
1,850 posts

Gender:Male
Location:Saskatoon, Saskatchewan
Interests:Guitar, Programming, Storm Chasing, Games (Designing and playing), Hockey, Photography

Posted 25 February 2006 - 10:37 PM

Woops, ment to put text-align fixed now :blush:

dEcade

Back to top

#14 rc69

PHP Master PD

P2L Staff
3,827 posts

Gender:Male
Location:Here
Interests:Web Development

Posted 25 February 2006 - 11:09 PM

Greg, i'm sorry, but your last post is incorrect.
vertical-align does exist: http://www.w3schools...tical-align.asp
And the auto margin does work in IE, you just have to make sure the element has a width (img elements don't count): http://www.w3.org/St...007/center.html (coincedently, this link has a tutorial on vertical centering, unfortunately, it doesn't work in IE)

Edited by rc69, 25 February 2006 - 11:10 PM.

Back to top

#15 greg

Jedi In Training

Members
499 posts

Location:New York City
Interests:Fine art, web and graphic design, naval architecture, chess, and sports.

Posted 26 February 2006 - 12:12 PM

My mistake. I've always used "v-align." Does auto margin centering work with older IEs? I'm pretty sure it doesn't work somewhere, otherwise there wouldn't be a need for the relative positioning method.

Edited by greg, 26 February 2006 - 12:13 PM.