I am trying to learn 960 grid system. My left body text appears on the right and vice versa for the other text. My intention is to have these two boxes on the same line. Left body text is appearing higher on the page than right body text too.
Any ideas? Confused!
<!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" lang="en">
<head>
<title>Site name</title>
<link rel="stylesheet" type="text/css" href="./960.css" />
<link rel="stylesheet" type="text/css" href="./styles/main.css" />
</head>
<body>
<div id="skip">
Skip navigation
</div>
<div id="header" class="container_12">
<div id="mainLogo" class="grid_4">
<h1>Page name</h1>
</div>
<div id="testContainer" class="grid_8">
<div id="mainNavigation">
<ul>
<li>nav1</li>
<li>nav2</li>
</ul>
</div>
</div>
</div>
<div id="content" class="container_12">
<div id="contentleft" class="grid_8">
<p>Left body text</p>
</div>
<div id="contentright" class="grid_4">
<p>Right body text</p>
</div>
</div>
<div id="footer" class="container_12">
</div>
</body>
</html>
For me (in Chrome 8), the problem is caused by the margin on the H1. Specifically, Chrome's user agent stylesheet is inserting:
h1 {
display: block;
font-size: 2em;
font-weight: bold;
margin: 0.67em 0px;
}
The extra height to this h1 causes the contentleft div to start directly underneath the testContainer div.
Setting a margin of 0 removes the problem for me in Chrome 8.
Note the instructions for setting up 960.gs mention the use of the reset.css stylesheet:
<head>
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" />
<link rel="stylesheet" type="text/css" media="all" href="css/text.css" />
<link rel="stylesheet" type="text/css" media="all" href="css/960.css" />
</head>
which should also remove this problem. It's generally good practice to include a reset stylesheet anyway, so if you're learning about the 960 grid system you should include this stylesheet.
After every Line please add the div with the clear class.
First would be just after you close the div tag for id= mainLogo. And 2nd one would after you close the div tag with id = testcontainer.
I have had the same issue. If you are using multiple containers on the same page you will also need to apply the clear_fix css class to to all but the first as the container class with try to position it's self at the top of the page.
<div id="content" class="container_12 clear_fix">
</div>
If you look at the source of any of the example sites on 960.gs they have done this where they use many containers.
Related
I have a very large tree menu that will always be the same. Is it possible to create a custom css attribute (I don't know the technical term) so I can create the menu in an html file and only type a few characters in every page's source code to make the appear? Something like this:
// index.html
<html>
<head>
<title>Example of what I mean></title>
<link type="text/css" src="page_style.css" />
</head>
<div class="navigation_div">
<css_nav_thing><!-- Nav menu appears here --></css_nav_thing>
</div>
<div class="content_div">content stuff here</div>
</body>
</html>
// menu.html
<html>
<head>
<link type="text/css" src="nav_menu_style.css" />
<script src="nav.js"></script>
</head>
<body>
<div class="nav">
<li>'s and <ul>'s that create the links for a navigation menu </li>'s and </ul>'s
</div>
</body>
</html>
// page_style.css
body {
body stuff
}
css_nav_thing {
src: (url="menu.html")
position: stuff;
margin: stuff'
}
.content_div {
position: stuff;
margin: stuff;
andstuf: stuff;
}
// nav_menu_style.css
body {
stuff: stuff;
]
a {
color: #374;
andstuff: stuff;
}
// content_page.html
<html>
<head>
<title>Example of what I mean></title>
<link type="text/css" src="page_style.css" />
</head>
<div class="navigation_div">
<css_nav_thing>
<!-- Nav menu appears here -->
</css_nav_thing>
</div>
<div class="content_div">content stuff here</div>
</body>
</html>
// some_other_content_page.html
<html>
<head>
<title>Example of what I mean></title>
<link type="text/css" src="page_style.css" />
</head>
<div class="navigation_div">
<css_nav_thing>
<!-- Nav menu appears here -->
</css_nav_thing>
</div>
<div class="content_div">content stuff here</div>
</body>
</html>
Or can we do this with a <link src="menu.html" /> tag???
Is this possible to make adding the same menu to a bunch of pages easier than copy/pasting all of the menu's li's and ul's in to every single page? The site I'm building's going to have hundreds of pages. Hooray if I can make it easier and faster to do if this is possible!
If it is possible...how would I do it?
Use Jquery
menu.html
<html>
<head>
<link type="text/css" src="nav_menu_style.css" />
<script src="nav.js"></script>
</head>
<body>
<div class="nav">
<li>'s and <ul>'s that create the links for a navigation menu </li>'s and </ul>'s
</div>
</body>
</html>
some_other_content_page.html
<html>
<head>
</head>
<body>
<div id="includedContent"></div>
//some_other_content_page.html content
<script src="jquery.js"></script>
<script>
$(function(){
$("#includedContent").load("menu.html");
});
</script>
</body>
</html>
Download Jquery
.load() documentation
I would name your menu menu.php then you can do below. This always works for me and you can always do this on any separated slides or gallery or whatever really you want to insert inside a particular page.
<html>
<head>
<title>Example of what I mean></title>
<link type="text/css" src="page_style.css" />
</head>
<div class="navigation_div">
<--THIS IS WHERE YOUR MENU GO-->
<?php include 'menu.php';?>
</div>
<div class="content_div">content stuff here</div>
</body>
</html>
Is it possible to have a different style source for each div.
Example
<div src="abc.css"> A
</div>
<div src="xyz.css">B
</div>
You can have multiple stylesheets in your HTML, and then use the CSS code inside them for your divs. Here; 'div1' class is inside div1-styles.css and 'div2' class is inside div2-styles.css
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="div1-styles.css">
<link rel="stylesheet" href="div2-styles.css">
</head>
<body>
<div class='div1'>
Div-1 text
</div>
<div class='div2'>
Div-2 text
</div>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
First its not a good practice but even is a horrible practice.. you can just use different classes in your style file and will done the work.. but if you're insisting in that even if its not right.. you can do it using this JQuery plugin that used scoped attribute to achieve that
The plugin: https://github.com/thingsinjars/jQuery-Scoped-CSS-plugin
I was trying to experiment with container, container-fluid, jumbotron classes of bootstrap 4. The HTML code i used is:
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
</head>
<body>
<h1 class="container">contaigjnohjbofitujkiner</h1>
<h1 class="container-fluid">containfhonjoiyjboifgber</h1>
<span class="jumbotron">jumbotofgbnoitrjbogiftjron</span>
</body>
</html>
In the output of this file I noticed that span element with jumbotron class was slightly overlapping h1 element with container-fluid class. I want to understand why this happened is this a bug in firefox quantum? or is it because any property of jumbotron or container-fluid in bootstrap 4?
As #zgood said in his comment, the span is a display: inline element by default.
Here are some characteristics of it:
The <span> tag is used to group inline-elements in a document.
The <span> tag provides no visual change by itself.
The <span> tag provides a way to add a hook to a part of a text or
a part of a document.
Your question aked why span was overlapping h1 element with container-fluid class. And, how I said before, because of the inline propriety.
Check out this example, using a <div> and see how it is no more overlapping.
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
</head>
<body>
<h1 class="container">Lorem ipsum - Container</h1>
<h1 class="container-fluid">Lorem ipsum - Container Fluid</h1>
<div class="jumbotron">Lorem ipsum - Jumbotron</div>
</body>
</html>
I have the following HTML:
<!DOCTYPE HTML>
<html>
<head>
<link rel="stylesheet" href="STYLE.css">
<link rel="stylesheet" href="bootstrap-3.3.5-dist/css/bootstrap.min.css">
</head>
<body>
<header class="row"></header>
<section class="row section1"></section>
<section class="row section2"></section>
<section class="row section1"></section>
<section class="row section2"></section>
<section class="row section1"></section>
<footer class="row"></footer>
</body>
</html>
For some reason the entire web page is wider than the browser window. When I remove the row class everything goes back to normal. The local CSS file has nothing to do with the issue. My guess is that the bootstrap CSS modifies the row in a way that makes it wider for some reason. So I wanted to ask if anyone has any idea that would fix this.
You may either use .container class or .container-fluid.
.container maintains some margin space from actual screen and don't stretch the page view. On the other hand .container-fluid stretches the page as it can.
See your html script modified below:
<!DOCTYPE HTML>
<html>
<head>
<link rel="stylesheet" href="STYLE.css">
<link rel="stylesheet" href="bootstrap-3.3.5-dist/css/bootstrap.min.css">
</head>
<body>
<div class="container">
<header class="row"></header>
<section class="row section1"></section>
<section class="row section2"></section>
<section class="row section1"></section>
<section class="row section2"></section>
<section class="row section1"></section>
<footer class="row"></footer>
</div>
</body>
</html>
Also, you must use .col-md-6 like class to specify width of your section within a row where md is replaceable by lg and sm as well.
md stands for Medium sized devices like laptop,desktop etc.
lg stands for Large sized Devices like projector or some bigger screens etc.
sm stands for Small sized devices like mobiles etc.
You are free to use a combination of these three. For example,
<div class="container-fluid">
<div class="row">
<div class="col-md-6 col-sm-1 col-lg-12">
</div>
</div>
</div>
Hope it helps you get started and resolve your problem.
To fix this issue you have use class row properly.
You have not wrapped class row with class container.
Bootstrap provides grid system.
Bootstrap's grid system allows up to 12 columns across the page.
You need to arrange your page width into that 12 columns.
It is not possible to explain all of here.
Please refer following links.
Bootstrap grid template
Bootstrap grids
Maybe you have to add the grid of the bootstrap css?
Look to this example
http://getbootstrap.com/examples/grid/
Please wrap it in bootstrap .container class and then check if the problem still persists.
<body>
<div class="container">
//your content goes here
</div>
</body>
You must use containers to use any of the bootstrap functionality. This can be a set width container or a fluid container but adding one will fix your issues. I also switch around your style to use a working CDN version and moved Javascript to the recommended location. You might find this a better starting point.
Reference: http://getbootstrap.com/css/#overview-container and http://getbootstrap.com/css/#grid
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Case</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">
</head>
<body>
<div class="container-fluid">
<header class="row">Test 1</header>
<section class="row section1">Test 2</section>
<section class="row section2">Test 3</section>
<section class="row section1">Test 4</section>
<section class="row section2">Test 5</section>
<section class="row section1">Test 6</section>
<footer class="row">Test 7</footer>
</div>
<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>
</body>
</html>
If you're using bootstrap 4,just add m-0 class to your row instead of wrapping it in an other div.It removes the margin.
Removing the margin is the easiest and quickest way to fix your problem.
You can do that by adding the m-0 class along with your row:
<div class="row m-0">
...
</div>
I am trying to display a background image for a website header, however, it won't display. Here is the code:
HTML:
<!DOCTYPE html>
<html>
<head>
<title>Matt Hayward's Blog</title>
<link rel="stylesheet" type="text/css" href="styles/main.css">
</head>
<body>
<div id="wrapper">
<div id="header">
</div> <!-- header -->
<div id="navbar">
<ul>
</ul>
</div> <!-- navbar -->
<div id="maincontent">
</div> <!-- maincontent -->
<div id="rightmenu">
</div> <!-- rightmenu -->
</div> <!-- wrapper -->
<div id="footer">
</div> <!-- footer -->
</body>
</html>
And the CSS for the header div:
#header
{
background: #fff url(header.png) no-repeat;
width: 960px;
height: 121px;
}
This is something I have used a hundred times before, and never had problems displaying the background image, so I'm totally perplexed to as to why it isn't working. If anyone can help, that would be great.
I have tried the url() property both with and without single quotes, but neither way works.
(I know similar questions have been asked before, and I've looked at several of them but the answers don't solve my problem.)
Your code is good. Make sure header.png exists and resides in the styles folder.