CSS Frage zu IDs.



  • Hi,

    nehmen wir mal an ich habe eine ID. z.B. 'root'.

    Jetzt möchte ich Oben in der Linken und Rechten Ecke eine Abgerundete Grafik einbinden das selbe wie unten. Wie macht man sowas? Bei CSS4YOU habe ich leider nichts passendes Gefunden 😞



  • Afaik musst du dann die 4 Eck-Grafiken in die Box mit hinein packen und dann über left/rigth/top/bottom in den Ecken platzieren 😉



  • flenders schrieb:

    Afaik musst du dann die 4 Eck-Grafiken in die Box mit hinein packen und dann über left/rigth/top/bottom in den Ecken platzieren 😉

    Eben, und das weis ich nicht wie ich bewerkstelligen soll. Hast du evtl. bissel Code?



  • Ist nur mal so hingeschriebener (und ungetesteter) Pseudo-Code:

    <div id="box1">
     <img src="lo.gif" class="lo" ...>
     <img src="ro.gif" class="ro" ...>
     <img src="lu.gif" class="lu" ...>
     <img src="ru.gif" class="ru" ...>
     sdfgsdf
    </div>
    
    #box1 {
      ...
    }
    #box1.lo {
     position: absolute;
     left:     0px;
     top:      0px;
    }
    #box1.ro {
     position: absolute;
     right:    0px;
     top:      0px;
    }
    #box1.lu {
     position: absolute;
     left:     0px;
     bottom:   0px;
    }
    #box1.ru {
     position: absolute;
     right:    0px;
     bottom:   0px;
    }
    


  • Hi,

    habs mal so ausprobiert, jedoch ohne erfolg 😞

    <html>
     <head>
      <link rel="stylesheet" type="text/css" href="x.css" />
     </head>
     <body>
      <div class="box1"> 
       <img src="lo.gif" class="lo"> 
       <img src="ro.gif" class="ro"> 
       <img src="lu.gif" class="lu"> 
       <img src="ru.gif" class="ru"> 
       sdfgsdf 
      </div>
     </body>
    </html>
    
    #box1 { 
    
    } 
    #box1.lo { 
     position: absolute; 
     left:     0px; 
     top:      0px; 
    } 
    #box1.ro { 
     position: absolute; 
     right:    0px; 
     top:      0px; 
    } 
    #box1.lu { 
     position: absolute; 
     left:     0px; 
     bottom:   0px; 
    } 
    #box1.ru { 
     position: absolute; 
     right:    0px; 
     bottom:   0px; 
    }
    

    😞



  • Du scheinst mit CSS noch nicht so arg vertraut zu sein (z.B. bzw. class und id, etc.)

    Hier mal ein groben Grundgerüst:

    <html>
     <head>
      <style type="text/css">
       .box {
        position: relative;
        padding:  20px;
        background-color: #ff0000;
       }
       .box .lo {
        position: absolute;
        left:     0px;
        top:      0px;
       }
       .box .ro {
        position: absolute;
        right:    0px;
        top:      0px;
       }
       .box .lu {
        position: absolute;
        left:     0px;
        bottom:   0px;
       }
       .box .ru {
        position: absolute;
        right:    0px;
        bottom:   0px;
       }
       #box1 {
        width:    200px;
        height:   300px;
       }
      </style>
     </head>
     <body>
      <div class="box" id="box1">
       <img src="lo.gif" width="20" height="20" class="lo">
       <img src="ro.gif" width="20" height="20" class="ro">
       <img src="lu.gif" width="20" height="20" class="lu">
       <img src="ru.gif" width="20" height="20" class="ru">
       sdfgsdf
      </div>
     </body>
    </html>
    


  • wenn ich box aber mehr als nur 1x benutzen will, was muss ich dann machen damit der code 100% durch den validator geht?



  • Einfach noch ein 2. Div und die dazügehörigen Formatierungen einfügen:

    #box2 {
        width:    200px;
        height:   100px;
       }
    
      [...]
    
      <div class="box" id="box2">
       <img src="lo.gif" width="20" height="20" class="lo">
       <img src="ro.gif" width="20" height="20" class="ro">
       <img src="lu.gif" width="20" height="20" class="lu">
       <img src="ru.gif" width="20" height="20" class="ru">
       sdfgsdf
      </div>
    

    Was genau ist dein Problem?!



  • ist aber sehr umständlich wenn ich für sage ich 30 boxen 30 von diesem #boxX anlegen muss





  • Wenn alle gleich sein sollen, dann kannst du ja auch das mit id ganz weglassen (sowie das zugehörige #box) oder du schreibst die Formatierungen direkt per style="" in den DIV-Tag.


Anmelden zum Antworten