17 replies [Last post]
alxmaverick
Offline
Regular
Last seen: 13 years 49 weeks ago
Timezone: GMT-8
Joined: 2009-02-23
Posts: 11
Points: 0

http://www.inspirefxstudios.com/gopro/

My layout is vertically centered. However on smaller screens (768 height or less), the top of the page gets cut off even though there is a scroll bar. There's about a 10-20px cutoff section and I can't figure out why.

The div #content is what I used to vertically position the window. Can someone tell me what I am doing wrong? I tried using padding, margin, and min-height to no avail. I know I can change the margin-top value but I would prefer not to do so as to keep it absolutely centered when the screen is bigger.

Any help is appreciated!

style.css

body {
	background: url(layout/bg_gradient.jpg) fixed repeat-x center;
	padding: 0;
	margin: 0;
}
 
#content {
	/*	For vertically centering method - <a href="http://tutorials.alsacreations.com/centrer/" rel="nofollow">http://tutorials.alsacreations.com/centrer/</a>	*/
	position: absolute;
	padding: 0px;
	left: 50%;
	top: 50%;
	margin-top: -300px;	/* half of the height */
	margin-left: -480px;	/* half of the width */
	width: 960px;
	height: 600px;
	background: #000 url(layout/bg_innergradient.jpg) center;
	border: #fff solid 1px;
}
 
#top {
	float: left;
	width: 100%;
	height: 100px;
	margin: 0px;
	background: #fff url("layout/header.jpg") center;
	border-bottom: #fff solid 1px;
	text-align: right;
}
 
#navpromote {
	height: 62px;
	margin-top: 0;
}
 
#navpromote a img {
	border: 0;
	margin: 0;
}
 
#navbar {
	height: 38px;
}
 
#navbar a img {
	margin-left: 20px;
	margin-right: 20px;
	border: 0;
}
 
#navbar a:hover {
	border-bottom: #f600ff solid 2px;	*/
/*	border-top: #f600ff dotted 2px;	*/
	color: #f600ff;}
 
#middle {
	float: left;
	width: 100%;
	height: 478px;
}
 
#bottom {
	postion: absolute;
	top: -600px;
	float: left;
	width: 100%;
	height: 20px;
	background: #fff;
	border-top: #fff solid 1px;
}
 
#lside {
	float: left;
	width: 300px;
	height: 100%;
	text-align: left;
	border-right: #fff solid 1px;
}
 
#lside a {
	color: #fa66ff;
}
 
#lside a:hover {
	text-decoration: none;
	border-bottom: #f600ff dotted 1px;
	color: #f600ff;
}
 
#mside {
	float: left;
	height: 100%;
	text-align: left;
}
 
#rside {
	float: right;
	width: 659px;
	height: 100%;
	text-align: left;
}
 
#rside a {
	color: #fa66ff;
}
 
#rside a:hover {
	text-decoration: none;
	border-bottom: #f600ff dotted 1px;
	color: #f600ff;
}
 
#main {
	float: right;
	position: relative;
	top: 320px;
	width: 900px;
	text-align: left;
	background: #000;
}
 
p.content {
	margin: 15px;
	font-family: century gothic, verdana;
	font-size: 9.5pt;
	color: #fff;
	line-height: 150%;
}
 
ul {
	margin: 15px;
	list-style-type: disc;
	font-family: century gothic, verdana;
	font-size: 9.5pt;
	color: #fff;
	line-height: 150%;
}
 
#footer {
	position: absolute;
	left: 50%;
	top: 50%;
	margin-top: 300px;
	margin-left: -480px; /* half of the width */
	width: 960px;
 
	color: #333;
}
 
#footer a {
	color: #333;
}
 
#footer a:hover {
	text-decoration: none;
	border-bottom: #f600ff dotted 1px;
	color: #f600ff;  /*fa66ff*/
}
 
#footer p {
	text-align: center;
	margin: 6px;
	font-family: verdana;
	font-size: 8pt;
	color: #333;
}
 
img.thumb {
	margin-right: 5px;
	margin-top: 8px;
	border: black solid 1px;
}
 
h1 {
	margin: 40px 15px 15px 15px;
	font: 20px Century Gothic, Verdana;
	letter-spacing: 2px;
	font-smooth:always;
	/*	font-weight: bold;*/
	color: #95e0e2;
	text-align: left;
}
 
h2 {
	margin: 40px 15px 15px 15px;
	font: 16px Century Gothic, Verdana;
	font-smooth:always;
	/*	font-weight: bold;*/
	color: #fff;
	text-align: left;
}
 
