Re: [HTML-on-the-WEB] I've now uploaded some pages - please take a look
- On 11/19/2012 5:30 AM, Bert Coules wrote:
> I've temporarily uploaded two pages in the hope that it might help someone here solve a puzzle for me. If you've a moment to take a look, I'd be grateful.You have 'img' tags as backgrounds instead of using CSS 'background'
> The problem is with the padding-bottom value of the area main_panel. This is set to 200px in the css file. And for this page, it works perfectly:
> However, for this page:
> it doesn't.
> Apart from the text and the images, the coding for the two html files is identical. It's the amount of text in the nested panel which makes the difference: clearly something happens to the main_panel padding when the text panel reaches a certain height.
> Can anything be done about this? Many thanks.
among other problems. As I mentioned before, relative and absolute
positioning are a nightmare to work with. I'm not sure how to fix the
problem other than starting over.
Looking at the page from a high-level perspective, here's what I would do:
1) Main background image of Holmes holding pipe and main content area.
A background image and simply doing a 'margin-left: 216px;' on a 'div'
should be sufficient.
2) The header is floated left. No need to do this since the parent div
will already be aligned properly. Just apply some margins to the
header. One issue you might want to consider: You've isolated letters
in each word of Sherlock Holmes such that SEO might be an issue
(S+herlock and H+olmes).
3) You appear to want a black border and then a dull yellow green
border on the main area. I would use 'border' and two divs to
accomplish that. 'outline' is mostly used for inline elements (e.g. the
dotted border around clicked anchor tags) and it isn't included in
dimension calculations, which will cause problems. On the outer div,
use 'margin-bottom: 100px; border: medium solid #666600;' (although you
should prefer figuring out all padding and margins in 'ems' and I prefer
pixels for borders instead of arbitrary measurements). To use the
background image, 'float' and 'width' on the inner div as you are doing
now, adjusting the width of the div by the size of the black border if
you need it to be super-exact. Add a third div inside the second div
and apply 'margin-bottom: 200px;' to it - you could also apply padding
here so all the elements that will reside within won't have to specify
it. You may need to add an empty div that does a '<div style="clear:
both;"></div>' to the end of the third div to get the appropriate
padding and margins to apply.
4) The menu bar appears at the end of the content and is absolutely
positioned to the beginning of the page. I understand what you are
doing here (attempting SEO to move the body content higher), but it is
going to be a lot less messy to just apply some margins to the menu and
move the HTML to the top of the main content area.
5) What remains is a two-column layout. There are two ways to do this:
'float' and 'width' with 'clear: both' at the end or Holy Grail using
a lot of hard to follow CSS ('left', 'right', etc.) but guarantees
things like equal column height and the ability to position content
before sidebars. I have 13 Holy Grail wireframe layouts in Barebones
CMS that can easily be extracted but I've found digging around using
Firebug to figure out how they work can be a nightmare. Until you get
comfortable enough with CSS, I say avoid the 'position' keyword - most
designs can be done without it and without hacks. So, two divs:
'float: left; width: 500px; margin-right: 10px;' (left panel) and
'float: left; width: 250px;' (right panel). You may have to adjust for
the borders. Watch for visual overlap by a few pixels in Firebug. The
'float' keyword was never meant to be used for design and layouts, so
always keep that in mind that using it is playing with fire. The fewer
uses of 'float' that you have, the better off you'll be.
6) Inside the left panel div, add a div that gets the 'background' and
'padding' applied to it.
7) The right panel contains multiple photos and names. Each one of
those should be wrapped with a div that uses a CSS class with simple
margins and padding.
IMO, your CSS will look a LOT cleaner, be more maintainable, and be more
reliable. I don't have a fix for your problem other than to redo it. I
dug around in Firebug for a while and decided it wasn't worth the effort.
One other thing: Consider using PHP. You can write a 'header.php' and
'footer.php' file that do nothing more than contain HTML. Then you
include the header and footer files on your individual pages. The
content is the bulk of the logic on each page and making changes to the
entire site becomes a lot easier - just make one change in one spot in
the header or footer and the entire site updates instead of having to
make a lot of changes across a lot of files.
While this design is an improvement over your current site, it says
"1999" to me, not 2012. Which, given the age of the show, I suppose is
fine as long as you are fine with it. The "repeating paper" background
used for the body content is really old-school. I also see JPEG
compression artifacts all over the place. There might not be anything
you can do about that though, but if you can get PNGs to be just as
small in file size without any artifacts, all the better.
Barebones CMS is a high-performance, open source content management
system for web developers operating in a team environment.
An open source CubicleSoft initiative.
Your choice of a MIT or LGPL license.
Many thanks for all that: I'm grateful to you for taking the time to look and to comment so thoroughly. It's back to the drawing board, obviously.
> ...it says "1999" to me, not 2012.And that, as you suspected, is fine with me, though I might well remove the paper-texture background as I haven't been fond of that ever since I first tried it.
> I also see JPEG compression artifacts all over the place.That surprises me a little. What screen size and resolution are you using? I thought that PNGs were recommended only for graphics.
One immediate follow-up question, if I may:
> 1) Main background image of Holmes holdingSo the the entire background would be a single image that's just plain black apart from the figure on the left? That's an approach I hadn't considered (obviously) because I was under the impression that whole-background images were not a good idea because of loading speed and similar issues.
> pipe and main content area.
Assuming that I've understood you correctly, this points up a difficult I've found: of getting reliable and above all up-to-date advice. Practices and methods obviously change with time, and much of the online unformation seems to be quite old-hat or contradictory.
OK: I'll investigate whole-background images and the best way to handle them.
Sorry to have been so long in responding to your extremely detailed help. I've started again from scratch following your guidelines and the coding does seem to be much cleaner and neater, as you predicted.
One thing: you say
> One issue you might want to consider: You've isolated lettersWould it be better, do you think, to make the heading an image? Do search engines pick up on the alt titles of images tagged as headings if there is no actual text heading for them to latch onto?
> in each word of Sherlock Holmes such that SEO might be an issue
> (S+herlock and H+olmes).
>> One issue you might want to consider: You've isolated lettersIf you want the capitals to stand out, there's also a CSS :first-letter
>> in each word of Sherlock Holmes such that SEO might be an issue
> >(S+herlock and H+olmes).
> Would it be better, do you think, to make the heading an image?
> Do search engines pick up on the alt titles of images tagged as
> headings if there is no actual text heading for them to latch onto?
pseudo-element. The heading must be a block-level element for it to work,