[CSS] phänomen beim umbruch

Einklappen
X
 
  • Filter
  • Zeit
  • Anzeigen
Alles löschen
neue Beiträge

  • [CSS] phänomen beim umbruch

    kleines css problem ...

    es gibt eine html-seite, die ein externes css hat.
    die codes sind weiter unten.

    jetzt ist es so, dass die <li>-<a>-kombination an sich
    sehr gut funktioniert, bis auch einen kleinen hacken.

    habe ich viele <li>+<a> in dem <ul> drin, und dies nicht
    mehr in eine zeile passt, wird umgebrochen. das ist auch
    ok so.

    nur .... sollte es so sein, dass die zweite zeile dann
    auch die margin- und padding-werte so einhält, dass die sch****
    dinger nicht überschnitten sind. - siehe screenshot IE6
    beim opera sieht's ähnlich mies aus.

    ideen?
    was habe ich übersehen?


    und nun der html-code
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
            "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
      <title>title</title>
      <link rel="stylesheet" type="text/css" href="styles.css" media="screen">
      <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    </head>
    
    <body bgcolor="#FFFFFF" link="#FF6600" alink="#FF6600" vlink="#FF6600">
    
    <ul id="alldomains">
    <li><a href="/index.php?domain=0" target="_top">domain 0</a></li>
    <li><a href="/index.php?domain=1" target="_top">domain 1</a></li>
    <li><a href="/index.php?domain=2" target="_top">domain 2</a></li>
    <li><a href="/index.php?domain=3" target="_top">domain 3</a></li>
    
    <li><a href="/index.php?domain=0" target="_top">domain 0</a></li>
    <li><a href="/index.php?domain=1" target="_top">domain 1</a></li>
    <li><a href="/index.php?domain=2" target="_top">domain 2</a></li>
    <li><a href="/index.php?domain=3" target="_top">domain 3</a></li>
    
    <li><a href="/index.php?domain=0" target="_top">domain 0</a></li>
    <li><a href="/index.php?domain=1" target="_top">domain 1</a></li>
    <li><a href="/index.php?domain=2" target="_top">domain 2</a></li>
    <li><a href="/index.php?domain=3" target="_top">domain 3</a></li>
    </ul>
    
    </body>
    </html>
    und der css-code
    Code:
    body
    {
        font-family: verdana, sans-serif;
        font-size: 11px;
        color: #333333;
        background-color: #FFFFFF;
        margin: 0px;
        padding: 20px;
    }
    
    #alldomains
    {
        display: block;
        border: 1px solid #666666;
        margin: 0px;
        padding: 30px 0px 30px 0px;
    }
    
    #alldomains li
    {
        display: inline;
        margin: 0px;
        padding: 0px;
        list-style-type: none;
    }
    
    #alldomains li a
    {
        display: inline;
        border: 1px solid #666666;
        /*margin: 0px 0px 0px 10px;*/
        margin: 20px;
        padding: 20px;
        width: 100%;
        text-decoration: none;
        color: #333333;
        font-weight: bold;
    }
    
    #alldomains li a:hover,
    #alldomains li a:active,
    #alldomains li a:focus
    {
        border-color: #FF6600;
        background-color: #eeeeee;
    }
    Angehängte Dateien
    INFO: Erst suchen, dann posten![color=red] | [/color]MANUAL(s): PHP | MySQL | HTML/JS/CSS[color=red] | [/color]NICE: GNOME Do | TESTS: Gästebuch[color=red] | [/color]IM: Jabber.org |



  • #2
    Re: [CSS] phänomen beim umbruch

    #alldomains li a
    {
    display: inline;
    width: 100%;

    inline-elemente haben kein width.

    und da du dann auch noch
    #alldomains li
    mit display: inline; formatierst, frage ich mich worauf du die 100% bereite überhaupt bezogen sehen möchtest ...?


    ich würde vielleicht eher versuchen, die <li> und die darin liegenden <a> mit display:block zu definieren, ihnen (den <li>) eine feste breite zuzuweisen, und sie dann über float:left wieder nebeneinanderstellen ...
    I don't believe in rebirth. Actually, I never did in my whole lives.

    Kommentar


    • #3
      Re: Re: [CSS] phänomen beim umbruch

      ich vergaß noch, inline elemente können nicht nur keine width-angabe haben, sondern auch keine margins.


      mein erster schnellschuss mit gefloateten <li> sähe so aus ...
      I don't believe in rebirth. Actually, I never did in my whole lives.

      Kommentar


      • #4
        danke für deinen tipp. das sieht echt genial aus...

        so in etwas habe ich mir das auch vorgestellt. morgen kann ich mich damit intensivst beschäftigen.

        das mit den 100% und inline usw waren mehr oder weniger alles tests von mir, weil das irgendwie nicht so funktioniert hatte, wie ich es wollte.

        wenn ich noch was haben sollte, melde ich mich morgen wieder dazu.
        INFO: Erst suchen, dann posten![color=red] | [/color]MANUAL(s): PHP | MySQL | HTML/JS/CSS[color=red] | [/color]NICE: GNOME Do | TESTS: Gästebuch[color=red] | [/color]IM: Jabber.org |


        Kommentar


        • #5
          also.... ich habe jetzt mal ein wenig hin und her probiert um mir deinen 'container' und den 'clearer' zu ersparen. aber nix ist...

          deine lösung ist also scheinbar die einzig sinnvolle.

          anbei noch meine (leicht) veränderte css ...
          Code:
          #alldomains
          {
              display: block;
              border: 1px solid #666666;
              margin: 0 auto;
          }
          
          #alldomains ul
          {
              display: block;
              margin: 0px;
          }
          
          #alldomains ul li
          {
              display: block;
              float: left;
              margin: 0px;
              padding: 0px;
              list-style-type: none;
              text-align: center;
          }
          
          #alldomains ul li a
          {
              display: block;
              width: 170px;
              border: 1px solid #666666;
              margin: 20px;
              padding: 20px 0;
              text-decoration: none;
              color: #333333;
              font-weight: bold;
          }
          
          #alldomains ul li a:hover,
          #alldomains ul li a:active,
          #alldomains ul li a:focus
          {
              border-color: #FF6600;
              background-color: #eeeeee;
          }
          
          #alldomains #clearer
          {
              clear: left;
          }
          zum html-code:
          bei mir ist dein 'container' 'alldomains'. das <ul> hat keine id mehr.
          INFO: Erst suchen, dann posten![color=red] | [/color]MANUAL(s): PHP | MySQL | HTML/JS/CSS[color=red] | [/color]NICE: GNOME Do | TESTS: Gästebuch[color=red] | [/color]IM: Jabber.org |


          Kommentar

          Lädt...
          X