|
|
Chris H Inner circle Melbourne, Australia 1364 Posts |
Heya guys,
I'm a bit of a web design novice, and I'm trying to build a bit of a folio to get into a Multimedia course next year. Currently working on a website for a friends film production company, but having an issue that I just can't seem to get rid of. http://www.theskepticsbible.com/beforedawn/ ...and the CSS file. http://www.theskepticsbible.com/beforedawn/beforedawn.css If I've managed to upload it without too many bugs, you should be seeing a single page with an image at the top (#header), the text area (#introduction) and a footer with the contact details (#footer). For some reason, I can't eliminate the gap between the introduction and footer elements. There was also one between the header and the introduction, which seemed to disappear on it's own - not quite sure how I got rid of it. Can anyone see what I'm doing wrong? Thanks, Chris |
kcg5 Inner circle who wants four fried chickens and a coke 1868 Posts |
Chris, I put this question to my friend who is experienced in this field. I will get back to you if he comes up with anything.
kevin
Nobody expects the spanish inquisition!!!!!
"History will be kind to me, as I intend to write it"- Sir Winston Churchill |
leapinglizards Inner circle 1263 Posts |
Bunch of stuff is wrong... And at first glance I am not sure WHICH of them is causing the issues... but here are a few things:
In the actual page: Need a closing body tag. div id="header" class="container" You don't really need a class on this element. Also, this element is empty, so why is it there? If you were trying to make this the container div for the entire page, then move the closing Div tag to the bottom. You specify this in the CSS as being 750 Pixles high, so you have a Big empty element that is TALL. div class="container" id="introduction" I would drop the Class from this too. You speciy in the CSS that this is 800 Pixels high. So, the page is already 1550 Pixels high. Unless you are trying to force space for a particular graphic element, remove the height from the CSS. div class="container style1" id="footer" The class description is invalid. You have an extra closing div at the end which is not paired up with an opening div. In the CSS- the container class isn't serving any function. If you add the closing body tag, you can add those global styles to the body and they will apply accross the page.... I hope that made sense. I am SURE I missed something there too, but I only have a few minutes to look at it right now. I think the MAIN issue is the huge heights you have set in the CSS... Better to set the ehights relative, and then the content will dictate the height of the page.
Leaping Lizards!!! Who knew it was possible.
<BR> <BR>www.LeapingLizardsMagic.com |
kcg5 Inner circle who wants four fried chickens and a coke 1868 Posts |
I was just about to say that...
Nobody expects the spanish inquisition!!!!!
"History will be kind to me, as I intend to write it"- Sir Winston Churchill |
Chris H Inner circle Melbourne, Australia 1364 Posts |
Quote:
On 2008-10-21 14:32, leapinglizards wrote: Sorted. I must have accidentally deleted that somewhere along the line. Whilst it didn't make any visible impact, I understand now why my body styles weren't working too well. Quote:
div id="header" class="container" You don't really need a class on this element. Also, this element is empty, so why is it there? If you were trying to make this the container div for the entire page, then move the closing Div tag to the bottom. You specify this in the CSS as being 750 Pixles high, so you have a Big empty element that is TALL. Have removed the container. This element (#header) contains the header background image. I have 3 different background images that make up the box of the site, the header, the body, and the footer. There's probably a better way to do this, but it was all I could come up with. I've only been doing this CSS stuff for a couple of weeks. Quote:
div class="container" id="introduction" I would drop the Class from this too. The idea here was to make the body area a decent size, so that it won't look ridiculous compared to the header. Again, not sure if I've used the right technique. Quote:
div class="container style1" id="footer" The class description is invalid. You have an extra closing div at the end which is not paired up with an opening div. Have removed the extra div. Thought that might make a difference, but it hasn't. Quote:
In the CSS- the container class isn't serving any function. If you add the closing body tag, you can add those global styles to the body and they will apply accross the page.... I can't thank you enough for your help. I've still got that gap, but now that the bugs are out it may be easier to fix. Strange thing is, it looks perfect in Dreamweaver. It's only when I open it in a web browser that the gap appears. Thanks to you too Kevin. Chris |
leapinglizards Inner circle 1263 Posts |
Chris... I am off the next two days. E mail me the Grpahics you are using, and I will play with it and try to figure it out. I am sure it is simple. Will send you back the template and CSS files.
Dean
Leaping Lizards!!! Who knew it was possible.
<BR> <BR>www.LeapingLizardsMagic.com |
leapinglizards Inner circle 1263 Posts |
Here- I just did it without the files using the developer tool bar...
Where it says This in the CSS: #introduction { margin-left:auto; margin-right:auto; height:600px; width:800px; background-image:url(beforedawnbodyweb.jpg); background-repeat:repeat-y; padding-left:100px; padding-right:100px; padding-top:30px; Just Change the height to anything smaller than 600 to get rid of the big space. If you leave the height blank, it will just expand to however big it needs to be to contain the enclosed "stuff" which would be preferable.
Leaping Lizards!!! Who knew it was possible.
<BR> <BR>www.LeapingLizardsMagic.com |
leapinglizards Inner circle 1263 Posts |
Also, you might want to express the padding as ems rather than pixels.
Leaping Lizards!!! Who knew it was possible.
<BR> <BR>www.LeapingLizardsMagic.com |
The Magic Cafe Forum Index » » Not very magical, still... » » Anybody know anything about web design/CSS? (0 Likes) |
[ Top of Page ] |
All content & postings Copyright © 2001-2024 Steve Brooks. All Rights Reserved. This page was created in 0.03 seconds requiring 5 database queries. |
The views and comments expressed on The Magic Café are not necessarily those of The Magic Café, Steve Brooks, or Steve Brooks Magic. > Privacy Statement < |