CODEWITHSUNDEEP
htmlcssiframe
Zain I.
Zain I.

Reputation: 205

Setting frames position

PROBLEM 1:

I am having issue while setting 4 frames in a single file. I am unable to set the position of the frames. Please guide me further to solve my issue...Black box show a frame while red box describes them briefly

home.jsp

    <?xml version="1.0" encoding="ISO-8859-1" ?>
    <%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
    <head>
        <link rel="stylesheet" type="text/css" href="css/index2.css" />
        <title>SIMS</title>
    </head>
    <body bgcolor="#DDDDDD">

        <iframe class="top" src="header.html" scrolling="no" frameborder="0" >
        </iframe>

        <iframe class="right" src="" scrolling="auto" frameborder="1" >
        </iframe>

        <iframe class="bot" src="footer.html" scrolling="no" frameborder="0" >
        </iframe>

        <iframe class="left" src="menu.html" scrolling="auto" frameborder="0" >
        </iframe> 

    </body>
</html>

index2.css

iframe.top {
    position: fixed;
    border: none;
    float: top;
    width: 95%;
    height: 28%;
    }
iframe.left {
    border: none;
    position: relative;
    left: 20px;
    top: 20px;
    float: left;
    width: 20%;
    height: 200%;
}
iframe.right {
    position: fixed;
    border: none;
    float: right;
    width: 75%;
    height: 90%;
    }
iframe.bot {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    border: none;
    float: bottom;
    width: 100%;
}

PROBLEM 2: When i select an item from menu list (menu.html), it opens in a new tab instead of right frame

Upvotes: 0

Views: 3097

Answers (2)

Chanaka Lakmal
Chanaka Lakmal

Reputation: 1122

Try this example. header.jsp, footer.jsp, content.jsp and menu.jsp are seperately created files in the project.

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"/>
    <title>JSP Page</title>
</head>
<body bgcolor="#DDDDDD">
    <div>
        <div class="col-md-12 bg-danger">
            <%@include file="header.jsp" %>
        </div>
        <div class="col-md-3 bg-info" style="height: 300px;">
            <%@include file="menu.jsp" %>
        </div>
        <div class="col-md-9 bg-primary" style="height: 300px;">
            <%@include file="content.jsp" %>
        </div>
        <div class="col-md-12 bg-success">
            <%@include file="footer.jsp" %>
        </div>
    </div>
</body>

Upvotes: 2

Chanaka Lakmal
Chanaka Lakmal

Reputation: 1122

Try to use Bootstrap for this instead of writing own CSS classes. That will make your life easier. The following link will guide you to the grid example, which addresses to your question.

http://getbootstrap.com/css/#grid-example-basic

Upvotes: 0

Related Questions