CSS Buttons Coding

11 years ago

what you have is a link or an anchor tag with class applied to it . I'm guessing the class is used to style you link so that it looks like a button.. In any event teh <ul>, <ol>, and <li. tags are used to make list and are often used to build menus only because menus are basically list of link or <a> tags .

The short version is "No" you don't have to use teh <ul> tags etc. Frankly I would suggest that you do sme Googling on css menus and review some tutorials on building menus using css...

Nothing works as well as knowing what you're doing.

Thanks

{{ DiscussionBoard.errors[7659611].message }}

shipwrecked

11 years ago

...right but my questions were: do I have to display buttons as lists, do I have to use ul/li/ol?

Isn't this already enough?

I have some sites with the <ul>and<li> variant, but I'm trying to minimize coding as much as possible, so it would be great if <a> with class would be enough...

Thanks
1 reply

{{ DiscussionBoard.errors[7659741].message }}

ronc0011 11 years ago

Yeah, you don't "need" the list elements they are just simply considered the best way to accomplish the task of creating menus. But yes you can make a link appear as a button with nothing more than styling. However when it's all said and done I doubt you are going to be able to really gain anything. By the time you get your buttons positioned and styled the way you want, odds are you will end up having used just as much code as you would have using the list elements.
- Thanks
{{ DiscussionBoard.errors[7660257].message }}

shipwrecked

11 years ago

Finally I decided to continue with the listing variant...
I am getting a wicked "cascade" of the <li> elements only in IE. Not sure why...
The buttons appear like this... (FF, Chrome, Safari display well) only in IE is the problem like this:
-buttons appear in a cascade, one under another
-but not exactly under each other like in a list, but with slight distance

Somehow like this:

....button #1
.................button #2
..............................button #3
............................................button #4

Imagine the buttons appearing like that instead of appearing side-by-side.

My CSS is:

