#01 Journal Lay-out +8 headers to go with it
yeah, you read it right xD I've spend my weekend learning the codes of the flexible squares layout and made my first journal layout xD
(all headers are Dong Bang shin gi related and can be found underneath the third lj-cut)
Layout Style: Flexible Squares (S2)
Best view: tested in 1024x768
Browser(s) Compatible: tested in IE
Work with Nav bar?: yes
Work with Ads?: yes
Credit: isis_pro@5x5graphics
Preview:
Overrides:
/* Cleaned CSS: */
/*---------------------------------------------------
You can find a full guide on the single css definitions, including exlanations and illustrations along with the original CSS coding
at http://cartonage.livejournal.com.
This layout was made by: isis-pro@livejournal.
-----------------------------------------------------*/
body {
background-color: #DDDDDD;
text-align: center;
color: #31314C;
font-family: "Century Gothic", sans-serif;
font-size: 12px;
margin: 20px 0 20px 0;
}
a, a:link, a:visited {
color: #31314c;
text-decoration: none;
}
a:hover {
color: #7290A3;
text-decoration: none;
}
p, td, blockquote {
font-size: 12px;
}
code, kbd, pre, tt {
font-family: monospace;
}
/*---------------------------------------------------------------------
General page alignment and width
------------------------------------------------------------------------*/
#content
{
width: 750px;
margin-left: auto; margin-right: auto;
background-color: #DDDDDD;
border-width: 0px;
border-style: solid;
border-color: #DDDDDD;
padding: 0px;
}
#maincontent {
margin-top: 15px;
font-family: "Century Gothic", sans-serif;
font-size: 12px;
background-color: #F6F6F7;
color: #31314C;
border-style: solid;
border-color: #DDDDDD;
border-width: 0px;
margin-right: 180px;
text-align: left;
}
#sidebar {
padding-top: 15px;
margin-top: 15px;
background-color: #F6F6F7;
border-color: #DDDDDD;
border-width: 0px;
border-style: solid;
font-size: 12px;
font-family: "Century Gothic", sans-serif;
color: #8EAEC2;
width: 160px;
float: right;
text-align: left;
}
/*-----------------------------------------------------------------------------
Header - you can add a header image with either #header or .headerimage
--------------------------------------------------------------------------------*/
#header {
width: 750px;
padding: 0px 0px 0px 0px;
margin: 0px;
text-align: center;
font-family: "Century Gothic", sans-serif;
font-size: 20px;
font-weight: normal;
letter-spacing: 1px;
border-style: solid;
border-color: #DDDDDD;
border-width: 0px;
background-color: #DDDDDD;
color: #8EAEC2;
}
.headerimage {
position: relative;
width: 750px;
height: 000px;
margin-left: auto;
margin-right: auto;
margin-bottom: 5px; /* Space between bottom of image and outer box of style */
background-image: url("");
background-repeat: no-repeat;
}
/*-----------------------------------------
look and color of links (also partly for footer)
----------------------------------------------*/
div#header a, div#header a:link, div#header a:visited, div#footer a, div#footer a:link, div#footer a:visited {
color: #4A4A84;
}
div#header a:hover, div#footer a:hover {
color: #8EAEC2;
text-decoration: none;
}
/*title and subtitle*/
.title {
font-family: "Century Gothic", sans-serif;
font-size: 0px;
font-weight: normal;
line-height: 200%;
top: 10px;
}
.subtitle{
font-family: "Century Gothic", sans-serif;
font-size: 0px;
font-weight: normal;
top: 0px;
}
/*-----------------------------------------------------------------------------
Header - top navigation
--------------------------------------------------------------------------------*/
/* header -- links to views; title of journal; subtitle of journal */
ul.navheader
{
padding: 0px;
margin: 0px;
}
ul.navheader li {
display: inline;
padding: 0 3px 0 3px;
}
/*-----------------------------------------------------------------------------
Entry stuff
------------------------------------------------------------------------*/
.subcontent {
}
.entry {
margin: 0px 10px 10px 30px;
padding: 10px;
background-color: #F6F6F7;
color: #8EAEC2;
font-family: "Century Gothic", sans-serif;
font-size: 12px;
text-align: left;
border-width: 0px;
border-color: #F6F6F7;
border-style: solid;
}
.userpic {
position: relative;
float: left;
background-color: #F6F6F7;
padding: 5px;
margin: 10px;
z-index: 15;
border-width: 0px;
border-color: #F6F6F7;
border-style: solid;
}
.date {
line-height: 200%;
top: 5px;
color: #31314C;
font-family: "Century Gothic", sans-serif;
font-size: 12px;
}
.subject {
font-weight: bold;
padding: 10px;
color: #31314C;
font-family: "Century Gothic", sans-serif;
font-size: 12px;
}
.subject a, .subject a:link, .subject a:visited {
color: #DDDDDD;
}
.subject a:hover {
color: #b0b9c8;
}
.datesubject {
background-color: #F6F6F7;
padding: 5px;
}
.entry ul li
{
padding-left: 5px;
margin-left: 15px;
}
.entry ol li
{
padding-left: 5px;
margin-left: 15px;
}
.ljtags {
margin:20px 20px 0px 0px;
padding:10px 10px 10px 10px;
background:#F6F6F7;
}
/*---------------------------------------------------------------------
Entry Stuff - Current Mood, Music and Location
------------------------------------------------------------------------*/
.currents, .currentmood, .currentmusic {
font-family: "Century Gothic", sans-serif;
font-size: 11px;
color: #4A4A84;
}
.currents strong{
font-weight:normal
}
/*---------------------------------------------------------------------
Entry Stuff - Comments
------------------------------------------------------------------------*/
.comments {
font-family: "Century Gothic", sans-serif;
font-size: 12px;
text-align: right;
background-color: #F6F6F7;
padding: 0px 5px 0px 5px;
position: relative;
top: 15px;
}
div.comments a, div.comments a:link, div.comments a:visited{
color: #4A4A84;
}
div.comments a:hover {
color: #8EAEC2;
text-decoration: none;
}
/*---------------------------------------------------------------------
Entry Stuff - Separator
------------------------------------------------------------------------*/
.separator{
/* for formatting separators between entries */
height: 10px;
background-color: #DDDDDD;
border-style: dashed;
border-width: 1px;
border-color: #DDDDDD;
}
/*------------------------------------------------------------
Special friends page customization
-------------------------------------------------------------------------------*/
.userpicfriends {
position: relative;
float: left;
padding: 5px;
margin: 10px;
text-align: center;
border-style: dashed;
border-width: 2px;
border-color: #FFFFFF;
z-index: 15;
background-color:#F6F6F7 !important;
}
.userpicfriends a font {
text-align: center;
color: #8EAEC2 !important;
font-family: "Century Gothic", sans-serif;
font-size: 12px;
}
/*------------------------------------------------------------
Sidebar
-------------------------------------------------------------------------------*/
.defaultuserpic {
text-align: center;
}
.sbarheader {
padding: 0px 5px 0px 5px;
}
.sbarbody {
padding: 0px 5px 0px 5px;
}
.sbarbody2 {
padding: 0 15px 0 15px;
}
div#sidebar a, div#sidebar a:link, div#sidebar a:visited{
color: #31314c;
}
div#sidebar a:hover {
color: #7290A3;
text-decoration: none;
}
/*------------------------------------------------------------
Sidebar - Calendar
-------------------------------------------------------------------------------*/
table.calendar {
margin-right: auto;
margin-left: auto;
}
.sbarcalendar {
border-color: #31314C;
border-width: 0px;
border-style: solid;
text-align: center;
font-family: "Century Gothic", sans-serif;
font-size: 12px;
}
.sbarcalendarposts {
border-color: #31314C;
border-width: 0px;
border-style: solid;
background-color: #F6F6F7;
text-align: center;
font-family: "Century Gothic", sans-serif;
font-size: 12px;
}
/*------------------------------------------------------------
Sidebar - link box contents and sidebar box titles
-------------------------------------------------------------------------------*/
ul.sbarlist
{
padding-left: 0px;
margin-left: 0px;
list-style: none;
}
li.sbaritem
{
padding-left: 15px;
list-style: none;
}
li.sbartitle
{
padding-left: 15px;
list-style: none;
border-style: solid;
border-width: 1px;
border-color: #DDDDDD;
background-color: #F6F6F7;
margin-bottom: 10px;
margin-top: 10px;
}
/*----------------------------------------------------
footer
----------------------------------------------------------------*/
#footer {
width: 100%;
text-align: center;
font-family: "Century Gothic", sans-serif;
font-size: 12px;
font-weight: bold;
letter-spacing: 1px;
background-color: #F6F6F7;
color: #31314C;
border-color: #DDDDDD;
border-width: 0px;
border-style: solid;
z-index: 100;
clear: both;
}
ul.navfooter{
padding: 0px;
margin: 0px;
}
ul.navfooter li {
display: inline;
margin: 0 5px 0 5px;
}
.clearfoot {
clear: both;
}
/*----------------------------------------------------
Archive Pages
----------------------------------------------------------------*/
ul.year {
text-align: center;
padding-bottom: 40px;
}
ul.year li {
display: inline;
}
table.yeartable {
margin-left: auto;
margin-right: auto;
}
table.yeartable td.yeardate, table.yeartable td.yearday {
border-width: 0px;
border-style: solid;
border-color: #DDDDDD;
}
table.yeartable td.yearday {
background-color: #F6F6F7;
text-align: center;
}
td.yearmonth {
border-style: none;
}
/*----------------------------------------------------
Comments pages
----------------------------------------------------------------*/
.datesubjectcomment {
background-color: #F6F6F7;
padding: 5px;
margin-top: 20px;
}
.userpiccomment {
position: relative;
border-width: 5px;
border-style: solid;
border-color: #F6F6F7;
background-color: #F6F6F7;
top: -30px;
left: 0px;
padding: 5px;
margin: 10px 10px -20px 10px;
z-index: 15;
float: left;
border-width: 0px;
border-color: #919bad;
border-style: solid;
}
.box {
border-style: solid;
border-width: 1px 0px 0px 0px;
border-color: #DDDDDD;
padding: 10px;
clear: left;
}
input, textarea {
background-color: #F6F6F7;
color: #31314C;
}
textarea.textbox {
width: 100% !important;
}
.reply {
position: relative;
margin: 20px 30px 10px 30px;
padding: 25px 10px 10px 10px;
text-align: left;
font-family: "Century Gothic", sans-serif;
font-size: 12px;
line-height: 125%;
background-color: #F6F6F7;
color: #31314C;
}
.replytosubject {
font-weight: bold;
}
.commentreply {
position: relative;
margin: 10px;
font-size: 12px;
font-family: "Century Gothic", sans-serif;
color: #31314C;
}
.commentbox {
border-color: #DDDDDD;
border-width: 0px;
border-style: solid;
padding: 10px;
margin: 10px;
background-color: #F6F6F7;
}
.datesubjectcomment a:link, .datesubjectcomment a:visited {
color: #8EAEC2;
}
.datesubjectcomment a:hover {
color: #b0b9c8;
}
.commentboxpartial {
border-color: #DDDDDD;
border-width: 0px;
border-style: solid;
padding: 10px;
margin: 10px;
background-color: #F6F6F7;
}
.commentinfo {
background-color: #F6F6F7;
margin-top: 10px;
width: 100%;
}
.skiplinks {
text-align: center;
}
/*--------------------------------------------
Misc
-----------------------------------------*/
.clear {
height: 15px;
}
------------------------------------------------------------
How to install:
1. head to: http://livejournal.com/customize
2. select a flexible squares layout (Blue/Grey) /search theme: Flexible squares/
3. Customize theme or go here
4. Make sure all colours are on default (i haven't checked this but just to be safe ^^;)
5. Click on: Custom CSS, make sure all three dropboxes are set on NO
6. Copy and the above code (in the textbox) and paste it into Custom Stylesheet textbox.
8. If you want to add a header: See below for instructions.
9. Press Save Changes and you should be all done!
---------------------------------------------------------------------
preview:
For those of you who wish to add a header:
look for the following bit of coding and edit it like it stands here:
.headerimage {
position: relative;
width: 750px;
height: 000px; (replace 000 by height of the header)
margin-left: auto;
margin-right: auto;
margin-bottom: 5px;
background-image: url("PLACE URL TO IMAGE HERE");
background-repeat: no-repeat;
}
for instance: for the live preview the coding looks like this:
.headerimage {
position: relative;
width: 750px;
height: 406px;
margin-left: auto;
margin-right: auto;
margin-bottom: 5px;
background-image: url("http://i34.photobucket.com/albums/d126/latsma/Lj_Lay-outs/header021.png");
background-repeat: no-repeat;
}
------------------------------------------------------------
rules:
don't edit!
don't steal!
don't hotlink!
(ofcourse you can just forget about the entire layout and just snitch a header... please do credit me if you do okay? xD;)
------------------------------------------------------------
Constructive critisism is greatly appreciated. And i'd love to know if this layout works in other browsers and resolutions! (please leave a comment ^^; ) please report any and all bugs/coding errors you may find!
A great thank you to irinafan@cartonage without whose Flexible squares CSS guide I wouldn't have been able to pull this off!
(all headers are Dong Bang shin gi related and can be found underneath the third lj-cut)
Layout Style: Flexible Squares (S2)
Best view: tested in 1024x768
Browser(s) Compatible: tested in IE
Work with Nav bar?: yes
Work with Ads?: yes
Credit: isis_pro@5x5graphics
Preview:
Overrides:
/* Cleaned CSS: */
/*---------------------------------------------------
You can find a full guide on the single css definitions, including exlanations and illustrations along with the original CSS coding
at http://cartonage.livejournal.com.
This layout was made by: isis-pro@livejournal.
-----------------------------------------------------*/
body {
background-color: #DDDDDD;
text-align: center;
color: #31314C;
font-family: "Century Gothic", sans-serif;
font-size: 12px;
margin: 20px 0 20px 0;
}
a, a:link, a:visited {
color: #31314c;
text-decoration: none;
}
a:hover {
color: #7290A3;
text-decoration: none;
}
p, td, blockquote {
font-size: 12px;
}
code, kbd, pre, tt {
font-family: monospace;
}
/*---------------------------------------------------------------------
General page alignment and width
------------------------------------------------------------------------*/
#content
{
width: 750px;
margin-left: auto; margin-right: auto;
background-color: #DDDDDD;
border-width: 0px;
border-style: solid;
border-color: #DDDDDD;
padding: 0px;
}
#maincontent {
margin-top: 15px;
font-family: "Century Gothic", sans-serif;
font-size: 12px;
background-color: #F6F6F7;
color: #31314C;
border-style: solid;
border-color: #DDDDDD;
border-width: 0px;
margin-right: 180px;
text-align: left;
}
#sidebar {
padding-top: 15px;
margin-top: 15px;
background-color: #F6F6F7;
border-color: #DDDDDD;
border-width: 0px;
border-style: solid;
font-size: 12px;
font-family: "Century Gothic", sans-serif;
color: #8EAEC2;
width: 160px;
float: right;
text-align: left;
}
/*-----------------------------------------------------------------------------
Header - you can add a header image with either #header or .headerimage
--------------------------------------------------------------------------------*/
#header {
width: 750px;
padding: 0px 0px 0px 0px;
margin: 0px;
text-align: center;
font-family: "Century Gothic", sans-serif;
font-size: 20px;
font-weight: normal;
letter-spacing: 1px;
border-style: solid;
border-color: #DDDDDD;
border-width: 0px;
background-color: #DDDDDD;
color: #8EAEC2;
}
.headerimage {
position: relative;
width: 750px;
height: 000px;
margin-left: auto;
margin-right: auto;
margin-bottom: 5px; /* Space between bottom of image and outer box of style */
background-image: url("");
background-repeat: no-repeat;
}
/*-----------------------------------------
look and color of links (also partly for footer)
----------------------------------------------*/
div#header a, div#header a:link, div#header a:visited, div#footer a, div#footer a:link, div#footer a:visited {
color: #4A4A84;
}
div#header a:hover, div#footer a:hover {
color: #8EAEC2;
text-decoration: none;
}
/*title and subtitle*/
.title {
font-family: "Century Gothic", sans-serif;
font-size: 0px;
font-weight: normal;
line-height: 200%;
top: 10px;
}
.subtitle{
font-family: "Century Gothic", sans-serif;
font-size: 0px;
font-weight: normal;
top: 0px;
}
/*-----------------------------------------------------------------------------
Header - top navigation
--------------------------------------------------------------------------------*/
/* header -- links to views; title of journal; subtitle of journal */
ul.navheader
{
padding: 0px;
margin: 0px;
}
ul.navheader li {
display: inline;
padding: 0 3px 0 3px;
}
/*-----------------------------------------------------------------------------
Entry stuff
------------------------------------------------------------------------*/
.subcontent {
}
.entry {
margin: 0px 10px 10px 30px;
padding: 10px;
background-color: #F6F6F7;
color: #8EAEC2;
font-family: "Century Gothic", sans-serif;
font-size: 12px;
text-align: left;
border-width: 0px;
border-color: #F6F6F7;
border-style: solid;
}
.userpic {
position: relative;
float: left;
background-color: #F6F6F7;
padding: 5px;
margin: 10px;
z-index: 15;
border-width: 0px;
border-color: #F6F6F7;
border-style: solid;
}
.date {
line-height: 200%;
top: 5px;
color: #31314C;
font-family: "Century Gothic", sans-serif;
font-size: 12px;
}
.subject {
font-weight: bold;
padding: 10px;
color: #31314C;
font-family: "Century Gothic", sans-serif;
font-size: 12px;
}
.subject a, .subject a:link, .subject a:visited {
color: #DDDDDD;
}
.subject a:hover {
color: #b0b9c8;
}
.datesubject {
background-color: #F6F6F7;
padding: 5px;
}
.entry ul li
{
padding-left: 5px;
margin-left: 15px;
}
.entry ol li
{
padding-left: 5px;
margin-left: 15px;
}
.ljtags {
margin:20px 20px 0px 0px;
padding:10px 10px 10px 10px;
background:#F6F6F7;
}
/*---------------------------------------------------------------------
Entry Stuff - Current Mood, Music and Location
------------------------------------------------------------------------*/
.currents, .currentmood, .currentmusic {
font-family: "Century Gothic", sans-serif;
font-size: 11px;
color: #4A4A84;
}
.currents strong{
font-weight:normal
}
/*---------------------------------------------------------------------
Entry Stuff - Comments
------------------------------------------------------------------------*/
.comments {
font-family: "Century Gothic", sans-serif;
font-size: 12px;
text-align: right;
background-color: #F6F6F7;
padding: 0px 5px 0px 5px;
position: relative;
top: 15px;
}
div.comments a, div.comments a:link, div.comments a:visited{
color: #4A4A84;
}
div.comments a:hover {
color: #8EAEC2;
text-decoration: none;
}
/*---------------------------------------------------------------------
Entry Stuff - Separator
------------------------------------------------------------------------*/
.separator{
/* for formatting separators between entries */
height: 10px;
background-color: #DDDDDD;
border-style: dashed;
border-width: 1px;
border-color: #DDDDDD;
}
/*------------------------------------------------------------
Special friends page customization
-------------------------------------------------------------------------------*/
.userpicfriends {
position: relative;
float: left;
padding: 5px;
margin: 10px;
text-align: center;
border-style: dashed;
border-width: 2px;
border-color: #FFFFFF;
z-index: 15;
background-color:#F6F6F7 !important;
}
.userpicfriends a font {
text-align: center;
color: #8EAEC2 !important;
font-family: "Century Gothic", sans-serif;
font-size: 12px;
}
/*------------------------------------------------------------
Sidebar
-------------------------------------------------------------------------------*/
.defaultuserpic {
text-align: center;
}
.sbarheader {
padding: 0px 5px 0px 5px;
}
.sbarbody {
padding: 0px 5px 0px 5px;
}
.sbarbody2 {
padding: 0 15px 0 15px;
}
div#sidebar a, div#sidebar a:link, div#sidebar a:visited{
color: #31314c;
}
div#sidebar a:hover {
color: #7290A3;
text-decoration: none;
}
/*------------------------------------------------------------
Sidebar - Calendar
-------------------------------------------------------------------------------*/
table.calendar {
margin-right: auto;
margin-left: auto;
}
.sbarcalendar {
border-color: #31314C;
border-width: 0px;
border-style: solid;
text-align: center;
font-family: "Century Gothic", sans-serif;
font-size: 12px;
}
.sbarcalendarposts {
border-color: #31314C;
border-width: 0px;
border-style: solid;
background-color: #F6F6F7;
text-align: center;
font-family: "Century Gothic", sans-serif;
font-size: 12px;
}
/*------------------------------------------------------------
Sidebar - link box contents and sidebar box titles
-------------------------------------------------------------------------------*/
ul.sbarlist
{
padding-left: 0px;
margin-left: 0px;
list-style: none;
}
li.sbaritem
{
padding-left: 15px;
list-style: none;
}
li.sbartitle
{
padding-left: 15px;
list-style: none;
border-style: solid;
border-width: 1px;
border-color: #DDDDDD;
background-color: #F6F6F7;
margin-bottom: 10px;
margin-top: 10px;
}
/*----------------------------------------------------
footer
----------------------------------------------------------------*/
#footer {
width: 100%;
text-align: center;
font-family: "Century Gothic", sans-serif;
font-size: 12px;
font-weight: bold;
letter-spacing: 1px;
background-color: #F6F6F7;
color: #31314C;
border-color: #DDDDDD;
border-width: 0px;
border-style: solid;
z-index: 100;
clear: both;
}
ul.navfooter{
padding: 0px;
margin: 0px;
}
ul.navfooter li {
display: inline;
margin: 0 5px 0 5px;
}
.clearfoot {
clear: both;
}
/*----------------------------------------------------
Archive Pages
----------------------------------------------------------------*/
ul.year {
text-align: center;
padding-bottom: 40px;
}
ul.year li {
display: inline;
}
table.yeartable {
margin-left: auto;
margin-right: auto;
}
table.yeartable td.yeardate, table.yeartable td.yearday {
border-width: 0px;
border-style: solid;
border-color: #DDDDDD;
}
table.yeartable td.yearday {
background-color: #F6F6F7;
text-align: center;
}
td.yearmonth {
border-style: none;
}
/*----------------------------------------------------
Comments pages
----------------------------------------------------------------*/
.datesubjectcomment {
background-color: #F6F6F7;
padding: 5px;
margin-top: 20px;
}
.userpiccomment {
position: relative;
border-width: 5px;
border-style: solid;
border-color: #F6F6F7;
background-color: #F6F6F7;
top: -30px;
left: 0px;
padding: 5px;
margin: 10px 10px -20px 10px;
z-index: 15;
float: left;
border-width: 0px;
border-color: #919bad;
border-style: solid;
}
.box {
border-style: solid;
border-width: 1px 0px 0px 0px;
border-color: #DDDDDD;
padding: 10px;
clear: left;
}
input, textarea {
background-color: #F6F6F7;
color: #31314C;
}
textarea.textbox {
width: 100% !important;
}
.reply {
position: relative;
margin: 20px 30px 10px 30px;
padding: 25px 10px 10px 10px;
text-align: left;
font-family: "Century Gothic", sans-serif;
font-size: 12px;
line-height: 125%;
background-color: #F6F6F7;
color: #31314C;
}
.replytosubject {
font-weight: bold;
}
.commentreply {
position: relative;
margin: 10px;
font-size: 12px;
font-family: "Century Gothic", sans-serif;
color: #31314C;
}
.commentbox {
border-color: #DDDDDD;
border-width: 0px;
border-style: solid;
padding: 10px;
margin: 10px;
background-color: #F6F6F7;
}
.datesubjectcomment a:link, .datesubjectcomment a:visited {
color: #8EAEC2;
}
.datesubjectcomment a:hover {
color: #b0b9c8;
}
.commentboxpartial {
border-color: #DDDDDD;
border-width: 0px;
border-style: solid;
padding: 10px;
margin: 10px;
background-color: #F6F6F7;
}
.commentinfo {
background-color: #F6F6F7;
margin-top: 10px;
width: 100%;
}
.skiplinks {
text-align: center;
}
/*--------------------------------------------
Misc
-----------------------------------------*/
.clear {
height: 15px;
}
------------------------------------------------------------
How to install:
1. head to: http://livejournal.com/customize
2. select a flexible squares layout (Blue/Grey) /search theme: Flexible squares/
3. Customize theme or go here
4. Make sure all colours are on default (i haven't checked this but just to be safe ^^;)
5. Click on: Custom CSS, make sure all three dropboxes are set on NO
6. Copy and the above code (in the textbox) and paste it into Custom Stylesheet textbox.
8. If you want to add a header: See below for instructions.
9. Press Save Changes and you should be all done!
---------------------------------------------------------------------
preview:
For those of you who wish to add a header:
look for the following bit of coding and edit it like it stands here:
.headerimage {
position: relative;
width: 750px;
height: 000px; (replace 000 by height of the header)
margin-left: auto;
margin-right: auto;
margin-bottom: 5px;
background-image: url("PLACE URL TO IMAGE HERE");
background-repeat: no-repeat;
}
for instance: for the live preview the coding looks like this:
.headerimage {
position: relative;
width: 750px;
height: 406px;
margin-left: auto;
margin-right: auto;
margin-bottom: 5px;
background-image: url("http://i34.photobucket.com/albums/d126/latsma/Lj_Lay-outs/header021.png");
background-repeat: no-repeat;
}
------------------------------------------------------------
rules:
don't edit!
don't steal!
don't hotlink!
(ofcourse you can just forget about the entire layout and just snitch a header... please do credit me if you do okay? xD;)
------------------------------------------------------------
Constructive critisism is greatly appreciated. And i'd love to know if this layout works in other browsers and resolutions! (please leave a comment ^^; ) please report any and all bugs/coding errors you may find!
A great thank you to irinafan@cartonage without whose Flexible squares CSS guide I wouldn't have been able to pull this off!