Faux columns issue

Page 1 of 1

9 Replies - 561 Views - Last Post: 01 April 2011 - 03:42 PM

#1 Maakux  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 10
  • Joined: 30-March 11

Faux columns issue

Posted 31 March 2011 - 02:42 PM

Hi Dream.In.Code community,

I am having a issue with using faux columns. It is working as I expected, however, my website uses transparent borders to make it stand out from the background and make it more abstract.

Maybe visuals will help (Image hosted by TinyPic):
Posted Image

Now, my container which wraps the header, navigation, sidebar, content and footer divs has a background-image which contains the image of content and sidebar divs. So, it makes sense that it is poking out of the bottom of the footer. But how can I make it so it doesn't? And shows the rest of the transparent border. And the alpha level is half of 100.

I have tried using a secondary container that wraps only sections of header, navigation, sidebar, content and footer except the only final div that creates the structure. But, I then realised that adding a closing div inside a div structure would cause the outter div to stop; which would break the whole structure.

I then tried adding background-image: none to #footer-bottom, that never worked either. I cannot specify any heights, as the content that is going to be put into the sidebar and content divs will be dynamically inserted by a content management system.

This is the so-called 'fake column' image. It is 1024x1 pixels:
Posted Image
This spans all the way down to the end of the container, which wraps every tag given the exception of body.

And here are the files:

The only HTML file:
<!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" xml:lang="en" lang="en" dir="ltr">

	<head>
	
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
		<link rel="stylesheet" href="themes/linkers/BC1/generic.css" type="text/css" media="screen"/>
		<title>Benscraft - A fun Minecraft server</title>
	
	</head>
	
	<body>
	
		<div id="wrapper">
			
			<div id="header">
			
				<div id="header-structure-layer">
			
					<div id="header-top"></div>
					<div id="header-middle"></div>
					<div id="header-bottom-middle"></div>
					<div id="header-bottom"></div>
				
				</div>
				
				<div id="header-context-layer">
				
					<div id="title">Benscraft</div>
					<div id="version">VER 0.0.0.1 / PRE-ALPHA</div>
				
				</div>
			
			</div>
			
			<div id="navigation">
				
				<div id="navigation-structure-layer">
				
					<div id="navigation-top"></div>
					<div id="navigation-top-middle"></div>
					<div id="navigation-middle"></div>
					<div id="navigation-bottom-middle"></div>
					<div id="navigation-bottom"></div>
				
				</div>
				
				<div id="navigation-context-layer">
				
				
				
				</div>
			
			</div>
			
			<div id="sidebar">
			
				<div id="sidebar-structure-layer">
				
					<div id="sidebar-top"></div>
					<div id="sidebar-bottom">
						
						<div id="sidebar-bottom-buffer">
						
							Sidebar
							
						</div>
						
					</div>
					
				</div>
			
			</div>
		
			<div id="content">
			
				<div id="content-structure-layer">
				
					<div id="content-top"></div>
					<div id="content-bottom">
					
						<div id="content-bottom-buffer">
							
							<h1>Heading 1</h1>
							<h2>Heading 2</h2>
							<h3>Heading 3</h3>
							<h4>heading 4</h4>
							<h5>Heading 5</h5>
							<h6>Heading 6</h6>
							
							<img src="dev/minecraft.jpg" width="250px" height="250px"/>
							
							<table border="0px" cellspacing="2px" cellpadding="2px">
							
								<caption>UI elements</caption>
							
								<tbody>
								
									<tr><td><input type="text"/></td></tr>
									<tr><td><input type="password"/></td></tr>
									<tr><td><input type="radio" name="r"/><input type="radio" name="r"/></td></tr>
									<tr><td><input type="checkbox"/><input type="checkbox"/></td></tr>
									<tr><td><input type="file"/></td></tr>
									<tr><td><select><option>Option 1</option><option>Option 2</option><option>Option 3</option></select></td></tr>
									<tr><td></td></tr>
									
								</tbody>
							
							</table>
							
						</div>
						
					</div>
					
				</div>
			
			</div>
			
			<div id="footer">
			
				<div id="footer-structure-layer">
			
					<div id="footer-top"></div>
					<div id="footer-top-middle"></div>
					<div id="footer-middle"></div>
					<div id="footer-bottom-middle"></div>
					<div id="footer-bottom"></div>
				
				</div>
				
				<div id="footer-context-layer">
					
					
				
				</div>
			
			</div>
		
		</div>
	
	</body>

</html>


The main.css file:
/*

	GRAPHICS (IMAGE RENDERING)
	-----------------------------------------------
	Benscraft - STYLESHEET FILE
	-----------------------------------------------
	- LINKER: generic
	- NAME: main
	- DESCRIPTION: resets margins, adds the
	- background image, and defines boundary,
	- defines basic appearance; font, colours, sizes, etc.
	-----------------------------------------------
	Last updated: Wednesday, 30 March 2011, 01:49PM

*/

