How to change text in middle of line of code?

#1

Hello,

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

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

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?

You can see this at www.usernomics.com but I am using an image instead
of text right now.

Thanks,

Bob

___

<div id="lead1"><h1><a href="http://www.usernomics.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>

#2

In article <47a4fbaa$0$36391$742ec2ed (AT) news (DOT) sonic.net>,
"Hymer" <ergobob@sonic[REMOVE].net> wrote:

Quote:

Hello,

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

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

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?

You can see this at www.usernomics.com but I am using an image instead
of text right now.

Thanks,

Bob

___

div id="lead1"><h1><a href="http://www.usernomics.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

Do you want to just do the words "Mobile Site" in html text and
be rid of the image of this text while leaving the image of the
rest of the items on that line in image form? Surely not?

So do you want all those items in HTML text, ie. Mobile Site, Job
Board, ... ?

And now what is exactly the question? How to not let the words
wrap? How to position them as a group?

The first thing needs to be done is to put them into a horizontal
list format and then apply css to the ul and li's. Interested in
h=ving a go at this and supplying a url for just the relevant
bits you are having trouble with?

--
dorayme

#3

Quote:

Hello,

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

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

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?

You can see this at www.usernomics.com but I am using an image
instead
of text right now.

Thanks,

Bob

___

div id="lead1"><h1><a
href="http://www.usernomics.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

Do you want to just do the words "Mobile Site" in html text and
be rid of the image of this text while leaving the image of the
rest of the items on that line in image form? Surely not?

So do you want all those items in HTML text, ie. Mobile Site, Job
Board, ... ?

And now what is exactly the question? How to not let the words
wrap? How to position them as a group?

The first thing needs to be done is to put them into a horizontal
list format and then apply css to the ul and li's. Interested in
h=ving a go at this and supplying a url for just the relevant
bits you are having trouble with?

Hello,

It is the line that says "Mobile Site <space> User Interface
Design - Usability - Human Factors - Ergonomics" that I am talking
about. This is all text except for Mobile Site that is an image. I
want to remove the image in that line.

I am not talking about the line that says " Mobile Site - Job Board -
Ergonomics Store". These are all images and are OK as is.

So, I want to keep it looking the same as it appears at
www.usernomics.com but I want the image that now reads Mobile Site to
be text rather than an image. That is, the size, font, and position
stays the same as it is but is now text rather than an image.

I do want the line to be liquid as it now is for smaller screens.

Thanks a lot,

Bob

#4

In article <47a51648$0$36377$742ec2ed (AT) news (DOT) sonic.net>,
"Hymer" <ergobob@sonic[REMOVE].net> wrote:

Quote:

It is the line that says "Mobile Site <space> User Interface
Design - Usability - Human Factors - Ergonomics" that I am talking
about. This is all text except for Mobile Site that is an image. I
want to remove the image in that line.

I am not talking about the line that says " Mobile Site - Job Board -
Ergonomics Store". These are all images and are OK as is.

So, I want to keep it looking the same as it appears at
www.usernomics.com but I want the image that now reads Mobile Site to
be text rather than an image. That is, the size, font, and position
stays the same as it is but is now text rather than an image.

I do want the line to be liquid as it now is for smaller screens.

Well, you need to move the <H1> to the left of MOBILE SITE:

Something like this:

<div id="lead1"><h1><a href="http://www.usernomics.com/mobile"
title="Mobile Site">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>

--
dorayme

#5

Quote:

It is the line that says "Mobile Site <space> User Interface
Design - Usability - Human Factors - Ergonomics" that I am talking
about. This is all text except for Mobile Site that is an image. I
want to remove the image in that line.

I am not talking about the line that says " Mobile Site - Job
Board -
Ergonomics Store". These are all images and are OK as is.

So, I want to keep it looking the same as it appears at
www.usernomics.com but I want the image that now reads Mobile Site
to
be text rather than an image. That is, the size, font, and position
stays the same as it is but is now text rather than an image.

I do want the line to be liquid as it now is for smaller screens.

Well, you need to move the <H1> to the left of MOBILE SITE:

Something like this:

div id="lead1"><h1><a href="http://www.usernomics.com/mobile"
title="Mobile Site">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

--

Hi Again,

That is what I tried as a starting point. But that makes the text
Mobil Site have the same attributes as the other words.

The basis of my question is how to set that up so that I can control
the text My Site independently and change it's attributes alone.

Right now it is all controlled by the following CSS:

#lead1 h1{ /* Used for Top Banner ONLY */
font-size: 99%;
color: #f7f0f7;
background: #9c989c;
text-align: center;
margin: 0;
padding: 2px 15px;
letter-spacing:2px;
border-top: 2px solid black;
}

Can you see a way to manipulate My Site alone?

Thanks Again,

Bob

#6

"Hymer" <ergobob@sonic[REMOVE].net> wrote

Quote:

Can you see a way to manipulate My Site alone?

Stick it in a <span> and style that.

--
Richard.

#7

Hymer wrote:

Quote:

It is the line that says "Mobile Site <space> User Interface
Design - Usability - Human Factors - Ergonomics" that I am talking
about. This is all text except for Mobile Site that is an image. I
want to remove the image in that line.

I am not talking about the line that says " Mobile Site - Job
Board -
Ergonomics Store". These are all images and are OK as is.

So, I want to keep it looking the same as it appears at
www.usernomics.com but I want the image that now reads Mobile Site
to
be text rather than an image. That is, the size, font, and position
stays the same as it is but is now text rather than an image.

I do want the line to be liquid as it now is for smaller screens.

Well, you need to move the <H1> to the left of MOBILE SITE:

Something like this:

div id="lead1"><h1><a href="http://www.usernomics.com/mobile"
title="Mobile Site">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

--

Hi Again,

That is what I tried as a starting point. But that makes the text
Mobil Site have the same attributes as the other words.

The basis of my question is how to set that up so that I can control
the text My Site independently and change it's attributes alone.

Right now it is all controlled by the following CSS:

#lead1 h1{ /* Used for Top Banner ONLY */
font-size: 99%;
color: #f7f0f7;
background: #9c989c;
text-align: center;
margin: 0;
padding: 2px 15px;
letter-spacing:2px;
border-top: 2px solid black;
}

Can you see a way to manipulate My Site alone?

Thanks Again,

Bob

Perhaps I'm missing something but how about a <span class="foo">?

--
Ed Mullen
http://edmullen.net
http://mozilla.edmullen.net
http://abington.edmullen.net
Don't be accommodating, be honest. I honestly don't have much more time
for anything else.

#8

Ah, if that is what you are worried about, <span> comes to mind.

(I think I am running out of steam about saying things about
quoting. Are there any pills one can take to help. Steam pills?

Would someone please knock up a simple little url with a dead
simple "How-to-quote from GG" tute. Someone tell Blinky to do
this, this is his field.)

--
dorayme

#9

Scripsit Hymer:

Quote:

Hello,

Please learn to quote on Usenet. This includes attributions and quoting
only the relevant part, typically a sentence or two.
of the items on that line in image form? Surely not?

Quote:

It is the line that says "Mobile Site <space> User Interface
Design - Usability - Human Factors - Ergonomics" that I am talking
about.

It should be rewritten (as text links) before trying to style it.

And the context needs a rewrite too - the line gets partly hidden by the
USERNOMICS logo, unless the browser window is inconveniently wide.

Quote:

This is all text except for Mobile Site that is an image.

No it isn't. All the links are images.

If you turn them into text links, possibly putting them inside list
markup, you can then style it as a horizontal list using techniques that
have often been discussed in this group.

But I don't think it pays off to deal with such minor details, since the
page needs a redesign. Maybe you should learn usability before setting
up a site that sells it. I mean specifically lack of sufficient color
contrast, justified lines (which are just awful to read e.g. in a 600
pixels wide window), and excessive amount of navigation (ever head of
Jakob Nielsen and "less is more"?). There are also minor issues like
displaying the current date and time with no explanation, so many people
will misunderstand it as "last updated" info. (After all, who would be
foolish enough to waste screen real estate by displaying some info that
each user has available in his computer, often directly on screen?)

My point is: don't waste time trying to fix a poorly painted corner of a
house that needs to be rebuilt before it is habitable.

--
Jukka K. Korpela ("Yucca")
http://www.cs.tut.fi/~jkorpela/

#10

Quote:

Something like this:

div id="lead1"><h1><a href="http://www.usernomics.com/mobile"
title="Mobile Site">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

Thanks for the help and comments guys. I will post without quoting too
much in the future.

Jukka, I think you were looking at the wrong line of text. I was
referring to the one just below in the horrizontal line.

Dorayme, I did solve the problem like this:

<div id="lead1"><h1><a class="mobile"
href="http://www.usernomics.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>_________etc.

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

Does this seem OK?

Thanks Again,

Bob