XHTMLforum

XHTMLforum (http://xhtmlforum.de/index.php)
-   CSS (http://xhtmlforum.de/forumdisplay.php?f=73)
-   -   gibt es eine andere Lösung ohne Tabelle? (http://xhtmlforum.de/showthread.php?t=56731)

online 19.04.2009 23:21

gibt es eine andere Lösung ohne Tabelle?
 
Hallo,
habe mein Layout so gestaltet, das im content bzw. da wo der Inhalt rein kommt eine Graffik auf der rechten Seite ist.
Ich möchte jedoch nur links von der Graffik meinen Text einfügen, die Div Box mit dem Inhalt soll aber scrollbar sein, wenn der Inhalt zu gross ist.
Habe das im Moment so gelöst, das ich in meine Div Box #inhalt eine Tabelle rein tue, die ich in 2 Spalten aufteile. In die linke kommt der Inhalt und die rechte bleibt frei.

Kann man dies anders Lösen als mit Tabellen?

Hier der Code:
CSS:
Code:

#seite {
        position:relative;
        text-align: center;
        width: 754px;
        margin: 0 auto 0 auto;

        height:auto !important; /* moderne Browser */
        height:100%; /* IE */
        border: 1px ridge silver;
        }

#title{
        width: 754px;
        height:146px;
        text-align: center;
        background: #000 url(../bilder/title.gif);
        background-repeat:no-repeat;
        background-position:center;
        border-bottom: 0px solid silver;
        }

#navi{
        width:760px;
        height:40px;
        }

#inhalt{
          width: 738px;        /* 430*/
        height: 366px;
        text-align: left;
        color: white;
        overflow: auto;
        border-top: 0px solid silver;
        border-bottom: 1px solid silver;
        padding:0px 5px ;
        margin: 0px 5px ;
        background: transparent url(../bilder/hintergrund.jpg) no-repeat;
        }

#footer{
        width:750px;
        height:30px;
        margin: 0px; padding: 2px;
        text-align: center;
        color: #fff;
        background-color: #000;
        }

HTML-Code:

<body>
        <div id="seite">

                <div id="title"></div>
                <div id="navi"></div>
                               
                <div id="inhalt">
                <table border="0" cellspacing="0" cellpadding="2" style="table-layout:auto">
                  <tr>
                    <td style="width:420px;">
                        "TEXT""TEXT""TEXT""TEXT""TEXT""TEXT""TEXT""TEXT""TEXT""TEXT""TEXT""TEXT""TEXT""TEXT""TEXT""TEXT""TEXT""TEXT"
                        "TEXT""TEXT""TEXT""TEXT""TEXT""TEXT""TEXT""TEXT""TEXT""TEXT""TEXT""TEXT""TEXT""TEXT""TEXT""TEXT""TEXT""TEXT"
                        "TEXT""TEXT""TEXT""TEXT""TEXT""TEXT""TEXT""TEXT""TEXT""TEXT""TEXT""TEXT""TEXT""TEXT""TEXT""TEXT""TEXT""TEXT"
                        "TEXT""TEXT""TEXT""TEXT""TEXT""TEXT""TEXT""TEXT""TEXT""TEXT""TEXT""TEXT""TEXT""TEXT""TEXT""TEXT""TEXT""TEXT"
                        "TEXT""TEXT""TEXT""TEXT""TEXT""TEXT""TEXT""TEXT""TEXT""TEXT""TEXT""TEXT""TEXT""TEXT""TEXT""TEXT""TEXT""TEXT"
                        "TEXT""TEXT""TEXT""TEXT""TEXT""TEXT""TEXT""TEXT""TEXT""TEXT""TEXT""TEXT""TEXT""TEXT""TEXT""TEXT""TEXT""TEXT"
                        "TEXT""TEXT""TEXT""TEXT""TEXT""TEXT""TEXT""TEXT""TEXT""TEXT""TEXT""TEXT""TEXT""TEXT""TEXT""TEXT""TEXT""TEXT"
                        "TEXT""TEXT""TEXT""TEXT""TEXT""TEXT""TEXT""TEXT""TEXT""TEXT""TEXT""TEXT""TEXT""TEXT""TEXT""TEXT""TEXT""TEXT"
                        "TEXT""TEXT""TEXT""TEXT""TEXT""TEXT""TEXT""TEXT""TEXT""TEXT""TEXT""TEXT""TEXT""TEXT""TEXT""TEXT""TEXT""TEXT"
                        "TEXT""TEXT""TEXT""TEXT""TEXT""TEXT""TEXT""TEXT""TEXT""TEXT""TEXT""TEXT""TEXT""TEXT""TEXT""TEXT""TEXT""TEXT"
                        "TEXT""TEXT""TEXT""TEXT""TEXT""TEXT""TEXT""TEXT""TEXT""TEXT""TEXT""TEXT""TEXT""TEXT""TEXT""TEXT""TEXT""TEXT"
                        "TEXT""TEXT""TEXT""TEXT""TEXT""TEXT""TEXT""TEXT""TEXT""TEXT""TEXT""TEXT""TEXT""TEXT""TEXT""TEXT""TEXT""TEXT"
                        "TEXT""TEXT""TEXT""TEXT""TEXT""TEXT""TEXT""TEXT""TEXT""TEXT""TEXT""TEXT""TEXT""TEXT""TEXT""TEXT""TEXT""TEXT"
                        "TEXT""TEXT""TEXT""TEXT""TEXT""TEXT""TEXT""TEXT""TEXT""TEXT""TEXT""TEXT""TEXT""TEXT""TEXT""TEXT""TEXT""TEXT"
                        "TEXT""TEXT""TEXT""TEXT""TEXT""TEXT""TEXT""TEXT""TEXT""TEXT""TEXT""TEXT""TEXT""TEXT""TEXT""TEXT""TEXT""TEXT"
                        "TEXT""TEXT""TEXT""TEXT""TEXT""TEXT""TEXT""TEXT""TEXT""TEXT""TEXT""TEXT""TEXT""TEXT""TEXT""TEXT""TEXT""TEXT"
                        </td>
                    <td style="width:110px;"></td>
                  </tr>
                </table>
                </div> <!-- ende inhalt -->       
               
                <div id="footer"></div>
        </div>

</body>


andir 20.04.2009 09:41

Hast Du mal ein Live-Beispiel?

online 21.04.2009 01:41

ein live Beispiel leider nicht.
aber einfach den ganzen code kopieren und im editor als html speichern und dan aufrufen.............

Code:
HTML-Code:

<html>
<head>
<title>.:Tabelle:.</title>
<style type="text/css">
#seite {
        position:relative;
        text-align: center;
        width: 754px;
        margin: 0 auto 0 auto;

        height:auto !important; /* moderne Browser */
        height:100%; /* IE */
        border: 1px ridge silver;
        }

#title{
        width: 754px;
        height:146px;
        text-align: center;
        background: #000 url(../bilder/title.gif);
        background-repeat:no-repeat;
        background-position:center;
        border-bottom: 0px solid silver;
        }

#navi{
        width:760px;
        height:40px;
        }

#inhalt{
          width: 738px;        /* 430*/
        height: 366px;
        text-align: left;
        color: white;
        overflow: auto;
        border-top: 0px solid silver;
        border-bottom: 1px solid silver;
        padding:0px 5px ;
        margin: 0px 5px ;
        background: transparent url(../bilder/hintergrund.jpg) no-repeat;
        }

#footer{
        width:750px;
        height:30px;
        margin: 0px; padding: 2px;
        text-align: center;
        color: #fff;
        background-color: #000;
        }
</style>
</head>
<body>
<div id="seite">
<div id="title"></div>
<div id="navi"></div>
<div id="inhalt">

