I have a webpage in which I am using 2 jsp:include directives. Basically one is the header and other is the footer. The headers and footers are aligned correctly. But the central body of the main page is aligned to the left side.
This is the code of the page.
page.jsp
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<%#page contentType="text/html" import="java.util.*" %>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" href="images/style.css" type="text/css" />
<title>HireZilla</title>
</head>
<body>
<jsp:include page="../top_and_left.jsp" flush="false"></jsp:include>
<div id="contenttext" align="center">
Hello World!!
</div>
<jsp:include page="../footer.jsp" flush="false"></jsp:include>
</body>
</html>
This is the code in the browser. I can see that there are lot of tags lying here and there because of the "jsp:include"s. But i dont know how to remove them.
The div tag with "Hello World" gets aligned in the left most corner of the page after the header and before footer elements. My header("top_and_left.jsp") as the name suggests has an 'L' shape with links in the left side of the page and a banner in the top. I want the div tag to come inside the L. I am able to do this in browsers ie8 and above but not in ie7.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" href="../../css/style.css" type="text/css" />
<title>HireZilla</title>
</head>
<body>
<div id="page" align="center">
<div id="toppage" align="center">
<div id="date">
<div class="smalltext" style="padding:13px;"><strong>Wed Jul 27 23:14:08 IST 2011</strong></div>
</div>
<div id="topbar">
--Links in the top right corner--
</div>
</div>
<div id="header" align="center">
<div class="titletext" id="logo">
<div class="logotext" style="margin:30px">Hire<span class="orangelogotext">Z</span>illa</div>
</div>
<div id="pagetitle">
<div id="title" class="titletext" align="right" >Welcome to HireZilla!</div>
</div>
</div>
<div id="content" align="center">
<div id="menu" align="right">
<div id="linksmenu" align="center">
--Left link panel menu--
</div>
</div>
</div>
<div id="contenttext" align="center">
Hello World!!
</div>
<div id="footer" class="smallgraytext" align="center" style="margin-left:225px" >
--Footer goes here--
</div>
</div>
</body>
</html>
This is the contenttext element in my css
#contenttext{
width:608px;
background-color:#F7F7F7;
border-left:solid 1px #999999; border-right:solid 1px #999999;
border-bottom:solid 1px #999999; border-top:dotted 1px #CCCCCC;
min-height:360px;
}
I am not sure whether I have put the question in the right way. I would be happy to clarify.
I dont want to crowd this page more with the css also. If you can let me know which elements you want to see, I can paste their code here.
Thanks in Advance
You are including a full html page within the body of another html page. This is causing all kinds of invalid html.
To fix this, strip all of the extra stuff out of footer.jsp and top_and_left.jsp. Remove the <html>, <head>, <body>, etc. The file should only include the html which you want injected into your body. This will likely clean up most of your issues.
Related
I am using Bootstrap to make the style of my webpage.
I want to do something similar to this image:
I have been trying it (in the snipped you can test it), but I don't know if it is the best way to do it.
I mean that i'm not sure if is correct to add two divs without any data on it (col-xs-2), only to add some spaces (columns of bootstrap) to the left and to the right.
Is there a better way to do that?
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container-fluid" style="background-color:white;>
<div class="row" >
<div class="col-xs-12">WEB LOGO------------------------</div>
<div class="row">
<div class="col-xs-2" style="background-color:white;"></div>
<div class="col-xs-8" style="background-color:grey;">YES</div>
<div class="col-xs-2" style="background-color:white;"></div>
</div>
<span> more content here -------------</span>
</div>
</div>
</body>
</html>
Instead of the empty div's you can use an offset:
<div class="col-xs-8 col-xs-offset-2" style="background-color:grey;">YES</div>
This will move your element 2 columns to the right.
You need to implement style="inline-block" inside of the parent div you want the children to fall inline in.
I am creating a html template for a webpage in a free HTML-kit text editing program. Both my xhtml and css files are in the same directory. I can link pictures to xhtml template but my css page is not affecting any change.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmln="http-"http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta content="teggxt/html; charset=utf-8" http-equiv="Content- Type"/>
<title>Spaghetti & Cruft: Geek Pizzeria</title>
<link rel="stylesheet" type="text/css" href="styles.css" />
</head>
<body>
<div id="branding">
<h1><img src="images/logo.gif" alt="Spaghetti and Cruft: Geek Pizzeria">
<p id="address">
Spagetti & Cruft<br />
742 Cederholm Ave.<br />
Gotham, CA 00234<br />
510-555-0987
</p>
</div>
<div id="main-content">
<h2>The page title will go here.</h2>
<p>The page content will go here.</p>
</div>
<ul id="navigation">
<li>Our Menu</li>
<li>About Us</li>
<li>Raves and Reviews</li>
<li>News and Events</li>
<li>Contact Us</li>
</ul>
<div id="tagline">
<p>Pizza, pasta, and WiFi.</p>
<p>Enjoy a bite with your bytes.</p>
</div>
<p id="copyright">© 2007 Spaghetti & Cruft: Geek Pizzeria</p>
</body>
</html>
and the CSS code.
html {
background-color: #ffffff;
background-image: url(images/background.gif) repeat-x;);
}
body {
width: 80%;
}
Is the HTML-kit having difficulty processing XHTML 1.0 Strict? I'm not sure.
You are missing the closing " after styles.css.
If you are using html strict, you need to close all of your tags always. html, body, div and h1 tags is not closed right now. You miss some closing in the end of css description in meta tag also.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmln="http-"http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>Spaghetti & Cruft: Geek Pizzeria</title>
<link rel="stylesheet" type="text/css" href="styles.css" />
</head>
<body>
<div id="branding">
<h1><img src="images/logo.gif" alt="Spaghetti and Cruft: Geek Pizzeria" /></h1>
</div>
</body>
</html>
And your css is also quite clumzy. No need to put background elements in html if you can all put in body description. And also width is probably for that div, not for all body.
body { background: #FFFFFF url(images/background.gif) repeat-x; }
div#branding { width: 80%; }
Given the following HTML, how would I make the Label, Input, and 2 Buttons exist on the same "line", and have the input take 100% space between the Label and 2 Buttons, with changing browsers widths? In other words, I want the input anchored on both sides, so that that will change width as you make the browser smaller and larger widths.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>example</title>
<style>
/* ?? */
</style>
</head>
<body>
<div id="container">
<form class="form">
<p>
<label>xyz:</label>
<span class="item">
<input type="text" class="txt" name="description" id="description" />
<button>A</button>
<button>B</button>
</span>
</p>
<br clear="all" />
</form>
</div>
</body>
</html>
See JSFiddle here: http://jsfiddle.net/3vGtJ/
You could also try using display:table and display:table-cell
http://jsfiddle.net/3vGtJ/1/
I am having some problems with Safari.
While all browsers display the pages fine, Safari adds a huge white area above the main ContentPlaceholder as shown in the images below. This happens on every page so I guess the problem is in the master page but I can't figure out how to fix it.
There is also a small problem with some extra padding above the menu (same happens in Chrome)
I'd appreciate any help. thanks in advance.
Here is my master page:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head runat="server">
<title></title>
<link href="~/Styles/Site.css" rel="stylesheet" type="text/css" />
<asp:ContentPlaceHolder ID="HeadContent" runat="server">
</asp:ContentPlaceHolder>
</head>
<body>
<form runat="server">
<div class="page">
<div class="header">
<div class="title">
<h1>
My ASP.NET Application
</h1>
</div>
<div class="loginDisplay">
<asp:LoginView ID="HeadLoginView" runat="server" EnableViewState="false">
<AnonymousTemplate>
................
</AnonymousTemplate>
<LoggedInTemplate>
................
</LoggedInTemplate>
</asp:LoginView>
</div>
<div class="clear hideSkiplink">
<asp:Menu ID="NavigationMenu" runat="server" CssClass="menu" EnableViewState="false" IncludeStyleBlock="false" Orientation="Horizontal">
<Items>
................
</Items>
</asp:Menu>
</div>
</div>
<div class="leftMenu">
<asp:ContentPlaceHolder ID="LeftMenuContent" runat="server"/>
</div>
<div class="main">
<asp:ContentPlaceHolder ID="MainContent" runat="server"/>
</div>
<div class="clear">
</div>
</div>
<div class="footer">
</div>
</form>
And here is the source code and CSS: http://jsfiddle.net/V5aCa/6/
It is because you are using display:table safari treats this differently to other browsers
have a look at this question:
Safari 5.1 breaks CSS table cell spacing
or try using border-box:
CSS does the width include the padding?
Your space above the navigation appears because of the skip nav anchor, if you position this absolutely or float it your space should disappear
Try resetting the Margin and Padding of the browser.
body {
margin: 0px;
padding: 0px;
}
that should force safari to start from your set values rather than build up on its default.
I am using 960 grid system with container_12. The issue is I am using 2 grid_6 col and text is overlapping. When I try setting the overflow property to auto I get a scrolling panel but the text does not shift on the next line after the width.
<%# Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!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 runat="server">
<title></title>
<link href="css/960.css" rel="stylesheet" type="text/css" />
<link href="css/reset.css" rel="stylesheet" type="text/css" />
<link href="css/text.css" rel="stylesheet" type="text/css" />
<link href="css/Style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<form id="form1" runat="server">
<div id="body" class="container_12">
<div id="header" class ="grid_12">This is header</div>
<div id="nav" class="grid_3">
Navigation
<ul>
<li>Google</li>
<li>yahoo</li>
<li>bing</li>
</ul>
<p>dcjkldsjfkdjkljdsklvjkjvkdjkfljdskfjkdsjfkldjsfkjdksjkfjkd</p>
</div>
<div class="grid_9" >
<div id="content">
<h1>Content</h1>
<p>The premise of the system is ideally suited to rapid prototyping,
but it would work equally well when integrated into a production environment.
There are printable sketch sheets, design layouts, and a CSS file that have identical measurements.</p></div></div>
</div>
</form>
</body>
</html>
Problem here-:
<p>dcjkldsjfkdjkljdsklvjkjvkdjkfljdskfjkdsjfkldjsfkjdksjkfjkd</p>
Make sure you have only one level of grids inside containers, eg:
<div class="container_12">
<div class="grid_6"></div>
<div class="grid_6"></div>
</div>
If you want to add padding to your content areas, add an extra div inside the grids, don't add padding to the grids themselves, ie.
<div class="container_12">
<div class="grid_6"><div class="space"></div></div>
<div class="grid_6"><div class="space"></div></div>
</div>
I had the same problem. I had a "grid_3" and i put dummy content in there, but it kept spilling out of the div. I also just copied and pasted a word end to end to see what it looked like. I went back and added spaces between the words and it works perfectly. Doesn't expand outside of the div, it stops and expands vertically. What kind of bug or glitch is that in 960?