Off topic Design question

[piper338]

Hey guys, I'm new to most of this stuff I am really starting to enjoy website creation. I've been learning CSS and the use of Divs. to me I love the designing without tables.

I drew a website up tonight the background is a slight gradient and I'm trying to have a transparent content box.  My problem is the gradient It cant Repeat-Y because the backgrounds wont match.  And I tried making a .Gif but it didn't work, and I hear some browsers do not support .png's right now.

Here is the start of my design, what is the best way to make content boxes like I am attempting to do? I've seen it don't with 5 Divs, top, bottom, left, right and center. Mine only had 3 top center and bottom, then I used padding to align the text.

Here is the beginning of what I am working on.

http://i34.tinypic.com/2l9lcw0.jpg

Thanks,

Chad C.

[Tom]

Looks good!

For the background, I always use a png with transparency horizontally repeated, and a block colour background underneath for the rest of the page - e.g. In your case, a darker blue gradient to transparent, and then a lighter blue block colour background underneath. This should give the desired effect (Im not aware of browsers not supporting png's - if they don't they're far behind).

The best way to make content boxes with div's is pretty much however you want it to look; one, two, three+ columns... it's possible.

Good luck

[Nabeel]

You don't need to use PNGs for a different background color, you can just set the "box" div to a different background color.

Then to round corners, I use:

http://www.malsup.com/jquery/corner/

There's CSS also to round corners, but I don't think it works on IE (not sure about IE8).

Gradients, I always go to white, since it's in the background. Like:

http://dev.vacentral.net/

Which I'll be changing a bit soon

[piper338]

Thanks guys I continue to learn.

New problem haha..

I am making a new design, it's a bit sloppy cause I really don't know what I am doing.

Here it is http://flyvva.org/

The problem is I need the height to be at least 900px for the Background to show up correctly, however if I set the height to a fixed width Content that extends greater than 900px is not displayed correct.

So the question is. Is there a way to have the <DIV> Height be at least 900px the expand if it fills up? Or some kind of work around for this.

I drew my design up and it has been a nightmare for a beginner to code, lol.

Thanks,

Chad C.

[Tom]

Try this in your css:

min-height:900px;

Should work.

[piper338]

Seriously? Wow it worked!  ;D

Thanks!

Chad C.

[Tom]

No problem

I like this design. Very blue..

[piper338]

Blue indeed haha

[piper338]

Hey guys I need some more help,  I have a drop down menu it's pure css cause I sure don't know much about Jquery stuff... but I want the left border of the drop down to align with its relative on top...

http://flyvva.org

Any ideas?

Oh, and sorry for the sloppy css, I gotta go back and group things a bit better..

Thanks,

Chad C.

[Nabeel]

Try adjusting the margin?

[Tom]

You'll need like -20 off your current left margin.

[piper338]

My head hurts...    :-  haha it's one thing after another now my footer is not clearing in IE works fine in Firefox. Ideas?

P.S. The world would be a better place without IE

[Nabeel]

Try a clear:both?

And yes, IE blows haha

[piper338]

Yeah, it is set to clear:both

[Tom]

How about overflow:hidden; on the div that wraps the content?

[piper338]

Hum, I'll give that a try the div layouts are still kinda confusing to me even haha cause I've never made a site with that much background so to get it to look right I have to make a bunch of wraps I'm sure there was a better way of doing it, but I'm just a furloughed pilot, and a newbie to this stuff. haha

BTW Tom,  While i was in IE I looked at your site, and the nav isn't there in IE just FYI.

Chad C.

[Tom]

Meh, It works as intended in IE8, if they haven't moved from IE7 to IE8 or something actually decent then they're living in the past  8)

[piper338]

I'm living in the past when it comes to IE then cause I never use it. haha

[Tom]

or something actually decent

Hows that div coming along?

[piper338]

No luck yet, this is about where I get in all my designs then I delete everything and start over haha.... I really wish I could learn how to do this stuff right cause I really do enjoy it.

[Nabeel]

Try this, a:

<div style="clear: both;"></div>

Right before that footer div

[piper338]

Still no joy.

[Tom]

You have your footer div inside your contentwrapper div.

Try moving it below an extra </div> (to remove it from contentwrapper) and add overflow:hidden; to contentwrapper.

I tried it on FF with firebug and it should look something like this: http://www.europeangateway.info/content/flyvaa.jpg

[piper338]

Kind of worked... it hid the rest of my left-bar, I'm about to tear it apart and redo it all over again...  <-- I just liked the way that smiley looked lol

[piper338]

http://flyvva.org/index.php/schedules/details/37

Anyone have firebug or something, I cant figure out for the life of me what is going on here.  It almost has to have something to do with the route map... but I don't know what.

Thanks,

Chad C.

[Nabeel]

For the contentwrapper div remove the "height=100%" line in the CSS

[piper338]

Thanks, I took all of my 100% heights out,  it's like something is over writing it cause I looked in fire bug and the 100% is still there.

[piper338]

Anyway to get the phpvms templates to work inside of PHPBB? trying to skin phpbb I have never done it before. Would Like the navigation to show at the top. http://forum.flyvva.org

Thanks,

Chad C.

[Nabeel]

You'll have to hardcode it into phpBB