<table border="0" cellspacing="0" cellpadding="2" style="table-layout:auto">
  <tr>
    <td style="width:420px;">
                            "TEXT""TEXT""TEXT""TEXT""TEXT""TEXT""TEXT""TEXT""TEXT""TEXT""TEXT""TEXT""TEXT""TEXT""TEXT""TEXT""TEXT""TEXT"
                        "TEXT""TEXT""TEXT""TEXT""TEXT""TEXT""TEXT""TEXT""TEXT""TEXT""TEXT""TEXT""TEXT""TEXT""TEXT""TEXT""TEXT""TEXT"
                        "TEXT""TEXT""TEXT""TEXT""TEXT""TEXT""TEXT""TEXT""TEXT""TEXT""TEXT""TEXT""TEXT""TEXT""TEXT""TEXT""TEXT""TEXT"
                        "TEXT""TEXT""TEXT""TEXT""TEXT""TEXT""TEXT""TEXT""TEXT""TEXT""TEXT""TEXT""TEXT""TEXT""TEXT""TEXT""TEXT""TEXT"
                        "TEXT""TEXT""TEXT""TEXT""TEXT""TEXT""TEXT""TEXT""TEXT""TEXT""TEXT""TEXT""TEXT""TEXT""TEXT""TEXT""TEXT""TEXT"
                        "TEXT""TEXT""TEXT""TEXT""TEXT""TEXT""TEXT""TEXT""TEXT""TEXT""TEXT""TEXT""TEXT""TEXT""TEXT""TEXT""TEXT""TEXT"
                        "TEXT""TEXT""TEXT""TEXT""TEXT""TEXT""TEXT""TEXT""TEXT""TEXT""TEXT""TEXT""TEXT""TEXT""TEXT""TEXT""TEXT""TEXT"
                        "TEXT""TEXT""TEXT""TEXT""TEXT""TEXT""TEXT""TEXT""TEXT""TEXT""TEXT""TEXT""TEXT""TEXT""TEXT""TEXT""TEXT""TEXT"
                        "TEXT""TEXT""TEXT""TEXT""TEXT""TEXT""TEXT""TEXT""TEXT""TEXT""TEXT""TEXT""TEXT""TEXT""TEXT""TEXT""TEXT""TEXT"
                        "TEXT""TEXT""TEXT""TEXT""TEXT""TEXT""TEXT""TEXT""TEXT""TEXT""TEXT""TEXT""TEXT""TEXT""TEXT""TEXT""TEXT""TEXT"
                        "TEXT""TEXT""TEXT""TEXT""TEXT""TEXT""TEXT""TEXT""TEXT""TEXT""TEXT""TEXT""TEXT""TEXT""TEXT""TEXT""TEXT""TEXT"
                        "TEXT""TEXT""TEXT""TEXT""TEXT""TEXT""TEXT""TEXT""TEXT""TEXT""TEXT""TEXT""TEXT""TEXT""TEXT""TEXT""TEXT""TEXT"
                        "TEXT""TEXT""TEXT""TEXT""TEXT""TEXT""TEXT""TEXT""TEXT""TEXT""TEXT""TEXT""TEXT""TEXT""TEXT""TEXT""TEXT""TEXT"
                        "TEXT""TEXT""TEXT""TEXT""TEXT""TEXT""TEXT""TEXT""TEXT""TEXT""TEXT""TEXT""TEXT""TEXT""TEXT""TEXT""TEXT""TEXT"
                        "TEXT""TEXT""TEXT""TEXT""TEXT""TEXT""TEXT""TEXT""TEXT""TEXT""TEXT""TEXT""TEXT""TEXT""TEXT""TEXT""TEXT""TEXT"
                        "TEXT""TEXT""TEXT""TEXT""TEXT""TEXT""TEXT""TEXT""TEXT""TEXT""TEXT""TEXT""TEXT""TEXT""TEXT""TEXT""TEXT""TEXT" 
    </td>
    <td style="width:110px;"></td>
  </tr>
