Height of Headers
So I'm almost sure that what I won't can't be done, but it's best to know for sure, right?
Okay I have 4 images I want to use as a header. A rotating header, you know? And well, the part where the images rotate I already have. The problem? They are all the same width but they have different heights.
I didn't realized that the layout actually asked you to put in the height of your header and them being all different betweem themself, the entries look weird.
When I put in the height of the biggest one, there's a black gap between the bootom of the rest of them and the layout itself. But if I set it with the height of the smallest one, when the other appeares they have their bottom cutted.
Is there anyway for the layout to adapt to the change of height?
/*-- layout: made by kasiopeia
no stealing. no reposting code as yours.
don't remove this section & please credit. --*/
/*-- main page --*/
BODY {
background: #080807;
background-image: url('');
background-repeat: no-repeat;
color: #888888;
font-size: 11px;
font-family: "Verdana", sans-serif;
text-align: left;
line-height: 16px;
margin: 70px 0px 70px 0px;
}
#content {
width: 850px;
margin-right: auto;
margin-left: auto;
background: #ffffff;
}
#maincontent {
text-align: left;
margin-right: 250px;
}
.headerimage {
position: center;
position: relative;
margin-left: auto;
margin-right: auto;
margin-bottom: 0px;
width: 850px;
height: 300px;
background-image: url('http://img.photobucket.com/albums/v374/Jamie_Girl/Fringe%20Verse/Event%20FOUR%20headers/06.png');
background-repeat: no-repeat;
}
/*-- special fonts, links, etc. --*/
i {
color: #3C29C4;
}
b {
color: #48797F;
}
u {
color: #28089E;
}
s {
color: #2AAEFD;
}
a, a:link, a:visited {
color: #1668A0;
text-transform: lowercase;
text-decoration: none;
font-weight: bold;
}
a:hover, b:hover, i:hover, u:hover, s:hover {
color: #BC170F;
}
p, td {
font-size: 11px;
}
code, kbd, pre, tt {
font-family: monospace;
}
/*-- sidebar content --*/
#sidebar {
width: 230px;
float: right;
text-align: justify;
color: #4A4344;
padding: 15px; margin-top: 20px;
}
.defaultuserpic {
text-align: center;
}
.sbarheader, .sbarbody, .sbarbody2 {
padding: 2px;
}
table.calendar {
margin-right: auto;
margin-left: auto;
}
.sbarcalendar {
padding: 3px;
border: 1px solid #ddd;
text-align: center;
color: #4A4344;
font-size: 7pt;
}
.sbarcalendarposts {
padding: 3px;
border: 1px solid #ddd;
background: #f9f9f9;
text-align: center;
color: #EB8A00;
font-size: 7pt;
}
ul.sbarlist {
margin: 0px;
list-style: none;
padding: 0px;
}
li.sbaritem {
list-style: none;
color: #4A4344;
padding: 3px 15px 3px 15px;
margin-bottom: 10px;
text-transform: lowercase;
text-decoration: none;
background-color: #eeeeee;
border-width: 0px 0px 0px 4px;
border-color: #cccccc;
border-style: solid;
font-size: 12px;
}
li.sbaritem:hover {
color: #aaaaaa;
border-width: 0px 0px 0px 4px;
border-color: #E80C4A;
border-style: solid;
background-color: #e7e7e7;
}
li.sbartitle {
text-align: left:
font-size: 12px;
color: #4A4344;
font-weight: bold;
padding-bottom: 5px;
padding-top: 5px;
}
ul.ljtaglist li{
padding: 5px;
margin: 0px;
list-style: decimal-leading-zero;
list-style-position: outside;
}
/*-- navigation links --*/
#header {
background: #444444;
color: #777777;
font-size: 10pt;
margin-left: auto;
margin-right: auto;
padding: 15px;
text-align: center;
text-transform: lowercase;
}
#footer {
background: #444444;
color: #777777;
font-size: 10pt;
margin-left: auto;
margin-right: auto;
padding: 15px;
text-align: center;
text-transform: lowercase;
clear: both;
}
.clear {
height: 10px;
}
div#header a, div#header a:link, div#header a:visited, div#footer a, div#footer a:link, div#footer a:visited {
color: #777777;
font-size: 10pt;
text-transform: lowercase;
font-weight: bold;
}
div#header a:hover, div#footer a:hover, div#header li.view, div#footer li.viewing {
color: #999999;
font-weight: bold;
}
ul.navheader, ul.navfooter {
padding: 0 2px 0 2px;
margin: 0 1px 0 1px; }
ul.navheader li, ul.navfooter li {
display: inline;
list-style: none;
padding: 0 2px 0 2px;
margin: 0 1px 0 1px;
}
.clearfoot {
display: none;
}
/*-- title & subtitle --*/
.title {
display: none;
}
.subtitle {
display: none;
}
/*-- subcontent and entry content --*/
.subcontent {
padding: 25px;
}
.entry {
padding: 15px 1px 5px 1px;
color: #4A4344;
font-family: "verdana" Helvetica, sans-serif;
font-size: 11px;
text-align: justify;
}
.entry ul li {
padding-left: 0px;
margin-left: 0px;
list-style: decimal-leading-zero;
list-style-position: outside;
}
.entry ol li {
padding-left: 0px;
margin-left: 0px;
list-style: decimal-leading-zero;
list-style-position: outside;
}
.date {
text-align: right;
float: right;
font-weight: normal;
color: #c0c0c0;
font-size: 8px;
text-transform: uppercase;
padding-left: 10px;
}
.subject {
text-align: left;
}
div.subject a, div.subject a:link, div.subject a:visited {
color: #c0c0c0;
text-transform: lowercase;
font-size: 14px;
font-weight: normal;
font-style: italic;
}
.datesubject {
padding: 13px;
border-left: 4px solid #777777;
background-color: #444444;
line-height: 10px;
}
blockquote {
border-left: 4px solid #FF842B;
text-align: lustify;
padding: 0px 10px 0px 10px;
margin: 0px 15px 0px 15px;
}
.separator {
height: 10px;
}
/*-- currents, comment links, and tags in entry --*/
.currents {
background-color: transparent;
}
.currents strong{
font-weight: normal;
font-size: 9px;
color: #cccccc;
}
.currentlocation, .currentmood, .currentmusic, .currentgroup {
text-align: left;
font-size: 9px;
color: #999999;
}
.ljtags {
margin-top: 15px;
text-align: left;
text-transform: lowercase;
font-size: 9px;
color: #cccccc;
}
.comments {
font-weight: none;
text-align: center;
font-size: 1px;
color: #ffffff;
top: 5px;
}
div.comments a, div.comments a:link, div.comments a:visited {
color: #888888;
padding: 2px 5px 2px 5px; margin: 3px;
text-transform: lowercase;
background-color: #eeeeee;
border-width: 0px 1px 1px 0px;
border-color: #dddddd;
border-style: solid;
font-size: 9px;
}
div.comments a:hover {
color: #aaaaaa;
border-width: 1px 0px 0px 1px;
border-color: #d8d8d8;
border-style: solid;
background-color: #e7e7e7;
}
/*-- userpics, friends userpics --*/
.userpic {
display: none;
}
.userpicfriends {
position: relative;
float: left;
margin: 0px 10px 10px 0px;
z-index: 15;
background-color: transparent !important;
text-align: center;
font-size: 7pt;
z-index: 15;
}
.userpicfriends font {
color: #888888 !important;
text-transform: lowercase;
}
.userpicfriends br {
display: block;
height: 0;
}
/*-- tags page --*/
.ljtaglist {
list-style-type: none;
margin: -1px 20px 0px 20px;
width: 60%;
text-transform: lowercase;
text-align: left;
}
.ljtaglist li {
border-bottom: 1px solid #dddddd;
padding: 6px 3px 6px 20px;
color: #aaaaaa;
}
H2 {
text-align: center;
padding: 30px; margin: 0px;
line-height: 12px;
font-weight: normal;
font-size: 12pt;
color: #dddddd;
}
ul.ljtaglist {
color: #aaaaaa;
font-size: 8pt;
padding: 8px 8px 8px 12px;
text-align: left;
margin-right: auto;
margin-left: auto;
padding: 25px;
}
ul.ljtaglist li{
padding: 3px;
margin: 2px;
list-style: decimal-leading-zero;
list-style-position: inside;
}
/* archive page */
ul.year {
text-align: center;
padding: 30px; margin: 0px;
}
ul.year li {
color: #aaaaaa;
display: inline;
}
table.yeartable {
margin-left: auto;
margin-right: auto;
padding: 3px;
}
td.yeardate {
color: #aaaaaa;
background-color: #eeeeee;
padding: 3px;
text-align: center;
}
table.yeartable td.yearday {
background-color: #dddddd;
padding: 3px;
text-align: center;
text-transform: uppercase;
color: #999999;
}
td.yearmonth {
color: #aaaaaa;
border-style: none;
}
/*-- comment page (sponsored and paid only) --*/
.clear {
display: none;
}
.skiplinks {
text-transform: lowercase;
text-align: center;
padding: 20px 10px 10px 10px;
color: #999999;
}
.datesubjectcomment {
background-color: #ffffff;
color: #999999;
padding: 5px;
margin-bottom: 5px;
}
.userpiccomment {
position: relative;
max-width: 100px;
max-height: 100px;
top: -10px;
left: 0px;
margin: 0px 10px -20px -10px;
z-index: 15;
float: left;
padding: 5px;
}
.box {
background-color: #ffffff;
width: auto;
clear: left;
padding: 20px;
}
input, textarea {
background-color: #A7DBD8;
font-size: 12px;
font-family: "Georgia", sans-serif;
color: #555555;
}
textarea.textbox{
border: 0px solid #fff;
font-family: "Georgia", sans-serif;
font-size: 12px;
width: 95% !important;
}
.reply{
position: relative;
margin: 5px 5px 5px 5px;
padding: 5px 5px 5px 5px;
text-align: left;
font-size: 10px;
line-height: 125%;
color: #777777;
}
.replytosubject {
font-weight: bold;
}
.commentreply {
position: relative;
padding: 10px 10px 20px 70px;
font-size: 10px;
color: #777777;
}
.commentbox {
padding: 15px 0px 15px 0px;
margin: 5px;
border-top: 1px solid #dddddd;
}
.datesubjectcomment a:link, .datesubjectcomment a:visited {
color: #9E9E7B;
}
.datesubjectcomment a:hover {
color: #bbbbbb;
}
.commentboxpartial {
background-color: #FFFFFF;
padding: 5px;
margin: 12px;
}
.commentinfo {
margin-top: 10px;
width: 100%;
}
/*-- additional codes, paste below here --*/
Okay I have 4 images I want to use as a header. A rotating header, you know? And well, the part where the images rotate I already have. The problem? They are all the same width but they have different heights.
I didn't realized that the layout actually asked you to put in the height of your header and them being all different betweem themself, the entries look weird.
When I put in the height of the biggest one, there's a black gap between the bootom of the rest of them and the layout itself. But if I set it with the height of the smallest one, when the other appeares they have their bottom cutted.
Is there anyway for the layout to adapt to the change of height?
/*-- layout: made by kasiopeia
no stealing. no reposting code as yours.
don't remove this section & please credit. --*/
/*-- main page --*/
BODY {
background: #080807;
background-image: url('');
background-repeat: no-repeat;
color: #888888;
font-size: 11px;
font-family: "Verdana", sans-serif;
text-align: left;
line-height: 16px;
margin: 70px 0px 70px 0px;
}
#content {
width: 850px;
margin-right: auto;
margin-left: auto;
background: #ffffff;
}
#maincontent {
text-align: left;
margin-right: 250px;
}
.headerimage {
position: center;
position: relative;
margin-left: auto;
margin-right: auto;
margin-bottom: 0px;
width: 850px;
height: 300px;
background-image: url('http://img.photobucket.com/albums/v374/Jamie_Girl/Fringe%20Verse/Event%20FOUR%20headers/06.png');
background-repeat: no-repeat;
}
/*-- special fonts, links, etc. --*/
i {
color: #3C29C4;
}
b {
color: #48797F;
}
u {
color: #28089E;
}
s {
color: #2AAEFD;
}
a, a:link, a:visited {
color: #1668A0;
text-transform: lowercase;
text-decoration: none;
font-weight: bold;
}
a:hover, b:hover, i:hover, u:hover, s:hover {
color: #BC170F;
}
p, td {
font-size: 11px;
}
code, kbd, pre, tt {
font-family: monospace;
}
/*-- sidebar content --*/
#sidebar {
width: 230px;
float: right;
text-align: justify;
color: #4A4344;
padding: 15px; margin-top: 20px;
}
.defaultuserpic {
text-align: center;
}
.sbarheader, .sbarbody, .sbarbody2 {
padding: 2px;
}
table.calendar {
margin-right: auto;
margin-left: auto;
}
.sbarcalendar {
padding: 3px;
border: 1px solid #ddd;
text-align: center;
color: #4A4344;
font-size: 7pt;
}
.sbarcalendarposts {
padding: 3px;
border: 1px solid #ddd;
background: #f9f9f9;
text-align: center;
color: #EB8A00;
font-size: 7pt;
}
ul.sbarlist {
margin: 0px;
list-style: none;
padding: 0px;
}
li.sbaritem {
list-style: none;
color: #4A4344;
padding: 3px 15px 3px 15px;
margin-bottom: 10px;
text-transform: lowercase;
text-decoration: none;
background-color: #eeeeee;
border-width: 0px 0px 0px 4px;
border-color: #cccccc;
border-style: solid;
font-size: 12px;
}
li.sbaritem:hover {
color: #aaaaaa;
border-width: 0px 0px 0px 4px;
border-color: #E80C4A;
border-style: solid;
background-color: #e7e7e7;
}
li.sbartitle {
text-align: left:
font-size: 12px;
color: #4A4344;
font-weight: bold;
padding-bottom: 5px;
padding-top: 5px;
}
ul.ljtaglist li{
padding: 5px;
margin: 0px;
list-style: decimal-leading-zero;
list-style-position: outside;
}
/*-- navigation links --*/
#header {
background: #444444;
color: #777777;
font-size: 10pt;
margin-left: auto;
margin-right: auto;
padding: 15px;
text-align: center;
text-transform: lowercase;
}
#footer {
background: #444444;
color: #777777;
font-size: 10pt;
margin-left: auto;
margin-right: auto;
padding: 15px;
text-align: center;
text-transform: lowercase;
clear: both;
}
.clear {
height: 10px;
}
div#header a, div#header a:link, div#header a:visited, div#footer a, div#footer a:link, div#footer a:visited {
color: #777777;
font-size: 10pt;
text-transform: lowercase;
font-weight: bold;
}
div#header a:hover, div#footer a:hover, div#header li.view, div#footer li.viewing {
color: #999999;
font-weight: bold;
}
ul.navheader, ul.navfooter {
padding: 0 2px 0 2px;
margin: 0 1px 0 1px; }
ul.navheader li, ul.navfooter li {
display: inline;
list-style: none;
padding: 0 2px 0 2px;
margin: 0 1px 0 1px;
}
.clearfoot {
display: none;
}
/*-- title & subtitle --*/
.title {
display: none;
}
.subtitle {
display: none;
}
/*-- subcontent and entry content --*/
.subcontent {
padding: 25px;
}
.entry {
padding: 15px 1px 5px 1px;
color: #4A4344;
font-family: "verdana" Helvetica, sans-serif;
font-size: 11px;
text-align: justify;
}
.entry ul li {
padding-left: 0px;
margin-left: 0px;
list-style: decimal-leading-zero;
list-style-position: outside;
}
.entry ol li {
padding-left: 0px;
margin-left: 0px;
list-style: decimal-leading-zero;
list-style-position: outside;
}
.date {
text-align: right;
float: right;
font-weight: normal;
color: #c0c0c0;
font-size: 8px;
text-transform: uppercase;
padding-left: 10px;
}
.subject {
text-align: left;
}
div.subject a, div.subject a:link, div.subject a:visited {
color: #c0c0c0;
text-transform: lowercase;
font-size: 14px;
font-weight: normal;
font-style: italic;
}
.datesubject {
padding: 13px;
border-left: 4px solid #777777;
background-color: #444444;
line-height: 10px;
}
blockquote {
border-left: 4px solid #FF842B;
text-align: lustify;
padding: 0px 10px 0px 10px;
margin: 0px 15px 0px 15px;
}
.separator {
height: 10px;
}
/*-- currents, comment links, and tags in entry --*/
.currents {
background-color: transparent;
}
.currents strong{
font-weight: normal;
font-size: 9px;
color: #cccccc;
}
.currentlocation, .currentmood, .currentmusic, .currentgroup {
text-align: left;
font-size: 9px;
color: #999999;
}
.ljtags {
margin-top: 15px;
text-align: left;
text-transform: lowercase;
font-size: 9px;
color: #cccccc;
}
.comments {
font-weight: none;
text-align: center;
font-size: 1px;
color: #ffffff;
top: 5px;
}
div.comments a, div.comments a:link, div.comments a:visited {
color: #888888;
padding: 2px 5px 2px 5px; margin: 3px;
text-transform: lowercase;
background-color: #eeeeee;
border-width: 0px 1px 1px 0px;
border-color: #dddddd;
border-style: solid;
font-size: 9px;
}
div.comments a:hover {
color: #aaaaaa;
border-width: 1px 0px 0px 1px;
border-color: #d8d8d8;
border-style: solid;
background-color: #e7e7e7;
}
/*-- userpics, friends userpics --*/
.userpic {
display: none;
}
.userpicfriends {
position: relative;
float: left;
margin: 0px 10px 10px 0px;
z-index: 15;
background-color: transparent !important;
text-align: center;
font-size: 7pt;
z-index: 15;
}
.userpicfriends font {
color: #888888 !important;
text-transform: lowercase;
}
.userpicfriends br {
display: block;
height: 0;
}
/*-- tags page --*/
.ljtaglist {
list-style-type: none;
margin: -1px 20px 0px 20px;
width: 60%;
text-transform: lowercase;
text-align: left;
}
.ljtaglist li {
border-bottom: 1px solid #dddddd;
padding: 6px 3px 6px 20px;
color: #aaaaaa;
}
H2 {
text-align: center;
padding: 30px; margin: 0px;
line-height: 12px;
font-weight: normal;
font-size: 12pt;
color: #dddddd;
}
ul.ljtaglist {
color: #aaaaaa;
font-size: 8pt;
padding: 8px 8px 8px 12px;
text-align: left;
margin-right: auto;
margin-left: auto;
padding: 25px;
}
ul.ljtaglist li{
padding: 3px;
margin: 2px;
list-style: decimal-leading-zero;
list-style-position: inside;
}
/* archive page */
ul.year {
text-align: center;
padding: 30px; margin: 0px;
}
ul.year li {
color: #aaaaaa;
display: inline;
}
table.yeartable {
margin-left: auto;
margin-right: auto;
padding: 3px;
}
td.yeardate {
color: #aaaaaa;
background-color: #eeeeee;
padding: 3px;
text-align: center;
}
table.yeartable td.yearday {
background-color: #dddddd;
padding: 3px;
text-align: center;
text-transform: uppercase;
color: #999999;
}
td.yearmonth {
color: #aaaaaa;
border-style: none;
}
/*-- comment page (sponsored and paid only) --*/
.clear {
display: none;
}
.skiplinks {
text-transform: lowercase;
text-align: center;
padding: 20px 10px 10px 10px;
color: #999999;
}
.datesubjectcomment {
background-color: #ffffff;
color: #999999;
padding: 5px;
margin-bottom: 5px;
}
.userpiccomment {
position: relative;
max-width: 100px;
max-height: 100px;
top: -10px;
left: 0px;
margin: 0px 10px -20px -10px;
z-index: 15;
float: left;
padding: 5px;
}
.box {
background-color: #ffffff;
width: auto;
clear: left;
padding: 20px;
}
input, textarea {
background-color: #A7DBD8;
font-size: 12px;
font-family: "Georgia", sans-serif;
color: #555555;
}
textarea.textbox{
border: 0px solid #fff;
font-family: "Georgia", sans-serif;
font-size: 12px;
width: 95% !important;
}
.reply{
position: relative;
margin: 5px 5px 5px 5px;
padding: 5px 5px 5px 5px;
text-align: left;
font-size: 10px;
line-height: 125%;
color: #777777;
}
.replytosubject {
font-weight: bold;
}
.commentreply {
position: relative;
padding: 10px 10px 20px 70px;
font-size: 10px;
color: #777777;
}
.commentbox {
padding: 15px 0px 15px 0px;
margin: 5px;
border-top: 1px solid #dddddd;
}
.datesubjectcomment a:link, .datesubjectcomment a:visited {
color: #9E9E7B;
}
.datesubjectcomment a:hover {
color: #bbbbbb;
}
.commentboxpartial {
background-color: #FFFFFF;
padding: 5px;
margin: 12px;
}
.commentinfo {
margin-top: 10px;
width: 100%;
}
/*-- additional codes, paste below here --*/