Drop-down menu problem

Discussion in 'CSS' started by mark_s, Oct 29, 2007.

  1. #1
    Can someone tell me why in my drop down the links are too far to the right. I can't figure out what in the CSS is causing it to do that, I just want it centered.

    Click 'Solution by Industry' to see drop-down.
     
    mark_s, Oct 29, 2007 IP
  2. mark_s

    mark_s Peon

    Messages:
    497
    Likes Received:
    10
    Best Answers:
    0
    Trophy Points:
    0
    #2
    Please can someone help?
     
    mark_s, Oct 30, 2007 IP
  3. Stomme poes

    Stomme poes Peon

    Messages:
    3,195
    Likes Received:
    136
    Best Answers:
    0
    Trophy Points:
    0
    #3
    In FireFox the links are on the left. The submenus don't fill the full width of the top header menu. The grey hover bar does fill the width, plus a little further.

    What browser are you looking at this in? Look in a few browsers and see if they all look the same.

    I wish I knew how to add thumbnail images here.
     
    Stomme poes, Oct 30, 2007 IP
  4. Martens

    Martens Peon

    Messages:
    126
    Likes Received:
    8
    Best Answers:
    0
    Trophy Points:
    0
  5. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,999
    Best Answers:
    253
    Trophy Points:
    515
    #5
    Oh yeah, THAT's good advice - NOT.

    Let's see... first I'd use the universal selector to null all margins and padding, but apart from that I think I see some padding issues in there... closing the head and the two div's could help given you're in a strict doctype, hang on I'm copying it to local and 'gonna play with it'.
     
    deathshadow, Nov 2, 2007 IP
  6. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,999
    Best Answers:
    253
    Trophy Points:
    515
    #6
    Ok, I think I found it - you are setting the inner UL to 140px wide, but the anchors inside it to 170px (if you include the padding)...

    There's a lot of contradictory and unnecessary CSS in there, hang on I'm gonna clean it up a notch.
     
    deathshadow, Nov 2, 2007 IP
  7. Martens

    Martens Peon

    Messages:
    126
    Likes Received:
    8
    Best Answers:
    0
    Trophy Points:
    0
    #7
    Why not???
     
    Martens, Nov 2, 2007 IP
  8. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,999
    Best Answers:
    253
    Trophy Points:
    515
    #8
    and... here we go.

    http://battletech.hopto.org/for_others/martens/template.html

    The directory:
    http://battletech.hopto.org/for_others/martens

    is unlocked so you can grab the css. I switched it from suckerfish to csshover2 because I find suckerfish often problematic both in testing and in deployment - and csshover2 works ANYWHERE with the same css as everything else... so you aren't sending 'wasted' CSS to browsers that aren't even going to use it.

    Most of the 'issues' seemed to be from the lack of positioning and attempt to use 'auto' instead of the actual number.

    Oh, and I stripped the width from #nav - that's what you have those two wrapping DIV's for.

    Validates, tested 100% working in IE 5.5, 6 & 7, Opera, FF and Safari. (though in IE 5.5 the width is undercalculating so a couple items are split to multiple lines)
     
    deathshadow, Nov 2, 2007 IP
  9. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,999
    Best Answers:
    253
    Trophy Points:
    515
    #9
    Putting something inside a container bigger than the container itself - well, ever try to fit a gallon of milk into a 20oz bottle?

    Oh wait, did you mean the dreamweaver comment?
     
    deathshadow, Nov 2, 2007 IP
  10. Martens

    Martens Peon

    Messages:
    126
    Likes Received:
    8
    Best Answers:
    0
    Trophy Points:
    0
    #10
    Ye dreamweaver
     
    Martens, Nov 2, 2007 IP
  11. Stomme poes

    Stomme poes Peon

    Messages:
    3,195
    Likes Received:
    136
    Best Answers:
    0
    Trophy Points:
    0
    #11
    Dreamweaver bloats code. It's not made for writing good code. Its purpose is to help someone with no skills to make some pretty site. Ever see a robot dance? Compared to a human? That's Dreamweaver writing HTML compared to a human.
     
    Stomme poes, Nov 2, 2007 IP
  12. Martens

    Martens Peon

    Messages:
    126
    Likes Received:
    8
    Best Answers:
    0
    Trophy Points:
    0
    #12
    Writing good code? ok what is good code?:)
     
    Martens, Nov 5, 2007 IP
  13. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,999
    Best Answers:
    253
    Trophy Points:
    515
    #13
    Good code can be hard to define - though some base rules like semantic markup, not wasting tags that don't do anything apart from bloating out the page...

    BAD code on the other hand is not hard to define at all... and ALL of the WYSIWYGs still make some of the WORST code out there.

    take the mm_swap javascript almost every site designed using dreamweaver uses - that **** was a bad idea in 1997, and nothing more than bloat a decade later when we can actually USE CSS to do that with less overhead, less total files, etc, etc...

    It's also inlined on every page instead of called from a library file - way to flat out ignore the caching model - how often do you see presentational markup and inlined CSS/Javascript in DW templates? All the time.

    and then you have shit like this:
    <td valign="top" class="body-normal-bold"><p class="body-small">&nbsp;</p>
      <p class="body-small"><br>
          <br>
      </p>
      <p class="body-small">&nbsp;</p>
      <p class="body-small">&nbsp;</p>
      <p class="body-small"><br>
      </p>
      <table width="100%" border="0" cellspacing="0" cellpadding="0">
        <tr>
          <td class="jump-menu-head"><img src="images/spacer.gif" width="10" height="10">Jump
            Menu:</td>
        </tr>
      </table>
      <p class="body-small"><img src="images/arrow.gif" width="10" height="10" border="0" align="bottom"> <a href="index.html">Dreamweaver<br>
            <img src="images/spacer13.gif" width="13" height="10" border="0">Templates <br>
            <img src="images/spacer13.gif" width="13" height="10" border="0">Home</a><br>
            <br>
            <img src="images/dreamweaver-free-rule.gif" width="100" height="1"><br>
            <br>
    </p></td>
    
    Code (markup):
    Which if you don't know what's wrong with that, do the world a favor and back away from the keyboard... go take up macrome weaving or something.

    From the top, the problems there are:

    presentational property when there's a perfectly good class on the TD

    bunch of paragraphs in a row with no content, all using the same class - first, those should if they had content probably be wrapped and inherit their class. Second, they shouldn't be used at all, that's what MARGINS and PADDING are for.

    &nbsp; in the paragraphs to 'force content' - that's just a waste.

    use of BR tag for spacing.

    Table wrapping a single element when the table is NOT being used for verticle positioning - there is NO ****ing reason to use a table for ONE ELEMENT... especially when said element should probably be a header tag.

    spacer.gif's - again there's been NO reason to resort to these since 1997... and even then it was #DDD

    Pretty sad for a visual element that all the code that should be needed for that ENTIRE section is

    
    <div class="jumpMenu">
    	<h2>Jump Menu</h2>
    	<ul>
    		<li><a href="index.html">Dreamweaver Templates Home</a></li>
    
    Code (markup):
    Then continue the LI's instead of closing the STUPID ***ing one column table.

    Though it could be worse - take this little 'gem' for example:

    <center><div align="center"><table class="center" align="center" cellspacing="0" cellpadding="0" border="0"><tr><td style="font-color:#000"><font color="black">This</font> <b><font color="black"> is really</font></b> <font color="black">stupid.</font></td></tr></table></div></center>

    Typical WYSIWYG output... for something that probably would just be

    <div class="stupidText">This <strong>isn't</strong> stupid</div>

    I can take upwards of 90% of all 'designed in a WYSIWYG' pages, and reduce the size of the html file up to 80% or MORE. To me, that's bad code.

    Now, as usual you'll have the dumb shits saying 'but if you only use it in code view" to which my response is "congratulations, you just dropped $300 to a grand on a overglorified text editor" - their response being "but the preview window", and mine being "yeah, because what you really need is ANOTHER rendering engine thrown in the mix... what, too lazy to hit F5?"

    THEN there's the arguement that it 'helps nubes learn' - yeah, learn to write non-semantic bloated code with more wrappers than brains. It's that type of code that perpetuates the myth that HTML is difficult to manage, control or even LEARN PROPERLY.
     
    deathshadow, Nov 5, 2007 IP
  14. Martens

    Martens Peon

    Messages:
    126
    Likes Received:
    8
    Best Answers:
    0
    Trophy Points:
    0
    #14
    Ok what will you do if you have no programing skills?will you use Dreamweaver?
     
    Martens, Nov 5, 2007 IP
  15. jakomo

    jakomo Well-Known Member

    Messages:
    4,262
    Likes Received:
    82
    Best Answers:
    0
    Trophy Points:
    138
    #15
    jakomo, Nov 5, 2007 IP
  16. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,999
    Best Answers:
    253
    Trophy Points:
    515
    #16
    LEARN. Seriously, for all the talk and confusion HTML and CSS are actually piss simple.

    Can't learn, hire someone who can.
     
    deathshadow, Nov 5, 2007 IP
  17. Stomme poes

    Stomme poes Peon

    Messages:
    3,195
    Likes Received:
    136
    Best Answers:
    0
    Trophy Points:
    0
    #17
    I came on this forum in like May and had only heard of HTML and had never heard of CSS. I learned some things here, and some books were recommended for me. I learned my basic HTML and CSS from Build Your Own Web Site the Right Way Using HTML and CSS by Ian Lloyd and most CSS later from HTML Utopia: Designing Without Tables Using CSS by Rachel Andrew and Dan Shafer. There are several websites that, AFTER you get the bare basics in your head, that have answers to varoius practical problems, or discuss new techniques etc. Dave Shea, Molly Hertzenphargerbergerhultzen?... forgot her name but the site is Molly.com, Paul O'B, HTMLdog, A List Apart, Eric Meyer, Position Is Everything, Listamatic, Layout Gala, 456bereastreet.com, Norwegian Cow guy (gunlaug.nl), etc....

    While the examples at w3schools helped me become familiar with tag names, it didn't tell me anything about building websites. I could try the example on their example page, but when I tried it in real life, it didn't work and I didn't know why. That was before I read the two books I mentioned.

    No programming experience, unless you want to count the VB4 I had long ago in school (I wouldn't). Though I do have a programmer husband who does try to instill the programmer's "elegance and efficiency" ethos, but how much he succeeds I dunno.
     
    Stomme poes, Nov 5, 2007 IP
  18. Martens

    Martens Peon

    Messages:
    126
    Likes Received:
    8
    Best Answers:
    0
    Trophy Points:
    0
    #18
    I just asked a question - I don't need your advice
     
    Martens, Nov 5, 2007 IP