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?
Related
I'm creating a site where I need to overlay the Leaflet map with a DIV, which has an error message.
What happens is that the Leaflet map is always above the DIV with the error message.
I tried several ways without a result.
Can anyone help me?
HTML Code:
<!DOCTYPE html>
<html lang="pt-br" dir="ltr">
<head>
<link rel="stylesheet" type="text/css" href="estilos/styles.css">
<link rel="stylesheet" href="https://unpkg.com/leaflet#1.6.0/dist/leaflet.css" integrity="..." crossorigin=""/>
</head>
<body class="hero-image">
<main class="conteudo">
<div class="centro">
<!-- Conteúdo -->
<br/>
<!-- ---------------------------------- -->
<!-- MAP ----------------------------- -->
<div class="esquerda">
<div id="map"></div>
</div>
<script src="https://unpkg.com/leaflet#1.6.0/dist/leaflet.js" integrity="..." crossorigin=""></script>
<script src="js/mapa.js"></script>
<!-- MAP ----------------------------- -->
<!-- ---------------------------------- -->
<br/>
<!-- Conteúdo -->
</div>
<!-- ---------------------------------- -->
<!-- DIV ---------- -->
<div id="mensagem_informativa" name="mensagem_informativa" class="mensagem_informativa mensagem_informativa_lat_long">
<div class="mensagem_informativa_titulo">
<img src="imagens/icon-close.png" width="20px" onclick="javascript:btn_fechar();"/>
</div>
<br/>
The coordinates entered on the map do not belong to a property registered in this system.
<br/><br/>
<input type="button" value="Fechar" class="botao_fechar" onclick="javascript:btn_fechar();">
</div>
<!-- DIV ---------- -->
<!-- ---------------------------------- -->
</main>
</body>
</html>
CSS Code:
https://drsolutions.com.br/allmaps/estilos/styles.css
Regards,
Diego
Increase the z-index of div#mensagem_informativa or one of the related class styles. When I change the z-index of div.mensagem_informativa_lat_long from 99 to 400, this is what I see:
Sorry for the newbie question, but...
Say I have three images in a paragraph/div, displayed as
A B C
in desktop view.
If I switch to mobile view, the images do not resize, so they appear as
A B
C
...but my goal is to always keep them on one single line, shrinking the entire line to fit.
Every solution I tried resizes stuff individually instead than as a group, so the result is always the same.
In fact, It would be extremely useful if there was a generic solution I could apply to shortcode outputs too!
Please have mercy on this absolute beginner... Thanks!
You could just use Bootstrap, which comes with Flex. https://getbootstrap.com/docs/4.4/utilities/flex/
Here's an example. Most of the example is the starter template from https://getbootstrap.com/docs/4.4/getting-started/introduction/ to which I added the div container with the 3 images.
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
</head>
<body>
<div class="container-fluid">
<div class="d-flex bd-highlight">
<div class="p-2 flex-grow-1 bd-highlight"><img style="width:100%;" src="https://images.pexels.com/photos/3994840/pexels-photo-3994840.jpeg?auto=compress&cs=tinysrgb&dpr=2&w=500"/></div>
<div class="p-2 flex-grow-1 bd-highlight"><img style="width:100%;" src="https://images.pexels.com/photos/3994840/pexels-photo-3994840.jpeg?auto=compress&cs=tinysrgb&dpr=2&w=500"/></div>
<div class="p-2 flex-grow-1 bd-highlight"><img style="width:100%;" src="https://images.pexels.com/photos/3994840/pexels-photo-3994840.jpeg?auto=compress&cs=tinysrgb&dpr=2&w=500"/></div>
</div>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
</body>
</html>
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 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?