使用简单的iframe和CSS制作简单的顶部和左侧导航_Css_Html_Iframe

使用简单的iframe和CSS制作简单的顶部和左侧导航

css html iframe

使用简单的iframe和CSS制作简单的顶部和左侧导航,css,html,iframe,Css,Html,Iframe,由于某种原因，我在这方面遇到了一些麻烦。。。我一直在使用老式的html框架，并决定开始使用iframes来简化javascript集成。。。我需要一个顶部导航和一个左侧导航，内容填充页面的其余部分。。。告诉我我做错了什么原件：我确信我错过了一些非常简单的东西。提前谢谢编辑：我开始尝试用div和css来完成这个任务。。。这就是我现在的位置。。。它不工作了。。。救命啊 CSS: 身体{ 边际：0px；填充：0px； } #顶部导航分区{ 背景色：100719；边际：0px；填充：

由于某种原因，我在这方面遇到了一些麻烦。。。我一直在使用老式的html框架，并决定开始使用iframes来简化javascript集成。。。我需要一个顶部导航和一个左侧导航，内容填充页面的其余部分。。。告诉我我做错了什么

原件：

我确信我错过了一些非常简单的东西。提前谢谢

编辑：

我开始尝试用div和css来完成这个任务。。。这就是我现在的位置。。。它不工作了。。。救命啊

CSS:


身体{
边际：0px；
填充：0px；
}
#顶部导航分区{
背景色：100719；
边际：0px；
填充：0px；
边际上限：0px；
左边距：0px；
宽度：100%；
高度：50px；
}
#左导航分区{
背景色：100719；
边际：0px；
填充：0px；
边缘顶部：50px；
左边距：0px；
宽度：400px；
身高：100%；
}
#显示内容分区{
背景色：100719；
边际：0px；
填充：0px；
边缘顶部：50px；
左边距：400px；
宽度：100%；
身高：100%；
}

分区：

已解决：

<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>

<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>

<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>

<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>