body {

	margin: 0px 0px 0px 0px;
	padding: 0px 0px 0px 0px;
	
	background-image: url('../../../images/BC1/generic/background.png');
	background-attachment: fixed;
	background-position: 0px 0px;
	background-color: #000;
	
	font-family: 'Arial', 'Tahoma', 'Verdana', sans-serif;
	font-size: 10pt;
	line-height: 18px;
	color: #FFF;	
	
}

div#wrapper {

	width: 1024px;
	margin: 0px auto 0px auto;
	background-image: url('../../../images/BC1/generic/fake-columns.png');
	
}


And the footer.css file:
/*

	GRAPHICS (IMAGE RENDERING)
	-----------------------------------------------
	Benscraft - STYLESHEET FILE
	-----------------------------------------------
	- LINKER: generic
	- NAME: footer
	- DESCRIPTION: footer definition (structure layer)
	-----------------------------------------------
	Last updated: Wednesday, 30 March 2011, 01:49PM

*/

div#footer {

	clear: both;	
	
}

/* Imaging structure start */

div#footer div#footer-structure-layer div#footer-top {

	background-image: url('../../../images/BC1/generic/footer-top.png');
	width: 1024px; /* FIXED (CHANGE NOT ALLOWED) */
	height: 5px; /* FIXED (CHANGE NOT ALLOWED) */
	
}

div#footer div#footer-structure-layer div#footer-top-middle {

	background-image: url('../../../images/BC1/generic/footer-top-middle.png');
	width: 1024px; /* FIXED (CHANGE NOT ALLOWED) */
	height: 50px; /* DYNAMIC (CHANGE ALLOWED) */		
	
}

div#footer div#footer-structure-layer div#footer-middle {

	background-image: url('../../../images/BC1/generic/footer-middle.png');
	width: 1024px; /* FIXED (CHANGE NOT ALLOWED) */
	height: 8px; /* DYNAMIC (CHANGE ALLOWED) +2 */
	
}

div#footer div#footer-structure-layer div#footer-bottom-middle {

	background-image: url('../../../images/BC1/generic/footer-bottom-middle.png');
	width: 1024px; /* FIXED (CHANGE NOT ALLOWED) */
	height: 50px; /* DYNAMIC (CHANGE ALLOWED) */
	
}

div#footer div#footer-structure-layer div#footer-bottom {

	background-image: url('../../../images/BC1/generic/footer-bottom.png');
	width: 1024px; /* FIXED (CHANGE NOT ALLOWED) */
	height: 23px; /* FIXED (CHANGE NOT ALLOWED) */
	
}

/* Imaging structure stop - Height: 131px (Please change this when you edit heights above!) */

/* Imaging context start */

div#footer div#footer-context-layer {

	position: relative;
	height: 131px;
	margin-top: -131px;
	
}

/* Imaging context stop */


I think they are the only files you may need in order to help me. Thank you.

This post has been edited by Maakux: 31 March 2011 - 02:47 PM


Is This A Good Question/Topic? 0
  • +

Replies To: Faux columns issue

#2 GhandiJones  Icon User is offline

  • D.I.C Head
  • member icon

Reputation: 54
  • View blog
  • Posts: 174
  • Joined: 17-March 11

Re: Faux columns issue

Posted 31 March 2011 - 06:36 PM

What exactly are you asking here? Are you concerned about your footer not sticking to the bottom, or your columns?

Quote

It is working as I expected, however, my website uses transparent borders to make it stand out from the background and make it more abstract.
And I found this to be rather confusing. It sounds very matter-of-fact and intentional, but the however throws a monkey wrench in your logic wheel.

This post has been edited by GhandiJones: 31 March 2011 - 06:36 PM

Was This Post Helpful? 0
  • +
  • -

#3 Maakux  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 10
  • Joined: 30-March 11

Re: Faux columns issue

Posted 31 March 2011 - 06:40 PM

View PostGhandiJones, on 31 March 2011 - 06:36 PM, said:

What exactly are you asking here? Are you concerned about your footer not sticking to the bottom, or your columns?

Quote

It is working as I expected, however, my website uses transparent borders to make it stand out from the background and make it more abstract.
And I found this to be rather confusing. It sounds very matter-of-fact and intentional, but the however throws a monkey wrench in your logic wheel.


Haha. I guess it is because of the time here.

If you look at the bottom of the footer, you can see the faux column poking out. How can I make it so this doesn't happen? It is logical that it does, as it is applied to the div#wrapper in the HTML file. I just cannot think of a way without adding height restraints.

The border that goes around the layout, which is the transparency sort of thing should be going around the whole layout, but the problem is the faux-column is getting in the way.

Thanks for your reply, GhandiJones.
Was This Post Helpful? 0
  • +
  • -

#4 GhandiJones  Icon User is offline

  • D.I.C Head
  • member icon

Reputation: 54
  • View blog
  • Posts: 174
  • Joined: 17-March 11

Re: Faux columns issue

Posted 31 March 2011 - 07:08 PM

Best technique (that I like) for simple backgrounds, like the one you're using, is to create a very large image, something like 2200-2600px x 1-100px, and repeat it. It's similar to what you're doing. However, make it the background for your body. Then you can leave the div's bg transparent, or style them accordingly. Much smoother that way.
Was This Post Helpful? 0
  • +
  • -

#5 Maakux  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 10
  • Joined: 30-March 11

Re: Faux columns issue

Posted 31 March 2011 - 07:38 PM

View PostGhandiJones, on 31 March 2011 - 07:08 PM, said:

Best technique (that I like) for simple backgrounds, like the one you're using, is to create a very large image, something like 2200-2600px x 1-100px, and repeat it. It's similar to what you're doing. However, make it the background for your body. Then you can leave the div's bg transparent, or style them accordingly. Much smoother that way.


I am slightly confused.
Was This Post Helpful? 0
  • +
  • -

#6 GhandiJones  Icon User is offline

  • D.I.C Head
  • member icon

Reputation: 54
  • View blog
  • Posts: 174
  • Joined: 17-March 11

Re: Faux columns issue

Posted 31 March 2011 - 07:48 PM

For example...

body { background: url(whatever) top center repeat-y(or x, depending on the image); }

And that will scroll your background down as well as cover for larger resolution monitors. And you have a lot more control over the background image. It's a nice technique. When I get home, I'll throw a mock-up online to show you an example of what I'm talking about.
Was This Post Helpful? 0
  • +
  • -

#7 Maakux  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 10
  • Joined: 30-March 11

Re: Faux columns issue

Posted 31 March 2011 - 07:51 PM

View PostGhandiJones, on 31 March 2011 - 07:48 PM, said:

For example...

body { background: url(whatever) top center repeat-y(or x, depending on the image); }

And that will scroll your background down as well as cover for larger resolution monitors. And you have a lot more control over the background image. It's a nice technique. When I get home, I'll throw a mock-up online to show you an example of what I'm talking about.


No, I don't think you understand what I mean. Let me make a picture or something. I will edit this.

This post has been edited by Maakux: 31 March 2011 - 07:55 PM

Was This Post Helpful? 0
  • +
  • -

#8 Maakux  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 10
  • Joined: 30-March 11

Re: Faux columns issue

Posted 31 March 2011 - 08:10 PM

View PostGhandiJones, on 31 March 2011 - 07:48 PM, said:

For example...

body { background: url(whatever) top center repeat-y(or x, depending on the image); }

And that will scroll your background down as well as cover for larger resolution monitors. And you have a lot more control over the background image. It's a nice technique. When I get home, I'll throw a mock-up online to show you an example of what I'm talking about.


Posted Image

I hate the fact that you cannot edit your own posts. Sorry for the double.

On topic...

The highlighted area is the problem. The arrow points to the edge of the fake column. Now, the fake column is specified in div#wrapper, and div#wrapper contains all of the sections, which is header, navigation... and footer.

The fake column image is repeated both x and y, and keeps going down until the div#wrapper ends which is at the end of the footer.

If the borders weren't transparent, this would not be an issue. Just imagine a transparent border on top of the fake column that is poking out underneath the footer. You would tell the border is there and the fake column.

If it helps, I can add the transparent border.

I want the fake-column (the highlighted area) not to appear there. But, it is logical for that to happen because it is specified in div#wrapper.

I am sorry if I am not making any sense, I am really tired and just trying to really get this problem solved.

Thanks for your continued support, GhandiJones. I appreciate it.
Was This Post Helpful? 0
  • +
  • -

#9 Maakux  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 10
  • Joined: 30-March 11

Re: Faux columns issue

Posted 31 March 2011 - 08:22 PM

Again, sorry for this post.

Posted Image

The red area is where the fake column is. See how it appears under the sidebar? That is because sidebar only contains a small amount of text, and won't span. The fake column gives you the illusion that it is spanning.

As you can see, it goes down and passed footer. So, think of it this way, I only want the red colour on the right and left sides, not on the bottom of the footer.
Was This Post Helpful? 0
  • +
  • -

#10 GhandiJones  Icon User is offline

  • D.I.C Head
  • member icon

Reputation: 54
  • View blog
  • Posts: 174
  • Joined: 17-March 11

Re: Faux columns issue

Posted 01 April 2011 - 03:42 PM

I'm sorry about not posting that example lastnight, I got home and a friend wanted to play some video games. But, I looked at your CSS again today... Try adjusting the footer margin-top:-131px; Switch it to -111px. See if that moves it down.
Was This Post Helpful? 0
  • +
  • -
Page 1 of 1