Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations Chris Miller on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

CSS Divs made horizontal Scroll bar

Status
Not open for further replies.
Dashsa

Dashsa

Programmer
Aug 7, 2006
110
US
Hello,
I am still having HUGE issues with a site I am building.
I made the site But now want the site to be in the middle of the screen.
I have achieved this Here: The Main issue is that since I added the code
Code: 
#wrapper {
   background-color:#97d4ff;
   width:960px;
   height:1000px;
   margin:0px auto;
}
to center the site I had to change all the div attributes. This has caused scroll bars on the bottom of my page that I dont need.
How can I resolve this issue?
Thanks
D
 
Sort by date Sort by votes
I just checked. There are 143 validation errors with that page. Fixing those may help with the scroll bar. At a minimum, you should fix the page so that it validates.

-George

"The great things about standards is that there are so many to choose from." - Fortune Cookie Wisdom
 
Upvote 0 Downvote
try this...

Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
   "[URL unfurl="true"]http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">[/URL]
<html xmlns="[URL unfurl="true"]http://www.w3.org/1999/xhtml">[/URL]
	<head>
		<meta name="description" content="Indoor Playground in Hilton Head Island , South Carolina," />
		<meta name="keywords" content="Indoor Playground, party, kids birthday parties, birthday party,Indoor play center,Indoor Jump center,Hilton Head Family entertainment, birthday parties, entertainment, party rental,Hilton Head Island, Bluffton" />
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
		<link href="ip.css" type="text/css" rel="stylesheet" />
		<title>Island-Playground</title>
	</head>
	<body>
		<div id="wrapper">
			<!-- Start of StatCounter Code -->
			<script type="text/javascript">
				var sc_project=3407732; 
				var sc_invisible=1; 
				var sc_partition=37; 
				var sc_security="0a3b75b2"; 
			</script>

			<script type="text/javascript" src="[URL unfurl="true"]http://www.statcounter.com/counter/counter_xhtml.js"></script><noscript><div[/URL] class="statcounter"><a class="statcounter" href="[URL unfurl="true"]http://www.statcounter.com/"><img[/URL] class="statcounter" src="[URL unfurl="true"]http://c38.statcounter.com/3407732/0/0a3b75b2/1/"[/URL] alt="web analytics" /></a></div></noscript>
			<!-- End of StatCounter Code -->
			<div style="float:left;"><img src="[URL unfurl="true"]http://www.island-playground.com/Images/logo.jpg"[/URL] alt="ss" /></div>
			<div style="float:right;"><img src="[URL unfurl="true"]http://www.island-playground.com/Images/indexLogo.jpg"[/URL] alt="" /></div>
			<div style="clear:left;"></div>
			
			
			<div style="float:left; width:130px; margin-left:20px;">
				<a href="index.html" onmouseover="document.index.src='[URL unfurl="true"]http://www.island-playground.com/Images/homebuttonO.jpg';"[/URL] onmouseout="document.index.src='[URL unfurl="true"]http://www.island-playground.com/Images/h.jpg';"><img[/URL] src="[URL unfurl="true"]http://www.island-playground.com/Images/h.jpg"[/URL] style="border:none;" alt="" /></a><br />
				<a href="About.html" onmouseover="document.About.src='[URL unfurl="true"]http://www.island-playground.com/Images/AboutButtonO.jpg';"[/URL] onmouseout="document.About.src='[URL unfurl="true"]http://www.island-playground.com/Images/Aboutbutton.jpg';"><img[/URL] src="[URL unfurl="true"]http://www.island-playground.com/Images/Aboutbutton.jpg"[/URL] alt="" /></a><br />
				<a href="Open.html" onmouseover="document.Open.src='[URL unfurl="true"]http://www.island-playground.com/Images/OpenbuttonO.jpg';"[/URL] onmouseout="document.Open.src='[URL unfurl="true"]http://www.island-playground.com/Images/Openbutton.jpg';">[/URL] <img src="[URL unfurl="true"]http://www.island-playground.com/Images/Openbutton.jpg"[/URL] alt="" /></a><br />
				<a href="Parties.html" onmouseover="document.party.src='[URL unfurl="true"]http://www.island-playground.com/Images/PartiesbuttonO.jpg';"[/URL] onmouseout="document.party.src='[URL unfurl="true"]http://www.island-playground.com/Images/Partiesbutton.jpg';"><img[/URL] src="[URL unfurl="true"]http://www.island-playground.com/Images/Partiesbutton.jpg"[/URL] alt="" /></a><br/>
				<a href="Classes.html" onmouseover="document.cla.src='[URL unfurl="true"]http://www.island-playground.com/Images/ClassesbuttonO.jpg';"[/URL] onmouseout="document.cla.src='[URL unfurl="true"]http://www.island-playground.com/Images/Classesbutton.jpg';"><img[/URL] src="[URL unfurl="true"]http://www.island-playground.com/Images/Classesbutton.jpg"[/URL] alt="" /></a><br />
				<a href="Faqs.html" onmouseover="document.faq.src='[URL unfurl="true"]http://www.island-playground.com/Images/FAQO.jpg';"[/URL] onmouseout="document.faq.src='[URL unfurl="true"]http://www.island-playground.com/Images/FaqButton.jpg';"><img[/URL] src="[URL unfurl="true"]http://www.island-playground.com/Images/FaqButton.jpg"[/URL] alt="" /></a><br />
				<a href="#" onmouseover="document.pic.src='[URL unfurl="true"]http://www.island-playground.com/Images/photoButtonO.jpg';"[/URL] onmouseout="document.pic.src='[URL unfurl="true"]http://www.island-playground.com/Images/Photobutton.jpg';"><img[/URL] src="[URL unfurl="true"]http://www.island-playground.com/Images/Photobutton.jpg"[/URL] alt="" /></a><br />
				<a href="Employment.html" onmouseover="document.emp.src='[URL unfurl="true"]http://www.island-playground.com/Images/EmploymentO.jpg';"[/URL] onmouseout="document.emp.src='[URL unfurl="true"]http://www.island-playground.com/Images/Employmentbutton.jpg';"><img[/URL] src="[URL unfurl="true"]http://www.island-playground.com/Images/Employmentbutton.jpg"[/URL] alt="" /></a><br />
				<a href="Directions.html" onmouseover="document.dir.src='[URL unfurl="true"]http://www.island-playground.com/Images/directionsO.jpg';"[/URL] onmouseout="document.dir.src='[URL unfurl="true"]http://www.island-playground.com/Images/Directionsbutton.jpg';"><img[/URL] src="[URL unfurl="true"]http://www.island-playground.com/Images/Directionsbutton.jpg"[/URL] alt="" /></a><br />
				<a href="ContactUs.html" onmouseover="document.con.src='[URL unfurl="true"]http://www.island-playground.com/Images/contactUsO.jpg';"[/URL] onmouseout="document.con.src='[URL unfurl="true"]http://www.island-playground.com/Images/contactUs.jpg';"><img[/URL] src="[URL unfurl="true"]http://www.island-playground.com/Images/contactUs.jpg"[/URL] alt="" /></a><br />
				<a href="Forms.html" onmouseover="document.form.src='[URL unfurl="true"]http://www.island-playground.com/Images/waiverButtonOver.jpg';"[/URL] onmouseout="document.form.src='[URL unfurl="true"]http://www.island-playground.com/Images/waiverButton.jpg';"><img[/URL] src="[URL unfurl="true"]http://www.island-playground.com/Images/waiverButton.jpg"[/URL] alt="" /></a><br />
			</div>

			<div style="float:left;text-align:center; width:580px;">
				<img src="[URL unfurl="true"]http://www.island-playground.com/Images/mainCont.jpg"[/URL] alt="" />
				<div id="blueHeading">
					<br />
					Rain or shine, Island Playground offers 
					exercise for young bodies AND minds!
				</div>
			</div>
			
			<div id="ANewsBG" style="float:right;">
				<b>Island Playground<br />
				will be<br />
				OPENING SOON!</b><br />
				Check back for <br />
				Grand Opening details!<br />
				<br />

				Now taking <b>birthday <br />
				Party reservations</b> for<br />
				May-August. <b> $20 OFF</b> if <br />
				booked before April 1st<br />
				<br />
				<b>Now Available:</b><br />

				Frequent Player <br />
				cards<br />
				Buy now and get <br />
				<b>a free T-shirt</b><br />
			</div>
			<div style="clear:both;"></div>
		

			<div style="float:left;">
				<a href="[URL unfurl="true"]http://www.island-playground.com/ipForm/ip3.jpg"[/URL] target="_blank"><img src="[URL unfurl="true"]http://www.island-playground.com/Images/ipstar.jpg"[/URL] alt="" /></a>
			</div>

			<div id="indexFooter" style="float:left; padding-top:15px; margin-left:50px;">		
				<div style="float:left; margin-left:20px;">
					<img src="[URL unfurl="true"]http://www.island-playground.com/Images/sock.gif"[/URL] alt="" />
				</div>
				<div style="float:left; margin-left:20px; padding-top:10px;">
					Don't Forget <br />Your Socks
				</div>		
										
				<div style="float:left; margin-left:100px;">
					<a href="[URL unfurl="true"]http://www.island-playground.com/ipForm/IPwaiver.pdf"[/URL] target="blank"><img src="[URL unfurl="true"]http://www.island-playground.com/Images/PDF_icon.gif"[/URL] style="border:none;" alt="" /></a>
				</div>
				<div style="float:left; margin-left:20px; padding-top:10px;">
					<a href="[URL unfurl="true"]http://www.island-playground.com/ipForm/IPwaiver.pdf"[/URL] target="blank">
						Download <br />Waiver
					</a>
				</div>		
			</div>
										
			<div style="float:right; margin-top:-40px;">
				<a href="mailto:jen@island-playground.com?subject=Please add me to your news letter"><img src="[URL unfurl="true"]http://www.island-playground.com/Images/star.jpg"[/URL] alt="" /></a>
			</div>
			
			<div style="clear:both;"></div>
					
			<div style="text-align:center;">
				1538 Fording Island Road, Suite 104<br />
				Hilton Head, SC 29926<br />
				(843) 837-8383<br />
			</div>

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

