Topic: css and crap

I am attempting to get an h1 and h4 text to align on the same line.  I want the h1 on the left, and the h4 on the right.  I have gotten this to work in a few ways, all of which seem crappy to me, but in IE it cuts the bg colour in half.  What is the best way to do this (it doesnt hve to be h1 or h4, just something i can control.)
Anyu ideas?

(similar to the "logged in as XXX and mark all as read" area here on PunBB)

2

Re: css and crap

<div>
<h1>Big header</h1>
<h4>Little header</h4>
</div>

div {text-align: right; background: whatever; height: 2.4em; line-height:2.4em}
h1 {float: left; text-align: left;}
h1, h4 {margin: 0;}

If the h1 and h4 are the same size then you can dispense with the height and line-height which will make everything wrap nicely.

There are other ways to do it and which is the most suitable depends on the circumstances e.g. fixed or variable width page, different size headers, align top or bottom etc.

3 (edited by AG 2007-01-21 19:04)

Re: css and crap

I usually use this:

h1, h4 {
display: inline;
}

I don't know if that is not as good of method, but I am pretty sure it works.

4

Re: css and crap

AG wrote:

I usually use this:

h1, h4 {
display: inline;
}

I don't know if that is not as good of method, but I am pretty sure it works.

That doesn't work. You end up with both next to each other on the left not one left and one right as was asked for. Plus because you are displaying inline you loose all the block level styling.

5

Re: css and crap

oh. I didn't read carefully enough. thanks for the info.

Re: css and crap

solved, thanks guys!

Re: css and crap

I didn't open another thread since this is roughly the same issue but with images instead of text.
I know very little of CSS so I thought I'd ask in here for some help smile

I want to put a image on the right side of the screen inside the header that would stay on the right side even if you resize the window. Also no text should be displayed.
I already have 2 images, one as the general background and another as a logo with transparency.

This is what I have:
http://img262.imageshack.us/img262/8629/badheader2gi.th.jpg
This is what I would like to have:
http://img407.imageshack.us/img407/2990/goodheader8xm.th.jpg

This is the relevant part of my CSS:

.pun #brdtitle { margin:0; padding:0;}

.pun #brdtitle h1 {padding:0; margin:0;
background-image : url(../../img/PTAnime/header_fill.jpg);
}

.pun #brdtitle h1 span {
font-size: 0; text-indent: -100px;
position:relative; 
color:#fff;

background-image : url(../../img/PTAnime/logo.png);
background-repeat: no-repeat;
display:block;
height:78px; 
padding:0; margin:0;
}

.pun #brdtitle p { 
position: absolute; 
top: 0; right: -100;
color:#fff;

}

.pun #brdtitle p span { 
float: right;
background-image: url(../../img/PTAnime/forbidden.gif);
background-repeat: no-repeat;
display:block;
height:78px; 
}

8 (edited by MrMister 2007-01-25 20:59)

Re: css and crap

*bump*
Since it's been a few days, ppl may not have seen this post, so bumping it up to help visibility smile
Anyone interested in helping out?

9

Re: css and crap

Off the top of my head and without trying it:-

.pun #brdtitle, .pun #brdtitle h1, .pun #brdtitle h1 span, .pun #brdtitle p {
  font-size: 0;
  line-height: 0;
  height: 0;
  padding: 0;
  margin: 0;
  background-color: transparent;
  }

.pun #brdtitle h1 span {
  display: block;
  padding-top: 78px;
  background-img: url(whatever);
  background-repeat: no-repeat;
  background-position: center right;
  }

.pun #brdtitle h1 {
  background-img: url(whatever);
  background-position: center left;
  background-repeat: no-repeat;
  }

Re: css and crap

can't you just put the image as a background-image on the element, and then use 'background-position: right top' or something similar to right-align it? That way, it will be right-aligned no matter the size of the containing element.