</table>

</div>

<div id="footer">                       
</div>
</div>

</body>
</html>


andir 21.04.2009 09:59

Hatte gerade ein bisschen Zeit. Alle Infos sind im Text enthalten. Getestet mit IE 6 und FF 3.x

HTML-Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">

<head>
    <title>Ohne Tabellen gehts auch</title>

    <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />
    <meta name="description" content="" />
    <meta name="author" content="" />
    <meta name="keywords" content="" />

<style type="text/css">

* {
    margin: 0;
    padding: 0;
}



#seite {
        position:relative;
        text-align: center;
        width: 754px;
        margin: 0 auto;

        height:auto !important; /* moderne Browser */
        height:100%; /* IE */
        border: 1px ridge silver;
        }

#title{
        width: 754px;
        height:146px;
        text-align: center;
        background: #000 url(../bilder/title.gif);
        background-repeat:no-repeat;
        background-position:center;
        border-bottom: 0px solid silver;
        color: white;
        }

#navi{
        width:754px;
        height:1.8em;
        list-style-type: none;
        background: #aaa;
        }
        #navi li {
    float: left;
    width: 150px;
    color: white;
    font-weight: bold;
    background-color: #abc;
    margin: 0 0.5em 0 0.5em;
    line-height: 1.8em;
 }
 #navi li a {
    color: white;
    display: block;
    width: 100%;
    background-color: #abc;
 }
 #navi li a:hover {
    color: white;
    background-color: black;
 }


#inhalt{
          width: 754px;        /* 430*/
        height: 366px;
        text-align: left;
        color: #000;
        overflow: auto;
        border-top: 0px solid silver;
        border-bottom: 1px solid silver;
        }

#footer{
        width:754px;
        height:30px;
        text-align: center;
        color: #fff;
        background-color: #000;
        }
        .testbild {
    margin: 1em;
    padding: 1em;
    border: 1px solid #ccc;
    float: right;
 }
 #inhalt p, #inhalt ul {
    margin: 2em 250px 1em 1em;

 }
 em {
    font-weight: bold;
    font-style: italic;
 }
</style>
</head>
<body>
<div id="seite">
<div id="title">Ohne Tabellen gehts auch (Mein Beispiel)</div>
<ul id="navi"><li><a href="#">Eins</a></li><li><a href="#">Zwei</a></li><li><a href="#">Drei</a></li><li><a href="#">Vier</a></li></ul>
<div id="inhalt">
  <img class="testbild" src="cambria.gif" alt="testbild" title="testbild" />
                        <p>Dies ist eine Lösung mit einem rechts floatierenden Bild, die float-Eigenschaft ist wesentlich beim Layouten mit CSS, also <a href="http://jendryschik.de/wsdev/einfuehrung/">informieren</a>. Sofern das Bild nur als Dekoration dient, kann es auch als Hintergrundbild von #inhalt eingebunden werden, mehr zur Hintergrundpositionierung: http://www.css4you.de. Hier noch ein neuer Test mit einer Liste (square)</p>
 <ul style="list-style-type:square;">
 <li>Date 1</li>
 <li>Date 2</li>
</ul>

<p> Alle Texte (Absätze) sind über #inhalt p mit einem rechten margin von 250px ausgestattet (abhängig von der Bildbreite), so dass der Eindruck von zwei Spalten entsteht. Dieser margin muss für alle Elemente angegeben werden, die visuell neben dem Bild liegen sollen, z.B. für Listen, Zitate und so weiter, siehe Quelltext. Elemente <em>innerhalb</em> von p brauchen diesen großen margin natürlich nicht, da p bereits diesen margin hat. Der große margin muss auch bei der Verwendung eines Hintergrundbildes anstelle des gefloateten Bildes angegeben werden.</p>

