Re: [css-d] Layout help needed, almost right

[Eric Peterson]

-align  : left;
color   : #008000;
  }

  td#f_right {
padding-right   : 1em;
color   : #008000;
text-align  : right;
  }

  td#f_middle {
text-align  : center;
  }

  td#f_middle a {
color   : #FF;
font-weight : bold;
text-decoration : none;
  }

  td#f_middle a:hover {
color   : #006600;
  }

  address#me {
color   : #BFBFBF;
font-size   : 0.74em;
text-align  : right;
  }








  

Title - Say something nice
home

  



 



  Links
  reload
  Top of Page
  Section 1
  Section 2
  Section 3
  Section 4
  Section 5
  Section 6
  Bottom of Page
  
  http://www.google.com/"; rel="external" 
target="_blank">Google







  
  
Eric Peterson

  Home
  
  Index/Sitemap
  
  Environment


some date goes here

  
  



​



​Main Content
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent facilisis 
tincclassunt magna, sagittis semper nulla convallis sit amet. Integer tempus 
ligula vel magna tincclassunt accumsan. Suspendisse class nibh et tellus 
tincclassunt tempor. Aenean justo orci, laoreet sed posuere non, consectetur 
rhoncus quam. Aliquam vel eros vitae sem sodales blandit pellentesque vitae 
urna. Praesent tincclassunt augue eget est dapibus et posuere dolor consequat. 
Morbi sed tellus ipsum, vitae viverra erat. Sed sit amet metus vitae lorem 
gravclassa consectetur. Nulla congue suscipit ultrices. Donec condimentum, nisl 
in convallis iaculis, diam elit tincclassunt eros, eget tincclassunt nisl velit 
sit amet velit. Vivamus ut lectus at erat scelerisque commodo. Lorem ipsum 
dolor sit amet, consectetur adipiscing elit. Mauris orci sem, malesuada 
facilisis venenatis in, viverra et augue.

​second header
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent facilisis 
tincclassunt magna, sagittis semper nulla convallis sit amet. Integer tempus 
ligula vel magna tincclassunt accumsan. Suspendisse class nibh et tellus 
tincclassunt tempor. Aenean justo orci, laoreet sed posuere non, consectetur 
rhoncus quam. Aliquam vel eros vitae sem sodales blandit pellentesque vitae 
urna. Praesent tincclassunt augue eget est dapibus et posuere dolor consequat. 
Morbi sed tellus ipsum, vitae viverra erat. Sed sit amet metus vitae lorem 
gravclassa consectetur. Nulla congue suscipit ultrices. Donec condimentum, nisl 
in convallis iaculis, diam elit tincclassunt eros, eget tincclassunt nisl velit 
sit amet velit. Vivamus ut lectus at erat scelerisque commodo. Lorem ipsum 
dolor sit amet, consectetur adipiscing elit. Mauris orci sem, malesuada 
facilisis venenatis in, viverra et augue.

​third header
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent facilisis 
tincclassunt magna, sagittis semper nulla convallis sit amet. Integer tempus 
ligula vel magna tincclassunt accumsan. Suspendisse class nibh et tellus 
tincclassunt tempor. Aenean justo orci, laoreet sed posuere non, consectetur 
rhoncus quam. Aliquam vel eros vitae sem sodales blandit pellentesque vitae 
urna. Praesent tincclassunt augue eget est dapibus et posuere dolor consequat. 
Morbi sed tellus ipsum, vitae viverra erat. Sed sit amet metus vitae lorem 
gravclassa consectetur. Nulla congue suscipit ultrices. Donec condimentum, nisl 
in convallis iaculis, diam elit tincclassunt eros, eget tincclassunt nisl velit 
sit amet velit. Vivamus ut lectus at erat scelerisque commodo. Lorem ipsum 
dolor sit amet, consectetur adipiscing elit. Mauris orci sem, malesuada 
facilisis venenatis in, viverra et augue.

​fourth header
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent facilisis 
tincclassunt magna, sagittis semper nulla convallis sit amet. Integer tempus 
ligula vel magna tincclassunt accumsan. Suspendisse class nibh et tellus 
tincclassunt tempor. Aenean justo orci, laoreet sed posuere non, consectetur 
rhoncus quam. Aliquam vel eros vitae sem sodales blandit pellentesque vitae 
urna. Praesent tincclassunt augue eget est dapibus et posuere dolor consequat. 
Morbi sed tellus ipsum, vitae viverra erat. Sed sit amet metus vitae lorem 
gravclassa consectetur. Nulla congue suscipit ultrices. Donec condimentum, nisl 
in convallis iaculis, diam elit tincclassunt eros, eget tincclassunt nisl velit 
sit amet velit. Vivamus ut lectus at erat scelerisque commodo. Lorem ipsum 
dolor sit amet, consectetur adipiscing elit. Mauris orci sem, malesuada 
facilisis venenatis in, viverra et augue.

​fifth header
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent facilisis 
tincclassunt magna, sagittis semper nulla convallis sit amet. Integer tempus 
ligula vel magna tincclassunt accumsan. Suspendisse class nibh et tellus 
tincclassunt tempor. Aenean justo orci, laoreet sed posuere non, consectetur 
rhoncus quam. Aliquam vel eros vitae sem sodales blandit pel

Re: [css-d] Layout help needed, almost right

[Eric Peterson]

Interesting use of  and  as the footer and header.  Thinking about it, 
I would have chosen  and  as they seem to be used a lot less.  If I 
wanted to use  as a header in this context, I would have to redefine a 
different header to emulate what the  used to have.  Not really a problem, 
just a change in thinking what the  mean.


Why did you choose to use  and  in this manner?  Why would a  definition not work the same way?  Is there something about the 
 that is 'easier' or 'better'?


