Div wird falsch zentriert // xhtml im IE geht nicht

Status
Nicht offen für weitere Antworten.

Dörti.Hermi

Erfahrenes Mitglied
Hallo zusammen,

folgendes:

1) Ich habe ein div, in dem sich ein div befindet, dass die Eigenschaft float:left besitzt. Damit rutscht das innere div in die obere linke Ecke des großen divs - wie es auch sein soll.
Ich will jetzt, dass neben dem kleinen div eine Überschrift steht, die so zentriert ist, dass sie in der Mitte des großen divs ist. Sie zentriert sich aber im Bereich, der rechts vom kleinen float:div ist. Die Überschrift soll sich aber im Bezug zum umgebenden div zentrieren.
Seht euch das Bild im Anhang an, dann seht ihr sofort, was ich meine.

2) Mein zweites Problem ist, dass der IE (7) bei mir keine XHTML-Files aufmacht! Die Seite ist in XHTML geschrieben (erfolgreich durch den Validator gelaufen). Wenn ich die Adresse aufrufe, erscheint immer nur ein Download-Dialog, mit dem ich das xhtml-File Öffnen oder Speichern kann. Der Firefox macht keine Probleme. Hier der Link dazu. Weiß jemand eine Lösung?

Ich hoffe ich habe euch jetzt nicht verwirrt ;)

HTML:
<?xml version="1.0" encoding="utf-8"?> 
<!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"
     xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
     xml:lang="de" >
<head>
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=UTF-8" />
<link rel="stylesheet" href="./css/poker.css" media="screen"/>
<!--[if IE]>
    <style type="text/css">@import url(./css/ie.css);</style>
<![endif]-->
<title>Register-Screen</title>
</head>

<body>
<div id="wrapper">
	<div id="header">
    	<img src="./img/logo.png" alt="Poker-Logo" title="Poker-Logo" id="logo"/>
        <img src="./img/chips.png" alt="Poker-Chips" title="Poker-Chips" id="chips"/>
    </div>
    <div id="main">
    
    	<div id="top">
        	<span style="padding-right:5px"><span class="underline_bold">Einloggen</span> oder <span class="underline_bold">Registrieren</span></span>
        </div>
        
        <div id="left">
        	<ul id="navi" style="list-style-image:url(./img/bullet.png)">
            	<li class="navi_style">Userdaten ändern</li>
                <li class="navi_style">Neues Spiel</li>
                <li class="navi_style">Ausloggen</li>
            </ul>
            <hr id="ruler" />
            
            <p style="font-weight:bold">Wahrscheinlichkeit</p>
            <p>Gewinn 70.033%</p>
            <p>Split 43.887%</p>
            <p>Pair 10.998%</p>
            <p>Two-Pair 2.33%</p>
            <p>Three of a kind 0.337%</p>
            <p>Straight 20.332%</p>
            <p>Flush 12.223%</p>
            <p>Full House 0.777%</p>
            <p>Four of a Kind 0.301%</p>
            <p>Straiht Flush 0.033%</p>
            <hr id="ruler" />
        </div>
        
        <div id="field" style="text-align:center">
        	<div id="status">
            	<p class="status" style="font-weight:bold">Chips</p>
                <p class="status">Im Pot 5 €</p>
                <p class="status">Ante 5 €</p>
                <p class="status">Ihr Stack 105 €</p>
            </div>
            
            <h3>Karten der Bank</h3>
            <img src="./img/deck/bg.png" alt="Deckblatt" title="Deckblatt"/>
            <img src="./img/deck/bg.png" alt="Deckblatt" title="Deckblatt"/>
            
            <h3>Gemeinschaftskarten</h3>
            <img src="./img/deck/clubs-10.png" alt="Deckblatt" title="Deckblatt"/>
            <img src="./img/deck/clubs-j.png" alt="Deckblatt" title="Deckblatt"/>
            <img src="./img/deck/clubs-q.png" alt="Deckblatt" title="Deckblatt"/>
            <img src="./img/deck/bg.png" alt="Deckblatt" title="Deckblatt" class="card"/>
            <img src="./img/deck/bg.png" alt="Deckblatt" title="Deckblatt" class="card"/>
            
            <form action="#">
            	<p class="form"><input type="submit" name="fold" value="Fold"/>
                                <input type="submit" name="check" value="Check"/>
                                <input type="submit" name="bet" value="Bet"/>
                </p>
            </form>
            
            <h3>Ihre Karten</h3>
            <img src="./img/deck/clubs-k.png" alt="Deckblatt" title="Deckblatt"/>
            <img src="./img/deck/clubs-a.png" alt="Deckblatt" title="Deckblatt"/>
        </div>
    </div>
    
    <div id="footer">
    	<p>&copy; 2008 EWA Poker.</p>	
    </div>

