Jump to content

Frank P

Members
 View Profile  See their activity

  • Posts

    168

  • Joined

  • Last visited

 Content Type 

Posts posted by Frank P

    How can i set vertical align inside a div which floats left on explorer 6 and 7

    in CSS Help

    Posted

    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>

    How can i set vertical align inside a div which floats left on explorer 6 and 7

    in CSS Help

    Posted

    i am trying to set the text to be vertical align:middle but it is not working on explorer 6 and 7 is that even possible

    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.

    Supersimple zoom script, but only big images will zoom out again. Why?

    in Javascript Help

    Posted

    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?

    Drop Down menu styling

    in CSS Help

    Posted

    I'm trying to make it so that when I hover over the Main Tab on a drop down menu it changes color, and while you're going through the other options on the drop down, the main tab still stays coloured.

     

    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>

    iframe height

    in Javascript Help

    Posted

    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.

    iframe height

    in Javascript Help

    Posted

    Same way you'd influence anything after the page is already loaded and rendered: with JavaScript. The parent and child can access each other if they're on the same domain, so the parent could grab the height of the child content and resize the frame accordingly.

    But what triggers the execution of the javascript on the parent page then, if that is already loaded and rendered?

    iframe height

    in Javascript Help

    Posted

    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.

    iframe height

    in Javascript Help

    Posted

    Is there any way where iframe can change height based on iframe content?

    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.

     

    What is the difference between these two examples?

    in Javascript Help

    Posted

    The other alternative to make your script easier is to remove the if statment.

    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.

     

    When you try to access the style via object.style.property, the property has to be in an inline style (e.g. <ul style="display:none;">) or it has to be set via javascript before hand.

    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. 

     

     

    What is the difference between these two examples?

    in Javascript Help

    Posted

    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?

    CSS Dropdown not clearing content

    in CSS Help

    Posted

    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.

    CSS3 Pie Gradients Not Working in IE9

    in CSS Help

    Posted

    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. 

    Make banner not to get out of the wrap id

    in CSS Help

    Posted

    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.