Keeping text from wrapping w/ CSS?

ccc · Feb 27, 2003

Hi, I'm new to CSS so this is probably very basic a question.

I have IE 6.0 and when I open my favorites window (as you probably know) it doesn't drop down but opens on the left side of the screen pushing whatever web page I'm on over to the right. The problem is that to compensate, the web page that I'm building using CSS, wraps the text - moving it over to the left and down one line- when I'd rather it didn't. I'm not aware of the rule for turning off wrap. I want the text to stay on the same line when the favorites window is opened even if it won't be all seen on the screen. Here is the code with the text links I don't want to wrap:

H1 { color: white; font-size: 50px; font-family: impact }
H2 { text-indent: 30px; position: justify; left:1px; top: 1px; color: white; font-size: 20px; font-weight: bold; font-family: impact; line-height: 19px; border: 3px double yellow; }
p.first {color: yellow; font-size: 20px; font-style: italic; font-weight: bold}

-->
</STYLE></HEAD>
<BODY BGCOLOR="#000000">
<H1><a href="C:My Documentslink.html">SITENAME.COM</a></H1>
<H2><a href="link">TEXTLINK BID</a> <a href="link">ANOTHER TEXT LINK</a> <a href="link">ACCESS ACCOUNT</a></H2>
<p class="first">LEARN ABOUT:</p>
</BODY>
</HTML>

H2 is the line/header that's wrapping. I tried position: absolute and position: relative. It still wants to wrap. The tutorial I read didn't explain how to stop this insideous text wrapping behavior.

I'm also using a lot of non-breaking space entities between the links in H2 and I'm wondering if there's a better way to position the links on the same line and keep them there without using non-breaking space entities. Okay, that all. Thank you.

deadserious · Feb 28, 2003

Re: Keeping text from wrapping w/ CSS?

Originally posted by ccc
Hi, I'm new to CSS so this is probably very basic a question.
I want the text to stay on the same line when the favorites window is opened even if it won't be all seen on the screen.

I don't think you really need to worry about how a page looks while someone is looking at their favirotes. :D But anyways I think your problem is as you mentioned with all the non breaking space characters you have in there.

You could probably solve this and postion the links how ever you want by using tables

ccc · Feb 28, 2003

I would love to use tables to fix this! However, I've been told it was not good practice to use tables to control layout. I'm not school trained- I'm picking up CSS in bits and pieces around the internet- and all the different advice is a little confusing.

