header images

HTML, CSS and anything else that deals with client side capabilities.

Moderator: General Moderators

Post Reply
aravona
Forum Contributor
Posts: 347
Joined: Sat Jun 13, 2009 3:59 pm
Location: England

header images

Post by aravona »

I'm having some trouble aligning some images in my header.

I've got some CSS code that controls the header, and two images of which one needs to be in the center and the other needs to be aligned left. I've tried a couple of different things, managed to make my entire images remove themselves from the header entirely even.

This is the header code (back to working without any alignment)

Code: Select all

#header {
    background: #1f70b3; 
    background-image: url('images/logo.png');
    background-repeat:no-repeat;
    background-position:top left; 
    /*border-bottom: 1px double #000;
    border-left: 1px solid #000;
    border-right: 1px solid #000;
    border-top: 1px solid #000;*/
    font: italic normal 230% "Comic Sans MS", Arial;
    letter-spacing: 0.2em;
    padding: 15px 10px 15px 60px;
    height:400px;
    margin-left: 60px;
    margin-right: 53px;
    margin-top:12.5px;
}
 
#header a {
    color: #fff;
    text-decoration: none;
}
 
#header a:hover {
    text-decoration: underline;
}
And my html:

Code: Select all

<body <?php body_class(); ?>>
<div id="rap">
<h1 id="header"><img src="http://www.site.co.uk/aravona/blog/wp-content/themes/Test_newtheme/images/nav1.jpg" />
<br />
<img src="http://www.site.co.uk/aravona/blog/wp-content/themes/Test_newtheme/images/flash.jpg" />
</h1>
<div id="content">
heres a link to the site so you can see the mess (some of it is on purpose lol but not the header!) site
User avatar
pickle
Briney Mod
Posts: 6445
Joined: Mon Jan 19, 2004 6:11 pm
Location: 53.01N x 112.48W
Contact:

Re: header images

Post by pickle »

So you want your background image to be left aligned, and the menu-type image to be centered? Using "text-align:center" seems the easiest.

You can really shrink down your CSS as well:

Code: Select all

#header {
  background: #1f70b3 url('images/logo.png') no-repeat left top;
  border: 1px solid #000;
  border-bottom-width:0px;
  font: italic normal 230% "Comic Sans MS", Arial;
  letter-spacing: 0.2em;
  padding: 15px 10px 15px 60px;
  height:400px;
  margin: 12px 53px auto 60px;
}
You can't have 12.5 pixels either
Real programmers don't comment their code. If it was hard to write, it should be hard to understand.
aravona
Forum Contributor
Posts: 347
Joined: Sat Jun 13, 2009 3:59 pm
Location: England

Re: header images

Post by aravona »

Thanks, I haven't got around to tidying any of my CSS up yet :)

My design has now be altered by the people I'm doing it for. Back ground image is coming out to be an image thats linked to a url I've not bee given yet. So now I've got at align that image left, the nav bar image right and the flash centered underneath those two. I may give up and use a table because all this then has to be centered on the website, and the background altered - and then the other php generated items have to be centered to the header.
Post Reply