Text URL weblinks won't remain on same line as preceding and following text. Options

[lunghd]

Okeydokey - I'm so new to CSS that noob doesn't even begun to cover it...

I'm in the midst of converting my website over from html to css & slowly am learning how to manipulate things with CSS.

Be aware that I do still have lot's of html tags floating around that I know need to be removed, mainly font stuff & table background color tags. Those will get removed once I get the main transfers complete. Right now my main focus is just transferring the body contents from the html pages over to the css pages and then dumping the html pages into the galactic dust bin.

My question today is this: With html - I could place a text link <a href= yada yada.....> anywhere and the page would happily display exactly what I wanted, exactly where the link was placed in a sentence or line of text.

But with CSS I'm finding that using the same <a href= yada yada... > html tag puts the first part of my sentence here as normal but then

my link to whatever gets positioned here on the next line like this

with the rest of my text then being positioned below both the original line of text and the link like this.

In other words, the single sentence containing a linked URL to another page (or site) is being split out of the single line as if a carriage return had been place before, and after, the linked URL. (Did that make any sense???) I am at a loss how to keep those same links positioned on the same horizontal line of text and do not have the nomenclature to ask the proper question with google, etc. I've simply lost too much time trying to figure this one out so I have to be direct and do a bit of begging now:

What is the proper syntax / nomenclature to use to place a text url / link within a string of text and not have it split the string apart into seperate lines? An example would be HIGHLY appreciated as I've googled 7 ways to Sunday but haven't hit the 'phrase that pays' and my Magic 8-ball isn't speaking to me anymore...

Here's one page that has been migrated over to CSS from html:

http://www.lunghd.com/Tech_Articles/Body/YJ_Flares.shtml

You'll find an example link just below the two photos about 2/3 down the page. The link url on this page that is exhibiting this behaviour is: http://www.lunghd.com/Tech_Articles/Body/TJ_Flares.shtml . (Close to, but not same URL!!!)

Thanks!

This post has been edited by lunghd: Oct 9 2006, 10:15 PM

[dougmanic]

You should remove the "display:block;". Basically, that, well, puts the link into a giant block of space. When you click and hold the cursor over the link you should see a large outline around the link.

[lunghd]

You should remove the "display:block;". Basically, that, well, puts the link into a giant block of space. When you click and hold the cursor over the link you should see a large outline around the link.

Thank you sir! I shall give that a whirl straight away! That's in one of my includes, the style sheet for those pages. Hmmm. No wonder ALL the new CSS pages were doing that!

[jimlongo]

Removing the display:block from the a identifier in the css should do it.

oops, just typed that at the same time as doug

This post has been edited by jimlongo: Oct 9 2006, 10:55 PM

[lunghd]

Hey hey! Thanks to both of you! That indeed fixed it!

(Thanks again, Pandy... I LOVE includes! )

I'm new to CSS & started by grabbing a basic template then just hacking away at it trying to understand what did what. That artifact was original to the template & was one of the things that I didn't touch, not understanding what it did.

Those are quick eyes ya'll have. And once again, it's a case of me not having the correct nomenclature to phrase the question. I've seen that syntax before but without any mention of how to use it, or where... Now I know the answer to both. THANKS!

As Jethro Clampett once said: "Ya'll dun learnt me sumthun!"

[dougmanic]

No problem. With much practice, you'll figure out how CSS works quickly.

[pandy]

You probably grabbed that CSS from a menu. Making an inline element block makes it break the line, as you've noticed, and fill out all available width, just like if it was a DIV. That's useful for making button-like links if the width is limited (even if lists are more often used for this purpose nowadays).

CODE

<div id="nav">
<a href="">Blah bla</a>
<a href="">Blah bla</a>
<a href="">Blah bla</a>
...
</div>

CODE

#nav     { width: 7em }
#nav a   { display: block;
           color: black; background: yellow;
           border: 2px solid;
           margin-bottom: .1em }

[lunghd]

You probably grabbed that CSS from a menu. Making an inline element block makes it break the line, as you've noticed, and fill out all available width, just like if it was a DIV. That's useful for making button-like links if the width is limited (even if lists are more often used for this purpose nowadays).

CODE

<div id="nav">
<a href="">Blah bla</a>
<a href="">Blah bla</a>
<a href="">Blah bla</a>
...
</div>

CODE

#nav     { width: 7em }
#nav a   { display: block;
           color: black; background: yellow;
           border: 2px solid;
           margin-bottom: .1em }

I'm not sure what use the template made of that since it didn't have any menu in it. (Probably just to drive me bonkers.) At any rate, I'm glad to see how to fill the entire width like that. If I understand correctly, that will just fill only the current DIV's width where it is placed such as left or right margins?

I think I just answered my own question... that was probably in there to make menu buttons in the right hand margin that I am using for an advertising column. *doh!* A series of links that would automatically stack up, one on top of the other down the entire div making a nice, neat menu. *Double doh!*

Ok - that's cool! And your little snippet above could create colored "buttons" (blocks with text) if I changed the color & background... Correct?

[pandy]

You don't like my carefully chosen colors?

Yes, you can change whatever you want. Note that IE may need a width or height or the whole block won't be clickable. Usually it works to add 'width: 100%' to #nav a. Otherwise there are hacks to feed a height only to IE, but use with care... Welcome to the not so wonderful world of CSS incompatibility.

But as said, I think the consensus is that a list is the most appropriate container for navigation links. Again, the display property can make it not look like a list. Or you can float the list items. But simple buttons are probably enough to start with. You do includes now, so no hassle to update, right?

[lunghd]

You don't like my carefully chosen colors?

Yes, you can change whatever you want. Note that IE may need a width or height or the whole block won't be clickable. Usually it works to add 'width: 100%' to #nav a. Otherwise there are hacks to feed a height only to IE, but use with care... Welcome to the not so wonderful world of CSS incompatibility.

But as said, I think the consensus is that a list is the most appropriate container for navigation links. Again, the display property can make it not look like a list. Or you can float the list items. But simple buttons are probably enough to start with. You do includes now, so no hassle to update, right?

Heh - I've already found one of those little incompatibilities in how my pages are displaying between FF & IE. Nothing major, just a small margin gap up top in FF that I can play with fixing later.

I'll have to play with those clicky buttons later but I'm glad that they were what I thunkit. The color thing is funny - if you only knew how many font tags I've deleted today... and if you now tell me there is a simple and easy method to parse out the font tag then I shall poke you with a sharp stick.


I do have to say thanks again for pointing out includes; without which I'd still be doing it the hard way. (Not that I'm prone to doing it the easy way... )