<p>Schwierige Sache: Die grundlegenden Layout-Container sollten, <em>wenn vermeidbar</em>, niemals eigene paddings oder margins erhalten. Die visuelle Steuerung man besser dadurch lösen, dass man den Elementen <em>innerhalb</em> dieser Container entsprechende paddings oder margins mitgibt. So kann man hässliche Browserunterschiede vermeiden bzw. minimieren. Deshalb auch der globale CSS-Reset am Anfang der Styles. Wenn Du des Englischen mächtig bist, hier weitere <a href="http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/"> Info</a>.</p>

<p>Verwende eine <a href="http://de.selfhtml.org/html/allgemein/grundgeruest.htm">Dokumenttyp-Deklaration</a>, das erleichtert die Arbeit ungemein und die Browser müssen nicht rumraten was sie wie interpretieren sollen. Hier kommt XHTML 1.0 Transitional, vor, strict geht auch. Fehlt eine solche, können sich scheinbar unerklärliche Unterschiede in der Darstellung zwischen verschiedenen Browsern, bzw. Browsergenerationen ergeben. Im Übrigen ist die Forum-FaQ sehr hilfreich.</p>
  <p>Und nun viel Spass.</p>

</div>

<div id="footer">
</div>
</div>

</body>


regloh 21.04.2009 11:13

Ich nehme an, er will, dass das inhalts-div horizontal scrollt.

andir 21.04.2009 11:55

Meinst Du :shock:

Ich nehme an *spekulier* dass sein Blindtext einfach aus Versehen keine Leerzeichen enthält und deshalb der horizontale Scrollbalken kommt.

Mal schauen :)

online 22.04.2009 01:09

Hallo,
erstmal DANKE!
also die Lösung von andir ist super ich habe davon mal gelesen bin aber nicht drauf gekommen.

Ich möchte keinen horizontalen scroll sondern vertikal.
Ich weiss nicht warum aber bei mir verlaüft der scroll vertikal in dem Code welchen ich, abgespeckt, gepostet habe.

Habe es jedoch auch gerade festgestellt, dass wenn ich den code von hier kopiere und aufrufe so wie bei Euch ein horizotaler scroll erscheint. Da frage ich mich wieder warum?

Was noch komisch ist wenn ich in meinen Inhalt eine Auflistung mache mit:
Code:

<ul style="list-style-type:square;">
 <li>Date 1</li>
 <li>Date 2</li>
</ul>

Erscheint kein Quadrat vor dem Text. Tue ich diesen Code in eine html Datei funktioniert es wieder. Woran könnte es liegen?

mfg


EDIT:
Habe gerade erst den beigefügten Text durch gelesen und mir paar infos zur Dokumenttyp-Deklaration durch gelesen. Ziemlich wirr das ganze im endeffekt weiss ich nicht wirklich was ich bei mir schreiben soll. Folgendes steht jedoch da:
Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

ist das OK?

andir 22.04.2009 09:42

Zitat:

Zitat von online (Beitrag 430748)
Hallo,
erstmal DANKE!

Gerne. ;)

Habe es jedoch auch gerade festgestellt, dass wenn ich den code von hier kopiere und aufrufe so wie bei Euch ein horizotaler scroll erscheint. Da frage ich mich wieder warum?

Vermutlich hast Du eingestellt, dass bei Dir beim Upload alle Leerzeichen entfernt werden - dann gibt es dieses Ergebnis. Oder es lag am Copy + Paste.


Was noch komisch ist wenn ich in meinen Inhalt eine Auflistung mache mit:
Code:

<ul style="list-style-type:square;">
 <li>Date 1</li>
 <li>Date 2</li>
</ul>

Erscheint kein Quadrat vor dem Text. Tue ich diesen Code in eine html Datei funktioniert es wieder. Woran könnte es liegen?

mfg

Kenne deinen Code nicht :) Nimm doch meinen, da funktionierts ( oben ergänzt) Listen sind übrigens eigenständig und sollten/dürfen nicht innerhalb von Absätzen erscheinen. Mach dich schlau ;)

