Skip the site navigation float nav to right

html6experiment.html

there are actually 3 entries are in standard.css to call with class=center:



   p.center   {   text-align: center; }
   div.center {   margin-left: auto;   margin-right: auto;   width: 50%; }
   img.center {   display: block;   margin-left: auto;   margin-right: auto; }
<img src="/nb/images/plosTreeBig-narrow.png" alt="This image is centered with class" class ="center" /> image centered using class


This h2 (Hs 2+ usually have an underscore) below has no left margin padding so rubs the left edge; I font want to change the css on the Hs because sometimes I'm in the #container and don't need or want the 5 spaces on the left because container has built-in padding

h2 On edge Fix the positioning chaos

I font want to change the css on the Hs themselves because probably mostly, I'm in the #container so I made, forgot what id is called. It's like making a class. the css is named .edge see this in standard,css
.edge {margin-left : . 5em;}
The html code in the page gives the h2 5 blank spaces on the left and looks like <h2 class = "edgel">
weird when I use div class=edgel with this plain text there's less space on the left. since text size is smaller than an H, its left padding looks less wide. whatever

h2 Fix the positioning chaos check wwhat happens Aenean vel nunc vitae sapien vestibulum imperdiet. Sed ut lorem. Proin orci. Suspendisse potenti. Now try <br />
here's a new line. so both wrap and break also get 5em left