There has to be a way to control format in CSS without using tables. I would find it very limiting and a huge disappointment if CSS didn't let me control text "overflow?" when my favorites folder is opened. It looks terrible and is really unacceptable. I already spent days designing my site using tables only to be told I shouldn't use them for layout. I find tables gives me the best control over wrapping or text "overflow?" than any tag so far but I want to do it correctly (whatever "correct" turns out to be.

As for the non-breaking space entities- the only reason I'm using them is, using CSS, I don't know how to put some distance between text links or just plain text on the same line. I tried align center and align right but it doesn't align the text far enough away. I realize with CSS you can position a header or paragraph anywhere you want on the page however I have no clue how to do it with only certain parts of a single header. For instance, if "text link 1" and "text link 2" are in the same header and go on the same line, I know how to position the whole header anywhere on the page but if I want to position only "text link 2" on the extreme right of the page, I have to resort to non-breaking space entities because CSS seems to offer no other way to control positioning of individual text within a header or paragraph. Well, actually there is a way but it does not apply to the sentences but all words in a rule so it wouldn't help me.

Please tell me I didn't spend all this time learning CSS ( which is supposed to give greater flexability and control of layout ) only to be forced to resort to using tables for formatting again. If that's the case, why would I want to use CSS at all?

DarkDevil · Feb 28, 2003

Try...

BODY {
white-space : nowrap;
}

... I haven't use this... so i'm not sure if it will work, but apparently its suppose to determine how an element is treated... thus... nowrap would make it not wrap... the one thing is though, the text will come out as one long line. So you have to set your seperate lines using <br> tags

btw, you may want to specify a class or change the target from body to something else... it's been a while since i've had to do css for whole bunchs of text... and since ALL of my "friends" who gave me free hosting have experianced some problems with their servers i have no place to pratice css, let alone php and all that other jass...

ccc · Feb 28, 2003

Cool! Daredevil! You saved my web page! It worked...only I put it right in the H2 rule. I'll have to do the same for the rest if I can't get it to work in the body. But, no matter, it works!
Party on, dude! Excellent!

DarkDevil · Feb 28, 2003

Sweet, i'm glad i could help.
btw, whats the url to your site?

ccc · Feb 28, 2003

Sorry, there is no url. I'm doing this in note pad. It's going to be your average e-commerce site when I get it done.

DarkDevil · Mar 1, 2003

ya'know... i don't know what your average ecommerce website looks like. I know what your average Geocities website looks like, and your average WebHost webpage looks like, and even your average phpBB forum looks like... but not your average ecommerce website... = is this a problem?

pistol · Mar 1, 2003

hahah, no, actually, it means good things about you, DarkDevil! =D

I am going to use this space to rant about something I love ranting about. I will use the excuse that the poster mentioned not using tables and instead using CSS. My rant is entitled, "Die Yahoo, Die!"

Die Yahoo, Die! by Mitch "pistol" Hall

Imagine a web that is accessable by everyone, including the blind. Imagine a web that is easy to update, keeps your layout seperate from your markup, and is fun! How could a web like this possibley exist in our world of browsers which don't comply properly with the CSS specifications?

Bob Dylan said, "the answer, my friends, is blowing in the wind"

I like to say the answer, my friends, is blowing up Yahoo!

While major sites like yahoo(which still to this day uses a table-based layout) allow the browser companies to toddle around screwing up the specification while saying they are "fully compliant with all W3C reccomendations" only a few people actually decide to be bold and stop using annoying table based layouts. What really kicks my keister is when I see people who use both, which seems pretty silly to me("Well, they won't be able to see my site properly, but at least I'll give them the benefit of seeing my links in the proper place! whoopee!")

We were told five years ago that we'd be "stuck with bad browsers until 2002". Guess what? When I was still writing my weblog, I had a total of maybe 50 unique hits, and 3 of them used Netscape versions 5 and under, 2 of them Internet Explorer version 5. We're still stuck with bad browsers, and because we allow it.

Throw down your tables, my friends. It's the only way. If the browser companies aren't willing to do their job, let's do our job properly instead of allowing Microsoft, Opera, or Netscape to wear off on us.

DarkDevil · Mar 1, 2003

i'm confused as to what you mean by table based... explain... perhaps gimmie some examples...

pistol · Mar 2, 2003

By table-based layout I'm specifically talking about placement of items. If you go to your average corporate site they're still using tables to place items. Tables were invented to make tables, not layouts. Alas, HTML has nothing else to help you place items(short of the old school 1 pixel transparent gif dealy).

I specifically brought up Yahoo because they're one of many big corporate sites that use this ancient technique that many are still using. If you go to Yahoo and look at the source, you'll notice everything is placed with multi-nested tables.

This technique is no longer needed but is kept around due to people worrying people still using Netscape 4.0 might view their page.

As I see it, if you have a Commodore 64 still, you'd need to update and buy a newer computer to even get online, so why are we toddling with these Netscape 4.0 users when it's free to upgrade?

The positioning for Yahoo could be done with only a few lines of code with CSS. It would be faster to load for 56k users. They could use it for multiple pages and update their entire site in a matter of a couple days instead of a couple months.

On top of this, using CSS has other benefits. Your site is still legible in browsers that don't use CSS(text based browsers, voice modulators for the blind, etc..)

A site that has multi-nested tables for positioning would sound like a mess in a voice modulator. According to the Freedom of Information Act signed by Bill Clinton, this would mean that government funded sites that use multi-nested tables or tables at all for the placement of items would in this case be illegal in the United States. Of course, if you went to www.whitehouse.gov right now, you'd see they use tables for the positioning of items. (Not that the Bush Administration has followed any parts of the freedom of information act).

So, in closing, I will give you links to sites that don't use any tables whatsoever in the positioning of items, since they're rarer than those that do.

www.alistapart.com www.glish.com www.thenoodleincident.com

ccc · Mar 2, 2003

Originally posted by pistol
By table-based layout I'm specifically talking about placement of items. If you go to your average corporate site they're still using tables to place items. Tables were invented to make tables, not layouts. Alas, HTML has nothing else to help you place items(short of the old school 1 pixel transparent gif dealy).

I specifically brought up Yahoo because they're one of many big corporate sites that use this ancient technique that many are still using. If you go to Yahoo and look at the source, you'll notice everything is placed with multi-nested tables.

This technique is no longer needed but is kept around due to people worrying people still using Netscape 4.0 might view their page.

As I see it, if you have a Commodore 64 still, you'd need to update and buy a newer computer to even get online, so why are we toddling with these Netscape 4.0 users when it's free to upgrade?

The positioning for Yahoo could be done with only a few lines of code with CSS. It would be faster to load for 56k users. They could use it for multiple pages and update their entire site in a matter of a couple days instead of a couple months.

On top of this, using CSS has other benefits. Your site is still legible in browsers that don't use CSS(text based browsers, voice modulators for the blind, etc..)

A site that has multi-nested tables for positioning would sound like a mess in a voice modulator. According to the Freedom of Information Act signed by Bill Clinton, this would mean that government funded sites that use multi-nested tables or tables at all for the placement of items would in this case be illegal in the United States. Of course, if you went to www.whitehouse.gov right now, you'd see they use tables for the positioning of items. (Not that the Bush Administration has followed any parts of the freedom of information act).

So, in closing, I will give you links to sites that don't use any tables whatsoever in the positioning of items, since they're rarer than those that do.

www.alistapart.com www.glish.com www.thenoodleincident.com

After I saw you're previous post I went and peeked at yahoo's source code and was a little stunned to see they still use tables. Here I am, a newbie, struggling to get my future website (not even a published website!) to conform to the latest specs and there is Big ol' Yahoo still using tables. I always thought their site was slower to load than the other "big" sites too.

I'm not suprised thenoodleincident.com doesn't use tables. It doesn't look like they use much of anything at all. Can you say minimalism? Actually, i kind of like it. I think website design should reflect its owners artistic slant.

DarkDevil · Mar 2, 2003

interesting...
How about some examples of the html way vs the css way... I'm still a little confused as to how you control content location with css... unfortunately most of those sites you gave me use css referance files..

pistol · Mar 2, 2003

Well, I don't know exactly what you mean as far as a Vrs. site, but here are some simple CSS layouts from the aforementioned sites the noodle incident and glish.

http://glish.com/css/home.asp has the basic layouts that all longtime CSS layout peeps know by heart. The holy grail, 2 columns(alistapart.com style). two layouts with fluid measurements, the static width centered, and the nested float menu dealy.

You should notice that these examples are all hideous, but if messed around enough they look quite impressive.

http://www.thenoodleincident.com/tutorials/box_lesson/boxes.html was one of the earliest attempts to see what can be done with the CSS box properties. To this day, they're helpful(and sometimes tough to edit due to all the CSS hacks used to make them compatible with most browsers)

If you have the will, you can try to figure out the CSS hacks from the source of them, Tantek Celik, well known for working on Internet Explorer 5 for Macintosh(the first standards compliant browser). Here's the explanation: http://www.tantek.com/CSS/Examples/boxmodelhack.html

Ah, yes, this guy has a site that isn't all that useful, but neat. He does wierd things with CSS occasionally, some of it's really boring if you aren't a CSS nerd: http://www.meyerweb.com/eric/css/edge/

deadserious · Mar 2, 2003

"Like tables, there is another highly limiting structure that's composed of rows and cells: a prison. It's time for designers to break out."

That's a good way of putting I guess. I've never really got into css that much so I really don't know anything beyond the very basics.

I did a search on google for css vs tables and there's alot of results. http://www.google.com/search?hl=en&ie=UTF-8&oe=UTF-8&q=css+vs+tables

I honestly never new there was such a big debate over this, but I guess shows how much I know huh? :D

DarkDevil · Mar 3, 2003

I guess i'll have to practice what your preaching. Not only can the deaf hear your website. It makes you look more leet

DarkDevil · Mar 3, 2003

btw pistol, whats the url to your website?

pistol · Mar 4, 2003

ha.....well....i currently don't have one. i've been out of web design for over a year now.

I came here because bobbi heard I was into web design and invited me. I still enjoy talking about web design, and occasionally i mess around with some code or other, but I never really have anything i want to make a webpage for.

I've been putting more of my time to writing and school. Nothing published yet, but when it happens, you'll all be the first to know.

Pimple · Apr 1, 2003

omg, i never knew css could be used for an entire site layout :O

got all got at tables though... ffs

Keeping text from wrapping w/ CSS?

Account Closed

Established Member

Account Closed

Established Member

Account Closed

Established Member

Account Closed

Established Member

Established Member

Established Member

Established Member

Account Closed

Established Member

Established Member

Established Member

Established Member

Established Member

Established Member

Established Member

Similar threads

We're social

Pinned

Appreciation

Agreement