<!DOCTYPE html>
<html lang="en">
<head>
<title>Enjoy BluePrint</title>
<link rel="stylesheet" href="css/blueprint/screen.css" type="text/css" media="screen, projection">
<link rel="stylesheet" href="css/blueprint/print.css" type="text/css" media="print">
<!--[if lt IE 8]><link rel="stylesheet" href="css/blueprint/ie.css" type="text/css" media="screen, projection"><![endif]-->
<!-- <link rel="stylesheet" href="global.css" type="text/css" media="screen"> -->
<script type="text/css">
h1.logo {
width:181px; height:181px;
background: url("img/logo.png");
text-indent: -9999px;
}
</script>
</head>
<body>
<div class="container">
<!-- Header -->
<div id="header" class="span-24">
<div id="logo" class="span-6">
<h1 class="logo">This is my site</h1>
</div>
<div id="script" class="span-10">
<p>Frank Chimero is a graphic designer, illustrator, teac`her, maker, writer, thinker-at-large in Portland, Oregon.</p>
</div>
<div id="contact" class="span-8 last">
contact
</div>
</div>
<!-- Content -->
<div id="main-content" class="span-12">
<h3>DISCOVERY</h3>
<p>My fascination with the creative process, curiosity, and visual experience informs all of my work in some way. Each piece is the part of an exploration in finding wit, surprise, honesty, and joy in the world around us, then, trying to document those things with all deliberate speed before they vanish.</p><br/>
<p>Our creative output can have a myriad intended outcomes: to inform, to persuade or sell, or delight. There are many other creative people who do well in servicing the needs to inform or persuade, but there are not many out there who have taken up the mantle of delighting people. I’ll try my best.</p><br/>
<p>It’s not about pretty; it is about beauty. Beauty in form, sure, but also beauty in the fit of a bespoke idea that transcends not only the tasks outlined, but also fulfilling the objectives that caused the work to be produced in the first place.</p><br/>
<p>The best creative work connects us by speaking to what we share. From that, we hope to make things that will last. Work made without staying power and lasting relevance leads to audiences that are fickle, strung along on a diet of crumbs.</p><br/>
<p>The work should be nourishing in some way, both while a creative person is making it, but also while someone consumes it. When I think of all my favorite books, movies, art and albums, they all make me a little less alone and a little more sentient. Perhaps that is what making is for: to document the things that make us feel most alive.</p>
</div>
<!-- Side -->
<div id="award" class="span-4">
Awards
</div>
<div id="right-sidebar" class="span-8 last">
Right sidebar
</div>
</div>
</body>
</html>
I'm 100% sure the code works, and I can't replace image at h1.logo . I try to use live-editing CSS tool and it works fine .
Thanks for reading :)
its not script its style.
<style type="text/css">
h1.logo {
width:181px; height:181px;
background: url("img/logo.png");
text-indent: -9999px;
}
</style>
Related
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'm trying to find a way to float certain items left on left-hand pages, and right and right-hand pages. Not sure where to look, since all I can find that seems related is #page :left/:right, but that seems to only apply to the page box and margins, not the page content.
Here's an example of what I want to do; The first float wants to go to the right, if it is on page 1, and the second float wants to go to the left, if it is on page 2, but to the right if it is on page 3.
The big boxes are just meant to demonstrate that there could be a lot (particularly an unknown) of stuff between the floats, and I can't predict which page might contain the float. (Thanks to Christian for making the assumption that I could, to point out the unstated assumption in my question, and I could make this clarifying edit.)
<!DOCTYPE HTML>
<html>
<head>
<meta charset=utf-8>
<title>float left or right</title>
<link href=favicon-index.ico type=image/x-icon rel="shortcut icon">
<link href=/style.css type=text/css rel=stylesheet>
<style>
div { border: solid black 1px; }
</style>
</head>
<body>
<h1>float left or right</h1>
<div style="page-break-inside: autor;">
<div style="float: right;">
float 1 content
</div>
page 1 content
<div style="height: 8in; width: 1in;"></div>
unknown amount of content between floats
<div style="height: 8in; width: 1in;"></div>
<div style="float: right;">
float content somewhere later
</div>
<div>content winds up on page 2? 3? 4? 5?</div>
</div>
</body>
</html>
But how do I instruct the browser to do that?
N.B. At least in 2001, the "Complete Idiots Guide" series of books used this sort of odd/even dependent float for the sidebars entitled "Learning Links" (and maybe other such sidebars also). So there is precedent for this sort of style requirement, although I'm not trying to reproduce their books in HTML!
Here is the solution to your query
If you change your html structure as given in the code below then apply the following CSS, then your query will be satisfied
.pages div:nth-child(odd) {
text-align: right;
clear: both;
}
<html>
<head>
<meta charset=utf-8>
<title>float left or right</title>
<link href=favicon-index.ico type=image/x-icon rel="shortcut icon">
<link href=/style.css type=text/css rel=stylesheet>
<style>
div {
border: solid black 1px;
}
</style>
</head>
<body>
<h1>float left or right</h1>
<div class="pages">
<div id="page-1">page 1 content</div>
<div id="page-2">page 2 content</div>
<div id="page-3">page 3 content</div>
</div>
</body>
</html>
The structure is not changed much but it's almost similar to the one you provided
Note: I'm using the skeleton grid system.
I am looking to extend the background color of one of my divs to the right, past the 960px container, but I am having no success. Any suggestions?
Current:
What I'm looking for:
HTML:
<!DOCTYPE html>
<!--[if lt IE 7 ]><html class="ie ie6" lang="en"> <![endif]-->
<!--[if IE 7 ]><html class="ie ie7" lang="en"> <![endif]-->
<!--[if IE 8 ]><html class="ie ie8" lang="en"> <![endif]-->
<!--[if (gte IE 9)|!(IE)]><!--><html lang="en"> <!--<![endif]-->
<head>
<!-- Basic Page Needs
================================================== -->
<meta charset="utf-8">
<title>Your Page Title Here :)</title>
<meta name="description" content="">
<meta name="author" content="">
<!-- Mobile Specific Metas
================================================== -->
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<!-- CSS
================================================== -->
<link rel="stylesheet" href="stylesheets/base.css">
<link rel="stylesheet" href="stylesheets/skeleton.css">
<link rel="stylesheet" href="stylesheets/layout.css">
<link rel="stylesheet" href="stylesheets/responsive-nav.css">
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<!-- Favicons
================================================== -->
<link rel="shortcut icon" href="images/favicon.ico">
<link rel="apple-touch-icon" href="images/apple-touch-icon.png">
<link rel="apple-touch-icon" sizes="72x72" href="images/apple-touch-icon-72x72.png">
<link rel="apple-touch-icon" sizes="114x114" href="images/apple-touch-icon-114x114.png">
<script src="js/responsive-nav.js"></script>
</head>
<body>
<!-- Primary Page Layout
================================================== -->
<!-- Delete everything in this .container and get started on your own site! -->
<div class="container">
<div class="sixteen columns">
<h1 class="remove-bottom" style="margin-top: 40px">Skeleton</h1>
<h5>Version 1.2</h5>
<hr />
</div>
<div class="one-third column">
<h3>About Skeleton?</h3>
<p>Skeleton is a small collection of well-organized CSS files that can help you rapidly develop sites that look beautiful at any size, be it a 17" laptop screen or an iPhone. It's based on a responsive grid, but also provides very basic CSS for typography, buttons, forms and media queries. Go ahead, resize this super basic page to see the grid in action.</p>
</div>
<div class="one-third column">
<h3>Three Core Principles</h3>
<p>Skeleton is built on three core principles:</p>
<ul class="square">
<li><strong>A Responsive Grid Down To Mobile</strong>: Elegant scaling from a browser to tablets to mobile.</li>
<li><strong>Fast to Start</strong>: It's a tool for rapid development with best practices</li>
<li><strong>Style Agnostic</strong>: It provides the most basic, beautiful styles, but is meant to be overwritten.</li>
</ul>
</div>
<div class="one-third column" id="support">
<h3>Docs & Support</h3>
<p>The easiest way to really get started with Skeleton is to check out the full docs and info at www.getskeleton.com.. Skeleton is also open-source and has a project on git, so check that out if you want to report bugs or create a pull request. If you have any questions, thoughts, concerns or feedback, please don't hesitate to email me at hi#getskeleton.com.</p>
</div>
</div><!-- container -->
<!-- End Document
================================================== -->
</body>
</html>
CSS:
/*
* Skeleton V1.2
* Copyright 2011, Dave Gamache
* www.getskeleton.com
* Free to use under the MIT license.
* http://www.opensource.org/licenses/mit-license.php
* 6/20/2012
*/
/* Table of Content
==================================================
#Site Styles
#Page Styles
#Media Queries
#Font-Face */
/* #Site Styles
================================================== */
#support{
color: #fff;
background-color: #000;
position: relative;
background-size: 100px;
}
One way of achieving this could be to add a new HTML element inside the #support and give it a 100% right padding and 100% negative right margin. Like this:
<div class="one-third column" id="support">
<div class="inner">
...
</div>
</div>
#support .inner {
padding-right: 100%;
margin-right: -100%;
background-color: #000;
}
Then add a 'page' container with overflow hidden to make sure you don't get a scrollbar.
<div id="page">
<div class="container">
...
</div>
</div>
#page {
overflow: hidden;
}
In the first step, the reason I added a new <div> rather than styling the existing #support is that I think it's best to leave <div>s that have grid structure styles alone. We don't want to affect their margins.
Here's a demo.
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.
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.