and what about a very long line <br />
that breaks to wrap Aenean vel nunc vitae sapien vestibulum imperdiet. Sed ut lorem. Proin orci. Suspendisse potenti. Donec urna. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Duis dapibus lectus. (<h1 style="float : center">

center h2 with [<h2 style="float:center">]

center h2 with [<h2 class="center">]

center h2 with (depreciated?) [<h2 align="center">]

Fix the positioning chaos
(<big>)



This is [<div class="box">] and
(br here) this entire block is centered, but the text inside it is left aligned. see in standard.css
There is padding inside this box because I'm using the border to see dimensions of the box; without the border no padding necessary

centering text with div and p

[p class=center] will center the *text*

SO opens wirh
[<div class="box"><p class="center">]

inline head style:
[<p.center { text-align:center;
background-color:#b4eeb4;width:95%;
padding:10px;}>]

I need the padding because I named a background color. without the background color no padding necessary,

Suspendisse potenti. Donec urna. Vestibulum ante ipsum primis
in faucibus orci luctus et
ultrices posuere cubilia Curae; Duis dapibus lectus.
Sed ut lorem. Proin orci. Suspendisse potenti. Donec urna. Vestibulum ante ipsum
primis in faucibus orci luctus et ultrices posuere cubilia Curae; Duis dapibus lectus.
ends with:
[</p></div<]

These are style entries to center text and images In standard.css:

  1. div inline or css div.center { margin-left: auto; margin-right: auto; width: 8em; }
  2. p.center { text-align: center; }
  3. img.center { display: block; margin-left: auto; margin-right: auto; }

Nam vitae arcu vitae tellus pellentesque cursus. Aenean eleifend mi eget eros. Quisque scelerisque, diam quis feugiat ullamcorper, felis augue consectetuer nunc, nec facilisis ipsum elit vitae ante. Vestibulum libero.

This image is centered using class=center, set in standard. no floats work to center anything

  1. This is ordered (numbered) list: <ol>
    Quisque porta fringilla felis. Nam mi. Etiam at turpis in augue
    faucibus blandit. Sed eu ligula. Vestibulum eget arcu elementum
    risus sollicitudin malesuada.
    Phasellus interdum enim id orci. Ut vestibulum, mauris sed scelerisque imperdiet, arcu augue feugiat sapien, eget volutpat nulla ligula eu purus. Fusce metus. Phasellus vehicula ligula in sem.
  2. Sed ut lorem. Proin orci. Suspendisse potenti. Donec urna. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Duis dapibus lectus. Quisque nulla velit, tempus sit amet, mollis sit amet, gravida in, velit. Quisque volutpat enim id velit. Sed augue. Vestibulum mauris eros, scelerisque in, commodo sit amet, mollis non, tellus.

consectetuer adipiscing elit. Quisque porta fringilla felis. Nam mi. Etiam at turpis in augue faucibus blandit. Sed eu ligula. Vestibulum eget arcu elementum risus sollicitudin malesuada. Phasellus interdum enim id orci. Ut vestibulum, mauris sed scelerisque imperdiet, arcu augue feugiat sapien, eget volutpat nulla ligula eu purus. Fusce metus. Phasellus vehicula ligula in sem. Nulla ornare, elit non pellentesque ullamcorper, augue massa semper nisl, ut pretium nunc ligula id elit. Nulla at elit id nisl tristique lobortis. Morbi ante. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aenean vel nunc vitae sapien vestibulum imperdiet. Sed ut lorem. Proin orci. Suspendisse potenti. Donec urna. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Duis dapibus lectus. Quisque nulla velit, tempus sit amet, mollis sit amet, gravida in, velit. Quisque volutpat enim id velit. Sed augue. Vestibulum mauris eros, scelerisque in, commodo sit amet, mollis non, tellus.
DL list Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Aenean ut orci. Aliquam sit amet tellus sed eros viverra volutpat. Integer wisi dolor, volutpat vel, mollis sed, scelerisque sed, elit.
Sed eleifend odio quis arcu.
Nam vitae arcu vitae tellus pellentesque

Duis at turpis. Suspendisse a lectus in urna mattis tincidunt. Morbi auctor sem. Suspendisse felis mauris, pulvinar ut, nonummy nec, dapibus et, lectus.

This is h2

Proin ut metus a nunc facilisis sollicitudin. Sed nec pede. Aliquam sit amet nisl. Curabitur pede. Etiam ut elit. Nam id nulla. Cras elementum egestas quam. Vivamus arcu eros, porttitor et, pulvinar eu, vestibulum eget, pede. Cras ut mi. Etiam non risus nec est ornare malesuada. Nullam neque turpis, interdum eu, eleifend vitae, accumsan a, nibh. Mauris in ante sit amet quam dapibus dictum.

Sed eleifend odio quis arcu. Nam vitae arcu vitae tellus pellentesque cursus. Aenean eleifend mi eget eros. Quisque scelerisque, diam quis feugiat ullamcorper, felis augue consectetuer nunc, nec facilisis ipsum elit vitae ante. Vestibulum libero.

This is h3

Aenean sem ipsum, fermentum nec, pellentesque a, tempor a, eros. Praesent purus. Nulla feugiat mi vitae urna. Mauris sed lorem. Donec aliquet porttitor ante. Donec vel felis.
  1. Integer nec metus.
  2. Donec commodo, dolor ut posuere posuere, turpis risus mollis orci, et rhoncus lacus dolor at nibh.
Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Phasellus risus. Quisque urna lectus, commodo ac, egestas eget, consectetuer eu, ipsum. Nunc eu lectus sed est vehicula tempor. Proin laoreet consequat nisl. Vestibulum blandit diam ut massa. Quisque imperdiet, neque at porta facilisis, wisi quam commodo nibh, sit amet porttitor lorem nibh sit amet mi.

Nulla ornare, elit non pellentesque ullamcorper, augue massa semper nisl, ut pretium nunc ligula id elit. Nulla at elit id nisl tristique lobortis. Morbi ante. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aenean vel nunc vitae sapien vestibulum imperdiet. Sed ut lorem. Proin orci. Suspendisse potenti. Donec urna. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Duis dapibus lectus. Quisque nulla velit, tempus sit amet, mollis sit amet, gravida in, velit. Quisque volutpat enim id velit. Sed augue.

This is the end, my friend
in some places are invisible landmarks
<!-- bottom of page -->
This include file, foot.html contains information I want in the foot of *every* page. Conveniently, server side includes "read" the contents of a separate file. I always make an invisible comment to note SSIs (below)
<!--#include virtual="inc/foot.html" -->
identify what is being closed (below)
</div><!-- close container div -->
shut it down
</body>
</html>


http://paula.edmiston.org/sandbox/html5experiment.html
Last Edited: 29 Jun 2014