Anzeige:
Seite 1 von 2 12 LetzteLetzte
Ergebnis 1 bis 15 von 20

Thema: div (XHTML + CSS)

  1. #1
    Registrierter Benutzer
    Registriert seit
    14.08.2002
    Ort
    Saxony
    Beiträge
    13

    div (XHTML + CSS)

    Hallo,

    ich möchte einen div Block auf dem Bildschirm zentrieren mit CSS. Ist das überhaupt möglich ?

    Code:
    <body>
    <div style="width:90ex">zentriert</div>
    </body>
    In body habe ich schon folgendes probiert: text-align:center
    Aber da zentriert er die Elemente in dem div .

    Gruß,
    piet

  2. #2
    Registrierter Benutzer
    Registriert seit
    27.08.2002
    Beiträge
    337
    Du kannst den linken Rand und die Breite der Text-Box in Prozent angeben und
    damit die Text-Box zentrieren.
    Code:
    <HTML><HEAD>
    <TITLE>Center</TITLE>
    
    <style>
    
    .colCenter {
      position: absolute;
      overflow:visible;
      left:25%; top:auto;
      width: 50%; height: auto;
      margin: 0%; padding: 0%;
      
      background: green;layer-background-color:green;
    }
    </style>
    
    
    <div class="colCenter" style="width: 1em;"> 
    iuiuiuoiuoiuoiuo iuiuoiuoiuoiuoiuiouoiuoiuoiuo
    iuiuiuoiuoiuoiuoiuiouoiuoiuoiuoiuiuiuoiuoiuoiuoiuiouoi
    </div>
    
    </BODY>
    </HTML>
    Geändert von Jana (20-11-2003 um 07:57 Uhr)

  3. #3
    Registrierter Benutzer
    Registriert seit
    14.08.2002
    Ort
    Saxony
    Beiträge
    13
    Danke Jana.

    Nur leider muss die Breite des div's 90ex sein. Das ist eine Gestaltungskonstante, die mir vorgegeben wurde. Damit ist es leider nicht mehr zentriert

  4. #4
    Registrierter Benutzer
    Registriert seit
    27.08.2002
    Beiträge
    337
    Na, dann greif doch tiefer in die Trickkiste.
    Lade die js-Dateien von http://www.cross-browser.com herunter.

    Code:
    <HTML>
    <HEAD>
    <TITLE>Center</TITLE>
       <script type='text/javascript' src='cbe/cbe_core.js'></script>   
       <script type='text/javascript' src='cbe/cbe_slide.js'></script>
       <script type='text/javascript' src='cbe/cbe_slide2.js'></script>
       <script type='text/javascript' src='cbe/cbe_event.js'></script>
    
    <style>
    .content {
      position: absolute; 
      left:250px; top:20px;
      width: 90px; height:auto; 
      
      background: green;layer-background-color:green;
    }
    </style>
    
    <script type='text/javascript'>
    <!--
    var content;
    
    function windowOnload() {init()};
    
    function init(){ 
      with (content = cbeGetElementById('content').cbe) {       
            moveTo(document.cbe.width()/2-90,100);
            show();        
            } 
    
    }
    </script>
    
    
    <div id='content' class="content"> 
    iuiuiuoiuoiuoiuo iuiuoiuoiuoiu
    oiuiouoiuoiuoiuo
    iuiuiuoiuoiuoiuoiuiouoiuoi
    uoiuoiuiuiuoiuoiuoiuoiuiouoi
    </div>
    </BODY>
    </HTML>
    Geändert von Jana (20-11-2003 um 07:57 Uhr)

  5. #5
    Registrierter Benutzer
    Registriert seit
    14.08.2002
    Ort
    Saxony
    Beiträge
    13
    Leider darf ich auch kein Javascript verwenden. Nur CSS2 und XHTML.

    Die Seite ist für einen Lehrstuhl an der Uni und soll für jeden ohne zusätzliche Mittel erreichbar sein.

  6. #6
    Registrierter Benutzer
    Registriert seit
    17.09.2003
    Beiträge
    28
    Hallo,

    du musst "margin-left" und "margin-right" auf "auto" stellen, dann sollte das Element zentriert angezeigt werden.

    MfG
    bockionline

  7. #7
    Registrierter Benutzer
    Registriert seit
    06.11.2003
    Ort
    sessel vor dem pc
    Beiträge
    66
    Original geschrieben von bockionline
    Hallo,

    du musst "margin-left" und "margin-right" auf "auto" stellen, dann sollte das Element zentriert angezeigt werden.

    MfG
    bockionline
    das hab ich schon mehrmals probiert und das funktioniert einfach nich.... ich hab n aehnliches problem gehabt und das so geloest dass ich das <div> inne <table align=center> gesteckt hab... aber das is sicherlich ein ziemlich umstaendlicher weg...

  8. #8
    Registrierter Benutzer
    Registriert seit
    31.03.2002
    Ort
    Hamburg
    Beiträge
    201
    Css 2 ?

    das unterstütz doch nicht jeder Browser oder irre ich mich ?
    ich bastel grad an einer besseren signatur ;)

  9. #9
    Registrierter Benutzer
    Registriert seit
    15.09.2003
    Ort
    Stromberg & Mannheim
    Beiträge
    9
    tja, da bin ich wohl nicht der einzige, der sich an dem problem die zähne ausbeisst ;(

    also horizontal ausrichten ist nicht das problem, das geht via margin:auto; oder ner 100% breiten tabelle... aber vertical? das geht nur ohne doctype deklaration, da die browser dann in den quirk mode schalten, aber das kanns ja auch nicht sein...
    - simple leet logic

  10. #10
    Registrierter Benutzer Avatar von panzi
    Registriert seit
    05.05.2001
    Ort
    Kottingbrunn
    Beiträge
    609
    Lösung 1:
    Code:
    <?xml version="1.0" encoding="iso-8859-1"?>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
       "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml">
       <head>
          <title>TITEL</title>
          <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
          <style type="text/css">
    body {
       width:  100%;
       height: 100%;
       margin: 0px;
       padding: 0px;
    }
    
    div.center_parent {
       width: 100%;
       height: 300px;
       margin: 0px;
       padding: 0px;
       text-align: center;
       background-color: #FBC8BF;
    }
    
    div.center_text {
       width: 90ex;
       margin: auto;
       padding: auto;
       text-align: left;
       background-color: #BFC8FB;
    }
          </style>
       </head>
       <body>
          <div class="center_parent">
             <div class="center_text">text text text text<br />text text text text<br />text text text text</div>
          </div>
       </body>
    </html>
    Lösung 2:
    Code:
    <?xml version="1.0" encoding="iso-8859-1"?>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
       "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml">
       <head>
          <title>TITEL</title>
          <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
          <style type="text/css">
    body {
       width:  100%;
       height: 100%;
       margin: 0px;
       padding: 0px;
       text-align: center;
    }
    
    div.center_text {
       width: 90ex;
       margin: auto;
       padding: auto;
       text-align: left;
       background-color: #BFC8FB;
    }
          </style>
       </head>
       <body>
          <div class="center_text">text text text text<br />text text text text<br />text text text text</div>
       </body>
    </html>
    Intel Core 2 Duo CPU 2.66GHz; Nvidia GeForce 8 8800 GTS; 4GB RAM; Fedora 12; KDE-testing

  11. #11
    Registrierter Benutzer
    Registriert seit
    15.09.2003
    Ort
    Stromberg & Mannheim
    Beiträge
    9
    nö, das geht so genausowenig.
    - simple leet logic

  12. #12
    Registrierter Benutzer Avatar von panzi
    Registriert seit
    05.05.2001
    Ort
    Kottingbrunn
    Beiträge
    609
    Bei mir mit Mozilla 1.6 geht's. Sprich es ist horizontal zentriert. Oder wills't es auch vertikal zentriert haben?
    Intel Core 2 Duo CPU 2.66GHz; Nvidia GeForce 8 8800 GTS; 4GB RAM; Fedora 12; KDE-testing

  13. #13
    Registrierter Benutzer
    Registriert seit
    15.09.2003
    Ort
    Stromberg & Mannheim
    Beiträge
    9
    ja natürlich. dass horizontales zentrieren kein problem darstellt, habe ich doch schon n paar postings weiter oben geschrieben...

    aber das geb ich echt so langsam auf. nicht mit gültigem xhtml :/
    - simple leet logic

  14. #14
    torben1
    Gast
    nabend,

    ic hhatte das prob auch schon öfter, leider.
    es giebt keine einfache lösung für das problem, die die ich immer benutze, funst mit ie und ne (ab 6) , aber leider nicht mit opera.
    <table border="0" cellspacing="0" cellpadding="0" width="100%" height="100%">
    <tr>
    <td>
    <div class="egal"></div>
    </td>
    </tr>
    </table>

    is zwar nicht schön aber funst halt.


    mfg


    torben

  15. #15
    Registrierter Benutzer
    Registriert seit
    15.09.2003
    Ort
    Stromberg & Mannheim
    Beiträge
    9
    ja, dass das geht, weiss ich. das nutzt aber dummerweise einen ie-bug aus: und zwar erwartet der die dtd in der ersten zeile. bei xhtml steht da aber die die xml deklaration und der doctype in zeile zwei. deshalb kapiert der ie nicht, dass es xhtml ist und er die seite im standard mode anzeigen müsste. also schaltet er in den quirks/kompatibilitäts modus, so wie auch alte nicht konforme seiten angezeigt werden. und da gibts 100% hohe tabellen und es klappt.
    - simple leet logic

Lesezeichen

Berechtigungen

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