Jump to content

Frank P

Members
 View Profile  See their activity

  • Posts

    168

  • Joined

  • Last visited

 Content Type 

Everything posted by Frank P

  1. Frank P
    I told you to use line-height in stead of vertical-align. Why didn't you do that??
  2. Frank P
    Sorry, I was too quick and thus missed the whole inner div thing. But you can set the height of the outer div, can't you? Then just give the inner div a height:inherit and a line-height:inherit. Like so: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Demo</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <style type="text/css"> div#outer { width: 200px; height: 200px; line-height: 200px; border: 1px solid black; } div#inner { width: inherit; /* because of the float, which may give it a shrink-wrap */ height: inherit; line-height: inherit; text-align: center; font: normal 0.8em Arial; } h3 { margin-top: 0; } </style> </head> <body> <div id="outer"> <div id="inner"><h3>Centered text</h3></div> </div> </body> </html>
  3. Frank P
    You can set it, but it won't work, in any browser. Vertical:align only works in table cells and on inline elements such as images. Now, you could turn a div into a table cell by means of display:table-cell, but that still won't work in IE6/7. What you can do to cross-browser vertically center text is use line-height. That goes as follows: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Demo</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <style type="text/css"> div { width: 200px; height: 200px; border: 1px solid black; text-align: center; font: normal 0.8em Arial; line-height: 200px; } h3 { margin-top: 0; } </style> </head> <body> <div><h3>Centered text</h3></div> </body> </html> For all text tags (h, p, etc.) you have to set margin-top:0;. Which is a good idea anyway, to even out browser differences in text positioning.
  4. Frank P
    Resolved. It appeared that my JS was comparing strings, not numbers. With the Number method things work well now. See the source code of the example for details.
  5. Frank P
    Hi, I was not happy with the zoom scripts that I found on the net, so I wrote one myself, or one that simulates it. It has become an extremely simple one, and can be seen in action here (function toggleZoom). Click the images to zoom in and click to zoom out again. However, only the images with an initial width of >= 100 pixels will zoom out again. The ones width an initial width of < 100 (nrs. 4, 5 and 7) won't. Why is that, and how do I solve it?
  6. Frank P
    If you can work with two background colors, you can do it this way: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Demo</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <style type="text/css"> li ul { display: none; } li:hover ul { display: block; } li:hover { background: yellow; } li:hover ul { background: white; } </style> </head> <body> <ul> <li><a href="#">Link 1</a></li> <li><a href="#">Link 2</a> <ul> <li><a href="#">Link 2-1</a></li> <li><a href="#">Link 2-2</a></li> <li><a href="#">Link 2-3</a></li> </ul> </li> <li><a href="#">Link 3</a></li> </ul> </body> </html>
  7. Frank P
    Then it does work. Quite amazing. I didn't think security rules would allow that.
  8. Frank P
    With these two codes, being the parent and the child file, respectively, it doesn't work: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Iframe-parent.html</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <style type="text/css"> div#parentDiv { width: 500px; height: 500px; border: 1px solid black; } </style> <script type="text/javascript"> /*<![CDATA[*/ function set_iframe_height(num) { document.getElementById('myIframe').style.height = num+'px'; } /*]]>*/ </script> </head> <body> <div id="parentDiv"> <iframe id="myIframe" style="width:450px;" src="Iframe-child.html"></iframe> </div> </body> </html> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Iframe-child.html</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <style type="text/css"> div#childDiv { width: 400px; height: 400px; border: 1px solid black; } </style> <script type="text/javascript"> /*<![CDATA[*/ function onload_iframe_height() { var h = Math.max( Math.max(document.body.scrollHeight, document.documentElement.scrollHeight), Math.max(document.body.offsetHeight, document.documentElement.offsetHeight), Math.max(document.body.clientHeight, document.documentElement.clientHeight) ); // var h = 400; window.parent.set_iframe_height(h); } /*]]>*/ </script> </head> <body onload="onload_iframe_height"> <div id="childDiv"></div> </body> </html> Setting the child file's h at 400 still doesn't make it work.
  9. Frank P
    But what triggers the execution of the javascript on the parent page then, if that is already loaded and rendered?
  10. Frank P
    nogray, How can you influence the iframe heigth in a parent page that is already loaded and rendered by a value that must come from the child page? You're a hero if you pull it off, but I don't see how.
  11. Frank P
    No, there isn't. The iframe itself belongs to the main page, and the filling of the iframe is the 'imported' page. You cannot have the contents of an imported page control an element on the main page.
  12. Frank P
    That's a contradiction in terms. You're making a couple of mistakes, and I'm not quite sure what you're trying to achieve. You might wanna start with this tutorial, and see what problems remain after that: How to Center in CSS.
  13. Frank P

    CSS not loading

    Frank P replied to esoteric's topic in CSS Help

    We can't tell without online site or code.
  14. Frank P
    Got it. Thanks, nogray!
  15. Frank P
    A debate is over when both debaters agree that it is over or when a referee says so. Not if just one party says it's over.
  16. Frank P
    I don't think so. This is all he asked:
  17. Frank P
    There is no need to declare a width and a margin:auto for the div. Just text-align:center will do. See How to Center in CSS.
  18. Frank P
    Actually, I already know that. But I'm working on more complicated DHTML matters that give me problems, and I have the distinct feeling that the matter of Javascript (not) being able to retrieve CSS values is the key to the solution. That's why I'm posting these two examples. Of which, like I said, one is working -- Kid. I read that elsewhere, too, but why then is Kid working? Kid doesn't have inline styles or the style set by JS beforehand - apart from the difference one-link toggle vs. multi-link toggle, Kid and Child are identical. Still, only Kid is working.
  19. Frank P
    Hi, I have two nested menu's, that should open & close by onclick. Could someone tell me why the first example works (Kid example) and the second one (Child example) does not? <!DOCTYPE html> <html> <head> <title>Kid example</title> <style type="text/css"> #navMenuDiv #subLevel { display: none; } </style> <script type="text/javascript"> function toggleDisplay() { var kid = document.getElementById('subLevel'); if (kid.style.display == "block") {kid.style.display = "none";} else {kid.style.display = "block";} } </script> </head> <body> <div id="navMenuDiv"> <ul> <li><a href="#">Home</a></li> <li><a href="#">Visie op Fitness</a></li> <li><a href="#" onclick="toggleDisplay()">Activiteiten ↓</a> <ul id="subLevel"> <li><a href="#">Bodybuilding</a></li> <li><a href="#">Bodyshaping</a></li> <li><a href="#">Conditietraining</a></li> </ul> </li> </ul> </div> </body> </html> <!DOCTYPE html> <html> <head> <title>Child example</title> <style type="text/css"> #menuDiv #subLevel { display: none; } </style> <script type="text/javascript"> function openSubLevel() { var child = document.getElementById('subLevel'); if (child.style.display == 'none') {child.style.display = 'block';} else {return;} } function closeSubLevel() { var child = document.getElementById('subLevel'); if (child.style.display == 'block') {child.style.display = 'none';} else {return;} } </script> </head> <body> <div id="menuDiv"> <ul> <li><a href="#" onclick="closeSubLevel()">Home</a></li> <li><a href="#" onclick="closeSubLevel()">Visie op Fitness</a></li> <li><a href="#" onclick="openSubLevel()">Activiteiten ↓</a> <ul id="subLevel"> <li><a href="#">Bodybuilding</a></li> <li><a href="#">Bodyshaping</a></li> <li><a href="#">Conditietraining</a></li> </ul> </li> </ul> </div> </body> </html> Kid is a real toggle script (one link opens and closes), Child is a script with which clicking the parent link should open and clicking the other main menu items should close the nested menu. But only Kid works, while they are furthermore identical. Why would that be?
  20. Frank P
    See the second tutorial on my signature page. It's explained at about one-third from the bottom.
  21. Frank P
    Muchas gracias! I love that effect, and that site makes it sooo much easier!
  22. Frank P
    Your nested <ul> should get a position:absolute: .navi li:hover ul { display: block; position: absolute; } But your menu won't work in IE6 because IE6 doesn't know li:hover (only a:hover), and you might get a disposition problem in IE6+7. For simple solutions for both, see the last tutorial on my signature page.
  23. Frank P
    I only use PIE for gradients in the development phase. When my client is satisfied with the look, which I present through screen shots that I put on the internet, I make a graphic gradient. Much less code and less rendering problems. You can have gradients made online, too, for free. And with the current internet connection speeds, small images like gradients are downloaded in no time at all.
  24. Frank P
    Please post the whole -- relevant -- code, in one code block, from <doctype> to </html>.
  25. Frank P
    You have the following inline styling: <span style="display:block; width:718px; height:86px; background-repeat:no-repeat; background-position:center; background-image:url('./styles/LOTD/imageset/ps_logo3.png');"> <script type="text/javascript"><!-- google_ad_client = "pub-6144115669443786";google_ad_slot = "5556316332";google_ad_width = 728;google_ad_height = 90;//--></script> <script src="http://pagead2.googlesyndication.com/pagead/show_ads.js" type="text/javascript"> </script> </span> The width declaration is the culprit. Now, I've tried to give it 100% width, to make it flexible, but it doesn't respond to that. I would suggest to make your layout a fixed-width layout, optimized for 1024x768, so with a fixed width of some 1000px. That way you will also prevent the text lines from becoming too long, which makes reading awkward.
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.