EDIT:
Habe gerade erst den beigefügten Text durch gelesen und mir paar infos zur Dokumenttyp-Deklaration durch gelesen. Ziemlich wirr das ganze im endeffekt weiss ich nicht wirklich was ich bei mir schreiben soll. Folgendes steht jedoch da:
Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

ist das OK?

Html 4.01 strict ist sehr o.k.

online 22.04.2009 12:14

Hi,

Zitat:

Vermutlich hast Du eingestellt, dass bei Dir beim Upload alle Leerzeichen entfernt werden - dann gibt es dieses Ergebnis. Oder es lag am Copy + Paste.
Ok, wo kann man dies den einstellen bzw. abstellen?

Habe das ganze gerade mit IE getestet, gestern hatte ich nur Firefox und Opera ausprobiert. Und musste feststellen, dass irgendwas schief gegangen ist. Und zwar ist der Text der in <p> ist ganz schmall als hätte man margin: 5px 600px 0px 5px; eingestellt habe jedoch margin:5px 300px 0px 5px;. Dies ist jedoch nur so wenn ich Fotos im Inhalt habe, wenn ich nur Text einfüge ist die Formatierung ok. Siehe Code unten.

Das Problem bei IE, weswegen ich nicht sofort testen kann ist, dass ich keine php Dateien aufrufen kann, muss immer die Datei in html umbennenen. Liegt bestimmt an irgendeiner Einstellung aber welcher?

Zitat:

Kenne deinen Code nicht Nimm doch meinen, da funktionierts ( oben ergänzt) Listen sind übrigens eigenständig und sollten/dürfen nicht innerhalb von Absätzen erscheinen. Mach dich schlau
Also habe gestern mit meinem Code den selben Teilerfolg wie mit dem von andir. Bei Opera und IE ist alles OK und bei Firefox ist das Quadrat nicht ganz dargestellt.
Siehe jpg:
firefox http://www.terencechill.de/firefox.jpg

und Opera & IE: http://www.terencechill.de/opera.jpg


Hier ist mein ganzer CODE:
HTML-Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

<html>
<head>
<title>.:seite:.</title>

<meta http-equiv="Content-Type" content="text/html;">
<meta name="author" content="">
<meta name="robots" content="index, follow"> <!-- robot should analyse linked pages -->
<meta name="revisit-after" content="1 day"> <!-- robot should come again after x days -->
<meta name="content-language" content="de">

<script type="text/javascript" src="../css/js/mootools.js"></script>
<script type="text/javascript" src="../css/js/slimbox.js"></script>
<link rel="stylesheet" href="../css/css/slimbox.css" type="text/css" media="screen" />

<style type="text/css">

/* --------- Allgemeines ---------- */
*{
        margin:1;
        padding:0;
        border:0;
        }
 
body {
        color: white; background-color: black;
        font-size: 100.01%;
        font-family: Helvetica,Arial,sans-serif;
        text-align: center;  /* Zentrierung im Internet Explorer */
        }

#seite {
        position:relative;
        text-align: center;
        width: 754px;
        margin: 0 auto 0 auto;

        height:auto !important; /* moderne Browser */
        height:100%; /* IE */
        background: transparent url(../bilder/hintergrund.jpg) no-repeat;
        border: 0px ridge silver;
        }

#title{
        width: 754px;
        height:146px;
        text-align: center;
        background: #000 url(../bilder/ani-bw-gif.gif);
        background-repeat:no-repeat;
        background-position:center;
        border-bottom: 0px solid silver;
        }

#navi{
        width:760px;
        height:40px;
        }

#main{
        width: 738px;        /* 430*/
        height: 366px;
        border: 1px solid green;
        }


#inhalt{
        width: 738px;        /* 430*/
        height: 366px;
        color: white;
        overflow: auto;
        border-top: 0px solid silver;
        border-bottom: 1px solid silver;
        padding:0px 5px ;
        margin: 0px 5px ;
       
       
        /*text-align: left;*/
        text-align:justify;
        font-size:15px;
       
        }

