使用简单的iframe和CSS进行简单的左上导航

时间:2013-12-05 19:51:41

标签: css html iframe

由于某些原因,我遇到了一些问题...我一直在使用旧式的html框架并且决定我应该开始使用iframe来更轻松地集成javascript ...我需要一个顶级导航和一个左导航内容填写页面的其余部分...告诉我我做错了什么!!

原始

<html>
<head>
<title></title>
</head>
<iframe style="display:block; width:100%; height:50px" 
        src="navTop.html" name="iframeTop" scrolling="no" frameBorder="0">
</iframe>
<iframe style="display:inline; overflow:hidden; width=10%; height=100%;" 
        src="navLeft.html" name="iframeLeft" scrolling="no" frameBorder="0">
</iframe>
<iframe style="display:block; float:right; width=90%; height=100%" 
        src="content.html" name="iframeCenter" scrolling="auto" frameBorder="0">
</iframe>
<noframes></noframes>
</html>

我确信它很简单,我想念它。提前谢谢!

修改

我开始尝试用div和css完成这个......这就是我...它还没有工作......帮助!!!

CSS

<style>
        body {
                margin:0px;
                padding:0px;
        }
        #topNavigation div {
                background-color:100719;
                margin:0px;
                padding:0px;
                margin-top:0px;
                margin-left:0px;
                width:100%;
                height:50px;
        }
        #leftNavigation div {
                background-color:100719;
                margin:0px;
                padding:0px;
                margin-top:50px;
                margin-left:0px;
                width:400px;
                height:100%;
        }
        #displayContent div {
                background-color:100719;
                margin:0px;
                padding:0px;
                margin-top:50px;
                margin-left:400px;
                width:100%;
                height:100%;
        }
</style>

DIVS

<body>
        <div id="topNavigation">
                <iframe src="navTop.html" 
                        style="border:0px #FFFFFF none;" 
                        name="navTop" 
                        scrolling="no" 
                        frameborder="0" 
                        marginheight="0px" 
                        marginwidth="0px">
                </iframe>
        </div>  
        <div id="leftNavigation">
                <iframe src="navLeft.html" 
                        style="border:0px #FFFFFF none;" 
                        name="navLeft" 
                        scrolling="no" 
                        frameborder="0" 
                        marginheight="0px" 
                        marginwidth="0px">
                </iframe>
        </div>
        <div id="displayContent">
                <iframe src="content.html" 
                        style="border:0px #FFFFFF none;" 
                        name="content" 
                        scrolling="no" 
                        frameborder="0" 
                        marginheight="0px" 
                        marginwidth="0px">
                </iframe>
        </div>
</body>

1 个答案:

答案 0 :(得分:0)

解决:

<body style="margin:0px; padding:0px; line-height:0; height:100%">
    <iframe src="navTop.html" 
            style="margin:0px; padding:0px; line-height:0; width:100%; height:8%;" 
            name="navTop" scrolling="no" frameborder="0">
    </iframe>
            <iframe src="navLeft.html" 
            style="margin:0px; padding:0px; line-height:0; width:10%; height:100%; float:left"
            name="navLeft" scrolling="no" frameborder="0">
    </iframe>
    <iframe src="content.html" 
            style="margin:0px; padding:0px; line-height:0; width:90%; height:100%; float:right"
            name="content" scrolling="no" frameborder="0">
    </iframe>