25 replies [Last post]
monkey_man
Offline
Regular
Last seen: 10 years 48 weeks ago
Joined: 2007-05-16
Posts: 32
Points: 0

Hi,

I'm writing this post as i'm in great need of some CSS help>>>!

I have a website that i'm building and it has a header running across the top and a beveled box in the centre, where HTML will go over the top! The site is an ecommerce site so needs to be simple for the PHP code.

Anyway i wondered if someone could look at my code and see if there is a better way of doing what i've done and also i need the box in the centre splitting into a top-middle-bottom and need the middle to be expandable depending on the html code that is produced.

Anyway i've included the code and what i've managed to achieve, also i've included what i'd like the finished result to resemble

Please help!

HTML File:

Screen.css

body { background-image: url(/images/Background-gradient.jpg); background-repeat: repeat-x; margin: 0px; text-align: center; padding: 0px; }

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; } #main #main_body.img { height: 37px; width: 936px; text-align: center; position: relative; margin-top: 0px; margin-right: auto; margin-bottom: 0px; margin-left: auto; padding-top: 10px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; } #main_top_bkgrnd.bckimg { background-image: url(/images/blackbox_top.png); background-repeat: no-repeat; background-position: center; height: 37px; }

#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;
}

I've included the pictures as attachments

AttachmentSize
result_sofar.jpg163.78 KB
result_id_like.jpg21.61 KB
amadika
amadika's picture
Offline
Enthusiast
Texas
Last seen: 9 years 33 weeks ago
Texas
Timezone: GMT-6
Joined: 2007-04-16
Posts: 206
Points: 4

First thing's first--get rid

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?

@}->-- Amanda

mihirc
mihirc's picture
Offline
Leader
Pune, Maharashtra, India
Last seen: 5 years 10 weeks ago
Pune, Maharashtra, India
Timezone: GMT+5.5
Joined: 2007-05-09
Posts: 728
Points: 204

hi, where is ur big big div

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. Smile

Proprietor - Thoughtfulviewfinder Services
Web Development | Design | Merchandise | Photography
My personal blog: MihirChhatre.com

amadika
amadika's picture
Offline
Enthusiast
Texas
Last seen: 9 years 33 weeks ago
Texas
Timezone: GMT-6
Joined: 2007-04-16
Posts: 206
Points: 4

Here is your initial

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












@}->-- Amanda

monkey_man
Offline
Regular
Last seen: 10 years 48 weeks ago
Joined: 2007-05-16
Posts: 32
Points: 0

Amadika thanks for looking

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.

monkey_man
Offline
Regular
Last seen: 10 years 48 weeks ago
Joined: 2007-05-16
Posts: 32
Points: 0

Forgot to mention that there

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

mihirc
mihirc's picture
Offline
Leader
Pune, Maharashtra, India
Last seen: 5 years 10 weeks ago
Pune, Maharashtra, India
Timezone: GMT+5.5
Joined: 2007-05-09
Posts: 728
Points: 204

hi, monkey_man, i dont think

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 Smile

Proprietor - Thoughtfulviewfinder Services
Web Development | Design | Merchandise | Photography
My personal blog: MihirChhatre.com

monkey_man
Offline
Regular
Last seen: 10 years 48 weeks ago
Joined: 2007-05-16
Posts: 32
Points: 0

Ahh Right i get what you

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).

mihirc
mihirc's picture
Offline
Leader
Pune, Maharashtra, India
Last seen: 5 years 10 weeks ago
Pune, Maharashtra, India
Timezone: GMT+5.5
Joined: 2007-05-09
Posts: 728
Points: 204

ok, NOW LISTEN....

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.Smile

Proprietor - Thoughtfulviewfinder Services
Web Development | Design | Merchandise | Photography
My personal blog: MihirChhatre.com

mihirc
mihirc's picture
Offline
Leader
Pune, Maharashtra, India
Last seen: 5 years 10 weeks ago
Pune, Maharashtra, India
Timezone: GMT+5.5
Joined: 2007-05-09
Posts: 728
Points: 204

ok, NOW LISTEN.... put in

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.Smile

Proprietor - Thoughtfulviewfinder Services
Web Development | Design | Merchandise | Photography
My personal blog: MihirChhatre.com

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 4 years 40 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

mihirc edit your post rather

mihirc edit your post rather than create a new one.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

monkey_man
Offline
Regular
Last seen: 10 years 48 weeks ago
Joined: 2007-05-16
Posts: 32
Points: 0

Ok this is the code now and

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

index.php

main_top
main_middle
main_bottom

Thanks for helping me out on this project..!

AttachmentSize
screenshot.jpg 53.05 KB
mihirc
mihirc's picture
Offline
Leader
Pune, Maharashtra, India
Last seen: 5 years 10 weeks ago
Pune, Maharashtra, India
Timezone: GMT+5.5
Joined: 2007-05-09
Posts: 728
Points: 204

I guess your problem is

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 Smile

Proprietor - Thoughtfulviewfinder Services
Web Development | Design | Merchandise | Photography
My personal blog: MihirChhatre.com

monkey_man
Offline
Regular
Last seen: 10 years 48 weeks ago
Joined: 2007-05-16
Posts: 32
Points: 0

I've got the three boxes now

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...?

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 1 year 8 weeks ago
Timezone: GMT+1
Joined: 2004-06-30
Posts: 9668
Points: 801

You still need a doctype

You still need a doctype Wink

Verschwindende wrote:
  • CSS doesn't make pies

monkey_man
Offline
Regular
Last seen: 10 years 48 weeks ago
Joined: 2007-05-16
Posts: 32
Points: 0

I've omitted the 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...

mihirc
mihirc's picture
Offline
Leader
Pune, Maharashtra, India
Last seen: 5 years 10 weeks ago
Pune, Maharashtra, India
Timezone: GMT+5.5
Joined: 2007-05-09
Posts: 728
Points: 204

hi, can you put up the site,

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.

Proprietor - Thoughtfulviewfinder Services
Web Development | Design | Merchandise | Photography
My personal blog: MihirChhatre.com

monkey_man
Offline
Regular
Last seen: 10 years 48 weeks ago
Joined: 2007-05-16
Posts: 32
Points: 0

<!DOCTYPE html PUBLIC

html

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)

mihirc
mihirc's picture
Offline
Leader
Pune, Maharashtra, India
Last seen: 5 years 10 weeks ago
Pune, Maharashtra, India
Timezone: GMT+5.5
Joined: 2007-05-09
Posts: 728
Points: 204

Thanks for the code, now can

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 Smile

Proprietor - Thoughtfulviewfinder Services
Web Development | Design | Merchandise | Photography
My personal blog: MihirChhatre.com

monkey_man
Offline
Regular
Last seen: 10 years 48 weeks ago
Joined: 2007-05-16
Posts: 32
Points: 0

Ok i've included the

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

AttachmentSize
screenshot.jpg 53.05 KB
blackbox_bottom.png 1.87 KB
blackbox_middle.png 376 bytes
blackbox_top.png 1.95 KB
header_bkgrnd.png 152 bytes
Background-gradient.jpg 554 bytes
mihirc
mihirc's picture
Offline
Leader
Pune, Maharashtra, India
Last seen: 5 years 10 weeks ago
Pune, Maharashtra, India
Timezone: GMT+5.5
Joined: 2007-05-09
Posts: 728
Points: 204

Ok, now we will work this

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

giv this div a width of 1 px more than ur rounded image.
Insert your top rounded edge image here. You might have to giv some floats, etc for them to align.
this will be your top div. giv it float, width 99%(it will take a width 99% of the container div)Put some content in them and change the colours to that of the rounded edge
this will be your middle div. giv it float, width 99%(it will take a width 99% of the container div) Put some content in them and change the colours to that of the rounded edge
this will be your bottom div. giv it float, width 99%(it will take a width 99% of the container div) Put some content in them and change the colours to that of the rounded edge
Insert your bottom rounded edge image here.You might have to giv some floats, etc for them to align.

this will do it, i guess..

mihir Smile

Proprietor - Thoughtfulviewfinder Services
Web Development | Design | Merchandise | Photography
My personal blog: MihirChhatre.com

monkey_man
Offline
Regular
Last seen: 10 years 48 weeks ago
Joined: 2007-05-16
Posts: 32
Points: 0

Ok i've done that but it

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

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%;
}

AttachmentSize
screenshot_1.jpg 102.16 KB
mihirc
mihirc's picture
Offline
Leader
Pune, Maharashtra, India
Last seen: 5 years 10 weeks ago
Pune, Maharashtra, India
Timezone: GMT+5.5
Joined: 2007-05-09
Posts: 728
Points: 204

hi, so all you need to do,

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.Smile

Proprietor - Thoughtfulviewfinder Services
Web Development | Design | Merchandise | Photography
My personal blog: MihirChhatre.com

monkey_man
Offline
Regular
Last seen: 10 years 48 weeks ago
Joined: 2007-05-16
Posts: 32
Points: 0

Managed to sort it now by

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

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

mihirc
mihirc's picture
Offline
Leader
Pune, Maharashtra, India
Last seen: 5 years 10 weeks ago
Pune, Maharashtra, India
Timezone: GMT+5.5
Joined: 2007-05-09
Posts: 728
Points: 204

hi, since ur problem is

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 Smile

Proprietor - Thoughtfulviewfinder Services
Web Development | Design | Merchandise | Photography
My personal blog: MihirChhatre.com

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 1 year 8 weeks ago
Timezone: GMT+1
Joined: 2004-06-30
Posts: 9668
Points: 801

Thanks for letting us know

Thanks for letting us know how you fixed it, monkey_man Wink

Verschwindende wrote:
  • CSS doesn't make pies