Change text attributes in middle of line?

[hymer]

I have a line of code below where I want to manipulate the size, style, and alignment of the two words "Mobile Site" within that line of text.

I can do this if I wanted Mobile Site to be on a separate line. But, I want it on the same line with the other text. So I don't think I want to use a "p class" or a "div class".

Right now, Mobile Site appears as an image. I want the same exact look except in text instead of the image.

Is there a way to setup the CSS so that I can keep Mobile Site on the same line but change the size, style, and make it align left?

Thanks,

Bob

___

<div id="lead1"><h1><a href="http://www.example.com/mobile">Mobile
Site</a><a href="user-interface-design.html" title="User Interface
Design">USER INTERFACE DESIGN</a> - <a href="usability.html"
title="Usability">USABILITY</a> - <a href="human-factors.html"
title="Human Factors">HUMAN FACTORS</a> - <a href="ergonomics.html"
title="Ergonomics">ERGONOMICS</a></h1></div>

[edited by: tedster at 6:36 am (utc) on Feb. 3, 2008]
[edit reason] no personal urls please [/edit]

[swa66]

There are a number of ways to attack this.

But let's first correct something: a <div>, a <p>, anything can be styled and rendered how you like in CSS, as inline as block as anything you can dream of.

It looks like you're trying to build a menu?
Most of us use nowadays a <ul> and completely change the way it looks.
Also one of the accessibility rules tell us not to use <a> tags right next to each other.

<span> might be one trivial way, but there really is no need to go down that path:

You can add a class on *any* element, including the one <a> you want to target.

.select {color:red;}
<div class=""><h1><a href="#" class="select">this one</a><a>not this one</a></h1></div>

Another way is that you can target e.g. the first child of another element.

#lead1 h1 a:first-child {color: red;}

The standard will allow much more ways to target something, but let's not push it. I guess the "challenged" IE will have to cope with it in the end.

[lavazza]

you can try using SPAN

e.g.

<div id="lead1"><h1><a href="http://www.example.com/mobile"><span class="myClassName">Mobile Site</span></a> etc...

OR

assign a class to the relevant A tag

e.g.

<div id="lead1"><h1><a class="myClassName" href="http://www.example.com/mobile">Mobile Site</a> etc...

[edited by: tedster at 6:37 am (utc) on Feb. 3, 2008]
[edit reason] switch to example.com - it can never be owned [/edit]

[hymer]

Thanks Guys,

Here is what I tried and it seems to work well. I want to keep Mobile Site away from the other headings and to have it look different.

Does this seem OK to you?

Thanks Again,

Bob

<div id="lead1"><h1><a class="mobile" href="http://www.example.com/mobile">Mobile Site</a><a href="user-interface-design.html" title="User Interface Design">USER INTERFACE DESIGN</a> _________

.mobile{
text-align:left;
font-size: 80%;
font-style: italic;
font-weight: bold;
padding: 0px 180px 0px 0;
font-family: cursive;
}

[edited by: tedster at 6:38 am (utc) on Feb. 3, 2008]