husseycoding

Hi jheg, I haven't tried sticky footer so go ahead and give that a go if you like, otherwise it's very straightforward. In this situation I would set the div containing the footer to position:fixed and bottom:0. This way the footer will always stay at the base of the page. However, bear in mind that it will be there even if the content on the page is longer than the height of the window, if this is the case, then the page content will appear in the same area as the footer. If you want the footer to either appear at the base of the page, or below the content, whichever is lower, then you will have to use some simple javascript.

It is possible to set the opacity of a div yes, but I would be a bit wary of doing a fade, FF likes opacity a whole lot more than IE in my experience.

Hi jheg, Absolute positioning removes the affected div from the flow of the page and it appears exactly where you place it. With this and fixed positioning the div is no longer 'inline' with the rest of the document and because of this, it is not affected by other elements on the page and also does not affect other elements on the page - because of this it's position was not moving as you wanted it to because the other divs had no affect on it. By removing the position:absolute declaration you changed the position to relative (as this is the default). With relative positioning the div is 'inline' with the rest of the document and so will be affected when other divs change position/size.

I don't see a problem with using a div for navigation?

Can you post a link? Also if images are involved then try setting them to display:block.

Hi jheg, For point 1 use cursor:pointer in your CSS and for point 2, give the nav bar an id and then set it to position:absolute or position:fixed. This way it's effectively removed from the page and won't affect the rest of the layout. Bear in mind you will have to set a new position for the items below as they will jump up when you make the changes to the nav bar.

Glad you managed to sort it out

Hi misterorsborn, Whats happening here is that because you have set the position of the page_title div to absolute and not defined the event1_title position (which means it will be relative) they are sitting on top of each other. Absolute positioning means that the element is removed from the page and it will appear exactly where you place it with relation to the parent element. Relative positioned elements on the other hand will appear wherever they would naturally sit on the page, again in relation to the parent element. As far as event1_title is concerned, page_title has been removed from the layout and does not affect it's position, so because nothing has been defined, it sits at top:0, left:0. With page_title, the position is set to top:0, left:0 and so they both appear at the same point. If you want elements to sit one below the other in a setup like this, set them to position:relative instead.

I haven't tested this but I *think* you also could float the grey and green, but not the blue or red. If the position of them all is set to relative then the blues natural position should be to the right of green because green is float, and then red should fall below them all because blue is not float. For subsequent divs, just keep the position relative and it will sit on a new line. Sounds realistically like your setup might be a bit more complex than this as you are creating divs on the fly, but if you can prove a concept to work, there is always a way to code it!

Well, I don't know what code you have so far, but the basics of it is, you need to give the elements you want to be able to change either an 'id' if you want to apply the styles to only that element, or a 'class' if you want to apply the styles to that plus other elements. You can then use CSS either in an external .css file or included in the page to apply your styles.

Just to add a note to pat24's fix, inline styles always override other styles, but is not considered a great way to do it. However in a situation like this, inline probably isn't a bad way to go just because this image is an 'exception' if you like to a global style, so it wouldn't make sense to set separate styles for all the elements this style covers just for the sake of saving a bit of inline styling.

Ok, well I'm no designer so I won't comment on the design side but from a coding point of view, one thing that sticks out immediately is that it is extremely unreadable. It's a very good idea to put in spaces and indent code, that way if someone else has to read it, or you have to return to it yourself some time later it's a lot easier to see whats going on.

Are we talking about just the coding here, or the design too?

Ok, well at the basic level thats pretty straightforward. You just need a div to contain the data, then at the same time as posting the data, just target the div with getElementById and then use innerHTML to set the content to the post data. If you want multiple users to be able to post multiple comments and for them to appear one above the other, then that's a lot more complex.

Hi Shaun, Can you tell us what data we are talking about (text/images?) and also how you are you posting the data (AJAX/via PHP?)

To get you started have a look at onclick() and getElementById().

Just have a look through your links and make sure you haven't got anything overlapping and so on.

That first link is bad.

What exactly are you trying to achieve? Are you wanting to build a scrollbar yourself? You can alter many aspects of the default scrollbar using CSS as standard.

Yep, W3C confirms <?xml version="1.0" encoding="ISO-8859-1"?> is for XML parsers only, so XHTML should still use the meta tag characters encoding declaration (it should sit above the title tag), so ignore what I said above Thanks for the more detailed info on the XHTML 1.1 vs 1.0!

Hi tomika, Declaring document type and character encoding is not too complex, but is something that many people don't take the time to read up about. Fortunately many browsers are forgiving and still load a page if these are wrong even if it means the page doesn't validate. The 'xml declaration' you are referring to I assume is the character encoding declaration for XHTML documents. For XHTML documents the character encoding declaration is different to HTML and you are right it is an xml statement which should appear on the first line such as this: <?xml version="1.0" encoding="ISO-8859-1"?> The 'encoding' section refers to a particular region and tells the browser what characters to expect in the page, ISO-8859-1 is western europe. Obviously, if you used ISO 8859-7 which is greek, you can imagine the browser would be expecting very different characters to our alphabet. You will also often see utf-8 which is a unicode declaration and can represent any character in the unicode standard. It's worth noting that character encoding appears as line 1 in an xml statement for XHTML, but appears as a meta tag for HTML (and should not appear as a meta tag for XHTML). If you don't declare this, I'm not sure what would happen, but my guess would be that the browser would default to assuming utf-8. The different between XHTML 1.0 and XHTML 1.1 is just that is a newer standard, just like when HTML 5 *finally* arrives, that will be the next standard. There are lots of articles on specific differences between them in terms of available tags and so on. As for DOCTYPE: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> This tells the browser believe it or not, what type of document it is. There are obviously differences between XHTML and HTML, so the browser needs to know which it is. For instance <br> is not a valid XHTML tag, but <br /> is, so the content of the document will be different according to the DOCTYPE. Finally, meta tags are for declaring various information about the website, who wrote it, keywords for search engines, copyright information and so on. Have a look at this useful page for specific details on each meta tag.