.menu{list-style:none !important; margin: auto; overflow: hidden; padding: 0px; margin-bottom: 0px; margin-top: 0px; border: 0px; background-color: #FFFFFF; background-image:url('buttons-background.png'); line-height: 100%;}

Solutions?

Thanks
1 reply

{{ DiscussionBoard.errors[7660351].message }}

ronc0011

11 years ago

Just off hand I'm guessing that your list HTML is probably something like this...

Code:

<ul>
<li><a href="some-URL"> link1</a></li>
    <li><a href="">Menu level-1 category 1</a>
      <ul>
          <li><a href="some-URL"> link text 1</a></li>
          <li><a href="some-URL">Menu level-2 category 2</a></li>
      </ul>
    </li>
<li><a href="some-URL"> link text 1</a></li>
<li><a href="some-URL"> link text 2</a></li>
<li><a href="some-URL"> link text 3</a></li>
   <li><a href="some-URL">Menu level-2 category 2</a>

      <ul>
          <li><a href="some-URL"> link text 1</a></li>
          <li><a href="some-URL"> link text 2</a></li>
          <li><a href="some-URL"> link text 3</a></li>


      </ul>
　</li>
<li><a href="some-URL"> link1</a></li>
 
</ul>

This is how you nest menu items within other menu items i.e. multi level menus

Although if this is what your HTML looks like then it should be cascading in all browsers.

Thanks

{{ DiscussionBoard.errors[7660878].message }}

shipwrecked

11 years ago

Yes, I have one <ul> with abut 7-8 <li> elements. All open and close the right way. Why the cascade?

Thanks
1 reply

{{ DiscussionBoard.errors[7660913].message }}

ronc0011 11 years ago

Opps, sorry. My mistake. Let me edit that CSs real quick so the secondary levels are properly nested. I didn't put the second levels in side the <li> tags correctly
- Thanks
{{ DiscussionBoard.errors[7661046].message }}

shipwrecked

11 years ago

By, the way, it happens to me in IE 7, an ancient browser, but I want to make it work. Still couldn't find the problem causing the "cascade"... tried various other settings.

Thanks

{{ DiscussionBoard.errors[7661253].message }}

ronc0011

11 years ago

Do you have a URL for the website or can you paste in the HTML for the buttons?

Thanks

{{ DiscussionBoard.errors[7661477].message }}

Blakos

11 years ago

To break it down into an understandable sentence(Rather then the abundance of nonsense previously posted):

Style the LINK/S in the desired DIVISION.

Thanks
1 reply

{{ DiscussionBoard.errors[7661834].message }}

ronc0011 11 years ago

And just to be clear. I'm looking for the HTML. Not the CSS. There is nothing in the styling that's going to cause any cascading. I'm thinking the issue you're talking about is from the HTML, the way your menu is coded.
- Thanks
{{ DiscussionBoard.errors[7661975].message }}

shipwrecked

11 years ago

Html section looks something like this:

<ul class="menu"><li><a class="button" href="one.htm">One</a></li><li><a class="button" href="two.htm">Two</a></li><li><a class="button" href="three.htm">Three</a></li><li><a class="button" href="four.htm">Four</a></li><li><a class="button" href="Five.htm">Five</a></li><li><a class="button" href="six.htm">Six</a></li><li><a class="button" href="seven.htm">Seven</a></li><li><a class="button" href="eight.htm">Eight</a></li><li><a class="button" href="nine.htm">Nine</a></li><li><a class="button" href="ten.htm">Ten</a></li><li><a class="button" href="eleven.htm">Eleven</a></li></ul>

The "cascade" appears in IE 7, so far I haven't checked in newer IE. But despite the fact that IE has very low overall popularity, I am getting a enough IE 7 traffic to worry about.\
All other major browsers display it perfectly!

This is the code from an off-line page that I am coding right now. It's not online yet...

Thanks
1 reply

{{ DiscussionBoard.errors[7663062].message }}

ronc0011 11 years ago

OK there's nothing in the code to cause it to cascade . There's also nothing in it to cause it to line up horizontally across the page If you don't style the list it will basically make a list i.e all the <li> list items will line up vertically on the page like a list. You have to give it a . Also I see you have a class "button" set on the <li> tags, what does that class look like ? does it have a "display;inline;" defined for it? If that atrabute isn't set for the <li> tags they will line up vertically on the page
- Thanks
{{ DiscussionBoard.errors[7663892].message }}

shipwrecked

11 years ago

Actually the <a> tags have the class, not the <li> tags. And that's the class displaying the CSS buttons.

For that class I have this: "display: inline-block;"

Can't see the reason for the "cascade".

Thanks
1 reply

{{ DiscussionBoard.errors[7665406].message }}

ronc0011

11 years ago

OK so, I'm curious. If you paste this into an html file....

Code:

<ul>
<li><a href="some-URL"> link1</a></li>
<li><a href="">Menu level-1 category 1</a>
  <ul>
      <li><a href="some-URL"> link text 1</a></li>
      <li><a href="some-URL">Menu level-2 category 2</a></li>
  </ul>
</li>
<li><a href="some-URL"> link text 1</a></li>
<li><a href="some-URL"> link text 2</a></li>
<li><a href="some-URL"> link text 3</a></li>
 </ul>
<li><a href="some-URL"> link text 3</a></li>

</ul>
　
<li><ahref="some-URL"> link1</a></li>

Does it produce the kind of cascading you are talking about?

Because frankly I'm not seeing anything that would cause any kind of cascading Unless we're not talking about the same thing.

Thanks

{{ DiscussionBoard.errors[7665600].message }}

shipwrecked

11 years ago

Of course it does. Why am I talking about it.
I'll try to get some "test" version of it online and send you a PM when done.

Thanks

{{ DiscussionBoard.errors[7665685].message }}

ronc0011

11 years ago

Well what I asked you to run in a browser isn't what you gave me. What I'm giving you has nested <ul>s which is how you create multi level menus i.e. nested menu items But the example you gave me didn't have any nested elements thus No reason for the cascading if in fact we are talking about the same thing. the example I give you here should give a cascading effect but the question is... is it the same effect you are reporting that your are getting on your code?

Thanks

{{ DiscussionBoard.errors[7665869].message }}

Istvan Horvath

11 years ago

I assume what the OP is trying to convey is that in his view, on his computer with his crappy browser the list looks like an endlessly nested list: every new list item (li) appears as if nested under the previous one...

Other than old browser, bad settings in it - can't imagine anything causing it, unless there is more code in the stylesheet that refers to lists in general and the OP is not aware of it.

Thanks
2 replies

Signature

{{ DiscussionBoard.errors[7666177].message }}

ronc0011 11 years ago

Originally Posted by Istvan Horvath

, unless there is more code in the stylesheet that refers to lists in general and the OP is not aware of it.

Actually that's kind a where my suspicions are running because the code he's putting up here isn't going to produce any kind of "cascading" That's why I'm trying to be clear on what exactly he's talking about when he says "cascading"
- Thanks
{{ DiscussionBoard.errors[7666330].message }}

shipwrecked

11 years ago

Originally Posted by Istvan Horvath

I assume what the OP is trying to convey is that in his view, on his computer with his crappy browser the list looks like an endlessly nested list: every new list item (li) appears as if nested under the previous one...

Other than old browser, bad settings in it - can't imagine anything causing it, unless there is more code in the stylesheet that refers to lists in general and the OP is not aware of it.

I am using multiple browsers and I have IE "crappy browser" installed only because I am getting plenty of visitors using this browser. Only for the sake of optimization.

Otherwise works fine 100 % in FF, Chrome, Safari... not in IE 7.

IE 8 and above displays correctly. I'm just annoyed by this IE 7 think.

My CSS and HTML regarding the buttons is 100 % fine, I don't think I made a mistake, it
s rather the wicked way IE misinterprets everything that is causing the problem.

I have no classes for the <li>, but there is a class for the <ul>, mainly basic things, positioning issues etc... I was wondering: perhaps that's where the change needs to be made. Either a class for <li> or something modified in the <ul>'s class...

Yes, it appears like nesting it without me asking for it...

I am uploading a "test" version for you to see it. By the way: it's not done yet, unfinished site, so don't look at the rest... I just want to solve this button issue, the rest will come afterwards.

I PM-ed some of you the URL of a test page. It's enough to see the IE 7 button problem. Disregard the rest of the page, it's not fully built anyway...

Thanks
1 reply

{{ DiscussionBoard.errors[7668559].message }}

David V 11 years ago

First, when you apply style hacks to fix certain browsers, use a conditional comment for that particular browser so the css hack only is applied for that particular browser. Like so:



So, you need to create a new css file called "ie7-fixes.css" and the above conditionally calls it IF the user is using IE7 only.

IE7 only supports inline-block on naturally inline elements so you might try this css hack for IE7 only.

display: inline-block;
*display: inline;
zoom: 1;

Can't guarantee this will work without seeing your complete code, but should only take a minute to test it.
- Thanks
{{ DiscussionBoard.errors[7669522].message }}

CSS Buttons Coding

Trending Topics

How do I effectively build and nurture an email list for affiliate marketing purposes?

Are billboards still effective in driving customers?

Are Solo ADs the Most Cost Effective Way to Promote your Product?

Been a while! Any of you Old Timers here?

How much does the rebranding affect CR ?