könnte mir bitte jemand einen DIV erstellen wie auf dem Bild

Diese Seite verwendet Cookies. Durch die Nutzung unserer Seite erklären Sie sich damit einverstanden, dass wir Cookies setzen. Weitere Informationen

  • könnte mir bitte jemand einen DIV erstellen wie auf dem Bild

    Hallo,
    ich habe eine bitte an euch, könnte mir jemand das was auf dem Bild zusehen (das Aussehen) ist in DIV usw mit CSS erstellen ???

    In <table> das ganze zu erstellen wäre kein Problem aber in DIVs usw weis ich das leider nicht.
    Bilder

    • 123.gif

      4,32 kB, 267×262, 203 mal angesehen

  • Hallo,

    um DIV-Elemente nebeneinander darzustellen, benutzt Du float.

    Beispiel - Linksbündig

    Quellcode

    1. <div style="float: left">Inhalt</div>


    Beispiel - Rechtsbündig

    Quellcode

    1. <div style="float: right">Inhalt</div>


    Damit Elemente danach unbedingt in einer neuen Zeile angezeigt werden, solltest Du

    Quellcode

    1. <div style="clear: both"> </div>


    notieren.

  • aa ok jetzt habe ich mal was gemacht und im prinzip passt das auch, aber die Zeilen sind im Firefox verutsch im IE sind diese nebeneinander- :/

    Quellcode

    1. DIV.test_main {
    2. /* background-color: #ff0000; */
    3. font-family: Verdana, Arial, Helvetica, sans-serif;
    4. font-size: 14px;
    5. color : #000000;
    6. width: 600px;
    7. margin-left:auto;
    8. margin-right:auto;
    9. line-height: 20px;
    10. }
    12. div.zeile1 {
    13. background-color: #E5E5E5;
    14. float: left;
    15. width: 20%;
    16. font-size: 14px;
    17. font-weight: bold;
    18. text-align:left;
    19. padding-left:5px;
    20. }
    22. div.zeile2 {
    23. background-color: #a09e9d;
    24. float: right;
    25. width: 80%;
    26. font-size: 14px;
    27. text-align:left;
    28. padding-left:5px;
    30. }
    32. div.zeile3 {
    33. background-color: #a09e9d;
    34. float: left;
    35. width: 20%;
    36. font-size: 14px;
    37. font-weight: bold;
    38. text-align:left;
    39. padding-left:5px;
    40. }
    42. div.zeile4 {
    43. background-color: #E5E5E5;
    44. float: right;
    45. width: 80%;
    46. font-size: 14px;
    47. text-align:left;
    48. padding-left:5px;
    49. }
    Alles anzeigen


    Quellcode

    1. <CENTER><DIV class='test_main'>
    3. <div class='zeile1'>Inhalt1</div>
    4. <div class='zeile2'>Inhalt2</div>
    5. <div style="clear: both"> </div>
    7. <div class='zeile3'>Inhalt3</div>
    8. <div class='zeile4'>Inhalt4</div>
    9. <div style="clear: both"> </div>
    11. </DIV></CENTER>
    Alles anzeigen
    Bilder

    • 456.gif

      3,41 kB, 653×226, 158 mal angesehen

  • Hm, bin ja immer mal für ein bißchen Nonsens zu haben ... von daher:

    HTML-Quellcode

    1. <!DOCTYPE HTML>
    2. <html>
    3. <head>
    4. <style type='text/css'>
    5. div{
    6. float: left;
    7. border-top: 1px solid white;
    8. border-right: 1px solid white;
    9. }
    10. .blue{
    11. color: white;
    12. border-top: 1px solid white;
    13. border-right: 1px solid white;
    14. background:blue;
    15. clear: both;
    16. }
    17. .dark{ background: #bbb;clear: both;}
    18. .light{ background: #ddd;clear: both;}
    19. .f1{ width: 3em;}
    20. .f2{ width: 9em;}
    21. .f3{ width: 6em; text-align: right;}
    22. .f4{ width: 5em; text-align: right;}
    23. </style>
    24. </head>
    25. <body>
    26. <div class='blue'>
    27. <div class='f1'>#</div
    28. ><div class='f2'>Aufl&ouml;sung</div
    29. ><div class='f3'>Anzahl</div
    30. ><div class='f4'>Prozent</div>
    31. </div>
    32. <div class='dark'>
    33. <div class='f1'>1</div
    34. ><div class='f2'>1024x768</div
    35. ><div class='f3'>4.902</div
    36. ><div class='f4'>50,09%</div>
    37. </div>
    38. <div class='light'>
    39. <div class='f1'>2</div
    40. ><div class='f2'>1280x1024</div
    41. ><div class='f3'>2.667</div
    42. ><div class='f4'>27,25%</div>
    43. </div>
    44. <div class='dark'>
    45. <div class='f1'>3</div
    46. ><div class='f2'>1280x800</div
    47. ><div class='f3'>548</div
    48. ><div class='f4'>5,60%</div>
    49. </div>
    50. <div class='light'>
    51. <div class='f1'>4</div
    52. ><div class='f2'>1152x864</div
    53. ><div class='f3'>541</div
    54. ><div class='f4'>5,53%</div>
    55. </div>
    56. <div class='blue'>
    57. <div class='f1'>&nbsp;</div
    58. ><div class='f2'>gesamt: 45</div
    59. ><div class='f3'>9787</div
    60. ><div class='f4'>100%</div>
    61. </div>
    63. </body>
    64. </html>
    Alles anzeigen


    Ergebnis (sowohl im IE wie auch im FF) :
    Bilder

    • divtab.png

      11,71 kB, 344×123, 120 mal angesehen
    Nichts auf der Welt ist so gerecht verteilt wie der Verstand. Jeder glaubt, er hätte genug davon.
    --------------------------------------------------(Rene Descartes)

  • naja, das ist dann genauso sinnvoll, wie nen Kringel mit ner Tabelle zu malen.... geht aber auch:

    HTML-Quellcode

    1. <!DOCTYPE HTML>
    2. <html>
    3. <head>
    4. <title>Kringel</title>
    5. <style type='text/css'>
    6. table{
    7. border-collapse: collapse;
    8. }
    9. td{
    10. width: 1px;
    11. height: 1px;
    12. border: none;
    13. background: #7f7;
    14. padding: 0px;
    15. }
    16. .in{
    17. background: #f00;
    18. }
    19. </style>
    20. </head>
    21. <body>
    22. <table>
    23. <script type='text/javascript'>
    24. var max=300;
    25. for(x=0;x<max;x++){
    26. document.writeln('<tr>');
    27. for(y=0;y<max;y++){
    28. var circle=incircle(x,y,max);
    29. if(circle) document.write('<td class="in"></td>');
    30. else document.write('<td></td>');
    31. }
    32. document.writeln('</tr>');
    33. }
    34. function incircle(x,y,max){
    35. //x² + y² = r²
    36. var x1=max/2-x;
    37. var y1=max/2-y;
    38. var r=max/2;
    39. if(x1*x1+y1*y1<=r*r){
    40. return 1;
    41. }
    42. else{
    43. return 0;
    44. }
    45. }
    46. </script>
    47. </table>
    48. </body>
    49. </html>
    Alles anzeigen


    Ich neige halt zu Blödsinn. :whistling:
    Bilder

    • kringel.png

      1,51 kB, 280×280, 116 mal angesehen
    Nichts auf der Welt ist so gerecht verteilt wie der Verstand. Jeder glaubt, er hätte genug davon.
    --------------------------------------------------(Rene Descartes)