table.events {
	margin-left: 15px;
	width: 300px;
	border-collapse: collapse;
	border-spacing: 0px;
}
 
table.events td {
	text-align:left;
	font-family: century gothic, verdana;
	font-size: 9.5pt;
	color: #fff;
	line-height: 150%;
}
 
#meet {
	float: right;
	margin-right: 25px;
	text-align: right;
	font-family: century gothic, verdana;
	font-size: 9.5pt;
}
 
/*=========== Links ===========*/
 
a:link {
	text-decoration: none;
}
 
a:hover {
	text-decoration: none;
	background-color: transparent;
/*	border-bottom: #f600ff dotted 1px;*/
	color: #fa66ff;  /*f600ff*/
}
 
a:visited {
	text-decoration: none;
	background-color: transparent;
}
 
/*=========== <a href="http://jlhaslip.com/samples/tooltips/" rel="nofollow">http://jlhaslip.com/samples/tooltips/</a> ===========*/
 
a.info {
	position: relative;	/* this is the key */
	z-index: 24;
}
a.info:hover {
	z-index: 25;
}
a.info span {
	display: none;	/* hide the span text */
}
a.info:hover span {
	/*the span will display only on :hover state*/
	padding: 5px;
	display: block;
	position: absolute;
	bottom: 24px;
	left: 24px;
	background-color: #000;
	border: 1px solid #fff;
	color: #fff;
	text-align: center;
	font-family: Century Gothic, Verdana;
	font-size: 9.5px;
	z-index: 30;
}
 
a.info:hover span img {
	border: 1px solid #fff;
}
 
/*================Promoter Profiles==================*/
 
a.profile {
	z-index: 24;
}
a.profile:focus {
	z-index: 25;
}
a.profile span {
	display: none;	/* hide the span text */
}
a.profile:focus span {
	display: block;
	position: absolute;
	text-align: center;
	color: #fff;
	top: 160px;
	left: 440px;
	z-index: 50;
}
a.profile:focus span img {
	border: 1px solid #fff;
}
a.profile:focus span iframe {
	margin-height: 0 ;
	frameborder: 0;
	color: #fff;
}

index.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>GO Productions Select</title>
<link rel="stylesheet" media="all" type="text/css" href="style.css" />
<!--[if lte IE 7]>
<link rel="stylesheet" href='ie_fixes.css' type="text/css" media="screen, projection" />
<![endif]-->
<script src="Scripts/AC_RunActiveContent.js" type="text/javascript"></script>
</head>
<body>
<div id="content" style="background: #000 url(layout/bg_citynight.jpg) center;">
  <div id="top">
  	<div id="navpromote"><a href="contact.html"><img src="layout/promote.jpg"></a></div>
	<div id="navbar">	
      <a href="index.html"><img src="layout/nv_main.jpg"></a>
      <a href="lifestyle.html"><img src="layout/nv_lifestyle.jpg"></a>
      <a href="details.html"><img src="layout/nv_details.jpg"></a>
      <a href="meetgo.html"><img src="layout/nv_meetgo.jpg"></a>
      <a href="events.html"><img src="layout/nv_events.jpg"></a>
      <a href="contact.html"><img src="layout/nv_contact.jpg"></a>	</div>
  </div>
  <div id="middle">
    <div id="main">
      <p class="content"><font style="color: #42baff;">GO Productions</font> produces some of the finest and exclusive events in the greater Los Angeles area.  We provide opportunities to experience the premiere fabulous nightlife that this city has to offer, ranging from intimate private gatherings, high profile nightclubs, to massive social galas with the common singularity of these events being dynamic and compelling.  The success of a GO Pro event comes from the GO Pro team who selects to be forward-thinking, selects to be fun-loving, LA socialites choosing not to only live in the city of bright lights but shape it and move it.  This is our story...our vision...do you have what it takes to be a GO Pro Select?</p>
    </div>
  </div>
  <div id="bottom">&nbsp;</div>
</div>
<div id="footer">
  <p>Copyright © 2009. GO Productions LA. All Rights Reserved. Sitemap - <a href="index.html">Main</a> | <a href="lifestyle.html">Lifestyle</a> | <a href="details.html">Details</a> | <a href="meetgo.html">Meet GO</a> | <a href="events.html">Events</a> | <a href="contact.html">Contact</a></p>
</div>
</body>
</html>

xeeshan
Offline
Regular
Last seen: 13 years 48 weeks ago
Joined: 2009-02-26
Posts: 38
Points: 0

in your css replace #content

in your css replace #content with following.

#content {
/* For vertically centering method - http://tutorials.alsacreations.com/centrer/ */
padding: 0px;
margin:auto;
width: 960px;
height: 600px;
background: #000 url(layout/bg_innergradient.jpg) center;
border: #fff solid 1px;
}

alxmaverick
Offline
Regular
Last seen: 13 years 49 weeks ago
Timezone: GMT-8
Joined: 2009-02-23
Posts: 11
Points: 0

no longer vertically centered...

Thanks Xeeshan, however doing so means my content is no longer vertically centered. Is there another solution?

xeeshan
Offline
Regular
Last seen: 13 years 48 weeks ago
Joined: 2009-02-26
Posts: 38
Points: 0

okies.looking into it.

okies.looking into it.

xeeshan
Offline
Regular
Last seen: 13 years 48 weeks ago
Joined: 2009-02-26
Posts: 38
Points: 0

try these. #main { float:

try these.

#footer {

margin:auto;
width: 960px;

color: #333;
}

#content {
/* For vertically centering method - http://tutorials.alsacreations.com/centrer/ */
padding: 0px;
margin:auto;
width: 960px;
height: 600px;
background: #000 url(layout/bg_innergradient.jpg) center;
border: #fff solid 1px;
}

if you want to align black content area on main page to center ..then use this as well..

#main {
float: left;
position: relative;
top: 320px;
left:30px;
width: 900px;
text-align: left;
background: #000;
}

alxmaverick
Offline
Regular
Last seen: 13 years 49 weeks ago
Timezone: GMT-8
Joined: 2009-02-23
Posts: 11
Points: 0

Still same issue actually.

Still same issue actually. The content is not vertically centered. It sticks to the top of the page.

xeeshan
Offline
Regular
Last seen: 13 years 48 weeks ago
Joined: 2009-02-26
Posts: 38
Points: 0

sorry if didn't get you. you

sorry if didn't get you. you mean to say that the margin from top is less, can you explain vertically centered? or it wud be great if you explain it by screen shot then i can fix it quickly.

alxmaverick
Offline
Regular
Last seen: 13 years 49 weeks ago
Timezone: GMT-8
Joined: 2009-02-23
Posts: 11
Points: 0

Currently the layout has the

Currently the layout has the content placed in the vertical center. If you have a screen resolution higher than 768px height, you'll see there's equal spacing between the top and bottom of the content area.

www.inspirefxstudios.com/gopro/

However if your screen size is 768px high or lower, you'll notice the promote button on the top of the content area gets cut off, and you can't scroll further upwards to see it.

I want to be able to vertical center the content like I already have, but without the top of the content being cut off like it is now.

Thanks Xeeshan.

xeeshan
Offline
Regular
Last seen: 13 years 48 weeks ago
Joined: 2009-02-26
Posts: 38
Points: 0

i have screen resolution of

i have screen resolution of 1440x900 and i am sending you a screen shot. Do you want it to look like the same as currently i am viewing on 1440x900 resolution. If yes then i will do it accordingly to look like same on lesser resolutions. Please confirm.

http://img22.imageshack.us/my.php?image=28217495.jpg

CheeRSSS

xeeshan
Offline
Regular
Last seen: 13 years 48 weeks ago
Joined: 2009-02-26
Posts: 38
Points: 0

And if your answer is yes to

And if your answer is yes to it. Then all you have to do is to replace #content with the following , also #footer with the following in your css file. I am attaching screen shot of 1024x768 so you can see how it looks like in FireFox. I am testing in firefox. I have an option in FireFox to check it on different resolutions. So i checked it at 1024x768 after making changes to css and here it looks like now.

#content {
background:#000000 url(layout/bg_innergradient.jpg) repeat scroll center center;
border:1px solid #FFFFFF;
height:600px;
margin:15px auto auto;
padding:0;
width:960px;
}

#footer {
color:#333333;
margin:auto;
width:960px;
}

http://img16.imageshack.us/my.php?image=40122368.jpg

same as on higher resolution. No top header cut off.

Going to sleep now as its 4:52 AM here. I will check back later if it solved your problem or not.

C ya

alxmaverick
Offline
Regular
Last seen: 13 years 49 weeks ago
Timezone: GMT-8
Joined: 2009-02-23
Posts: 11
Points: 0

Thank you Xeeshan, haha I

Thank you Xeeshan, haha I really appreciate you putting in the effort, but the page with your solution is still not vertically centered. There needs to be equal spacing between the content and the top and bottom margins of the page. With your solution it won't look centered at higher resolutions because the top margin is always fixed at 15px. That's why I used percentages to begin with. I think I will try putting an invisible wrapper around my content and seeing how that works!

