Ergebnis 1 bis 5 von 5

Thema: Div Box

  1. #1
    Youngster
    Registriert seit
    28.07.2014
    Beiträge
    16
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard Div Box

    Huhu liebe Com,

    ich stehe hier vor einem Problem mit dem Internet Explorer.

    Ich habe eine Div Box erstellt welche den Inhalt zentriert. Das sieht überall gut aus, so wie es soll, nur im IE nicht.

    Code:
    .rundrum {
      margin-top: 10px;
      margin-bottom: 10px;
      margin: 0 auto;
      display: flex; 
      display: -webkit-flex;
      justify-content: center;
    }
    Was fehlt, damit es im IE genauso aussieht ?

    MFG

    reyman
    Achtung: Dies ist ein alter Thread im HTML und Webmaster Forum
    Diese Diskussion ist älter als 90 Tage. Die darin enthaltenen Informationen sind möglicherweise nicht mehr aktuell. Erstelle bitte zu deiner Frage ein neues Thema im Forum !!!!!

  2. #2
    Großmeister(in)
    Registriert seit
    04.08.2009
    Beiträge
    574
    Danke
    0
    Bekam 67 mal "Danke" in 65 Postings

    Standard AW: Div Box

    Hallo,

    ohne das zugehörige HTML (und dessen CSS) kann dir das niemand beantworten.

    Und um welche IE-Version(en) geht es überhaupt?

    margin-top und margin-bottom kannst du weglassen, die werden durch das nachfolgende margin außer Kraft gesetzt.

    Die CSS-Angaben mit den Prefixen sollten grundsätzlich vor den CSS-Angaben ohne Prefix stehen. Wenn die Browser die Version ohne Prefix unterstützen ist das in der Regel die sinnvollere (weil fehlerbereinigte) Version.

    Gruss

    MrMurphy
    Geändert von MrMurphy (29.05.2015 um 13:15 Uhr)

  3. #3
    Youngster
    Themenstarter

    Registriert seit
    28.07.2014
    Beiträge
    16
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: Div Box

    Ok danke erstmal.

    Es geht um die IE version 11.

    Aber ich sehe gerade das es nicht an dieser Box liegt.. sondern an etwas anderem.

    Hier der komplette CSS Code:

    Code:
    /* CSS an dieser Stelle wirkt sich auf alle Skins aus */
    
    
    /* Grünes Theme für User Interface */
    a, div.vectorTabs li a, div#mw-panel div.portal div.body ul li a, div#content a.external {
        color: #669933;
        font-weight: bold;
    }
    a:visited, div.vectorTabs li a:visited, div#mw-panel div.portal div.body ul li a:visited, div#content a.external:visited {
        color: #507828;
    }
    
    
    
    
    div.vectorTabs, div.vectorTabs span {
        background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAuCAIAAABmjeQ9AAAACXBIWXMAAAsSAAALEgHS3X78AAAAR0lEQVQImWWOOxbAQAgCJ9z/xlFIsWZfPoUFoINUlYDfJBYg00vT4oiCFSxihX7ld7Z8j9cCP/Tqc87h1+zXcL5c71/2Lb4AQO1B07yAp+sAAAAASUVORK5CYII=");
    }
    
    
    div.vectorTabs ul li {
        background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAABkCAIAAADITs03AAAACXBIWXMAAAsSAAALEgHS3X78AAAAQklEQVQYleWQsQ3AMAzDWP3/U6/pG2aGGI3RFzoIsAhZg1AD/FjG6cce4iez/dnMzhjs2/13OJF6OybHakag8lz3AnxnLT4wWlwvAAAAAElFTkSuQmCC");
    }
    
    
    div#content, #mw-head-base, div#footer {
        background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAACXBIWXMAAAsSAAALEgHS3X78AAAADElEQVQImWO4/nM5AAUiAnhTbeFNAAAAAElFTkSuQmCC");
    }
    
    
    div.vectorMenu h5 a {
        background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAuCAIAAABmjeQ9AAAACXBIWXMAAAsSAAALEgHS3X78AAAAR0lEQVQImWWOOxbAQAgCJ9z/xlFIsWZfPoUFoINUlYDfJBYg00vT4oiCFSxihX7ld7Z8j9cCP/Tqc87h1+zXcL5c71/2Lb4AQO1B07yAp+sAAAAASUVORK5CYII=");
    }
    
    
    ul {
        list-style-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAANBAMAAACTErm7AAAAMFBMVEX///8AjFIAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAitIkkAAAAAXRSTlMAQObYZgAAABdJREFUCJljYMADGAUZGAQFBeAYxAcCAAplALt4L4SlAAAAAElFTkSuQmCC")
    }
    
    
    pre {
        border: 1px dashed #507828;
    }
    
    
    
    
    div#content a.external {
        background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKBAMAAAB/HNKOAAAAFVBMVEXl5eXl5eUtlwAkzACQ/2VhoihlvT+VY3BnAAAAAXRSTlMAQObYZgAAAD9JREFUeF4NxkENgEAMRcF3QUCzK6D9DkiLAELgjAWy/j3Qy2SAzITtswEcrVRtjPNua+YinstfYu4OYdZKcn69mgZuQI+sewAAAABJRU5ErkJggg==") no-repeat scroll right center transparent;
    }
    
    
    /* Eingrünung Ende */
    
    
    
    
    .firstHeading {
        background: none repeat scroll 0 0 #669933;
        background:-moz-linear-gradient(top, #82ac59, #669933); /* Firefox */
        background:-webkit-gradient(linear, left top, left bottom, from(#82ac59), to(#669933)); /* Safari, Chrome */
        background:-webkit-linear-gradient(top, #82ac59, #669933); /* Safari, Chrome - neue Syntax! */
        background:-o-linear-gradient(top, #82ac59, #669933); /* Opera */
        background:-ms-linear-gradient(top, #82ac59, #669933); /* IE */
        background:linear-gradient(top, #82ac59, #669933); /* W3C Standard */
        color: #ffffff;
        text-shadow: 2px 2px 3px rgba(0, 0, 0, 0.7);
        padding-left: 3px;
        -moz-border-radius:5px 5px 0 0; /* Firefox - alte Syntax */
        -webkit-border-radius:5px 5px 0 0; /* Safari, Chrome - alte Syntax */
        border-radius:5px 5px 0 0; /* alle neuen Browser, W3C Standard */
    }
    
    
    h2, h3 {
        margin-top: 1.5em;
        clear:both;
    }
    
    
    h2 {
        background: none repeat scroll 0 0 #82ac59;
        background:-moz-linear-gradient(top, #82ac59, #ffffff); /* Firefox */
        background:-webkit-gradient(linear, left top, left bottom, from(#82ac59), to(#ffffff)); /* Safari, Chrome */
        background:-webkit-linear-gradient(top, #82ac59, #ffffff); /* Safari, Chrome - neue Syntax! */
        background:-o-linear-gradient(top, #82ac59, #ffffff); /* Opera */
        background:-ms-linear-gradient(top, #82ac59, #ffffff); /* IE */
        background:linear-gradient(top, #82ac59, #ffffff); /* W3C Standard */
        padding-left: 3px;
        -moz-border-radius:0 0 5px 5px; /* Firefox - alte Syntax */
        -webkit-border-radius:0 0 5px 5px; /* Safari, Chrome - alte Syntax */
        border-radius:0 0 5px 5px; /* alle neuen Browser, W3C Standard */
    }
    
    
    table h2, table h3 {
        margin-top: 0;
        background: transparent;
        padding-left: 0;
    }
    
    
    table.SOtable {
        background: none repeat scroll 0 0 #669933;
        background:-moz-linear-gradient(top, #82ac59, #669933); /* Firefox */
        background:-webkit-gradient(linear, left top, left bottom, from(#82ac59), to(#669933)); /* Safari, Chrome */
        background:-webkit-linear-gradient(top, #82ac59, #669933); /* Safari, Chrome - neue Syntax! */
        background:-o-linear-gradient(top, #82ac59, #669933); /* Opera */
        background:-ms-linear-gradient(top, #82ac59, #669933); /* IE */
        background:linear-gradient(top, #82ac59, #669933); /* W3C Standard */
        overflow: hidden;
        text-overflow:ellipsis;
        border: 1px solid #AAAAAA;
        -ms-border: 1px solid #AAAAAA;
        border-collapse: collapse;
        margin: 1em 1em 1em 0;
    }
    
    
    .SOtable thead tr {
        background: none repeat scroll 0 0 #669933;
        background:-moz-linear-gradient(top, #82ac59, #669933); /* Firefox */
        background:-webkit-gradient(linear, left top, left bottom, from(#82ac59), to(#669933)); /* Safari, Chrome */
        background:-webkit-linear-gradient(top, #82ac59, #669933); /* Safari, Chrome - neue Syntax! */
        background:-o-linear-gradient(top, #82ac59, #669933); /* Opera */
        background:-ms-linear-gradient(top, #82ac59, #669933); /* IE */
        background:linear-gradient(top, #82ac59, #669933); /* W3C Standard */
    }
    
    
    .SOtable tbody tr:nth-child(even) {
        /* durch diesen Eintrag wird jede zweite Zeile mit dieser Hintergrundfarbe versehen */
        /* background: #EBEBb8; */
        background: #F5F5D3;
    }
    .SOtable tbody tr:nth-child(odd) {
        /* durch diesen Eintrag wird jede zweite Zeile mit dieser Hintergrundfarbe versehen */
        background: #FBFBEE;
    }
    
    
    .SOtable tbody tr.hervorgehoben, .SOtable tbody th.hervorgehoben, .SOtable tbody td.hervorgehoben {
         background-color: #E3F7DD;
    }
    
    
    .SOtable tbody tr.hervorgehoben2, .SOtable tbody th.hervorgehoben2, .SOtable tbody td.hervorgehoben2 {
         background-color: #d4e8cf;
    }
    
    
    
    
    .SOtable th, .SOtable td {
        border: 1px solid #AAAAAA;
        padding-left: 5px;
        padding-right: 5px;
    }
    
    
    .SOtableRight td {
        text-align: right;
    }
    
    
    .SOtableCenter td {
        text-align: center;
    }
    
    
    .SOtableLeft td {
        text-align: left;
    }
    
    
    .SOtableTop td {
        vertical-align: top;
    }
    
    
    .SOtableBottom td {
        vertical-align: bottom;
    }
    
    
    .SOtableMiddle td {
        vertical-align: middle;
    }
    
    
    .SOtable th {
        background: none repeat scroll 0 0 #669933;
        background:-moz-linear-gradient(top, #82ac59, #669933); /* Firefox */
        background:-webkit-gradient(linear, left top, left bottom, from(#82ac59), to(#669933)); /* Safari, Chrome */
        background:-webkit-linear-gradient(top, #82ac59, #669933); /* Safari, Chrome - neue Syntax! */
        background:-o-linear-gradient(top, #82ac59, #669933); /* Opera */
        background:-ms-linear-gradient(top, #82ac59, #669933); /* IE */
        background:linear-gradient(top, #82ac59, #669933); /* W3C Standard */
        text-align: center;
        font: bold 14pt;
        color: #ffffff;
        text-shadow: 0 1px 0 rgba(0, 0, 0, 0.5);
    }
    
    
    .trwidth100 tbody tr>* {
        width:100px; 
    }
    
    
    .trwidth125 tbody tr>* {
        width:125px; 
    }
    
    
    .trwidth150 tbody tr>* {
        width:150px; 
    }
    
    
    .SOtable caption {
        font-weight: bold;
    }
    
    
    .HCtable td:nth-child(odd) {
        padding-left: 10px;
    }
    
    
    .HCtable td:nth-child(even) {
        text-align:right;
    }
    
    .rechtsunter th {
    text-align:right;
    border-bottom:1px solid black;
    font-size: 110%;
    }
    
    .rundrum {
      margin: 0 auto;
      display: flex; 
      justify-content: center;
    }

    Hier der HTML Code: (das ganze ist im Wikicode/Mediawiki)

    Code:
    <div class="rundrum">
    <div style="margin:0 auto; max-width: 100%;">
    {| class="SOtabletop" style="border-spacing:20px 5px;" /* moderne Fassung von cellspacing, aber 20px horizontal und 5px vertikal */
    ! [[Datei:Grundlagen.png|center|verweis=]] !! [[Datei:Grundlagen.png|center|link=]]
    |- class="rechtsunter"  
    ! '''Allgemein''' !! '''Auf dem Square'''
    |- 
    | [[Erste Schritte]] &bull; [[Charakter]] &bull; [[Menü]] &bull; [[Spielumgebung]] &bull; <br>[[Chatsystem]] &bull; [[Ingame-Begriffe]]
    | [[NPCs]]  &bull; [[Handel]] &bull; [[Auktionshaus]]
    |- class="rechtsunter" 
    ! '''Auf dem Kurs''' !! '''Erfahrungspunkte'''
    |- 
    | [[Zum Spiel]] &bull; [[Training Center]] &bull; [[Kurse]] &bull; [[Zum_Spiel#Spieltyp | Spieltyp]] &bull; [[Handicap]] &bull; <br>[[Persönliche Rekorde]] &bull; [[Caddiesystem]] [[Datei:Quest_Neu.png|verweis=]] 
    | [[Erfahrungspunkte (EXP)]] &bull; [[EXP Kumulation]] &bull; [[P.density System]]  
    |}
    </div>
    </div>
    Im Firefox, Chrome ist das ganze Zentriert. Und im IE ist alles rechts.
    Geändert von reyman (29.05.2015 um 13:39 Uhr)

  4. #4
    Großmeister(in)
    Registriert seit
    04.08.2009
    Beiträge
    574
    Danke
    0
    Bekam 67 mal "Danke" in 65 Postings

    Standard AW: Div Box

    Hallo,

    bei mir wird der Inhalt auch im IE zentriert dargestellt.

    Grundsätzlich ist es aber schlechter Stil und kann zu Problemen führen Text direkt in Boxen oder andere nicht dafür vorgesehene Elemente zu schreiben. Text sollte immer in dafür vorgesehenen Elementen wie h1 bis h6, p, li, dt, dd u.s.w. stehen.

    Gruss

    MrMurphy

    Nachtrag: Meine Antwort bezog sich auf Reymans ursprüngliche Antwort, das HTML bestände nur aus

    Code:
    <div class="rundrum">
    TEXT
    </div>
    Gruss

    MrMurphy
    Geändert von MrMurphy (29.05.2015 um 14:12 Uhr)

  5. #5
    Youngster
    Themenstarter

    Registriert seit
    28.07.2014
    Beiträge
    16
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: Div Box

    Okay aber warum bei mir nicht ?

    Chrome : http://prntscr.com/7apee4
    IE : http://prntscr.com/7apen7


    Das mit dem Stil: Ja ich habe in dem Moment keine andere Lösung gefunden. Daher ist das so. Hättest du einen besseren / leichteren vorschlag für mich, mit dem gleichen resultat ?

Stichworte

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •