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?
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 having some issues getting Thymeleaf to behave the way I want regarding templates. I was previously using Apache Tiles which worked but I thought it was heavy weight with the configuration / XML. I had an elegant solution where I was even defining my JavaScripts and Sytlesheets in Tiles XML configuration. However I want to move away from JSPs entirely. I have seen references for both Thymeleaf and Facelets. I decided to give Thymeleaf a try but I'm having issues getting a default layout for all my other pages.
Just for some background this was my default layout file I was using with Apache Tiles.
<%# taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%# taglib uri="http://tiles.apache.org/tags-tiles" prefix="tiles"%>
<tiles:importAttribute name="javascripts"/>
<tiles:importAttribute name="stylesheets"/>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="author" content="XXXXXXXXXXX">
<meta name="description" content="Something">
<title><tiles:insertAttribute name="title"></tiles:insertAttribute></title>
<!-- stylesheets -->
<c:forEach var="css" items="${stylesheets}">
<link rel="stylesheet" type="text/css" href="<c:url value="${css}"/>">
</c:forEach>
<!-- end stylesheets -->
</head>
<body>
<!--[if lt IE 10]>
<p class="alert alert-warning">
Warning: You are using an unsupported version of Internet Explorer. We recommend using Internet Explorer
10+. If you are a Windows XP user you'll need to download an alternative browsers such as FireFox, Chrome,
Opera, or Safari.
</p>
<![endif]-->
<!-- header -->
<div id="header">
<tiles:insertAttribute name="header"></tiles:insertAttribute>
</div>
<!-- end header -->
<!-- content -->
<div id="content">
<tiles:insertAttribute name="content"></tiles:insertAttribute>
</div>
<!-- end content -->
<!-- footer -->
<div id="footer">
<tiles:insertAttribute name="footer"></tiles:insertAttribute>
</div>
<!-- end footer -->
<!-- scripts -->
<c:forEach var="script" items="${javascripts}">
<script src="<c:url value="${script}"/>"></script>
</c:forEach>
<!-- end scripts -->
</body>
</html>
I want to replicate similar behavior with Thymeleaf where the view would be rendered inside the template, hopefully that makes since.
As far as I understand it right now Thymeleaf does not work that way. Instead you define fragments and include them on each page. It works the opposite direction.
I found this example of GitHub https://github.com/michaelisvy/mvc-layout-samples/tree/master/src/main/webapp/WEB-INF/view/thymeleaf
I don't understand the following file.
!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head th:fragment="headerFragment">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link th:href="#{/style/app.css}" rel="stylesheet" />
</head>
<body>
<div class="container" style="padding-top: 50px;">
<div th:fragment="menuFragment">
<div class="header well">
<img th:src="#{/images/springsource_banner_green.png}"/>
</div>
<div class="page-header">
<h1 th:text="${title}"></h1>
</div>
<ul>
<li><a th:href="#{/users/all/jsp-plain.htm}">No template</a></li>
<li><a th:href="#{/users/all/jsp-custom-1.htm}">Custom tags</a></li>
<li><a th:href="#{/users/all/jsp-custom-2.htm}">Custom tags with table tag</a></li>
<li><a th:href="#{/users/all/jsp-tiles.htm}">Apache Tiles</a></li>
<li><a th:href="#{/users/all/thymeleaf.htm}">Thymeleaf</a></li>
</ul>
</div>
</div>
</body>
</html>
This line is pointless as its not part of the fragment as when it gets included in the users.html the html structure is lost.
<div class="container" style="padding-top: 50px;">
Essentially I want something like this
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet" />
</head>
<body>
<div class="container" style="padding-top: 50px;">
<div>
<div class="header well">
<img th:src="#{/images/springsource_banner_green.png}"/>
</div>
<div class="page-header">
<h1 th:text="${title}"></h1>
</div>
<ul>
<li><a th:href="#{/users/all/jsp-plain.htm}">No template</a></li>
<li><a th:href="#{/users/all/jsp-custom-1.htm}">Custom tags</a></li>
<li><a th:href="#{/users/all/jsp-custom-2.htm}">Custom tags with table tag</a></li>
<li><a th:href="#{/users/all/jsp-tiles.htm}">Apache Tiles</a></li>
<li><a th:href="#{/users/all/thymeleaf.htm}">Thymeleaf</a></li>
</ul>
</div>
</div>
<div id="content">
<!-- PAGES SHOULD RENDER HERE, example User.html -->
</div>
<!-- scripts -->
<script src="https://code.jquery.com/jquery-2.1.3.min.js" />
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
</body>
</html>
Any ideas or best practices?
You want the Thymeleaf Layout Dialect.
I'm adapting the Blueprint CSS framework for my web site project, but I'm noticing that the blueprint isn't following some of its own rules. I've run through the tutorials on their web site and tried Googling a solution, but nothing is working.
I'm trying to set up a page layout like so:
-----------------------------------------------------------------------
| Image (header) 950px |
-----------------------------------------------------------------------
|Navbar | Body (560px) | Ad Bar|
| | |(190px)|
| 200px | | |
| | | |
... ..... ...
| | | |
-----------------------------------------------------------------------
| (footer) 950px |
-----------------------------------------------------------------------
I'd like the Body to be flanked by a Navbar (with a right-border) and Ad Bar (with a left-border) that expand in height to match the height of the Body (scaling depending on how much content is in it), and a footer that is simply tacked on to the bottom. So far, the header and body appear perfectly. However, the Navbar doesn't span the height of the body. Also, the Ad Bar does not appear on the right of the Body, but rather wraps around to the extreme left (left of the Navbar and below the Body). The Footer doesn't seem to line up with the rest of the site either, as I wrote it to center-align text, but it's off-center (slightly to the left).
Here's my HTML5 code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="blueprint/screen.css" type="text/css" media="screen, projection" />
<link rel="stylesheet" href="blueprint/print.css" type="text/css" media="print" />
<!--[if lt IE 8]>
<link rel="stylesheet" href="blueprint/ie.css" type="text/css" media="screen, projection" />
<![endif]-->
<!--Import fancy-type plugin. -->
<link rel="stylesheet" href="blueprint/plugins/fancy-type/screen.css" type="text/css" media="screen, projection" />
<link rel="stylesheet" href="style.css" type="text/css" media="screen, projection" />
<title>My Web Site Home</title>
</head>
<body>
<div class="container">
<!------------------------------------------------------->
<div id="header" class="span-24" style="background: #F68712">
<h1 id="siteheader"><img src="logo.png" alt="Logo" id="header-image" /></h1>
</div>
<div id="sidebar" class="span-5">
<div class="span-6">
<img src="home.png" alt="Home" /></li>
</div>
<div class="span-6">
<img src="newmember.png" alt="Member Sign Up" />
</div>
<div class="span-6">
<img src="memberlist.png" alt="Member List" />
</div>
</div>
<div id="main" class="span-12 prepend-1 append-1" style="background: #F5F5DC">
<p>Some text.</p>
<p>Some more text.</p>
<p>Even more text!</p>
</div>
<div id="adbar" class="span-5 last">
Ads.
</div>
<div id="footer" class="span-24" style="text-align: center">
<h6 class="alt">Copyright ©2012 Joe Schmo.</h6>
</div>
<!------------------------------------------------------->
</div>
</body>
</html>
I've followed all of the English tutorials on the site, but can't seem to figure out why it doesn't want to cooperate. I'm developing my site with Microsoft Webmatrix, and am previewing my site both in IE9 and Chrome. If anyone could lend a hand I'd really appreciate it.
Thank you!
<hr style="clear:both; width:100%" />
try this just before footer div
For your sidebar you have a class of span-5 yet it contains 3 divs of span-6. If you remove the class attribute for the three menu divs as I assume that you want them to be the full width of the containing div, does this fix your issue?
I am utilizing CSS3 to create rounded borders in my web app. I have created a blank asp.net application, I have a master page and one content page. The content page references the masterpage as expected and the masterpage is pretty much a standard out of the box masterpage.
When I run page locally without modernizr things look fine in all browsers, however when I include the modernizr .js file reference within the masterpage's tags I get a blank html page with the background color that I have setup in my css file. Everything between the tags is not being rendered.
here is a css snippet that i have that uses the border-radius property.
#container {background:#444;width:860px;border:1px solid #FFF;border-radius: 30px 0px 30px 30px; margin:20px auto;padding:20px;}
here is my masterpage (you'll notice modernizr commented out)
<%# Master Language="C#" AutoEventWireup="true" CodeBehind="Site.master.cs" Inherits="Site.Site" %>
<!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>Name</title>
<asp:ContentPlaceHolder ID="head" runat="server">
</asp:ContentPlaceHolder>
<link href='http://fonts.googleapis.com/css?family=Tangerine' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="style/style.css" media="all" />
<!-- <script src="script/modernizr.custom.51561.js" type="text/javascript" /> -->
</head>
<body>
<div id="container">
<div id="header">
<h1>Name</h1>
<p> text
</p>
</div>
<div id="nav">
<ul>
<li>Nav Link</li>
<li>Nav Link</li>
<li>Nav Link</li>
<li>Nav Link</li>
</ul>
</div>
<asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
</asp:ContentPlaceHolder>
<div id="footer">
Links
</div>
</div>
</body>
</html>
And here is my content page
<%# Page Title="" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeBehind="default.aspx.cs" Inherits="Site._default" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
<form id="form1" runat="server">
<div id="content">
<div class="column">
</div>
<div class="column">
</div>
<div class="column">
</div>
</div>
</form>
</asp:Content>
Hopefully that is not code overkill... I have tried multiple .js files from modernizr, the dev version, a custom version, the production version... all seem to produce the same results. Perhaps I'm not setting it up properly, I was under the impression modernizr was just an included library that you reference and then forget about it and it pretty much takes care of the rest. Perhaps there's more to it than that.
This is broken and won't work:
<script src="script/modernizr.custom.51561.js" type="text/javascript" />
You need this:
<script src="script/modernizr.custom.51561.js" type="text/javascript"></script>
This is a mistake that you'll only make once.
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.