Code: 
img
{
	border:none;
}

#all{
height:200%;
width:960px;
background-color:#97d4ff;
background-repeat:repeat-y;
}

#wrapper {
   /* this sets the blue background color */
   background-color:#97d4ff;
   /* this dictates the total width of the content */
   width:960px;
   height:1000px;
   /* this tells the page to put an equal amount of margin on both sides, essentially "centering" the content */
   margin:0px auto;
}

#Aall{
height:800px;
width:960px;
background-color:#97d4ff;
background-repeat:repeat-y;
}
#Eall{
height:1050px;
width:960px;
background-color:#97d4ff;
background-repeat:repeat-y;
}
#Oall{
height:1300PX;
width:960px;
background-color:#97d4ff;
background-repeat:repeat-y;
}
#Pall{
height:2130px;
width:960px;
background-color:#97d4ff;
background-repeat:repeat-y;
}
#Call{
height:2000px;
width:960px;
background-color:#97d4ff;
background-repeat:repeat-y;
}

#background{
position:absolute;
}

#Logo{
/*position:relative;
top:0px;
left:0px;
z-index:1;*/
}

#LogoRight{
position:absolute;
top:35px;
left:690px;
background-color:#97d4ff;
}
#LogoRight1{
position:absolute;
top:35px;
left:670px;
}
#TRGrapihc{
position:absolute;
top:15px;
left:420px;
}
#TRGrapihc1{
position:relative;
top:-200px;
left:375px;
}
#Jumping{
position:absolute;
top:15px;
left:540px;
}

