Jump to content
  • Advertisement
Sign in to follow this  
ArchG

[web] css + line breaks

This topic is 4128 days old which is more than the 365 day threshold we allow for new replies. Please post a new topic.

If you intended to correct an error in the post then please contact us.

Recommended Posts

Hello, I have some dynamic menus..that change.. some of the menus are more than one word long...for example pretend this is a menu item.
a long menu item that cannot break
the problem is ...if it's that long...it will end up line breaking in the middle...like.."a long menu item" will be on one line...and on the next line will be "that cannot break"...is there a way to make it (using html or css ) not break in the middle..and rather, see if there is enough room..if there's not..put the WHOLE phrase on a new line? Thanks, If this doesn't make any sense please say and i'll attemp to exmplain a little better. ArchG

Share this post


Link to post
Share on other sites
Advertisement
a long menu item that cannot break

Resize the browser to see that this is a long menu item that cannot break but none of the other text is.

Share this post


Link to post
Share on other sites
wow..that was quick and easy..would have never thought of that..

thanks alot bud!

Share this post


Link to post
Share on other sites
A more semantic way of doing this (you can use unordered lists for example to display your links, but we won't get into that here)


<style type="text/css">
#nav a {display:block;margin:0 5px 0 5px;float:left;}
</style>

<div id="nav">
<a href="link">link 1</a>
<a href="link">link 2</a>
<a href="link">link 3</a>
<a href="link">link 4</a>
</div>




Play around with it, add padding and backgrounds and hover events. CSS can actually be "fun" to learn.

Share this post


Link to post
Share on other sites
Quote:
Original post by markadrake
A more semantic way of doing this (you can use unordered lists for example to display your links, but we won't get into that here)

*** Source Snippet Removed ***


Play around with it, add padding and backgrounds and hover events. CSS can actually be "fun" to learn.



Dynamic CSS is even more fun!


input, select, textarea {
border: 1px solid #aaa;
padding: 2px;
}
input:focus, select:focus, textarea:focus {
background-color: #f6f6f6;
border: 1px solid #444;
}
input[type="text"],
input[type="password"] {
width: 150px;
}
input[type="checkbox"],
input[type="checkbox"]:focus {
border: 0;
}




The 'type' attribute can be any attribute in any HTML tag, even custom ones. What the W3C or any other sites I've seen haven't showed you is that while you can do

input[class|="check"] (| separated values)
or
input[class~="check"] (space separated values)

You can also do

input[class*="check"]

which will match "check" and "checkbox". I was very glad to find this :D

Share this post


Link to post
Share on other sites
The above selectors will work everywhere except IE versions 6 and below...not that they are much of an issue any more.

Share this post


Link to post
Share on other sites
Sign in to follow this  

  • Advertisement
×

Important Information

By using GameDev.net, you agree to our community Guidelines, Terms of Use, and Privacy Policy.

We are the game development community.

Whether you are an indie, hobbyist, AAA developer, or just trying to learn, GameDev.net is the place for you to learn, share, and connect with the games industry. Learn more About Us or sign up!

Sign me up!