Layout question

**Aravona** · 01-29-2010, 03:32 PM

I've got three images in my header, one is part of the background, the other two are not. I want one to be centered and one to be on the left, but they both use the same header CSS.

Code:

#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;
}

I can easily align them both one way or the other but I'm having a bit of an issue getting them to be separtely aligned.

I haven't used CSS in ages, so I'm putting this down to being rusty (I've done a lot of php haven't CSSed in over a year) Sorry if this seems really trivial. Any help would be greatly appriciated by my tired mind.

**Nile** · 01-29-2010, 09:53 PM

Are you giving each div the ID of header? That's not valid HTML... Also, please provide ALL your HTML, and ALL your CSS.

**Aravona** · 01-30-2010, 09:48 AM

No I wasn't giving them the ID of header, just the 1 div that controls the header is that. Not all of my CSS relates, and the html is mostly php, which I don't have access to at home.

I wanted to control my images with their own IDs i.e < img id=" " src= " " > just to align them. I'll post the code for the html when I have access again.

**traq** · 01-31-2010, 07:02 AM

Originally Posted by Aravona

I wanted to control my images with their own IDs i.e < img id=" " src= " " > just to align them...

That is the ideal solution. Is there some reason that doesn't work?

**Aravona** · 02-01-2010, 10:40 AM

Well probably me is why it didn't work.

This is the header section of my CSS:

Code:

#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;
	text-align:center;
}

#header a {
	color: #fff;
	text-decoration: none;
}

#header a:hover {
	text-decoration: underline;
}
#headalign {

	float: left;
}

#headalignC {

	float: center;
}

but this just shoved both images to the left.

**traq** · 02-01-2010, 02:18 PM

I need to see your html markup. what I was referring to was not adding rules to your #header div, but to each image (individually) in the #header div that you're trying to position.

**Aravona** · 02-01-2010, 02:24 PM

okies this is the part of the header where the images are, the rest is php.

Code:

<body <?php body_class(); ?>>
<div id="rap">
<h1 id="header"><img id="headalignC" src="http://www.site.co.uk/aravona/blog/wp-content/themes/Test_newtheme/images/nav1.jpg" />
<br />
<img id="headalign" src="http://www.site.co.uk/aravona/blog/wp-content/themes/Test_newtheme/images/flash.jpg" />
</h1>
<div id="content">
<!-- end header -->

**simcomedia** · 02-02-2010, 02:36 AM

Ummm, bad news there, bro. That HTML has no mention of your #header div.

Here's how to fix your problem:

1. create a div for the two images like this:

#headerimages {
width: 500px; // or whatever width would cover both images
float: left; // if you want it floated left within your header
margin: 0 0 10px 20px; // this spaces it 10px from the bottom and 20 from the left border of your header. change it however you want it
}

#headerimages img {
float: left;
margin-right: 15px;// so there's space between the two
}

2. change your html like this:

<div id="rap">
<div id="header>
<div id="headerimages">
<img src="image1.jpg" alt=""/>
<img src="image2.jpg" alt=""/>
</div>
</div>
<div id="content">

**Aravona** · 02-02-2010, 09:07 AM

The header is linked here:

<h1 id="header">

which works, because thats how wordpress set it up to begin with so I'm loath to alter it.

I will try putting a div just for those image though. And lol, im not a guy XD Let you know if its a no go or if I do have to change the template to get it to work

However - I dont want to have them both to the left - one needs to be in the center, the one underneath needs to be on the left.

EDIT Tried:

Code:

#headerimages {
width: 500px; 
float: left; 
}

#headerimages img {
float: left;

}

with:

Code:

<body <?php body_class(); ?>>
<div id="rap">
<h1 id="header">
<div id="headerimages"><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" />
</div>
</h1>
<div id="content">

Just removed one of my images. Even with changing the h1 to div.

heres the site

**simcomedia** · 02-02-2010, 04:15 PM

This tag: <h1 id="header"> is referring to the formatting of the H1 tag, which is not the 'header' itself. That's just the place where your blog title will reside and telling it to format the text, color and size to the specifications of the #header styling. If you're trying to put stuff between these:

<h1 id="header"></h1> then it's going to mess up the whole layout.

Not sure what version of wordpress you're using but there should be a <div id="header></div> that wraps around all the contents of the header area.

Thread: Layout question

Thread Tools

Search Thread

Layout question

Bookmarks

Bookmarks

Posting Permissions