Ask a Question related to Macromedia Dynamic HTML, Design and Development.
-
Douglas Burton #1
Re: css buttons - formatting text breaks alignment ?
Okay, the first thing I see is that you haven't declared a DOCTYPE in your
web page. This causes modern browsers to revert to "quirks mode," meaning
that the browser renders the page the way older, non-standards-compliant
browsers would have. If you add a DOCTYPE to the top of the page (as you
should), your blue and pink areas disappear altogether, and everything else
gets resized and shoved about. That's the browser rendering the CSS in a
more modern way.
So, I would recommend a different approach:
1. Create the entire button image (with no text) as a GIF, rather than
trying to piece it together from various bits.
2. Markup your menu as an unordered list.
3. Write your CSS to use the button as the background for each <li> element,
with the text styled to your liking.
I think you'll end up with cleaner page markup and fewer CSS classes. Here's
a quick start on what I'm talking about:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="button.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="menu">
<ul>
<li><a href="#">button 1</a></li>
<li><a href="#">button 2</a></li>
<li><a href="#">button 3</a></li>
</ul>
</div>
</body>
</html>
Then the CSS:
#menu li a {
width: 120px;
text-align: center;
list-style: none;
font-size: 12px;
font-style: bold;
line-height: 24px;
font-family: Verdana, Arial, Helvetica, sans-serif;
background-image: url("button.GIF");
background-repeat : no-repeat;
}
That said, I hope I've pointed you in the direction you want to go. I've
made some assumptions about what you're trying to accomplish that may or may
not be correct. Also, this is just a start; there's more styling that's
necessary to make it work across browsers. I highly recommend Designing with
Web Standard by Jeffrey Zeldman and Eric Meyer on CSS for more detailed CSS
instruction.
Doug B.
Douglas Burton Guest
-
addWatermarkFromText- Text Alignment
I got the VB.Net sample code from the SDK zip and I'm programming against Acrobat 8. I had no problems modifying the code for my own use except for... -
text alignment buttons not active
I am trying to use contribute align left, center and right buttons to format text and images but am unable to. They are greyed out. What could be... -
UIScrollBar Breaks CSS Formatting
:confused; Hi people. I'm trying to load some CSS-formatted HTML text into a text field in Flash MX 2004. I've managed to assign the external... -
Alignment Buttons not functioning
The alignment buttons at the top of Contribute 3 are not functioning for my client. Is there a way that I can get them working again for him? -
Flash & Text alignment
I'd like to have a webpage with a Flash movie at the top and plain text (not part of the flash movie) just to the right of it. I can NOT use any... -
dark #2 Re: css buttons - formatting text breaks alignment ?
Hey Douglas
Thanks for the info mate, that was really helpful. I have designed websites
for a while now, but always in HTML, and this is my first attempt at trying
to make a site totally marked up with CSS, and so my first faltering steps
are quite untidy and probably convoluted judging by your neat css code.
However the reason I am usijng various bits to construct the buttons is that
the button text will be dynamic depending on which category the user is
coming from. I did end up working out a way of doing it, but im not sure how
the DOCTYPE declaration will affect it yet ... I see how its torn my
button.asp file apart, but if thats the proper way to do it, thats the way I
will do it from now on.
Again doug, thanks for the time - i have been toying with the idea of buying
Jeffrey Zeldman and Eric Meyer's books from amazon ... maybe its time I did.
cheers!
<dG />
"Douglas Burton" <doug@dougandsarah.net> wrote in message
news:bi1ipe$2ve$1@forums.macromedia.com...else> Okay, the first thing I see is that you haven't declared a DOCTYPE in your
> web page. This causes modern browsers to revert to "quirks mode," meaning
> that the browser renders the page the way older, non-standards-compliant
> browsers would have. If you add a DOCTYPE to the top of the page (as you
> should), your blue and pink areas disappear altogether, and everythingelement,> gets resized and shoved about. That's the browser rendering the CSS in a
> more modern way.
>
> So, I would recommend a different approach:
> 1. Create the entire button image (with no text) as a GIF, rather than
> trying to piece it together from various bits.
> 2. Markup your menu as an unordered list.
> 3. Write your CSS to use the button as the background for each <li>Here's> with the text styled to your liking.
>
> I think you'll end up with cleaner page markup and fewer CSS classes.may> a quick start on what I'm talking about:
> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
> "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
> <html>
> <head>
> <title>Untitled Document</title>
> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
> <link href="button.css" rel="stylesheet" type="text/css">
> </head>
> <body>
>
> <div id="menu">
> <ul>
> <li><a href="#">button 1</a></li>
> <li><a href="#">button 2</a></li>
> <li><a href="#">button 3</a></li>
> </ul>
> </div>
>
> </body>
> </html>
>
> Then the CSS:
> #menu li a {
> width: 120px;
> text-align: center;
> list-style: none;
> font-size: 12px;
> font-style: bold;
> line-height: 24px;
> font-family: Verdana, Arial, Helvetica, sans-serif;
> background-image: url("button.GIF");
> background-repeat : no-repeat;
> }
>
> That said, I hope I've pointed you in the direction you want to go. I've
> made some assumptions about what you're trying to accomplish that may orwith> not be correct. Also, this is just a start; there's more styling that's
> necessary to make it work across browsers. I highly recommend DesigningCSS> Web Standard by Jeffrey Zeldman and Eric Meyer on CSS for more detailed> instruction.
>
> Doug B.
>
>
dark Guest
-
Douglas Burton #3 Re: css buttons - formatting text breaks alignment ?
Happy to help!
Glad you worked it out. The <ul> markup is just one way to to do it, and it
would still allow you to make your button text dynamic. Are you pulling the
menu items from a database?
Cheers,
Doug
Douglas Burton Guest
-
Douglas Burton #4 Re: css buttons - formatting text breaks alignment ?
I see, yes. You have set up a tricky situation for yourself. I've been
looking for an existing example of the sort of thing you're doing, but I
haven't found anything yet. I'll keep you in mind if I come across
something. Meanwhile, you've got something that works for you, so carry on!
Doug
"dark" <darkgr33n@btclick.com> wrote in message
news:bi2lsq$p2u$1@forums.macromedia.com...the> hey doug
>
> yeah, menu items will come from database eventually, which is why i needbuttons,> width of the button itself to be dynamic ... could be 10 characters long,
> could be 40 characters long ... and why i had been chopping up theIE> to put a curved 'cap' on each end. much more difficult than i thought,
> especially when declaring the DOCTYPE!
>
> I have ended up with a slightly convoluted method but it appears to work
>
> code...
>
> <div class="menuButtonBox">
> <div class="centre">
> <div class="line">
> <div class="l"> </div>
> <a href="javascript:viewPage();"><p>INFO / VIEW</p></a>
> <div class="r"> </div>
> </div>
> </div>
> </div>
>
> css...
>
> .menuButtonBox {
> width: 130px;
> height: 22px;
> text-align: center;
> }
>
> .centre {
> margin-top: 5px;
> text-align: center;
> }
>
> .line {
> display: inline;
> position: relative;
> background: #000;
> text-align: center;
> line-height: 20px;
> height: 20px;
> margin: 10px auto 0 auto;
> padding: 0;
> }
>
> .line p {
> display: inline;
> font-family: Verdana,Arial,Helvetica,sans-serif;
> font-weight: bold;
> font-size: 10px;
> margin: 0;
> padding: 0 10px 0 10px;
> line-height: 19px; /* Hack for Mozilla */
> height: 20px;
> }
>
> .line a {
> color: #cccccc;
> text-decoration: none;
> cursor: hand;
> }
>
> .line a:hover {
> color: #fff;
> }
>
> .line .l, .line .r {
> width: 2px;
> height: 20px;
> position: absolute;
> top: 0;
> }
>
> .line .l { background-image: url(images/buttonLend.gif); }
> .line .r { background-image: url(images/buttonRend.gif); }
>
> hmmm, seems quite long for a few buttons but does seem to work, except in
> netscape ... but then nutscrape has always been a different kettle o fish,
> and current stats say around 1.4% of viewers still use it so im going forthats> while learning
>
> layout as a whole in css is quite difficult, but maybe thats because im
> thinking in tables still, but im getting there, and leaving the stuff> hard to layout in css in tables until css dom gets better
>
> cheers
>
> <dG />
>
>
> "Douglas Burton" <doug@dougandsarah.net> wrote in message
> news:bi2jfh$kkn$1@forums.macromedia.com...> it> > Happy to help!
> >
> > Glad you worked it out. The <ul> markup is just one way to to do it, and> the> > would still allow you to make your button text dynamic. Are you pulling>> > menu items from a database?
> >
> > Cheers,
> >
> > Doug
> >
> >
>
Douglas Burton Guest
Reply With QuoteSimilar Questions and Discussions
Posting Permissions
- You may not post new threads
- You may post replies
- You may not post attachments
- You may not edit your posts
