zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden gibt es eine andere Lösung ohne Tabelle?

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 20.04.2009, 00:21
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 18.11.2008
Beiträge: 32
online befindet sich auf einem aufstrebenden Ast
Standard 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>
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 20.04.2009, 10:41
{ display: random;}
XHTMLforum-Kenner
 
Registriert seit: 08.09.2004
Ort: Stuttgart
Beiträge: 5.034
andir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblick
Standard

Hast Du mal ein Live-Beispiel?
__________________
Grüsse Andreas- auch mal wieder da...

Design isn't about the tools, it's about creating the best experience for the user. A design should be based on usability, accesibility, aesthetics, but never on floats, lists or background images. ( by Cameron Adams)
Wiedergelesen: > hier und hier

[Foren-Links] Dein Post? Klar, DAS vorher gelesen? Hilft. ## User-Landkarte
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 21.04.2009, 02:41
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 18.11.2008
Beiträge: 32
online befindet sich auf einem aufstrebenden Ast
Standard

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>
Mit Zitat antworten
  #4 (permalink)  
Alt 21.04.2009, 10:59
{ display: random;}
XHTMLforum-Kenner
 
Registriert seit: 08.09.2004
Ort: Stuttgart
Beiträge: 5.034
andir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblick
Standard

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>
__________________
Grüsse Andreas- auch mal wieder da...

Design isn't about the tools, it's about creating the best experience for the user. A design should be based on usability, accesibility, aesthetics, but never on floats, lists or background images. ( by Cameron Adams)
Wiedergelesen: > hier und hier

[Foren-Links] Dein Post? Klar, DAS vorher gelesen? Hilft. ## User-Landkarte

Geändert von andir (22.04.2009 um 10:43 Uhr)
Mit Zitat antworten
  #5 (permalink)  
Alt 21.04.2009, 12:13
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 14.03.2007
Ort: Bad Schmiedeberg
Beiträge: 1.395
regloh wird schon bald berühmt werden
Standard

Ich nehme an, er will, dass das inhalts-div horizontal scrollt.
Mit Zitat antworten
  #6 (permalink)  
Alt 21.04.2009, 12:55
{ display: random;}
XHTMLforum-Kenner
 
Registriert seit: 08.09.2004
Ort: Stuttgart
Beiträge: 5.034
andir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblick
Standard

Meinst Du

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

Mal schauen
__________________
Grüsse Andreas- auch mal wieder da...

Design isn't about the tools, it's about creating the best experience for the user. A design should be based on usability, accesibility, aesthetics, but never on floats, lists or background images. ( by Cameron Adams)
Wiedergelesen: > hier und hier

[Foren-Links] Dein Post? Klar, DAS vorher gelesen? Hilft. ## User-Landkarte
Mit Zitat antworten
  #7 (permalink)  
Alt 22.04.2009, 02:09
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 18.11.2008
Beiträge: 32
online befindet sich auf einem aufstrebenden Ast
Standard

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?

Geändert von online (22.04.2009 um 02:28 Uhr)
Mit Zitat antworten
  #8 (permalink)  
Alt 22.04.2009, 10:42
{ display: random;}
XHTMLforum-Kenner
 
Registriert seit: 08.09.2004
Ort: Stuttgart
Beiträge: 5.034
andir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblick
Standard

Zitat:
Zitat von online Beitrag anzeigen
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.
__________________
Grüsse Andreas- auch mal wieder da...

Design isn't about the tools, it's about creating the best experience for the user. A design should be based on usability, accesibility, aesthetics, but never on floats, lists or background images. ( by Cameron Adams)
Wiedergelesen: > hier und hier

[Foren-Links] Dein Post? Klar, DAS vorher gelesen? Hilft. ## User-Landkarte
Mit Zitat antworten
  #9 (permalink)  
Alt 22.04.2009, 13:14
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 18.11.2008
Beiträge: 32
online befindet sich auf einem aufstrebenden Ast
Standard

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

und Opera & IE:


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
Mit Zitat antworten
Sponsored Links
  #10 (permalink)  
Alt 23.04.2009, 11:09
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 18.11.2008
Beiträge: 32
online befindet sich auf einem aufstrebenden Ast
Standard

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

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
Tabelle um FormFeld TIMS_RML CSS 5 24.05.2011 19:31
Fehler in der Seite leverkusenerjung CSS 2 14.12.2010 13:56
Verschachtelte Tabelle auf 100% all4pages CSS 3 17.09.2010 14:49
tabelle in bezug auf andere tab aufräumen andinator Serveradministration und serverseitige Scripte 3 23.12.2006 16:34
Caption exakt so breit wie Tabelle AndreasB CSS 2 17.12.2005 01:44


Alle Zeitangaben in WEZ +2. Es ist jetzt 21:37 Uhr.