Log in

View Full Version : 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.


#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
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:

#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.


<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><!-- end of headerimages -->
</div><!-- end of header -->
<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:


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

#headerimages img {
float: left;

}


with:


<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 (http://www.evolutionbusinessservices.co.uk/charlene/blog/)
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.
Aravona
02-02-2010, 04:33 PM
I'm using the Classic theme as a template and basically changing what i need to change from there, and mostly its working well.

I did add in <div id="header"></div> instead of the <h1> and it just removed my images from my page entirely. I had to put the <h1> tags back in to get them to re-appear.
simcomedia
02-03-2010, 06:27 PM
I think the point I was making is that the images shouldn't be inserted in between the <h1 id="header"></div> tags. That's the blog's title tag and not a place for images to appear. Somewhere inside your header, in between the <div id="header"></div> tags, you should insert the images.
Aravona
02-04-2010, 09:16 AM
I used a table instead, and this is working so SOLVED.