#blueHeading{
font-family:Verdana;
color:#ff6600;
font-size:24px;
}


#ANewsBG
{
	background-repeat:no-repeat;
	color:#ffffff;
	font-size:14px;
	text-align:center;
	font-family:Verdana, Arial, Helvetica, sans-serif;
	background-image:url([URL unfurl="true"]http://www.island-playground.com/Images/NewsBG.jpg);[/URL]
	width:200px;
	height:295px;
	padding-top:10px;
	margin-right:20px;
}

#star{
position:relative;
top:-1200px;
left:750px;
border:none;
		}
		
#Packetstar
{
	border:none;
}
		
		
				
	#socks{
	position:absolute;
	top:650px;
	left:790px;
	
	}

#LeftNavMenu{
border:none;
position:relative;
left:20px;
top:-270px;
}

#mainContent{
width:500px;
position:relative;
top:-970px;
left:200px;
font-size:22px;
}
#indexFooter
{
	background-image:url([URL unfurl="true"]http://www.island-playground.com/Images/footerBG.jpg);[/URL]
	background-repeat:no-repeat;
	width:503px;
	height:94px;
}
#Isox{
position:absolute;
width:100%;
overflow:hidden;
height:100%;
left:15px;
top:18px;
}
#IsoxText{
font-size:17px;
position:absolute;
left:70px;
font-family:Verdana;
}
#Ipdf{
position:absolute;
left:300px;
top:18px;
}
#IpdfText{
font-size:17px;
position:absolute;
left:70px;
font-family:Verdana;
}

					#footer{
						text-align:center;
						top:-1200px;
						left:0px;
						position:relative;
						}
						#Afooter{
						text-align:center;
						top:750px;
						left:350px;
						position:absolute;
						}
						#Cfooter{
						text-align:center;
						top:1930px;
						left:350px;
						position:absolute;
						}
			#Openfooter{
						text-align:center;
						top:1250px;
						left:350px;
						position:absolute;
						}
						
						
				#Employfooter{
						text-align:center;
						top:1000px;
						left:310px;
						position:absolute;
						}		
						
						
						
						#Partyfooter{
						text-align:center;
						top:2070px;
						left:350px;
						position:absolute;
						}
						
