7 Replies - 31586 Views - Last Post: 29 January 2009 - 05:15 PM

#1 IrishCereal  Icon User is offline

  • D.I.C Head

Reputation: 4
  • View blog
  • Posts: 81
  • Joined: 11-December 08

Inner Shadow/Glow

Posted 27 January 2009 - 10:58 PM

I'm working on this layout, and I want it to look (more or less) like this:
Posted Image

I've been working on the code, and have got most of it done. But I run into a little problem. The outer glow divs are trying to follow the content modules. Instead of morphing to the outside of the sidebar and main content bar, they close around the modules. Here is the code I've got.

The CSS:

#main {
	float: right;
	width: 500px;
	background-image: url(../images/innershadows/mbblackmiddle.png);
	background-repeat: repeat-y;
}

.mainbgtop {
	background-image: url(../images/innershadows/mbblacktop.png);
	background-repeat: no-repeat;
	background-position: top;
}

.mainbgbottom{
	background-image: url(../images/innershadows/mbblackbottom.png);
	background-repeat: no-repeat;
	background-position: bottom;
}
.mainmodule {
	width: 450px;
	background-color: #FFFFFF;
	background-image: url(../images/innershadows/mbmiddle.png);
	background-repeat: repeat-y;
	margin-top: auto;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: auto;
}

.mainbartop {
	background-image: url(../images/innershadows/mbtop.png);
	background-repeat: no-repeat;
	background-position: top;
}

.mainbarbottom {
	background-image: url(../images/innershadows/mbbottom.png);
	background-repeat: no-repeat;
	background-position: bottom;
}

.maincontent {
	padding: 10px;
}

#sidebar {
	float: left;
	width: 299px;
	border-right-width: 1px;
	border-right-style: solid;
	border-right-color: #FFFFFF;
	background-image: url(../images/innershadows/sbblackmiddle.png);
	background-repeat: repeat-y;
}

.sbbgtop {
	background-image: url(../images/innershadows/sbblacktop.png);
	background-repeat: no-repeat;
	background-position: top;
}

.sbbottom {
	background-image: url(../images/innershadows/sbblackbottom.png);
	background-repeat: no-repeat;
	background-position: bottom;
}
.sidebarmodule {
	width: 250px;
	background-color: #FFFFFF;
	margin-top: 20px;
	margin-right: auto;
	margin-bottom: 20px;
	margin-left: auto;
	border: 1px solid #FFFFFF;
	background-image: url(../images/innershadows/sbmiddle.png);
	background-repeat: repeat-y;
}

.sidebarcontent {
	padding: 10px;
}

.sidebartop {
	background-image: url(../images/innershadows/sbtop.png);
	background-repeat: no-repeat;
	background-position: top;
}

.sidebarbottom {
	background-image: url(../images/innershadows/sbbottom.png);
	background-repeat: no-repeat;
	background-position: bottom;
}



And the HTML:

<div id="sidebar"><div class="sbbgtop"><div class="sbbottom">
	<div class="sidebarmodule"><div class="sidebarbottom"><div class="sidebartop">
	  <div class="sidebarcontent">
		<p>Blah</p>
		<p>Blah</p>
		<p>Blah</p>
	  </div>
	</div></div></div>
  </div></div></div>
  <div id="main"><div class="mainbgtop"><div class="mainbgbottom">
  <div class="mainmodule"><div class="mainbartop"><div class="mainbarbottom">
	  <div class="maincontent">
		<p>Blah</p>
		<p>Blah</p>
		<p>Blah</p>
	  </div>
	</div></div></div>
  </div></div></div>



This is what it looks like:
Posted Image

Note from the design and final product I did some changing of they layout. For example I decided to only go with two columns.

Anyway, what am I doing wrong?? Thanks for the help in advance!

Is This A Good Question/Topic? 0
  • +

Replies To: Inner Shadow/Glow

#2 Arenlor  Icon User is offline

  • D.I.C Regular
  • member icon

Reputation: 34
  • View blog
  • Posts: 389
  • Joined: 26-April 06

Re: Inner Shadow/Glow

Posted 27 January 2009 - 11:05 PM

Can you drop a link to it please?
Was This Post Helpful? 0
  • +
  • -

#3 IrishCereal  Icon User is offline

  • D.I.C Head

Reputation: 4
  • View blog
  • Posts: 81
  • Joined: 11-December 08

Re: Inner Shadow/Glow

Posted 28 January 2009 - 07:25 AM

-snip-

Not uploaded yet. I'll do it when I get home from school.

This post has been edited by IrishCereal: 28 January 2009 - 07:26 AM

Was This Post Helpful? 0
  • +
  • -

#4 IrishCereal  Icon User is offline

  • D.I.C Head

Reputation: 4
  • View blog
  • Posts: 81
  • Joined: 11-December 08

Re: Inner Shadow/Glow

Posted 28 January 2009 - 06:41 PM

Ok here's the link.
http://www.theinterwebz.co.cc/main.php
Thanks!
Was This Post Helpful? 0
  • +
  • -

#5 BetaWar  Icon User is offline

  • #include "soul.h"
  • member icon

Reputation: 1138
  • View blog
  • Posts: 7,105
  • Joined: 07-September 06

Re: Inner Shadow/Glow

Posted 29 January 2009 - 01:51 PM

In your CSS you have:
.sidebarmodule {
	width: 250px;
	background-color: #FFFFFF;
	margin-top: 20px;
	margin-right: auto;
	margin-bottom: 20px;
	margin-left: auto;
	border: 1px solid #FFFFFF;
	background-image: url(../images/innershadows/sbmiddle.png);
	background-repeat: repeat-y;
}


Try changing it to this:
.sidebarmodule {
	width: 250px;
	background-color: #FFFFFF;
	margin-top: 0px;
	margin-right: auto;
	margin-bottom: 20px;
	margin-left: auto;
	border: 1px solid #FFFFFF;
	background-image: url(../images/innershadows/sbmiddle.png);
	background-repeat: repeat-y;
}


Change the margin-top to 0px.

Hope that works :)
Was This Post Helpful? 0
  • +
  • -

#6 IrishCereal  Icon User is offline

  • D.I.C Head

Reputation: 4
  • View blog
  • Posts: 81
  • Joined: 11-December 08

Re: Inner Shadow/Glow

Posted 29 January 2009 - 04:00 PM

It worked but I need the sidebar module to be down from the sidebar itself. Like in the photoshopped prototype that I posted at the top.
Was This Post Helpful? 0
  • +
  • -

#7 fuzzylunkinz  Icon User is offline

  • D.I.C Head
  • member icon

Reputation: 8
  • View blog
  • Posts: 185
  • Joined: 11-November 08

Re: Inner Shadow/Glow

Posted 29 January 2009 - 04:45 PM

Try changing padding. I don't understand exactly what you want, but you can easily experiment.

If you break something, just undo it ;).
Was This Post Helpful? 0
  • +
  • -

#8 IrishCereal  Icon User is offline

  • D.I.C Head

Reputation: 4
  • View blog
  • Posts: 81
  • Joined: 11-December 08

Re: Inner Shadow/Glow

Posted 29 January 2009 - 05:15 PM

View Postfuzzylunkinz, on 29 Jan, 2009 - 03:45 PM, said:

Try changing padding. I don't understand exactly what you want, but you can easily experiment.

If you break something, just undo it ;).



You're my hero. I didn't even think of using padding. It worked. Thanks!
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1