#footer{
        width:750px;
        height:30px;
        margin: 0px;
        padding: 2px 2px 0px;
        text-align: center;
        color: #fff;
        background-color: #000;
        }
       
h1{
        font-size:18px;
        text-decoration: underline;
        font-weight: bold;
        color: green;
        margin: 6px 300px 0px 6px;        /*2 Spalten Effekt*/
        }

h2{
        font-size:16px;
        margin: 6px 300px 0px 6px;        /*2 Spalten Effekt*/
        color: white;
        text-decoration: underline; font-weight: bold;
        }
h3{
        margin: 5px 300px 0px 5px;        /*2 Spalten Effekt*/
        color: white;
        text-decoration: underline; font-weight: bold;
        }
       
a{
        padding: 0.1em;
        text-decoration:underline;
        color: white;
        }

p{
        text-align:justify;
        margin: 5px 300px 0px 5px;        /*2 Spalten Effekt*/
        }
       
#inhalt li{
        list-style-type:square;
        text-align:left;
        margin: 5px 300px 0px 5px;        /*2 Spalten Effekt*/
        }       
       
               
a:hover{
        color: #999;
        text-decoration:underline;}

img {
        float:left;
        margin:5px;
        }

</style>
</head>

<body>
        <div id="seite">

                <div id="title"></div>
                <div id="navi">
                        <div class="navi">               
                        </div> <!-- ende class navi -->
                </div> <!-- ende id navi -->
               

                <div id="inhalt">
<h1>DATES</h1>

<li>Date 1</li>
<li>Date 2</li>

<h1>NEWS</h1>
<h2>22.04.03 Mein Test</h2>
<p>text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text</p>
<a href="testbild/testbild1352.JPG" rel="lightbox[testbild]"><img src="testbild/testbild1352.JPG" width="370" height="67" border="1" alt="Bild 1"></a>
<a href="testbild/testbild1353.JPG" rel="lightbox[testbild]"><img src="testbild/testbild1353.JPG" width="370" height="67" border="1" alt="Bild 2"></a>
<a href="testbild/testbild1349.JPG" rel="lightbox[testbild]"><img src="testbild/testbild1349.JPG" width="370" height="67" border="1" alt="Bild 3"></a>


<h2>24.05.08 Weiter gehts mit dem nächsten Thema</h2>
<p>text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text</p>
<a href="testbild/testbild1352.JPG" rel="lightbox[testbild]"><img src="testbild/testbild1352.JPG" width="370" height="67" border="1" alt="Bild 1"></a>
<a href="testbild/testbild1353.JPG" rel="lightbox[testbild]"><img src="testbild/testbild1353.JPG" width="370" height="67" border="1" alt="Bild 2"></a>
<a href="testbild/testbild1349.JPG" rel="lightbox[testbild]"><img src="testbild/testbild1349.JPG" width="370" height="67" border="1" alt="Bild 3"></a>

<h2>20.04.08 Weiter gehts mit dem nächsten Thema</h2>
<p><a href="test.jpg" rel="lightbox[samba]"><img src="test.jpg"  width="115" height="115" border="1"></a>
text text text texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext text
</p>

<br><br><br>
<h2>09.03.08 Weiter gehts mit dem nächsten Thema</h2>
<p><a href="test2.jpg" rel="lightbox[test2]"><img src="test2.jpg"  width="115" height="160"  border="4"></a>text text text texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext text
</p>
               
                </div> <!-- ende inhalt -->       

                <div id="footer">
                </div>
        </div>

</body>
</html>


mfg

online 23.04.2009 10:09

Hallo,
hat keiner eine Idee wieso es im IE diese komische Darstellung gibt?
Versuche schon seit gestern alles mögliche aber ohne Erfolg.

