Some coding help please?

F32 · 08-03-2007, 09:03 PM

Hey, someone recently coded my layout and it's not working properly:

http://www.xeoro.net/_skyhabv51/

the 3rd box on the left keeps going down.

also you have to put a set amount of content in the main box otherwise there will be a gap at the end.

+rep to any help

Mentor · 08-03-2007, 10:08 PM

Just put the main content aria div below the rest of the left aligned ones, You have the first two before it, the next oens after, so there automaticaly clearing the bottom of the content aria div which for the lower ones is above em

F32 · 08-03-2007, 10:11 PM

Ok, I'll do that tomorrow but I still think there's the problem of the gap but I'll update tomorrow.

Thanks.

Mentor · 08-03-2007, 10:16 PM

In firefox theres a gap between the second and 3rd box, which is to large and doesnt fit? i though that was what the problem is. I then described the solution.

Aka, it now

HTML Code:

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>

	<link rel="stylesheet" type="text/css" href="style.css" />

</head>

<body>

<div align="center">

	<div id="conttop"></div>

	
		<div id="container">
		
		<div id="boxcont">
		
		
				
			<div id="banner"></div>
			
			
						
				<div id="rstatstop"></div>
				
					<div id="rstats">
					
						The really cool radio stats <strong>would</strong> go here.
					
					</div>
									
				<div id="rstatsbot"></div>	
																	
							<div id="navtop"></div>

							<div id="ctop"></div>
							
							<div class="leftboxes">
								
									The really cool nav <strong>would</strong> go here.
								
							</div>
								
							<div id="maincontent">
								
									<p>Lorem ipsum dolor sit amet, consectetur adipisicing in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum asd asd as d as da das sd asd asd d as asd asd das asd asd a sd asd asd asd asd asd asd  asd asd asd asd dsasddas sda asd das sda asd asd asd asd asd asd sda asd asd asd  asd asdsd a sda asd sda asd sda asd asd asd asd das asd asd asd asd asd asd asd asd asd  asdasd .</p>
<br /><br />

									
							</div>
							
							<div class="leftbottom"></div>	
							
							<div id="lupdates"></div>
								
								<div class="leftboxes">
								
									The really cool updates <strong>would</strong> go here.
								
								</div>
								
							<div class="leftbottom"></div>
							
							<div id="contentbot"></div>

							
							<div id="rplayer"></div>
								
								<div class="leftboxes">
								
									The really cool radio player <strong>would</strong> go here.
								
								</div>
								
							<div class="leftbottom"></div>
							
							<div id="sstats"></div>
								
								<div class="leftboxes">
								
									The really cool site stats <strong>would</strong> go here.
								
								</div>

								
							<div class="leftbottom"></div>																																																	
																																			
						</div>			
						
										
															
		</div>
		
	<div id="contbot"></div>
	
</div>

</body>
</html>

It theoerticaly fixed, aka i moved a few div layers around

HTML Code:

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>

	<link rel="stylesheet" type="text/css" href="style.css" />

</head>

<body>

<div align="center">

	<div id="conttop"></div>

	
		<div id="container">
		
		<div id="boxcont">
		
		
				
			<div id="banner"></div>
			
			
						
				<div id="rstatstop"></div>
				
					<div id="rstats">
					
						The really cool radio stats <strong>would</strong> go here.
					
					</div>
									
				<div id="rstatsbot"></div>	
																	
							<div id="navtop"></div>

							<div id="ctop"></div>
							
							<div class="leftboxes">
								
									The really cool nav <strong>would</strong> go here.
								
							</div>
								

							
							<div class="leftbottom"></div>	
							
							<div id="lupdates"></div>
								
								<div class="leftboxes">
								
									The really cool updates <strong>would</strong> go here.
								
								</div>
								
							<div class="leftbottom"></div>
							
							<div id="contentbot"></div>

							
							<div id="rplayer"></div>
								
								<div class="leftboxes">
								
									The really cool radio player <strong>would</strong> go here.
								
								</div>
								
							<div class="leftbottom"></div>
							
							<div id="sstats"></div>
								
								<div class="leftboxes">
								
									The really cool site stats <strong>would</strong> go here.
								
								</div>

								
							<div class="leftbottom"></div>																															                               <div id="maincontent">
								
									<p>Lorem ipsum dolor sit amet, consectetur adipisicing in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum asd asd as d as da das sd asd asd d as asd asd das asd asd a sd asd asd asd asd asd asd  asd asd asd asd dsasddas sda asd das sda asd asd asd asd asd asd sda asd asd asd  asd asdsd a sda asd sda asd sda asd asd asd asd das asd asd asd asd asd asd asd asd asd  asdasd .</p>
<br /><br />

									
							</div>																									
																																			
						</div>			
						
										
															
		</div>
		
	<div id="contbot"></div>
	
</div>

</body>
</html>

