?

Log in

No account? Create an account

Previous Entry | Next Entry

I'm a complete newbie to CSS, and about ready to throw my computer out the window.

I managed to figure out how to remove the header that Expressive came with, and put my own in. What I can't for the life of me figure out is how to 1) limit the width of the header so that it doesn't repeat, while still allowing me to have a sidebar. (Width of the header I want to use is 668px) and 2) how to move the Header text to the sidebar.

I know there must be a way to do both. Help?

The entirety of the code I'm using is:
#header {
background-image: none;
}
#header-inner {
background-image: url(http://img.photobucket.com/albums/v250/wolfshark/Banner01PNG.png?t=1207537943);
height: 236px;
}

Comments

( 14 comments — Leave a comment )
av8rmike
Apr. 7th, 2008 03:57 pm (UTC)
You can add background-repeat: no-repeat; to the #header-inner {} section to stop the repeating, and/or add a width: statement.

Moving the header text could be a little more involved. Where in the sidebar would you want it?
wolfshark
Apr. 7th, 2008 04:03 pm (UTC)
Anywhere in the sidebar is fine - I just need to get it off the top, since it's obscured by my header!
wolfshark
Apr. 7th, 2008 04:15 pm (UTC)
Thanks - that worked for making it so the header only appears once, but how do I make it centered?
av8rmike
Apr. 7th, 2008 04:20 pm (UTC)
Add background-position: top center; to the #header-inner{} block.

Or, maybe you'd want to try bottom or right, so that the header text can be re-positioned elsewhere in the header box.
wolfshark
Apr. 7th, 2008 04:27 pm (UTC)
Is there a way to position the text at the very top?
av8rmike
Apr. 7th, 2008 08:51 pm (UTC)
Try:
#header-content { margin-top: 0;}
wolfshark
Apr. 7th, 2008 09:00 pm (UTC)
Okay, I appreciate all your help. I've managed to center the header, but it's at the top regardless of what I do. How do I move it to the bottom of the header space?

(Honest, I'm not stupid, just frustrated!)
av8rmike
Apr. 7th, 2008 09:18 pm (UTC)
This took me a couple tries, too, because it's a little more complicated.
Add this:
padding: 75px 0 0 0;
to the #header {} block. Then, add this section:
#header-text {
    position: absolute;
    top: 0;
}
You might want to adjust the "75" until you get the look you want. If this isn't what you were looking for, let me know.
wolfshark
Apr. 7th, 2008 09:24 pm (UTC)
Yay! That worked!

Thank you so much!
coffeecocktails
Apr. 7th, 2009 07:50 pm (UTC)
EDITED TO ADD: Figured how the answer to the below question myself :-) Thanks so much for such a helpful community, I wouldn't have got there just using my own brain!


Hey, I know you gave this help a long time ago, but... I have a further question if you don't mind :-)

Everything above worked as you said, but I was wondering whether there was some way to NOT have the journal title displayed above the header - just the link-bar. The journal title is in big letters which kind of clash with my header picture, so I was wondering if I could ditch it altogether (but still keep the other stuff).

Thanks!

Edited at 2009-04-07 08:32 pm (UTC)
av8rmike
Apr. 8th, 2009 01:53 am (UTC)
Sorry I didn't get to you sooner, but I'm glad you figured it out. If you look through the tags enough, most questions have already been answered somewhere.
choco_dreamer
Apr. 12th, 2009 04:39 am (UTC)
hi, i'm completely new to CSS [and LJ] and i'm sorry if you have answered this before [i checked through the tags again and again but couldnt find what i wanted] but i have the same question that 'coffeecocktails' [the previous user] has - is there any possible way i can ditch the journal title from appearing on my page all together? thanks heaps in advance!
choco_dreamer
Apr. 12th, 2009 06:15 am (UTC)
solved! found it under another tag on this website - thanks :)
klingonlady
Jan. 18th, 2010 05:25 am (UTC)
Thanks!! I just wanted to tell you this gave me exactly what I needed!!!
( 14 comments — Leave a comment )

Latest Month

March 2016
S M T W T F S
  12345
6789101112
13141516171819
20212223242526
2728293031  

S2 Help Communities

Tags

Powered by LiveJournal.com
Designed by chasethestars