</div>
</body>
</html>

>>Link zum CSS-File<<


Vielen Dank,
Mfg Andi
 

Anhänge

  • poker.jpg
    poker.jpg
    28,1 KB · Aufrufe: 60
Das mit dem Downloaddialog kenn ich. Gibts anscheinend kein richtiges Workaround. Schreibs einfach als Deklaration als XHTML 1.0, dann frisst ers wieder.
 
Hab jetzt die DOCTYPE Deklaration für XHTML 1.0 genommen >> funktioniert im IE! Danke!

Aber ein Problem gibts ja noch...

Mfg

EDIT: Hat doch nicht funktioniert! IE kann nach wie vor das File nicht anzeigen!
 
Zuletzt bearbeitet:
Hi,

stell mal die verwendete Dateiendung ".xhtml" auf ".html" um.

Das horizontale Zentrieren der Überschriften und Grafikelemente bezogen auf das DIV #field erzielst du folgendermaßen:

Code:
        <div id="field">
            <div id="status">
                 <p class="status" style="font-weight:bold">Chips</p>
                 <p class="status">Im Pot 5 €</p>
                 <p class="status">Ante 5 €</p>
                 <p class="status">Ihr Stack 105 €</p>
            </div>
            <div id="cards">
                 <h3>Karten der Bank</h3>
                 <img src="./img/deck/bg.png" alt="Deckblatt" title="Deckblatt"/>
                 <img src="./img/deck/bg.png" alt="Deckblatt" title="Deckblatt"/>

                 <h3>Gemeinschaftskarten</h3>
                 <img src="./img/deck/clubs-10.png" alt="Deckblatt" title="Deckblatt"/>
                 <img src="./img/deck/clubs-j.png" alt="Deckblatt" title="Deckblatt"/>
                 <img src="./img/deck/clubs-q.png" alt="Deckblatt" title="Deckblatt"/>
                 <img src="./img/deck/bg.png" alt="Deckblatt" title="Deckblatt" class="card"/>
                 <img src="./img/deck/bg.png" alt="Deckblatt" title="Deckblatt" class="card"/>

                 <form action="#">
                    <p class="form"><input type="submit" name="fold" value="Fold"/>
                                <input type="submit" name="check" value="Check"/>
                                <input type="submit" name="bet" value="Bet"/>
                    </p>
                 </form>

                 <h3>Ihre Karten</h3>
                 <img src="./img/deck/clubs-k.png" alt="Deckblatt" title="Deckblatt"/>
                 <img src="./img/deck/clubs-a.png" alt="Deckblatt" title="Deckblatt"/>
           </div>
        </div>
Code:
#field{
        background-color: #003300;
        background-image:url(../img/table-bg.png);
        width:auto;
        height:458px;
        margin-left:201px;
        margin-right:3px;
        margin-top: 3px;
        text-align: left;
        color:#FFFFFF;
        position:relative;
}

#status {
        border-right:1px #FF7700 solid;
        border-bottom:1px #FF7700 solid;
        width:110px;
        /*float:left;*/
        padding:9px;
        color:#FFFFFF;
        font-size:12px;
        z-index:1;
        text-align:left;
        position:absolute;
        left:0;
        top:0;
}

#cards {
        width:400px;
        text-align:center;
        margin:0 auto;
}
 
Vielen Dank Maik, genau das was ich brauchte ;) !

Der IE kann das XHTML file zwar noch immer nicht anzeigen, aber ich werd's einfach in HTML umbenennen und fertig ^^

Mfg
 
Dörti.Hermi könntest du bitte noch einmal das CSS File hochladen oder posten denn der Link funktioniert nicht mehr. Wir haben gerade eine ähnliche Aufgabenstellung bekommen und das wär ziemlich hilfreich;-)

Danke im vorhinein
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück