I publish a lot of text online, and even wrote a system to format HTML for me. Now, I have a problem: I want to make sidenotes in HTML pages just like books have. Just to explain, sidenotes are those notes in the margins right next to the main body text.
Does anyone know of a good, reliable way to do them -- preferably with plain CSS rather than JavaScript. Thanks!
Ok, made this much more browser friendly (FF3, IE7/8, Chrome):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html>
<head>
<title>Layout</title>
<style type="text/css">
html, body, #wrapper { height: 100%; margin: 0; padding: 0; }
body { background-color: #666; width: 100%; text-align: center; font-family: Arial, sans-serif; }
#wrapper { width: 960px; margin: 0 auto; background: white; padding: 20px 0; }
#page { width: 660px; margin: 0 auto; text-align: justify; }
div.sidenote-left { float: left; margin-left: -150px; }
div.sidenote-right { float: right; margin-right: -150px; }
div.sidenote-left, div.sidenote-right { width: 150px; text-align: left; }
div.sidenote-left div, div.sidenote-right div { margin: 0 10px; border: 1px solid #666; padding: 4px; }
</style>
</head>
<body>
<div id="wrapper">
<div id="page">
<p>In the 90s we saw the rise of GUIs (yes I know Macs were around in the 80s but GUIs became the standard for everyone once Windows took hold). This transition had many casualties like Lotus 1-2-3 (which was basically killed by Excel on Windows) and Wordperfect (MS Word killed it). Now you can argue that MS had the inside track since they also produced Windows and you'd be right but beyond that I think MS adjusted to the change quicker than anyone else.</p>
<p>Borland was still an agile little company back then. It adjusted and took its highly successful Turbo Pascal and created Delphi.</p>
<div class="sidenote-left"><div>See Chapter 7 for further explanation</div></div>
<p>Now truly compiled languages ruled the roost in the 1990s with the exception of one little upstart: Java, which was something basically new. It was sorta compiled, sorta interpreted (being compiled into machine-independent bytecode that ran on a virtual machine). I personally think that the rise of both Java and Netscape scared the absolute bejesus out of Microsoft in the late 90s.</p>
<div class="sidenote-right"><div>See Chapter 9 for further explanation</div></div>
<p>Borland adjusted reasonably well producing what was really the first really successful Java IDE in JBuilder.</p>
<p>They were fending off a resurgent Microsoft who also produced successive versions of Visual Studio that (imho) were years ahead of their time in the late 90s. I can remember coding Visual C++ with MTS (microsoft Transaction Server) DCOM objects over 10 years ago and that was a precursor to the modern application server platform we have today. Remote debugging and the like were things that were (or at least seemed) light years ahead on Visual Studio.</p>
</div>
</div>
</body>
</html>
Note: in response to the text selection issue, I tried it with absolute positioning, which you can do by changing this CSS:
div.sidenote-left { position: absolute; margin-left: -150px; }
div.sidenote-right { position: absolute; margin-left: 660px; }
but it still selects the text.
The only way I see around this is to change your page into a 2/3 column format where the side notes are in other columns. The only problem with this is that you lose the ability to move the notes in relation to the text. Or at least I can't think of a way around that.
If you're lazy, use a CSS framework!
One of the easiest frameworks you can use is 960.gs.
This will help you accomplish exactly what you're trying to do in minutes.
Related
I have this html:
<div>
<img class="image">
<p class="text"></p>
</div>
I want my text to be dinamically divided into two columns, so I'm using the column-count property:
p.text
{
-webkit-column-count: 2;
-moz-column-count: 2;
column-count: 2;
}
I also want to center the image between the two columns, in width and height, so that I obtain this effect:
How would you accomplish the task?
Is it possible to get the job done with css only?
If not, is there a way to do it with javascript, keeping the column-count property?
There is no simply way to do this. However, you can "fake" the wrapping effect by using pseudo-elements.
* {
margin: 0px;
padding: 0px;
}
.text {
width: 49%;
}
#text-l {
float: left;
}
#text-r {
float: right;
}
#text-l:before, #text-r:before {
content: "";
width: 125px;
height: 250px;
}
#text-l:before {
float: right;
}
#text-r:before {
float: left;
}
.image {
height: 250px;
width: 250px;
position: absolute;
left: 50%;
margin-left: -125px;
background-color: yellow;
}
<div>
<img class="image" src="http://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png">
<p class="text" id="text-l">
How to create a Minimal, Complete, and Verifiable example
When asking a question about a problem caused by your code, you will get much better answers if you provide code people can use to reproduce the problem. That code should be…
…Minimal – Use as little code as possible that still produces the same problem
…Complete – Provide all parts needed to reproduce the problem
…Verifiable - Test the code you're about to provide to make sure it reproduces the problem
Minimal
</p>
<p class="text" id="text-r">
The more code there is to go through, the less likely people can find your problem. Streamline your example in one of two ways:
Restart from scratch. Create a new program, adding in only what is needed to see the problem. This can be faster for vast systems where you think you already know the source of the problem. Also useful if you can't post the original code publicly for legal or ethical reasons.
Divide and conquer. When you have a small amount of code, but the source of the problem is entirely unclear, start removing code a bit at a time until the problem disappears – then add the last part back.
Minimal and readable
Minimal does not mean terse - don't sacrifice communication to brevity. Use consistent naming and indentation, and include comments if needed to explain portions of the code. Most code editors have a shortcut for formatting code - find it, and use it! Also, don't use tabs - they may look good in your editor, but they'll just make a mess on Stack Overflow.
</p>
</div>
i'm creating a responsive layout but i'm noticing a centering problem. I have three div (three boxes, each one next to the other) and i put them into a parent div to make the alignment. The strange thing is that on dreamweaver all works perfectly, but when i open the HTML file to test the page locally the centering is not correct. Here's the images so that you can understand better.
On Dreamweaver
click
When i open the HTML page locally
click
In the first screen as you can see, right and left spaces are perfectly equal, in the second screen left space is more narrow. I'd love to know why on dreamweaver is ok. Here's the code i used.
#infoInner {
margin-left: 0.5%;
margin-right: -0.5%;
}
.boxInfo {
padding: 2% 2%;
margin: 0 1.5%;
width: 26%;
border: 1px dashed white;
float: left;
}
Browsers by default tend to add styles to the document. This is why projects such as normalize.css exist to remove them, however, this is not the solution to your problem.
When a web browser displays code, it's the rendering engine that interprets the code to then lays it out to the screen. Chrome uses Blink, Safari uses Webkit, Internet Explorer uses Trident, and so on. After a bit of research, I see that Dreamweaver used the Presto rendering engine until version 3, and then moved to Webkit on version 4 / 5. I am not sure about the version DW6, I am also going to assume it is Webkit (EDIT WELCOMED). You should receive a similar result if you open your code up in Safari.
I recommend you open a new question with your code represented in a jsfiddle for members of SO to help you out and get it the way you want to look. However, from the description and the code posted it seems to be a rendering issue.
Further Reading:
http://en.wikipedia.org/wiki/Web_browser_engine
http://mashable.com/2014/02/26/browser-testing-tools/
https://www.youtube.com/watch?v=7bs9RGolIyI (More for the comedy)
Can you do that on this way:
<div class="wrapper">
<div class="item"></div>
<div class="item center"></div>
<div class="item"></div>
</div>
.wrapper {
text-align: center;
width: 100%;
}
.wrapper .item {
float: none;
display: inline;
width: 32%;
margin: 0px;
}
.wrapper .item.center{
margin-left: 1%;
margin-right: 1%;
}
I hope this help! :)
My father always wanted a website with a seminar chart that consists of circles and lines connecting them as the main navigation to articles on his site. The site will have a header and footer and between, the seminar like chart(kinda like a flow chart but only cirlces). I am not a programmer by would like to do this for my dad. Did some research and found two options. Use images as the circles or use CSS3. Can anyone point me in the right direction. Heres my attempt by hand.
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Circles</title>
<link rel="stylesheet" href="circle.css">
</head>
<body>
<div id="wrapper">
<div id="header"><h1>Header</h1></div>
<div id="content">
<div class="c1">Hello</div>
<div class="c1">Hello</div>
</div>
<div id="footer">My Footer</div>
</div>
</body>
My CSS:
#wrapper {
background-color: black;
position: relative;
width: 600px;
height: 600px;
margin: 0 auto;
}
#header {
height: 8.3%;
width: 100%;
background-color: gray;
text-align: center;
}
#content {
color: green;
}
a.with-style {
display: block;
width:100px;
height:100px;
border-radius:50px;
font-size:20px;
line-height:100px;
text-align:center;
text-decoration: none;
text-shadow: 0 1px 0 #f15;
color: white;
background: blue;
}
a.with-style:hover {
border: 4px double #bbb;
color: #aaa;
text-decoration: none;
background: #e6e6e6;
}
div.c1 { display: inline; }
#footer {
background-color: grey;
text-align: center;
position: absolute;
bottom: 0px;
height: 8.3%;
width: 100%;
}
You could use CSS3 rounded corners as in this article. It's straight forward and is widely supported.
Another option would be to use JQuery and its extension, JQuery UI which achieves the same result but increases the compatibility with older browsers. Unfortunately it would slightly increase load times, and makes things a bit more complicated. Saying that, it's simpler than implementing your own concoction of CSS3 and images as fall-back.
Have you checked Raphael.js? Looks good to me. Also you will get curve lines and much more flexible options.
Circle using Raphael.js http://raphaeljs.com/reference.html#Paper.circle
Here is something I have created using Raphael, not a chart but will give a idea about what you can do.
mostly using
border-radius:50%
always makes the div a circle, however It's not compatible with IE 8 and below. So if your not aiming at those browsers, this method should help, else use images.
The option you take depends on what browser support you want to achieve.
OPTION 1 - with CSS
This option only works in modern browsers:
http://caniuse.com/border-radius
But if you are not concerned about this, I would go with this option.
OPTION 2 - images
With this option you want to create a large circle graphics in a graphics program like photoshop, fireworks, etc. And then scale down that graphic to the sizes that you want. This option is harder and requires more effort.
For circles in CSS, use "border-radius: 50%;". The 50% ensures that no matter what size the div element is, it will always be a circle(or an oval if the height and width are different).
However if you are trying to create a graph of some sought, there are some libraries/plugins that you can utilize.
My favorite is:
http://www.highcharts.com/demo/
This is a really extensive library of charts, which are free for non-commercial sites.
I'm 10 lines in to my second attempt at HTML and CSS and it is immediately doing completely barmy things.
I have the following code (this the entire 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">
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>Some page title</title>
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.1.1/build/cssreset/reset-min.css" />
<link rel="stylesheet" type="text/css" href="47926.css" />
<link rel="stylesheet" type="text/css" href="960Clear.css" />
</head>
<body>
<div id="rootDiv">
<div class="container_16" id="topBarDiv">
<div id="topBarLogoDiv">
<a id="topBarLogoLink" href="~/Home/ComingSoon" title="Coming soon page"/>
</div>
</div>
</div>
</body>
</html>
And here's the CSS (960Clear.css, the others are 960 grids and YUI reset):
#rootDiv {
height: 70px;
background-color: #F7F7F7;
}
#topBarLogoDiv {
background-image: url('file:///C:/Users/Public/Documents/~Main/Vuplan/S26.Vuplan.Web.Application/Images/logo-vuplan-color-on-alpha-172x49.png');
background-color: #F7F7F7;
background-repeat: no-repeat;
margin-left: 20px;
height: 50px;
width: 172px;
display: block;
overflow: hidden;
}
#topBarLogoLink {
height: 50px;
width: 172px;
min-height: 50px;
min-width: 172px;
display: table-cell;
}
This simple, simple page doesn't work. Internet Explorer was my initial problem, rendering up to four logos in the top corner, but let's ignore Internet Explorer for now because even Firefox is doing the nuttiest thing.
I render another, whole anchor element outside of the wrapper div and this oddness is even visible as another line of code in the F12 diag tools window!
I took a screen shot to demonstrate:
http://0olmuq.bay.livefilestore.com/y1pxx75x_th_V0FX15uiLSOAK7MbKnHOQ17L9WMLg4K1TrIoZ0_xEaTgveh0_xF0S8o1Ae8WVvQLNWjQzyGl5AXsPpMV9MW0aDI/One%20Anchor%20Tag%20Renders%20Two%20Anchor%20Tags%20Crap.jpg?psid=1
For me, HTML+CSS work is a punishment served in Hell, but this takes the biscuit. What on Earth is going on here?
Note
My fault - I should've added this disclaimer before.
The code above seems to have tickled some people. Please remember that it's in an experimental state as I try to work out why I am getting multiple logos and general oddness.
I haven't got as far as correcting local links (which will be completely different in production and generated via ASP.NET MVC methods anyway).
Imagine that someone is having problems plumbing a house and you go to investigate. The house may not be finished yet; please ignore the missing carpet ;-)
You can't close an A tag with /> you need to close it with Link
The double rendering is Firefox/Firebug parsing invalid HTML.
First of all, if you're know you're going to write bad code at least let the browser know in advance. Use a more forgiving doctype than strict (technically this doesn't really do much, but every bit helps I think)
Next, unlike most other languages, grid frameworks and aids like that are actually better for intermediate and advanced users. Those new to CSS are more likely to be confused by them. (This is subjective, I know, but it is a sentiment expressed by many, and we are giving out advice here, aren't we?)
Now for the site logo. Its a matter of personal preference I suppose, but its usual to see logos being marked up as h1s. There are multiple ways of achieving what you want here, I'll just give the one I habitually use:
HTML:
<h1>
Site Name
</h1>
CSS:
h1 {
float: left;
overflow: hidden;
}
h1 a {
display: block;
background: url('path/to/logo.png') no-repeat;
width: 100px;
height: 100px;
text-indent: -9999px;
}
You're URLs are incorrect: ~/Home/ComingSoon and file:///C:/Users/Public/Documents/~Main/Vuplan/S26.Vuplan.Web.Application/Images/logo-vuplan-color-on-alpha-172x49.png might work locally, but you need to use relative paths if you are going to place this onto a server (assuming you are not going to use server-side scripts to generate those URLs)
#topBarLogoLink {
height: 50px;
width: 172px;
min-height: 50px;
min-width: 172px;
display: table-cell;
}
The min-height and min-width declarations are useless: They are only useful if you do not declare a fixed width and height. min-height and max-height properties, and their width counterparts, are used for fluid layouts, where the designer give the browser a certain degree of flexibility to accommodate for different screen sizes and other uncontrollable factors.
The display: table-cell declaration is also slightly suspicious: if you want the inline a element to expand out to the size of its parent div you can just use display: block
#topBarLogoDiv {
background-image: url('file:///C:/Users/Public/Documents/~Main/Vuplan/S26.Vuplan.Web.Application/Images/logo-vuplan-color-on-alpha-172x49.png');
background-color: #F7F7F7;
background-repeat: no-repeat;
margin-left: 20px;
height: 50px;
width: 172px;
display: block;
overflow: hidden;
}
Other than the url issue, the background color should also not be redeclared - HTML elements have transparent background color by default. Declaring display: block here is also unnecessary - divs are block level elements.
Oh, and I'm really really sorry if you feel offended by that comment. I really am. Consider this me making up for that, okay?
Try not making the <a> self-closing. It should be Text or .
I’m reading some Html code for a web page, where author essentially wanted to create a page with header, footer and content area. The content area would be divided into three columns with center column having the right and left margins set to 200px, and these two margins are to be filled by two other DIVs docked on the page border with absolute positioning.
Here is author’s code for content area ( for the sake of clarity I’ve omitted the header and footer code ):
<div id="container">
<div id="container2">
<div id="centercol">
</div>
<div id="rightcol">
</div>
</div>
<div id="leftcol">
</div>
</div>
CSS file:
body
{
margin: 0px;
font-family: Verdana, Arial, Serif;
font-size: 12px;
}
#container
{
background-color: #818689;
}
#container2
{
background-color: #bcbfc0;
margin-right: 200px;
}
#leftcol
{
position: absolute;
top: 184px;
left: 0px;
width: 200px;
background-color: #bcbfc0;
font-size: 10px;
}
#centercol
{
position: relative;
margin-left: 200px;
padding: 0px;
background-color: white;
}
#rightcol
{
position: absolute;
top: 184px;
right: 0px;
width: 198px;
color: White;
background-color: #818689;
font-size: 10px;
}
Any idea why author decided to put both the center column and the right column inside container2? I see no advantages in doing that and in fact it just complicates the logical structure of the page?!
thanx
It looks like this was so he could have position effectively determined by the width and position of the centercol while allowing for a particular source order for the content. There are a few different ways to do this. Id guess he did it this way to avoid using floats (and the various "fixes" for IE6 compat that entails).
Not the way i would have done it i dont think but i assume it worked well for this site in the grand scheme of things.
Overall though sometimes you have to do some interesting things to match a comp with markup/css. Depending on what the designer has thrown at you and the level of abstraction needed within the system (assuming its built on some sort of dynamic content) you can end up doing something that cant possibly be construed as straight-forward. Nature of the beast until CSS and the browser implementations of it catch up to graphic designers :-)
Usually people adjust their markup due to having their layout and design in mind. That's probably what the author in that article was doing when he put those two sections together. It's not what I would have done, but at the same time you don't want to get yourself worked up about semantic debates on the internet :)
I would rather see someone author web-pages for the content and then design them in CSS (How To: Pure CSS Design)
If the author wants for search-engine purposes the main content to come first then that would be a reason. I'm not sure why he'd use absolutes though as you can't clear them and that would cause problems for a footer.