(probably wrong as i didnt check and you div hyerachie is messed up, so i may have dumped it in the wrong place)

F32 · 09-03-2007, 04:37 PM

Seems to have sorted one problem out but created another:

http://www.xeoro.net/_skyhabv51fix/

YouFail · 09-03-2007, 04:47 PM

Code:

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>

	<link rel="stylesheet" type="text/css" href="style.css" />

</head>

<body>

<div align="center">

	<div id="conttop"></div>

	
		<div id="container">
		
		<div id="boxcont">
		
		
				
			<div id="banner"></div>
			
			
						
				<div id="rstatstop"></div>
				
					<div id="rstats">
					
						The really cool radio stats <strong>would</strong> go here.
					
					</div>
									
				<div id="rstatsbot"></div>	
																	
							<div id="navtop"></div>

							<div id="ctop"></div>
							
							<div class="leftboxes">
								
									The really cool nav <strong>would</strong> go here.
								
							</div>
								

							
							<div class="leftbottom"></div>	
							
							<div id="lupdates"></div>
								
								<div class="leftboxes">
								
									The really cool updates <strong>would</strong> go here.
								
								</div>
								
							<div class="leftbottom"></div>
							
							<div id="rplayer"></div>
								
								<div class="leftboxes">
								
									The really cool radio player <strong>would</strong> go here.
								
								</div>
								
							<div class="leftbottom"></div>
							
							<div id="sstats"></div>
								
								<div class="leftboxes">
								
									The really cool site stats <strong>would</strong> go here.
								
								</div>

								
							<div class="leftbottom"></div>																															                               <div id="maincontent">
								
									<p>Lorem ipsum dolor sit amet, consectetur adipisicing in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum asd asd as d as da das sd asd asd d as asd asd das asd asd a sd asd asd asd asd asd asd  asd asd asd asd dsasddas sda asd das sda asd asd asd asd asd asd sda asd asd asd  asd asdsd a sda asd sda asd sda asd asd asd asd das asd asd asd asd asd asd asd asd asd  asdasd .</p>
<br /><br />

									
							</div>	

<div id="contentbot"></div>																								
																																			
						</div>

F32 · 09-03-2007, 04:50 PM

Now, bottom of container missing and big gap:

http://www.xeoro.net/_skyhabv51fix/

Mentor · 09-03-2007, 10:37 PM

Originally Posted by Xeoro

Seems to have sorted one problem out but created another:

http://www.xeoro.net/_skyhabv51fix/

Lol, oops i forgot to move the top down with it :p I think it put it in the right place, Make sure the two divs aint set to clear anything though, or it will sit below the side ones all together, also make sure the left bar elements are all floated correctly

HTML Code:

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>

	<link rel="stylesheet" type="text/css" href="style.css" />

</head>

<body>

<div align="center">

	<div id="conttop"></div>

	
		<div id="container">
		
		<div id="boxcont">
		
		
				
			<div id="banner"></div>
			
			
						
				<div id="rstatstop"></div>
				
					<div id="rstats">
					
						The really cool radio stats <strong>would</strong> go here.
					
					</div>
									
				<div id="rstatsbot"></div>	
																	
							<div id="navtop"></div>

							
							
							<div class="leftboxes">
								
									The really cool nav <strong>would</strong> go here.
								
							</div>
								

							
							<div class="leftbottom"></div>	
							
							<div id="lupdates"></div>
								
								<div class="leftboxes">
								
									The really cool updates <strong>would</strong> go here.
								
								</div>
								
							<div class="leftbottom"></div>
							
							<div id="contentbot"></div>

							
							<div id="rplayer"></div>
								
								<div class="leftboxes">
								
									The really cool radio player <strong>would</strong> go here.
								
								</div>
								
							<div class="leftbottom"></div>
							
							<div id="sstats"></div>
								
								<div class="leftboxes">
								
									The really cool site stats <strong>would</strong> go here.
								
								</div>

								
							<div class="leftbottom"></div>																						<div id="ctop"></div>								                               <div id="maincontent">
								
									<p>Lorem ipsum dolor sit amet, consectetur adipisicing in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum asd asd as d as da das sd asd asd d as asd asd das asd asd a sd asd asd asd asd asd asd  asd asd asd asd dsasddas sda asd das sda asd asd asd asd asd asd sda asd asd asd  asd asdsd a sda asd sda asd sda asd asd asd asd das asd asd asd asd asd asd asd asd asd  asdasd .</p>
<br /><br />

									
							</div>																									
																																			
						</div>			
						
										
															
		</div>
		
	<div id="contbot"></div>
	
</div>

</body>
</html>

F32 · 09-03-2007, 10:52 PM

Kind of there

http://www.xeoro.net/_skyhabv51fix/

F32 · 09-03-2007, 11:49 PM

Problems all sorted now.

Thanks Carl, +Rep.

Thread: Some coding help please?

Thread Tools

Some coding help please?

Posting Permissions