#AboutMainContent{
width:550px;
height:320px;
overflow:auto;
position:absolute;
top:250px;
left:180px;
font-size:18px;
}

#AboutMainContent1
{
	position:absolute;
	width:570px;
	height:100%;
	overflow:hidden;
	top:250px;
	left:160px;
	font-family:Verdana;
	font-size:13px;
}	
						
#MainContentHead
{
	font-family:Verdana;
	font-size:16px;
	font-weight:bold;
}

-George

"The great things about standards is that there are so many to choose from." - Fortune Cookie Wisdom
 
Upvote 0 Downvote
Thanks
Works Great!
Now I just have to figure out what you did!
Thanks Again
 
Upvote 0 Downvote
Yeah. That's the problem with posting a solution without an explanation. Sorry.

First of all, you should realize that there are parts of the css file that are no longer being used. More significantly, nothing is positioned relative or absolute. Everything is accomplished using floating divs.

Also, the page should validate now except for the target="_blank" part. There are javascript ways to accomplish this while allowing the page to validate. A search in this forum should help you do that part.

If there's anything you are not clear about, just let me know and I'll try to help.

-George

"The great things about standards is that there are so many to choose from." - Fortune Cookie Wisdom
 
Upvote 0 Downvote
George,
You are awesome!!
I think I understand the changes and will read up more about floating Div's and will use them in the rest of the site as well as in the future.

Thanks
D
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

PeDa
  • Locked
  • Question
CSS two level horizontal menu
Replies
0
Views
593
PeDa
PeDa
jizzer
  • Locked
  • Question
HTML/CSS Image map with multiple tool-tips
Replies
3
Views
1K
spamjim
spamjim
Expoverse
  • Locked
  • Helpful tip
Solution to CSS Two Level Horizonal Menu 1
Replies
1
Views
741
pmonett
pmonett
PeDa
  • Locked
  • Question
Horizontal rule and CSS problem 2
Replies
2
Views
629
PeDa
PeDa
tyutghf
  • Locked
  • Question
Slanted divs
Replies
0
Views
607
tyutghf
tyutghf

Part and Inventory Search

Sponsor

Back
Top