Thanks much, this gives me some more insight into what I'm looking to do.





On 27 Jun 2010, at 10:21 , David Laakso wrote:

> David Laakso wrote:
> 
> 
> 
> Ooops.
> 
> ~d
> 
> -- 
> desktop
> http://chelseacreekstudio.com/
> 

__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

[css-d] Layout help needed, almost right

[Eric Peterson]

  font-family : Arial, sans-serif;
height  : 200px;
left: 150px;
margin  : 5px;
padding : 5px;
top : 100px;
width   : 150px;
  }
  div#blockright {
background  : #DDEEFF;
border  : 1px solid #00;
color   : #990066;
float   : right;
font-family : Arial, sans-serif;
height  : 200px;
margin  : 5px;
padding : 5px;
right   : 150px;
top : 100px;
width   : 150px;
  }

  /* links in TOC on right div */
  a.nav, a.nav:visited {
color   : #fff;
display : block;
font-weight : bold;
height  : 1.25em;
padding-left: 10px;
text-decoration : none;
width   : 100px;
  }
  a.nav:hover {
color   : #006600;
  }

  /* ruler break */
  hr {
color   : #CC9966;
width   : 75%;
  }








Some header information





 
 © 2010 — Eric Peterson
  






  
  Top of Page
  Section 1
  Section 2
  Section 3
  Bottom of Page
  
  
  http://www.google.com"; rel="external" 
target="_blank">Google






  header two

  special paragrpaph bold

  Vivamus nisl dui, vehicula non lacinia non, molestie a neque. Donec 
elementum enim in tortor imperdiet sit amet dignissim orci euismod. Vestibulum 
eget eros auctor arcu dictum cursus. Phasellus sed nunc sit amet tortor dictum 
hendrerit. Ut vel lectus dui. Suspendisse rhoncus erat ac erat posuere 
fermentum. Proin id massa libero, id mollis metus. Pellentesque ut lacinia 
lectus. Curabitur a metus eget arcu pharetra dapibus. Nullam dictum nisi quis 
dui mollis eget mattis purus auctor. Donec tincidunt leo vitae dui accumsan vel 
eleifend justo molestie. Pellentesque pretium adipiscing purus, et imperdiet 
est aliquam nec.

  header three

  another
  paragraph with a break.

  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent 
facilisis tincidunt magna, sagittis semper nulla convallis sit amet. Integer 
tempus ligula vel magna tincidunt accumsan. Suspendisse id nibh et tellus 
tincidunt tempor. Aenean justo orci, laoreet sed posuere non, consectetur 
rhoncus quam. Aliquam vel eros vitae sem sodales blandit pellentesque vitae 
urna. Praesent tincidunt augue eget est dapibus et posuere dolor consequat. 
Morbi sed tellus ipsum, vitae viverra erat. Sed sit amet metus vitae lorem 
gravida consectetur. Nulla congue suscipit ultrices. Donec condimentum, nisl in 
convallis iaculis, diam elit tincidunt eros, eget tincidunt nisl velit sit amet 
velit. Vivamus ut lectus at erat scelerisque commodo. Lorem ipsum dolor
sit amet, consectetur adipiscing elit. Mauris orci sem, malesuada facilisis 
venenatis in, viverra et augue.

  Duis volutpat interdum arcu ac ultrices. Fusce 
fermentum aliquet scelerisque. Curabitur mattis risus eu nulla vulputate 
tincidunt. Pellentesque habitant morbi tristique senectus et netus et malesuada 
fames ac turpis egestas. Maecenas tellus nibh, ornare ac luctus id, eleifend ut 
neque.

  Sed interdum malesuada tincidunt. Maecenas enim urna, laoreet vitae 
suscipit nec, bibendum at risus. In feugiat sagittis commodo. Curabitur vitae 
sem tristique neque vestibulum laoreet. Cras lacinia ante quis elit venenatis 
interdum. Pellentesque habitant morbi tristique senectus et netus et malesuada 
fames ac turpis egestas. Nam elementum scelerisque ante, ac convallis metus 
feugiat iaculis. Cras ligula lacus, consectetur quis aliquam et, cursus ut 
lectus. Nam lacinia fermentum tincidunt. Morbi non quam ante, quis blandit 
enim. In id augue quis nibh luctus varius et ac tellus. Maecenas pulvinar 
posuere nisi eget ullamcorper. Cras ac nisl nulla, et rutrum ante. Aenean eget 
posuere ipsum. Curabitur id est at odio ultrices ullamcorper. Vestibulum 
pulvinar mauris vitae nibh mattis eu fermentum tellus porta. Vivamus facilisis 
feugiat consectetur. Curabitur venenatis tempor ultrices. Suspendisse mi urna, 
pulvinar nec pharetra faucibus, sagittis eget lacus. Fusce lobortis ante vel 
ante condimentum aliquet.

  Maecenas porta tincidunt felis, vitae fermentum 
libero interdum sed. Suspendisse hendrerit nibh sed eros commodo at faucibus 
tellus consequat. Mauris convallis eros non ligula convallis auctor aliquam 
urna sodales. Nunc aliquet consectetur metus, non varius lacus mollis sit 
amet.

  Aliquam malesuada pharetra lorem id luctus. Fusce dictum velit eu nibh 
semper ac tempus ante elementum. Praesent laoreet aliquet odio, a lobortis 
ligula gravida eu. Cras eu ante eget mi venenatis vulputate in ac lorem. 
Suspendisse venenatis tempor risus, quis facilisis nibh molestie quis. Integer 
viverra dignissim odio at luctus. Nullam non mi sapien, nec facilisis augue. 
Nunc sodales semper tellus et sollicitudin. Pellentesque consectetur lacinia 
lac