hubspe 23.04.2009 10:25

Hi,

dei Browser haben unterschiedliche Default-Einstellungen die Listenzeichen betreffend.
Bei FF ist es list-style-position: outside; und beim IE list-style-position:inside;

Es empfiehlt sich daher z.B. entweder auf inside zu setzen, oder die Listenzeichen auszuschalten, oder eine kleine HG-Grafik als Listenzeichen einzubinden. ;)

andir 23.04.2009 10:47

Das mit den Listenpunkten ist ein altes Problem, für das ich Dir keine brauchbare Lösung habe. Der Firefox benötigt Platz innerhalb des Elements zur Darstellung der Listenpunkte, der IE rendert die Listenpunkte (wohl) auch ausserhalb des Elements. Die Spezifikation sagt meines Wissens dazu nichts aus, so dass da jeder seine eigene Suppe kocht.

Du mußt halt rumprobieren, bzw. den nötigen Platz schaffen.

im Übrigen gehören Listen in eine ul oder ol, und margin: 1; ( bei deinem CSS-Reset) ist eine ungültige Angabe :)

andir 23.04.2009 10:50

@hubspe: Wenn er die Listenpunkte aber ausserhalb des Fließtextes haben will und nicht genug Platz hat, bekommt er dann mit dem IE ein Problem...

hubspe 23.04.2009 11:17

Hi,

Zitat:

Zitat von andir (Beitrag 430928)
@hubspe: Wenn er die Listenpunkte aber ausserhalb des Fließtextes haben will und nicht genug Platz hat, bekommt er dann mit dem IE ein Problem...

klar, ich hab ja auch nur Alternativen aufgezählt. :)

Was er davon annimmt und wie er sich den nötigen Platz verschafft muss er schauen (wahrscheinlich am besten ausschalten, dann ist der Platz wurscht). ;)

online 24.04.2009 00:20

Hallo,
habe es geschafft das es im IE auch so aussieht wie bei FF.
Habe einfach <ul> um die <li> Aufzählung hinzugefügt und es funktioniert.
Ich habe auch niergendwo list-style-position benutzt in meinem CODE.


Was mich noch weiter Ärgert, ist das ich bei IE nicht die auf meiner HDD befindlichen php Dateien öffnen kann, sondern diese erst in html umändern muss. Wenn ich die php Dateien öffnen will, startet FF und geht dort auf!
Habt ihr eine Idee an welcher Einstellung dies wohl liegt?


EDIT:
Habe ein Problem mit Textumbruch bzw. Umbruch Allgemein.
Nach Bildern und h1...h4 wirde kein Umbruch nach <br> gesetzt, wieso ist das so?
Habe es auch mit white-space:normal; ausprobiert leider ohne Erfolg.

hubspe 24.04.2009 06:46

Moin,

Zitat:

Zitat von online (Beitrag 431050)
Ich habe auch niergendwo list-style-position benutzt in meinem CODE.

das hat auch keiner von behauptet. ;)

Zitat:

Zitat von hubspe (Beitrag 430922)
Hi,
die Browser haben unterschiedliche Default-Einstellungen die Listenzeichen betreffend.



Ansonsten können wir ohne komplettes Beispiel oder Link nur rumraten.

EvT 24.04.2009 08:41

Zitat:

Zitat von hubspe (Beitrag 430922)
die Browser haben unterschiedliche Default-Einstellungen [...]

Vielleicht ist es zu Lern- bzw. Lehrzwecken interessant, die CSS-2.1-Voreinstellungen der 4 großen Browserfamilien als Tabelle zur Verfügung zu haben:

CSS2.1 User Agent Style Sheet Defaults


Alle Zeitangaben in WEZ +2. Es ist jetzt 01:02 Uhr.

Powered by vBulletin® Version 3.8.11 (Deutsch)
Copyright ©2000 - 2020, vBulletin Solutions, Inc.

© Dirk H. 2003 - 2020