[solved] Major help needed please!!!!

First thing's first--get rid of all the &nbsp to put the nav to the right. That's what CSS is for! In fact, you could put it all in it's own div---how much do you know about CSS?

hi,
where is ur big big div that is seen in ur "result_id_like.jpg" file??? atleast add that man... then we'll tell you what needs to be done...

mihir.

Here is your initial code--but cleaned up.... You had way too many closing divs's and it's still way more complex than what is needed. Also, you haven't declared a doctype

Welcome back Dave(if this is not you... click here)
view basket
my account
help

Amadika thanks for looking at my script! to be honest i did have 2 divs within the primary div, one floating to the left and one to the right, but it was causing me problems as the right hand side buttons kept getting pushed below the left. The script you've cleaned, puts everything together in the header now, so shall i split them again?

Also the Big Big Div is just the Div statement on its own and it has 2 child Divs header and main_body is the one that will contain the 3 parts of the black rectangle (top,middle and bottom).

I'm new to CSS and have only done one site using CSS laout before but that only had a header that used CSS as the rest was developed in Flash and actionscript.

Thanks for looking at my code guys and anymore input you can give is greatly appreciated.

Forgot to mention that there is loads of HTML tags missing at the beginning as you quite rightly pointed out, but all that information wasn't necessary for this post so i took them out to keep things simple.... thanks

hi, monkey_man, i dont think you got what i was trying to say. i meant, there in the second image, where you showed us how it should look. there is this big grey div, right? and in ur sofar img, its not there. if you just giv ur div height and make it appear, we can know what exactly we are trying to achieve.

mihir

Ahh Right i get what you mean now...!

The reason i haven't put it in is because thats the bit I'm unsure about, as i need it to be expandable, so the big div in the middle was split up into the three sections and i assumed I'd have to cut out about 4pixels in height from the middle and repeat it on its y axis! so the big div will consist of 3 sections (top-middle-bottom).

ok, NOW LISTEN....

put in your main big div. hav 3 smaller divs in it.

Giv the big div the width you want. Style all the other div's, for understnading what is happening giv ur divs different, totally different colours. and then tell us what is happening.

@HUGO, sorry, while posting i noticed that i hadnt put them in the code tag and thats why i stopped it while it was loading, so it got posted twice. Sorry for that...

Please Remove my earlier post also

mihir.

ok, NOW LISTEN....

put in your main big div. hav 3 smaller divs in it.

Giv the big div the width you want. Style all the other div's, for understnading what is happening giv ur divs different, totally different colours. and then tell us what is happening.

mihir.

mihirc edit your post rather than create a new one.

Ok this is the code now and the result is attached!

index.php

Welcome back Dave (if this is not you... click here) view basket my account help

main_top

main_middle

main_bottom

Thanks for helping me out on this project..!

I guess your problem is solved, right? now if you increase any of ur divs, their hide will increase accordingly. which is what you wanted to achieve...now go around make it look, good.By the way, where's the div with rounded edges???

mihir

I've got the three boxes now which is fine and thats what i had before this post but i cut them out as i wanted to simplify my request...! The problem is that they are images that are going into them divs as the rounded box has been styled in photoshop to get the right beveled effect etc. So what i did is cut 37px off the top and bottom creating 2 images to put in the background of the top and bottom divs and they are absolute set to 37px.

Then for the middle of the box i cutout just 4px high from the middle to use as a repeated background in the middle div.

This is where i have the problem as i need them all to stay together and the top needs to pad down about 20px from the header. Then as the middle div contains HTML, it needs to expand keeping the box together with the bottom div moving down accordingly.

Does that make sense...?

You still need a doctype

I've omitted the doctype just for the purpose of this post..! in my actual HTML file its all there with meta data etc...

hi, can you put up the site, with *everything* that you have done?

without omitting anything???? when i told you to do something the previous time, i didnt ask you to remove anything...

mihir.

html

Welcome back Dave (if this is not you... click here) view basket my account help

main_top

main_middle

main_bottom

header.css

.green_text { color: #b0d398; } .green_link { color: #b0d398; text-decoration: underline; } #header { background-image: url(/images/header_bkgrnd.png); background-repeat: repeat-x; height: 53px; position: relative; font-family: Tahoma, Verdana; font-size: 12px; color: #FFFFFF; } #primary.content { height: 53px; width: 936px; margin-top: 0px; margin-right: auto; margin-bottom: 0px; margin-left: auto; position: relative; text-align: center; background-position: center top; padding-top: 20px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; }

#name_display.namecontent {
float: left;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 20px;
height: 20px;
text-align: left;
}
#main {
position: relative;
text-align: center;
width: 936px;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
}
#main #main_top {
background-color: #FFFFFF;
}
#main #main_middle {
background-color: #CC33FF;
}
#main #main_bottom {
background-color: #00CCFF;
}

Screen.css (same as 1st post)

Thanks for the code, now can you attach a screen shots with ALL the elements, i know now u will be getting bugged, but i really cant see what is happening on ur site, if i dont take a look at it.. simple...

mihir

Ok i've included the following files:

screenshot.jpg - Screenshot of what my code currently does

blackbox_bottom.png - the bottom section of the box

blackbox_middle.png - the middle section of the box

blackbox_top.png - the top section of the box

header_bkgrnd.png - small slice of the header which is has repeat-x applied to it in CSS

background-gradient.jpg - the green - white gradient, which again is a small slice repeated in CSS

Ok, now we will work this out... you want the rounded edges right? so here goes.

this will do it, i guess..

mihir

Ok i've done that but it still doesn't display properly..! i didn't need to use float as it aligned up perfectly.

Don't think you understood part of my problem though as the middle sections need to have the PNG file that i included, as it has an effect on the left and right hand side, and i needed it to just repeat vertically in the background so i could put HTML over the top and it expand accordingly to the amount of content it has!

Anyway i've included the screenshot and the new HTML and CSS file...

Thanks

HTML FILE

Welcome back Dave (if this is not you... click here) view basket my account help

Top_Content Div

Home About Us Shop Testimonials Newsletter Contact US

Bottom_Content Div

header.css

.green_text { color: #b0d398; } .green_link { color: #b0d398; text-decoration: underline; } #header { background-image: url(/images/header_bkgrnd.png); background-repeat: repeat-x; height: 53px; position: relative; font-family: Tahoma, Verdana; font-size: 12px; color: #FFFFFF; } #primary.content { height: 53px; width: 936px; margin-top: 0px; margin-right: auto; margin-bottom: 0px; margin-left: auto; position: relative; text-align: center; background-position: center top; padding-top: 20px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; }

#name_display.namecontent {
float: left;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 20px;
height: 20px;
text-align: left;
}
#main {
position: relative;
text-align: center;
width: 938px;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
}
#main #main_top {
}
#main #main_bottom {
}
#main #middle_content {
font-family: Tahoma, Verdana;
font-size: 12px;
color: #FFFFFF;
background-color: #2F2F2F;
width: 99%;
}
#main #top_content {
font-family: Tahoma, Verdana;
font-size: 12px;
color: #FFFFFF;
background-color: #313131;
width: 99%;
}
#main #bottom_content {
font-family: Tahoma, Verdana;
font-size: 12px;
color: #FFFFFF;
background-color: #313131;
width: 99%;
}

hi,

so all you need to do, is give your container div the background image and giv it i.e. the container overflow:hidden.

I dont know why you specifically want a png, cause it's really really annoying to fix it in IE6. instead of that why dont you pack all the effects in a jpeg, or a gif having alpha transperancy???

Other's this i.e. the transperant png part, is quite problematic for me also, i read some tutorials abt it, but it only is for the fix, and that the img should be 2x7 and all.

Monkey-man, that will solve ur problem.

mihir.

Managed to sort it now by simplifying the CSS...

no doubt your solution would of worked though...!

I've changed to jpg for the top section and the middle and bottom are gifs now, the reason they were'nt before is because i kept getting a white border around the gif and it hindered the quality.

For anyone else here is the code:

HTML file

Welcome back Dave (if this is not you... click here) view basket my account help

Home About Us Shop Testimonials Newsletter Contact US

 

test

 

 

 

dfuhjfgjfjgjfjf

CSS file

* { margin: 0; padding: 0; }

.green_text {
color: #b0d398;
}
.green_link {
color: #b0d398;
text-decoration: underline;
}
#header {
background-image: url(/images/header_bkgrnd.png);
background-repeat: repeat-x;
height: 53px;
position: relative;
font-family: Tahoma, Verdana;
font-size: 12px;
color: #FFFFFF;
}
#primary.content {
height: 53px;
width: 936px;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
position: relative;
text-align: center;
background-position: center top;
padding-top: 20px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
}

#name_display.namecontent {
float: left;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 20px;
height: 20px;
text-align: left;
}

#main {
width: 938px;
margin: 10px auto 0 auto;
}

#main_top {
height: 24px;
background: url(/images/blackbox_top.png) repeat-x;
}

#middle_content {
font-family: Tahoma, Verdana;
font-size: 12px;
color: #FFFFFF;
background-image: url(/images/blackbox_middle.png);
background-repeat: repeat-y;
background-position: 0%;
}

#main_bottom {
height: 21px;
background: url(/images/blackbox_bottom.png) repeat-x;
}

thanks for your help guys

hi,
since ur problem is solved, can u plz add a soled tag to ur title. so that ppl can check if they have a similar problem.

mihir

Thanks for letting us know how you fixed it, monkey_man