Jump to content

iammatto

Members
  • Posts

    6
  • Joined

  • Last visited

Everything posted by iammatto

  1. I have a couple of notes on the navigation:The navigation should somehow show what page you on currently on, so if you are on the about-marad page, the link to it should be removed from the navigation and replaced with some static text, and maybe a slightly different background image so it is clear that the user is on that page and to prevent the page from being self-refrencing.Also, on most (all?) pages, below the navigation but above the rounded box you have some yellow links right aligned. Is there a reason that those are not part of the main navigation above?
  2. Just a bit more...According to the W3C, an id must be unique and is used to identify an html element, while the class assigns the class name to the element, and multiple elements can share the class name. Honestly, the id shouldn't be thought of as a way to apply a style, but more to identify an element, which in turn, css can specify a style to be applied to...it's a subtle difference, which I may have made even more confusing with my wording, but to me seems to be an important differenc. The link below should help a bit morehttp://www.w3.org/TR/html4/struct/global.html#h-7.5.2
  3. If you are working with a more liquid layout, you can use the following css / html CSS:<style type="text/css">#left { background: url(bluebaronside.gif) repeat-y top left; padding-left: 28px; margin-left: 50px;}#right { background: url(bluebaronside.gif) repeat-y top right; padding-right: 28px; margin-right: 50px;}HTML:<div id="left"><div id="right"> Your content / center column html will go here.</div></div> The 28px came from the width of the image you provided, but if you want a bit more padding inside the border you can make that bigger, and the 50px is just so you can have a bit of space on the outside of the borders. If you want it to go all the way to the outside just get rid of the margins, and if you want more, just increase them. I have tested this in Opera, Firefox and IE6, and it works great.
  4. To use your exact situation, if you use the following css #top { background-color: #ccc; padding: 1em } h1 { color: #ff0; } p { color: red; font-weight: bold; } with this html <div id="top"> <h1>Header 1</h1> <p>Paragraph 1</p></div><h1> Header 2</h1><p>Paragraph 2</p> Both <h1> tags would be yellow, and both <p> tags would appear bold and red. However, if you use the nested css: #top { background-color: #ccc; padding: 1em } #top h1 { color: #ff0; } #top p { color: red; font-weight: bold; } This css with the above html, will have the first <h1> and <p> tags appear as styled (yellow, and red bold respectively), while the second will used the default styles.I hope this helps...
  5. From what I can tell, IE is rendering it incorrectly, as both Firefox and Opera (which tend to be more standards compliant) are rendering it the same, and not in the way you are desiring. I haven't looking into it too deeply, however an easy fix is to just combine the two divs that makeup your left hand navigation. This fixes the layout in IE, Firefox and Opera.
  6. You can get the desired result if you use AJAX. The code may not be super-clean looking (but you could (and should) link to an external file for the javascript), and requires a moderately current browser, but it works without any server-side scripting and won't require reloading any code/assets in the side bars.As stated above, I'm pretty sure there is no pure CSS solution, sorry. <html><head><title></title><script>function GetXmlHttpObject(handler) { var objXmlHttp=null if (window.XMLHttpRequest) { objXmlHttp=new XMLHttpRequest() objXmlHttp.onload=handler objXmlHttp.onerror=handler return objXmlHttp } else if (window.ActiveXObject) { var strName="Msxml2.XMLHTTP" if (navigator.appVersion.indexOf("MSIE 5.5")>=0) { strName="Microsoft.XMLHTTP" } try { objXmlHttp=new ActiveXObject(strName) objXmlHttp.onreadystatechange=handler return objXmlHttp } catch(e) { alert("Error. Scripting for ActiveX might be disabled") return } } } function updateContent(contentPage) { xmlHttp=GetXmlHttpObject(showContent) xmlHttp.open("GET", contentPage , true) xmlHttp.send(null) return false;}function showContent() { if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete") { cart = document.getElementById("contentArea").innerHTML=xmlHttp.responseText; }}</script></head><body onLoad="updateContent('content1.htm');"><div> <a href="#" onclick="updateContent('content1.htm'); return false;">Page 1</a> <a href="#" onclick="updateContent('content2.htm'); return false;">Page 2</a></div><div id="contentArea"></div></body></html>
×
×
  • Create New...