SOLVED - A whole host of things: background images, borders, positioning and alignment problems, dat

Nov 11, 2009 22:54

Hello! I've got a bunch of questions here, hopefully someone can help me figure these out!

I'm coding the layout on my journal, mana_goddess. This was originally coded in a basic account so most of the changes are in the Custom CSS box (I am too lazy to add them to my theme layer) but some things were done in the theme layer as well.

Link to my theme layer

Custom CSS:
#content{
letter-spacing: 1px;
border-style: none;
}

#maincontent{
margin-top: -25px;
margin-bottom: -50px;
padding-top: 50px;
padding-right: 20px;
letter-spacing: 1px;
-moz-border-radius: 15px;
-webkit-border-radius:15px;
}

#sidebar {
padding-top: 40px;
margin-top: -665px;
margin-left: -100px;
background-color: #dee2e0;
letter-spacing: 1px;
border-style: none;
}

#header {
width: 883px;
font-weight: normal;
padding: 580px 0px 20px 0px;
margin-top: 0px;
text-align: center;
letter-spacing: 1px;
word-spacing: 43px;
border-style: solid;
border-color: #041227;
border-width: 1px;
-moz-border-radius: 15px;
-webkit-border-radius:15px;
background-color: #041227;
background-image: url("http://img697.imageshack.us/img697/9393/darkbluekotomiheaderpic.png");
background-repeat: no-repeat;
background-position: center;
}

.headerimage {
position: relative;
width: 214px;
height: 846px;
margin-right: auto;
margin-left: 0px;
margin-bottom: -846px;
background-image: url("http://img14.imageshack.us/img14/1206/butterflycrop.png");
background-repeat: no-repeat;
background-attachment: fixed;
}

#footer {
width: 883px;
font-weight: normal;
border-style: solid;
border-color: #041227;
border-width: 1px;
-moz-border-radius: 15px;
-webkit-border-radius:15px;
}

.userpic img {
border:3px solid #dee2e0;
-moz-border-radius: 4px;
-webkit-border-radius:4px;
}

.userpicfriends img {
border:3px solid #dee2e0;
-moz-border-radius: 4px;
-webkit-border-radius:4px;
}

.datesubject {
text-align: right;
padding-bottom: 39px;
}

.subject {
font-weight: normal;
}

.date{
padding-top: 10px;
}

.entry {
padding-top: 20px;
padding-right: 20px;
}

.subtitle {
display:none;
}

.title {
display:none;
}

a, a:link, a:visited {
text-decoration: none;
}

a:hover {
text-decoration: none;
}

.userpicfriends {
font-size: 8pt;
}

.currents strong{
font-weight:normal;
} #content{
letter-spacing: 1px;
border-style: none;
}

#maincontent{
margin-top: -25px;
margin-bottom: -50px;
padding-top: 50px;
padding-right: 20px;
letter-spacing: 1px;
-moz-border-radius: 15px;
-webkit-border-radius:15px;
}

#sidebar {
padding-top: 40px;
margin-top: -665px;
margin-left: -100px;
background-color: #dee2e0;
letter-spacing: 1px;
border-style: none;
}

#header {
width: 883px;
font-weight: normal;
padding: 580px 0px 20px 0px;
margin-top: 0px;
text-align: center;
letter-spacing: 1px;
word-spacing: 43px;
border-style: solid;
border-color: #041227;
border-width: 1px;
-moz-border-radius: 15px;
-webkit-border-radius:15px;
background-color: #041227;
background-image: url("http://img697.imageshack.us/img697/9393/darkbluekotomiheaderpic.png");
background-repeat: no-repeat;
background-position: center;
}

.headerimage {
position: relative;
width: 214px;
height: 846px;
margin-right: auto;
margin-left: 0px;
margin-bottom: -846px;
background-image: url("http://img14.imageshack.us/img14/1206/butterflycrop.png");
background-repeat: no-repeat;
background-attachment: fixed;
}

#footer {
width: 883px;
font-weight: normal;
border-style: solid;
border-color: #041227;
border-width: 1px;
-moz-border-radius: 15px;
-webkit-border-radius:15px;
}

.userpic img {
border:3px solid #dee2e0;
-moz-border-radius: 4px;
-webkit-border-radius:4px;
}

.userpicfriends img {
border:3px solid #dee2e0;
-moz-border-radius: 4px;
-webkit-border-radius:4px;
}

.datesubject {
text-align: right;
padding-bottom: 39px;
}

.subject {
font-weight: normal;
}

.date{
padding-top: 10px;
}

.entry {
padding-top: 20px;
padding-right: 20px;
}

.subtitle {
display:none;
}

.title {
display:none;
}

a, a:link, a:visited {
text-decoration: none;
}

a:hover {
text-decoration: none;
}

.userpicfriends {
font-size: 8pt;
}

.currents strong{
font-weight:normal;
}

Here are the problems I've been having. The first one is really the only major one. I'd reeeeeeeally appreciate help with that. The others are more of me just being picky but if you can figure them out too that'd be great:

  1. SOLVED - I have two header images: one in #header and one in .headerimage. The one in #header is the actual header above my entires, the one in .headerimage is meant to be a background and consists of a butterfly off to the left side of the page (you can see what that image looks like here). This background image is set to be fixed and not scroll with the rest of the page.

    The problem I'm having is this: because this image is outside the main content area, the page background color overlaps it when you scroll down. This is very hard to describe so I'd suggest hopping over to my journal to see for yourself. I changed the page background color to red at my testing journal papercatalyst so the problem might be easier to see over there.

    I've tried changing every margin and padding and height property I can think of and nothing is helping. If you guys can think of anything that'd be awesome!

  2. SOLVED - I added an image in between my comment links, but I can't seem to change its vertical placement. I'd like it to be centered vertically between the text but I can't get it to move down any farther (have tried margin and padding settings). Also, I'd like it to show up right before "reply" even when there are no comments. Any ideas?

  3. SOLVED - Is there a way to remove the time from the entires? (But still have it viewable on the comment page)

  4. SOLVED - I'd like to move my sidebar closer to my entires but I can't seem to get it to the left any further, even when assigning negative numbers for the left margin.

  5. SOLVED - Anyone heard of a way to add borders to mood icons using CSS?

  6. SOLVED - If you scroll down to one of my entries that has a subject you'll notice that while both the date and subject are right aligned the date is farther to the right than the subject. Any ideas on how to fix this? (I don't really care which one gets moved, only that they line up)

  7. SOLVED - The lock icon is about 1px away from the beginning of the subject on locked entires. Obviously you won't be able to see this but I think it has something to do with the subject being right aligned. Any way to push it a bit further away?



Thanks to anyone who can help!

date format, entry comment bar, solved, date, subject, misc, paid accounts

Previous post Next post
Up