Titan793
Offline
Enthusiast
Syracuse, NY
Last seen: 12 years 12 weeks ago
Syracuse, NY
Timezone: GMT-5
Joined: 2009-02-20
Posts: 285
Points: 5

Hmm.. Just checked out your

Hmm.. Just checked out your site. I do understand why it's happening.. I'll try to play around with some coding as well as I get a chance. I'm at work, and with my boss sitting directly behind me, it's hard to work through problems when you have to minimize your screen every 30 seconds lol.

The issue is that your div is centering fine, but if the browser height only shows 500px for example, after the 50% top position and the negative margin, your div is placing off the screen (as it should) .. the scrollbar is starting at whatever the topmost "on screen" content is, and only picks up things below that. Scroll your browser window vertically down and the bar gets longer, but you never see the stuff that was set off the top of the screen due to the negative top margin. You actually see less and less of the top of your page as the browser height shrinks.

That's an interesting issue.. I'll definitely play around with it too as I get a chance to do so!

The programming part of me wants to use if statements, but I don't know if there is anything in CSS that would work like I want to do. I'm thinking along the lines of: "If the page height is less than or equal to the height of the content div, then just align the div at the top of the page. If the page height is greater than the height of the content div, then use the vertical centering method."

I have no idea if you could do that however lol.. I do love challenges though, I'll see if I can come up with some kind of solution!

Titan793
Offline
Enthusiast
Syracuse, NY
Last seen: 12 years 12 weeks ago
Syracuse, NY
Timezone: GMT-5
Joined: 2009-02-20
Posts: 285
Points: 5

Have a look at

Have a look at this:

http://d-graff.de/fricca/center.html

It does exactly what you're trying to do.. I haven't looked through the CSS code yet, but I'm sure you'll be able to find answers there! (Go go google!)

Edit:
It looks like they are setting the position of the internal div to relative, which places it above the container div (your content div), if the page becomes too small. Which basically does what I said in the last post and ignores your vertical centering code if the height is <= the height of your div. Good luck with this!!

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 1 year 49 weeks ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

Replace the obsolete method

You have picked one of the best known, and worst methods of centering your page vertically; for reasons you already know.

See vertical centering of the page using css. The demo includes a work-around for IE6/7. IE8 works.

See vertical centering of the page using a single celled table. This method is not religiously "pure", but the single celled table does not affect the page's structure. Semantics is wonky, but is balanced by the fact that "single celled table" is an oxymoron. Smile

Either of the methods works just fine, and neither has the ugly side effects of using absolute positioning.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 1 year 49 weeks ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

Titan793 wrote:Have a look

Titan793 wrote:

Have a look at this:

http://d-graff.de/fricca/center.html

Have a care with any method that requires the browser to run in quirks mode. That will create more problems.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

alxmaverick
Offline
Regular
Last seen: 13 years 49 weeks ago
Timezone: GMT-8
Joined: 2009-02-23
Posts: 11
Points: 0

Titan and gary, thank you

Titan and gary, thank you for the help! I finally got it working!

Titan: Thank you for the explanation. I couldn't figure what the heck was going on. Btw, you can type a lot in 30 seconds! Wink

Gary: I went with the single cell table centering method you suggested as I don't know anything about quirk mode and I couldn't get your first method to work haha. Are there any drawbacks to the second method? (it seems more intuitive to me anyways since my html is better than css).

You guys are lifesavers.

Titan793
Offline
Enthusiast
Syracuse, NY
Last seen: 12 years 12 weeks ago
Syracuse, NY
Timezone: GMT-5
Joined: 2009-02-20
Posts: 285
Points: 5

alxmaverick wrote: Titan:

alxmaverick wrote:

Titan: Thank you for the explanation. I couldn't figure what the heck was going on. Btw, you can type a lot in 30 seconds! Wink

Haha.. Yea, I type a lot. One of the side effects of doing this type of stuff a lot. (Online games probably don't help much either lol)

I had found the table method as well, but figured you didn't want to use tables, so I kept looking. I'm of the mindset that if you can get it to work, and get the rest of the page to work as you want it, who cares if it's not the "best" method lol.. although that mindset is not always the best to have!

I'm glad you got it working!

xeeshan
Offline
Regular
Last seen: 13 years 48 weeks ago
Joined: 2009-02-26
Posts: 38
Points: 0

great finally you made it

great finally you made it worked and finally i got to know what you meant by vertical positioning. lol m laughing that i couldn't get what you want to accomplish. anyway i have learned something from your problem so thanks to you. lol