# Lücke zwischen 2 Tabellen



## GENESIS2005 (3. Juli 2005)

Huhu,

Also ich habe meine Seite nochmals umstrukturiert und habe mich nun entschlossen eine Navigation seitlich anzubringen. Dazu habe ich eine große Tabelle erzeugt mit einer Spalte und 2 Zeilen. In der oberen Zeile ist eine weitere Tabelle enthalten mit einer Zeile und 3 Spalten. Maße sind: 100px,800px,100px also insgesamt 1000 pixel so wie die erste große Tabelle. In der zweiten Zeile ist auch wieder eine Tabelle enthalten die mir eine andere Aufteilung erlaubt. Maße sind: 150px,750px,100px. In die linke Spalte kommt nun wieder eine Tabelle, welche die Navigation beinhalten soll.

Das einzige Problem ist: Zwischen dem Bild und der Navigation ist ein Spalt, der ausschließlich im Internet-Explorer zu sehen ist.

Developer Planet 

Weiß einer Rat?

MFG.

GENESIS2005


----------



## GENESIS2005 (3. Juli 2005)

Mittlerweile hat sich die Sache erledigt, aber... Ich hab nun im <img> Tag reingeschrieben: align="absmiddle".

Ich weiß nicht ob das eine elegante Lösung ist... kann mir da jemand weiterhelfen?


----------



## Dr Dau (4. Juli 2005)

Hallo!

Warum machst Du es nicht so?

CSS

```
html, body { width:100%; height:100%; margin:0px 15px; padding:0px; }
```


```
<body class="bodystyle">
 
<!-- Haupttabelle -->
<table width="1000" border="1" cellpadding="0" cellspacing="0">
<tr>
	<td width="1000" height="100" colspan="3" style="text-align:center;">
	 <img src="bilder/banner.jpg" width="800" height="100" alt="Developer Planet">
	</td>
</tr>
<tr>
	<td width="150">
	 &nbsp;
	</td>
	<td width="750">
	 &nbsp;
	</td>
	<td width="150">
	 &nbsp;
	</td>
</tr>
<tr>
	<td width="150">
	 <ul class="ulnavi">
	 <li class="linavihead">News</li>
	 <li class="linavi">Aktuell</li>
	 <li class="linavi">Archiv</li>
	 <li class="linavihead">C#/C++</li>
	 <li class="linavi">Dos-Programmierung</li>
	 <li class="linavi">Windows-Programmierung</li>
	 <li class="linavi">MFC</li>
	 <li class="linavi">Tipps &amp; Tricks</li>
	 <li class="linavi">Tutorials</li>
	 <li class="linavi">Tools</li>
	 <li class="linavihead">Webgestaltung</li>
	 <li class="linavi">HTML / CSS</li>
	 <li class="linavi">Javascript</li>
	 <li class="linavi">PHP</li>
	 <li class="linavi">Tipps &amp; Tutorial</li>
	 <li class="linavi">Tutorials</li>
	 <li class="linavi">Tools</li>
	 <li class="linavihead">Multimedia:</li>
	 </ul>links
	</td>
	<td width="750">
	 &nbsp;
	</td>
	<td width="150">
	 &nbsp;
	</td>
</tr>
</table>
</body>
```
Gruss Dr Dau


----------



## GENESIS2005 (4. Juli 2005)

Huhu

Also wenn ich das richtig sehe, hast du da nun eine große, globale Tabelle geschrieben, die alle Inhalte in sich trägt. Mhh auch ne Idee. Ich habe mir bei meiner Sache gedacht, dass es einfacher wäre eine große, globale Tabelle zu machen, in der weitere Tabellen sind, damit ich es einfacher habe verschiedene Layouts zu verwenden.

Ich probiere das Ganze mal aus... habe aber gleich noch ne Frage. Die Zeilenhöhe also
"height" kann minimal nur einen Wert von 19px annehmen. Wie schaffe ich es den Wert noch niedrieger zu bekommen. Ich schiele dabei auf die Navigation, welche mit Listen gemacht wurde und leider noch etwas zu groß ist.

*Edit*

Das mit der großen Tabelle ist keine schlecht Idee, aber der Streifen ist nun wieder da .
Wenn du mal Strg+A drückst siehst du das.

MFG

GENESIS2005


----------



## Gumbo (4. Juli 2005)

Diese ganze Klassifizierung ist garnicht nötig. Moderne Browser kommen auch mit folgender geschickten Nutzung der Selektoren zurecht:
	
	
	



```
<ul id="nav-main">
	<li>News<ul>
		<li>Aktuell</li>
		<li>Archiv</li>
	</ul></li>
	<li>C#/C++<ul>
		<li>Dos-Programmierung</li>
		<li>Windows-Programmierung</li>
		<li>MFC</li>
		<li>Tipps &amp; Tricks</li>
		<li>Tutorials</li>
		<li>Tools</li>
	</ul></li>
	<li>Webgestaltung<ul>
		<li>HTML / CSS</li>
		<li>Javascript</li>
		<li>PHP</li>
		<li>Tipps &amp; Tutorial</li>
		<li>Tutorials</li>
		<li>Tools</li>
	</ul></li>
	<li>Multimedia<ul>
		<li>Audiobearbeitung</li>
		<li>Videobearbeitung</li>
		<li>Bildbearbeitung</li>
		<li>3D-Modelling</li>
		<li>Tipps &amp; Tutorial</li>
		<li>Tutorials</li>
		<li>Tools</li>
	</ul></li>
	<li>Forum</li>
	<li>Downloads</li>
	<li>AGB</li>
	<li>Links</li>
</ul>
```


```
#nav-main {
	width:			12em;
	border:			solid #000;
	border-width:		1px 1px 0 1px;
}
#nav-main,
#nav-main * {
	list-style:		none;
	margin:			0;
	padding:		0;
}
#nav-main > li {
	border-bottom:		1px solid #000;
	background:		url(http://home.arcor.de/genesis2004/bilder/navihead.jpg) repeat-x;
}
#nav-main li ul {
}
#nav-main li ul li {
	border-top:		1px solid #000;
	background:		#e5e5e5;
}
```
Auch die Nutzung von Tabellen als Layoutwerkzeug ist nicht nötig. Siehe dazu „Warum Layout mit Tabellen dumm ist: Probleme definiert, Lösungen angeboten“.


----------



## GENESIS2005 (4. Juli 2005)

Hallo,

Ich glaube ich werde nochmal meine ganze Seite ohne Tabellen aufbauen. Die Seite auf welcher das erklärt wird gibt mir einen recht guten Eindruck davon.

Danke dir!


----------



## Dr Dau (4. Juli 2005)

Welchen Spalt meinst Du?
Den der direkt unter dem Banner ist? Dann nehme dort die Zellenreihe raus.
Den Spalt links und rechts? Dann nehme bei margin die 15px raus.

Prinzipiell hat Gumbo mit dem Layout schon recht, nur sollte man auch bedenken das einige Sachen mit Tabellen halt viel einfacher zu lösen sind als mit DIV's.
Siehe hierzu auch den 2. Link in meiner Signatur.
Im 1. Link meiner Signatur findest Du Beispiele wie man dieses mit DIV's lösen könnte, wobei das 3. Beispiel noch Darstellungsprobleme in Opera hat.

Ich persönlich baue mein Layout lieber in ein paar Minuten mit Tabellen, als mich stundenlang mit DIV's rumzuärgern.
Wem dass nicht passt, braucht sich meine Seiten ja nicht anzusehen.


----------



## GENESIS2005 (4. Juli 2005)

Prinzipell habt ihr beide recht^^. Ich probiere alle Varianten mal aus. Kann ja nicht schaden über CSS mal etwas mehr zu lernen. Vielleicht schaff ich es ja ein Mittelding aus beiden Varianten zusammen zu bauen.


----------



## Dr Dau (4. Juli 2005)

Was mich aber auch immer wieder verwundert ist, dass Leute die gegen Tabellen sind, sich auf Seiten wie dieser (die vor lauter Tabellen nur so strotzt) rumtreiben. 
Grenzt sowas nicht schon an perversität?!  

Nur mal so als  .


----------



## GENESIS2005 (4. Juli 2005)

@Gumbo

Dein CSS funktioniert nur fast richtig. Die Backgrounds sind grau, aber das Bild wird nicht bei News usw. hineingesetzt. D.h. ich habe einen weißen Hintergrund bei News und graue Hintergründe bei den dadrunter.


----------



## Dr Dau (4. Juli 2005)

Was das Menü angeht, warum arbeitest Du nicht mit line-height?
Natürlich sollte dieses nich geringer als font-size sein.

[edit] Und schicke die Seite mal durch den Validator.  [/edit]


----------



## GENESIS2005 (4. Juli 2005)

Line-height ist für die Höhe da oder?

Kannte den Befehl nämlich noch. Aber leider bin ich grad am verzweifeln, ich bekomm das nicht so hin, dass er mir bei news das bild reinhaut und bei den anderen die Farbe.


----------



## Dr Dau (4. Juli 2005)

Line-height ist für die Zeilenhöhe.... besonders wichtig um ein einheitliches Erscheinungsbild in den verschiedenen Browsern zu bekommen (genauso wie font-size).
Du willst nur die News orange haben?
Dann gebe da eine separate Klasse an.
Und ausserdem dürfen bei den Klassennamen keine Leerzeichen sein, nimm die raus oder ersetze sie z.b. durch einen Unterstrich.
Und <ol> im <ul> solltest Du auch rausnehmen.... ich verweise nochmal auf den Validator.


----------



## GENESIS2005 (4. Juli 2005)

Die Leerzeichen sind ja gewollt, da es zwei Klassen sind, welche im Style angezeigt werden sollen. Also ich werde das so machen, dass ich nun die Kopfzeilen mit einer Klasse versehe und die darunterliegenden eingeschlossenen mit ids versehe bzw.
das mit #id * tag zu verwenden.


----------



## Dr Dau (4. Juli 2005)

GENESIS2005 hat gesagt.:
			
		

> ....dass ich nun die Kopfzeilen mit einer Klasse versehe und die darunterliegenden eingeschlossenen mit ids versehe....


Klassen dürfen mehrfach verwendet werden, ID's nur einmalig.... musst Du also umgekehrt machen..... oder um ganz sicher zu gehen, nimm nur Klassen.


----------



## GENESIS2005 (4. Juli 2005)

Also da ich nun fast am verzweifeln bin was die Ids und die tags angeht nehm ich wieder nur Klassen, weil es scheint nicht so richtig zu funktionieren.

Entweder macht er mir überall orange oder die Ausrichtung passt vorne und hinten nicht oder das Text-Layout stimmt einfach net.


----------



## Dr Dau (4. Juli 2005)

Wie gesagt, mit Klassen bist Du auf der sicheren Seite, die kannst Du einmalig oder mehrfach verwenden.

Ich würde eine Klasse für das "Grundgerüst" der Navigation erstellen, da kommt dann die ganze Schriftformatierung rein, Rahmenfarbe usw.
Dann machst Du eine Klasse z.b. class="orange", dort gibst Du an dass die Schrift in Fett erscheinen soll, dann noch das orangene Hintergrundbild.
Dann eine Klasse z.b. class="grau", da gibst Du dann die graue Hintergrundfarbe an.


----------



## GENESIS2005 (4. Juli 2005)

Jap genauso wie ich es halt vorher hatte... aber halt nun mit dem kontrollierten "Line-height" .

Ein weiteres Problem ist: Wie bekomm ich rechts von der Navigation eine Seite mit Inhalt? Muss ich dem Div Tag dann ne absolute Posi geben?


----------



## Maik (4. Juli 2005)

GENESIS2005 hat gesagt.:
			
		

> Wie bekomm ich rechts von der Navigation eine Seite mit Inhalt? Muss ich dem Div Tag dann ne absolute Posi geben?


Was verstehst du unter _Seite mit Inhalt_? Ein iFrame-Element? Und wozu ein DIV mit festen Positionsangaben?

In deiner Tabelle *.maintable* befindet sich doch rechts neben der Navigation eine Tabellenzelle mit 741px Weite, in die anscheinend der Seiteninhalt gehört, oder?


----------



## Dr Dau (4. Juli 2005)

Interessiert dich dass wirklich?
Schau erstmal was passiert wenn Du noch ein DIV für den Content hinzufügst.  
Denn Du willst ja sicherlich rechts neben dem Menü auch Inhalt haben?!

[edit] @Michael, der Quellcode ist mittlerweile völlig überholt und mittlerweile ganz ohne Tabellen.... in seinem 1. Posting ist der Links zur Seite.  [/edit]


----------



## GENESIS2005 (4. Juli 2005)

Ok also ich geben mal einen Lagebericht:

Das Layout ist nun völlig ohne Tabellen erstellt.
Banner und Navigationsmenü sind nun eingefügt:

Probleme:

"Display:Block" will patu nicht funktionieren... wenn ich "w\idth" einfüge macht der mir nu mist.
Ich hab einen Div Tag in den anderen verschachtelt und auch nach dem Div Tag geschrieben und beide Male steht der Text unten drunter .
Ich weiß nicht wie ich am besten die Hoverfunktion hineinbringe ohne viele Klassen und Javascript zu benutzen, ich dachte da so an a:hover, aber wie das mit dem background funtz, ka.

Bitte um Hilfe 


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

<html>
	<head>

		<!-- Meta Tags -->
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
		<meta name="Author" content="Martin Blum">
		<meta name="Version" content="1.0">
		<meta name="Copyright" content="Martin Blum">
		<meta name="description" content="C++, HTML, Javascript, PHP, Audio, Video">

		<!-- Titel -->
		<title>Developer Planet - Die Community f&uuml;r Programmierer</title>

		<!-- Includes -->
		<link rel="stylesheet" href="data/general.css">

	</head>
	<body class="body-style">
		<div class="div-banner"><img src="bilder/banner.jpg" width="800" height="100"></div>
		<div class="div-navi">
			<ul class="ul-navi">
				 <a href=""><li class="li-headline">News</li></a>
				 <a href=""><li class="li-lines">Aktuell</li></a>
				 <a href=""><li class="li-lines">Archiv</li></a>
				 <a href=""><li class="li-headline">C#/C++</li></a>
				 <a href=""><li class="li-lines">Dos-Programmierung</li></a>
				 <a href=""><li class="li-lines">Windows-Programmierung</li></a>
				 <a href=""><li class="li-lines">MFC</li></a>
				 <a href=""><li class="li-lines">Tutorials (C#/C++)</li></a>
				 <a href=""><li class="li-lines">Tools (C#/C++)</li></a>
				 <a href=""><li class="li-headline">Webgestaltung</li></a>
				 <a href=""><li class="li-lines">HTML / CSS</li></a>
				 <a href=""><li class="li-lines">Javascript</li></a>
				 <a href=""><li class="li-lines">PHP</li></a>
				 <a href=""><li class="li-lines">Tutorials (Web)</li></a>
				 <a href=""><li class="li-lines">Tools (Web)</li></a>
				 <a href=""><li class="li-headline">Multimedia</li></a>
 				 <a href=""><li class="li-lines">Audiobearbeitung</li></a>
				 <a href=""><li class="li-lines">Videobearbeitung</li></a>
				 <a href=""><li class="li-lines">Bildbearbeitung</li></a>
				 <a href=""><li class="li-lines">3D-Modelling</li></a>
				 <a href=""><li class="li-lines">Tutorials (Multimedia)</li></a>
				 <a href=""><li class="li-lines">Tools (Multimedia)</li></a>
 				 <a href=""><li class="li-headline">Tipps &amp; Tricks</li></a>
				 <a href=""><li class="li-headline">Forum</li></a>
				 <a href=""><li class="li-headline">Downloads</li></a>
				 <a href=""><li class="li-headline">AGB</li></a>
				 <a href=""><li class="li-headline">Links</li></a>
			</ul>
	    </div>
	</body>
</html>

/* Allgemeine Styles */

.body-style
{
	width: 100%;
	height: 100%;
	padding: 0px;
	margin: 0px;
	background-color: #FFFFFF;
	color: #000000;
}

.img-banner
{
	border-width: 0px 1px 1px 1px;
	border: solid #000000;
	width: 800px;
	height: 100px;
}

.div-banner
{
	width: 1000px;
	text-align: center;
}

.div-navi
{
	width: 150px;
}

.ul-navi
{
	border: solid #000000;
	border-width: 1px 1px 0px 1px;
	width: 150px;
	list-style: none;
	margin: 10px 0px 0px 10px;
	padding: 0px;
}

.li-headline
{
	background-image: url(../bilder/navihead.jpg);
	padding-left: 10px;
	border-bottom: 1px solid #000000;
	line-height: 22px;
	font-size: 12px;
}

.li-lines
{
	background-color: #E5E5E5;
	padding-left: 10px;
	border-bottom: 1px solid #000000;
	line-height: 15px;
	font-size: 10px;
}

a
{
	text-decoration: none;
	color: #000000;
	font-family: Arial, Helvetica, sans-serif;
	font-weight: bold;
	display: block;
}
```


----------



## Maik (4. Juli 2005)

@Dr Dau: als ich vorhin die Demo-Seite besucht und in den Seiten-Quelltext geschaut habe, war noch alles in Tabellen gepackt, Stichwort: Tabelle mit der Klasse *.maintable*. 

Anyway, thanx 4 info


----------



## Maik (4. Juli 2005)

Mein Lösungsvorschlag für das contentDIV rechts neben der Navigation:

CSS-Code:

```
.div-navi
{
width: 150px;
float: left;
}

div.content
{
margin: 10px 10px 10px 170px; /* Aussenabstand top - right - bottom - left */
border: 1px solid #000000;
}
```


```
<div class="div-navi"> ... </div>

<div class="content">Content</div>
```


----------



## Gumbo (4. Juli 2005)

> Prinzipiell hat Gumbo mit dem Layout schon recht, nur sollte man auch bedenken das einige Sachen mit Tabellen halt viel einfacher zu lösen sind als mit DIV's.


Ich nutze vor allem das Prinzip des semantischen Markups. Das heißt, ich nutze die von HTML angebotenen Elemente für das, wofür sie ursprünglich oder in einem verwandten Sinne gedacht sind.
Ich bestreite garnicht, dass es immernoch Dinge gibt, die beispielsweise mit Tabellen einfacher zu lösen sind als mit CSS. Allerdings hängt dies auch oft noch von der unzureichenden Unterstützung von CSS ab.



> Dein CSS funktioniert nur fast richtig. Die Backgrounds sind grau, aber das Bild wird nicht bei News usw. hineingesetzt.


Ich habe doch angemerkt, dass es derzeit nur in modernen Browsern korrekt dargestellt wird. Der Internet Explorer zählt jedoch leider nicht dazu.


----------



## GENESIS2005 (6. Juli 2005)

Also,

Ich habe es hinbekommen, dass ich Unterschiede in den Listen bekomme und so meine Hintergründe richtig setzen kann.

Außerdem hab ich es nun so gemacht, dass der ganze Block ein Link ist.

Nun steh ich aber vor einem weiterem Problem. Ich habe zu Testzwecken mal etwas vorbereitet:

Developer Planet

Ich habe durch "Line-Height" versucht die Blöcke kleiner zu machen und schwupps kommt da son Mist raus . Und dies ist, wie kann es auch anders sein, nur im IE.

Hier nochmal die CSS-Datei. Den HTML Quellcode findet ihr auf der Seite . Wollte nur etwas Platz sparen^^.


```
/* Allgemeine Styles */

body.body-style
{
	width: 100%;
	height: 100%;
	padding: 0px;
	margin: 0px;
	background-color: #FFFFFF;
	color: #000000;
}

div.div-banner
{
	width: 1000px;
	text-align: center;
}

div.div-navi
{
	float: left;
}

ul#ul-navi
{
	width: 150px;
	margin: 10px 0px 0px 10px;
	padding: 0px;
	border-width: 1px 1px 0px 1px;
	border: solid #000000;
}

ul#ul-navi li
{
	list-style: none;
}

ul#ul-navi a
{
	display: block;
	border-bottom: 1px solid #000000;
	background-color: #E5E5E5;
	text-decoration: none;
	color: #000000;
	padding-left: 10px;
	line-height: 15px;
}

ul#ul-navi a:hover
{
	background-color: #666666;
	color: #FFFFFF;
}

* html ul#ul-navi a
{
	width: 100%;
	w\idth: 150px;
}
```


----------



## GENESIS2005 (7. Juli 2005)

Huhu, ich bins nochmal:

Zum Abschluss und Frage ob man es nicht anders machen könnte:

Developer Planet 

So solls nun aussehen... funktioniert auch in anderen Browsern durch den * html hack.

Bin auf Kritik gespannt .


----------



## Dr Dau (7. Juli 2005)

Kritik kannst Du haben.  

Opera 7.54 OK
Mozilla 1.7.5 OK
IE 6.0 Menü ist schmäler
IE 5.5 Menü ist schmäler

Beim IE ergibt sich daraus auch beim Eintrag "Windows-Programmierung" ein zweizeiler.


----------



## Dr Dau (7. Juli 2005)

Ganz spontan würde ich sagen, muss es so:

```
* html ul#ul-navi a
{
	width: 100%;
	w\idth: 170px;
}
```


----------



## GENESIS2005 (7. Juli 2005)

Hehe, also der Code, welcher oben steht, hat gar nichts mit dem Post, der darauffolgt, zu tun^^. Das Ganze musste ja nochmals grundlegend geändert werden...


```
<!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">
	<head>

		<!-- Meta Tags -->
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
		<meta name="Author" content="Martin Blum" />
		<meta name="Version" content="1.0" />
		<meta name="Copyright" content="Martin Blum" />
		<meta name="description" content="C++, HTML, Javascript, PHP, Audio, Video" />

		<!-- Titel -->
		<title>Developer Planet - Die Community f&uuml;r Programmierer</title>

		<!-- Includes -->
		<link rel="stylesheet" href="data/general.css" />

	</head>
	<body class="body-style">
	
		<!-- Banner -->
		<div class="div-banner"><img src="bilder/banner.jpg" class="img-banner" alt="Developer Planet" /></div>
		
		<!-- Navigator -->
		<div class="div-navi">
			<ul class="ul-navi">
				<li><a href="" class="a-headlines">News</a></li>
				<li><a href="index.html" class="a-lines">Aktuell</a></li>
				<li><a href="" class="a-lines">Archiv</a></li>
				<li><a href="" class="a-headlines">C# / C++</a></li>
				<li><a href="" class="a-lines">Dos-Programmierung</a></li>
				<li><a href="" class="a-lines">Windows-Programmierung</a></li>
				<li><a href="" class="a-lines">MFC</a></li>
				<li><a href="" class="a-lines">Tutorials ( C# / C++ )</a></li>
				<li><a href="" class="a-lines">Tools ( C# / C++ )</a></li>
				<li><a href="" class="a-headlines">Webgestaltung</a></li>
				<li><a href="" class="a-lines">HTML / CSS</a></li>
				<li><a href="" class="a-lines">Javascript</a></li>
				<li><a href="" class="a-lines">PHP</a></li>
				<li><a href="" class="a-lines">Tutorials ( Web )</a></li>
				<li><a href="" class="a-lines">Tools ( Web )</a></li>
				<li><a href="" class="a-headlines">Multimedia</a></li>
				<li><a href="" class="a-lines">Audiobearbeitung</a></li>
				<li><a href="" class="a-lines">Videobearbeitung</a></li>
				<li><a href="" class="a-lines">Bildbearbeitung</a></li>
				<li><a href="" class="a-lines">3D-Modelling</a></li>
				<li><a href="" class="a-lines">Tutorials ( Multimedia )</a></li>
				<li><a href="" class="a-lines">Tools ( Multimedia )</a></li>
				<li><a href="" class="a-headlines">Tipps &amp; Tricks</a></li>
				<li><a href="http://33831.dynamicboard.de/" target="_blank" class="a-headlines">Forum</a></li>
				<li><a href="" class="a-headlines">Downloads</a></li>
				<li><a href="" class="a-headlines">AGB</a></li>
				<li><a href="" class="a-headlines">Links</a></li>
			</ul>
		</div>
	</body>
</html>

/* Allgemeine Styles */

body.body-style
{
	width: 100%;
	height: 100%;
	padding: 0px;
	margin: 0px;
	background-color: #FFF;
	color: #000;
}

img.img-banner
{
	width: 800px;
	height: 100px;
	border: 1px solid #000;
	border-top: 0px solid #000;
}

div.div-banner
{
	width: 1000px;
	text-align: center;
}

div.div-navi
{
	width: 170px;
	position: absolute;
	margin: 10px 0px 0px 10px;
	padding: 0px;
	float: left;
	border: 1px solid #000;
	border-bottom: 0px solid #000;
}

ul.ul-navi
{
	list-style: none;
	margin: 0px;
	padding: 0px;
}

ul.ul-navi li
{
	display: inline;
}

a.a-headlines
{
	display: block;
	line-height: 22px;
	padding-left: 20px;
	
	background-image: url(../bilder/navihead.jpg);
	background-repeat: repeat-x;
	border-bottom: 1px solid #000;
	
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-weight: bold;
	text-decoration: none;
	color: #000;
}

a.a-headlines:hover
{
	color: #FFF;
}

a.a-lines
{
	display: block;
	line-height: 15px;
	padding-left: 20px;
	
	background-color: #E5E5E5;
	border-bottom: 1px solid #000;
	
	font-family: Arial, Helvetica, sans-serif;
	font-size: 10px;
	font-weight: bold;
	text-decoration: none;
	color: #000;
}

a.a-lines:hover
{
	color: #FFF;
	background-color: #666;
}

* html a.a-headlines, * html a.a-lines, * html div.div-navi
{
	width: 150px;
}
```

Das ist der richtige Code...

Und dein Vorschlag funktioniert leider nicht. Ich habe das mit den 150px schon so abgemessen. Das sind aber in wirklichkeit keine 150px... es sind ja 170px wegen dem 20px Padding -> Box Model Bug...

Aber wenn das kleiner ist... ka was da los ist.


----------



## Dr Dau (7. Juli 2005)

An den Bug hatte ich ja auch spontan gedacht....

```
* html a.a-headlines, * html a.a-lines, * html div.div-navi
{
 width: 170px;
}
```
So siehts aber OK aus.... wenn ich den Eintrag weg lasse, ist es im IE komischerweise wieder ein klein wenig schmäler.... so 2-3px


----------



## GENESIS2005 (7. Juli 2005)

Hehe weißte auch warum?

Wir haben die Border noch vergessen und die is 1px auf jeder seite also 2px insgesamt^^.
Also sinds dann 148px daunten . Ich probiers gleich mal aus.


----------



## Dr Dau (7. Juli 2005)

Am Border liegt es nicht.... den habe ich einfach mal auf 5px gesetzt, dass wirkt sich auf alle Browser aus.

Die 170px am Ende sind schon richtig so.


----------



## GENESIS2005 (7. Juli 2005)

Dann hab ich nur eine ganz bescheidene Frage...

Wieso sieht das dann so, siehe Anhang, aus?

Irgendwie voll unerklärlich. Hat das was mit Quirks-Modus oder sowas zu tun. Bin ratlos.


----------



## Maik (7. Juli 2005)

Was soll uns denn der IE-Screenshot sagen / zeigen 

Anmerkung: das Menü ist (bei mir) in allen getesteten Browsers 172px breit. Da der IE 6.0 den Rahmen zur Weite addiert (170px + 2*1px), läuft deine Seite auch nicht im Quirks-Mode ;-]


Browsercheck: FF 1.0.2, IE 6.0, MOZ 1.6, NN 7.0, OP 7.23


----------



## GENESIS2005 (7. Juli 2005)

Ich bin verwirrt, ich weiß gar nicht wie man den quirks modus einstellt^^... ich weiß nur das der firefox das ganze richtig anzeigt... 170px... und der IE nicht, der macht das ganze zu breit... das sollte der screenie eigentlich zeigen, da dr.dao meine bei ihm sehe es normal aus^^.


----------



## Dr Dau (7. Juli 2005)

Tja, wie gesagt, bei mir ist das Menü im IE5.5 und IE6.0 schmäler als wie in Mozilla/Opera.
Und wenn ich mir dein Screenshot ansehe, muss ich sagen dass das Menü bei dir im IE breiter ist, als bei mir, in welchem Browser auch immer.

Evtl. sollte ich noch sagen dass ich Win2000/SP4 laufen habe, aber eigentlich dürfte dass nur eine untergeordnete Rolle spielen.


----------



## Maik (7. Juli 2005)

Zur Erläuterung: diese CSS-Variante deiner Seite habe ich in den o.g. Browsers getestet:


```
/* Allgemeine Styles */

body.body-style
{
	width: 100%;
	height: 100%;
	padding: 0px;
	margin: 0px;
	background-color: #FFF;
	color: #000000;
}

img.img-banner
{
	width: 800px;
	height: 100px;
	border: 1px solid #000;
	border-top: 0px solid #000;
}

div.div-banner
{
	width: 1000px;
	text-align: center;
}

div.div-navi
{
	width: 170px;
	position: absolute;
	margin: 10px 0px 0px 10px;
	padding: 0px;
	float: left;
	border: 1px solid #000;
	border-bottom: 0px solid #000;
}

ul.ul-navi
{
	list-style: none;
	margin: 0px;
	padding: 0px;
}

ul.ul-navi li
{
	display: inline;
}

a.a-headlines
{
	display: block;
	line-height: 22px;
	padding-left: 20px;
	
	background-image: url(../bilder/navihead.jpg);
	background-repeat: repeat-x;
	border-bottom: 1px solid #000;
	
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-weight: bold;
	text-decoration: none;
	color: #000000;
}

a.a-headlines:hover
{
	color: #FFFFFF;
}

a.a-lines
{
	display: block;
	line-height: 15px;
	padding-left: 20px;
	
	background-color: #E5E5E5;
	border-bottom: 1px solid #000;
	
	font-family: Arial, Helvetica, sans-serif;
	font-size: 10px;
	font-weight: bold;
	text-decoration: none;
	color: #000000;
}

a.a-lines:hover
{
	color: #FFFFFF;
	background-color: #666666;
}

* html a.a-headlines, * html a.a-lines
{
	width: 100%;
}

* html div.div-navi
{
	width: 150px;
}
```
Was den Quirks-Mode betrifft, so empfehle ich dir CSS4You.de | Doctype-Switch.


----------



## GENESIS2005 (7. Juli 2005)

Ich habe meine Seite nun als XHTML 1.0 Strict + URI definiert.
Nun laufen alle Browser im Standart Modus... Bei mir wird das ganzemit weit mehr als 170px angezeigt.
D.h. ich muss daunten auf 148px stellen um auf 170px zu kommen...

Wie siehts nu bei euch aus?


----------



## Dr Dau (7. Juli 2005)

IE5.5 und 6.0 sind gleich....


----------



## GENESIS2005 (7. Juli 2005)

Also der Opera, Mozilla und Netscape ist genauso wie bei dir... der IE ist bei mir irgendwie größer... hab das mal nun etwas anders gemacht und nicht mehr dem Div element die breite gegeben sondern dem Ul Element jetzt ist alles bei mir gleich...


----------



## Dr Dau (7. Juli 2005)

*autsch*

Nun ist (zumindest im IE5.5) zwischen ul und li rechts ein weisser Zwischenraum.
Bei Opera/Mozilla ist es gleich geblieben.
IE6.0 habe ich jetzt nicht getestet.... keine lust den anderen PC schon wieder anzustellen.
Trotzdem ist es insgesammt noch immer schmäler als wie bei dir.
Ich vermute auch dass Du mit Browserhacks allein nicht klar kommen wirst, weil die ja allgemein für den IE sind.
Besser währen alternative CSS-Dateien, weil Du hier auch die verschiedenen Versionen vom IE berücksichtigen kannst.


----------



## GENESIS2005 (8. Juli 2005)

Sooo ich hab jetzt einfach mal den Versuch gestartet den Browser in den Quirks-Modus zu schalten. Ist nur die Frage ob ich das nur im IE machen soll oder in allen Browsern...


----------



## Dr Dau (8. Juli 2005)

Jetzt weiss ich natürlich nicht ob Du heut Abend noch was geändert hast.

Habe mir die Seite mal bei einem Kumpel mit dem IE6.0 und Mozilla 1.7.x unter XP angesehen, da sah es OK aus.
Dann grad eben bei mir mit IE5.5, IE6.0, Opera 7.54 und Mozilla 1.7.5.
Im IE5.5 war nach wie vor beim Menü ein weisser Rand rechts, dann habe ich ganz unten mal width:150px auf 170px gesetzt.
Sieht bei mir jetzt OK aus, nur kann ich jetzt nicht sehen wie es unter XP aussieht.

```
* html a.a-headlines, * html a.a-lines, * html div.div-navi
{
width: 170px;
}
```
Musst Du also selber mal gucken ob sich unter XP da irgendwas ändert.

[edit] Ich würde die anderen Browser erstmal aus dem Quirks Modus aussenvor lassen, erstmal gucken was der Code macht. [/edit]


----------



## GENESIS2005 (8. Juli 2005)

Also ich habe deinen Vorschlag mal in die Tat umgesetzt, alternative CSS Dateien zu verwenden. Jetzt müsste es in allen Browsern, ausser dem IE, gut aussehen, da:

@import url(bla) all;

nicht vom IE erkannt wird. ( Was ein all nicht alles bewirken kann  ).

Nun muss ich eine CSS Datei schreiben die für den IE 6.0 gilt und noch eine andere die für die dadrunter liegenden Versionen des IE gelten.

Wie kann ich mir eine Emulierte Version des IE 5.5 besorgen? Dann kann ich direkt schauen ob das Ergebnis gut aussieht und muss nicht immer hier fragen .

Hab nun geschickt die Selektoren ausgenutzt, was ich aber nun nicht im IE benutzen kann.


----------



## Dr Dau (8. Juli 2005)

> Wie kann ich mir eine Emulierte Version des IE 5.5 besorgen? Dann kann ich direkt schauen ob das Ergebnis gut aussieht und muss nicht immer hier fragen .


Ich habe zwar mal gehört dass es irgendwie möglich sein soll, hab es aber nie probiert. 
Ich habe halt auf mehrern PC's verschiedene Browser.

@import stimmt noch nicht ganz....

```
<style type="text/css">
@import url(data/general/generalnie.css) all;
@import url(data/index/indexnie.css) all;
</style>
 
<!-- [if IE 6]>
<style type="text/css">
@import url();
</style>
<![endif] -->
 
<!-- [if lte IE 5.5999]>
<style type="text/css">
@import ulr();
</style>
<![endif] -->
```


----------



## GENESIS2005 (9. Juli 2005)

Ohh danke, hab ich völlig vergessen, nur Dreamweaver zeigt mir dann an, dass Opera 7.0 kein "Type"-Attribut akzeptiert.

Noch besser . Der W3C Validator meckert über meine UL, LI Geschichte.

Es muss eigentlich

<ul>
    <li>1. Überschrift
        <ul>
            <li>1. Unterpunkt</li>
            <li>2. Unterpunkt</li>
        </ul>
    </li>
</ul>

so heißen.

Aber ob das einen Unterschied macht?

*EDIT*Und noch was schönes. <a> und target verträgt sich wohl net *EDIT*
*EDIT2*Das "target" soll ja nur beim Forum hin... damit man beide Seiten gleichzeitig vor Augen hat. Es ist liegt ja extern.*EDIT2*


----------



## Dr Dau (9. Juli 2005)

Ähm, so hast Du es jetzt ja auch.
Vorher hattest Du ja nur
<ul>
<li>.....
<li>....
<li>....
.
.
.
.
</ul>

[edit] Dann liegt es sicher an den DIV's....Frames hast Du ja nicht, währe also nur target="_self" sinnvoll, dass kannst Du dir aber sparen, da es per default schon so ist. [/edit]
[edit2] Beide gleichzeitig? Du meinst Du willst das Forum im Content haben? Ansonsten target="_blank" [/edit2]
[edit3] Ich würde versuchen ob Du das Forum nicht in einen iframe im Content laden kannst.... das Menü würde ich auch in eine externe Datei auslagern und per PHP includen, sonst müsstest Du bei einer änderung am Menü ALLE Seiten anpessen. [edit3]


----------



## GENESIS2005 (9. Juli 2005)

Naja ich meinte eigentlich mit extern... und beide Seiten vor Augen, dass man in der Taskleiste kurz switchen kann...

Ok nun hab ich die Layouts fertig bis auf den I-Net Explorer 5.5 oder tiefer...
Komischerweise muss ich bei mir in XP den 6.0 auch anpassen auf 150px... sehr
sehr komisch. Sonst ist das Menü einfach 20px zu groß.

Ich nehme an bei deinem Kollegen war es XP, IE 6.0 mit Einstellung 150px oder? Und bei dir ist es Win2000 mit IE 5.X mit Einstellung 170px oder?

Also wenn das so ist weiß ich was ich machen muss .


----------



## Dr Dau (9. Juli 2005)

Bei meinem Kumpel war es XP mit IE6.0 und Mozilla 1.7.x.... 
bei mir war/ist es Win2000 mit IE5.5, IE6.0, Mozilla 1.7.5 und Opera 7.54.... Netscape 7.1 habe ich mir gespart, zwischen dem und Mozilla tut sich eigentlich nichts.
Eigentlich hat Win2000 den IE5.0, aber der ist ja nun schon wirklich uralt, darum habe ich auf einem PC den 5.5 und auf dem andern PC den 6.0.

[edit] Ich bin der Meinung dass es unter XP 150px waren.... die 170px habe ich ja erst später zuhause selber geändert und geprüft.
IE6.0 müsste also auf 150px und IE5.5 auf 170px. [/edit]

[edit2] *g* Um das Forum im neuen Fenster öffnen zu lassen, musst Du target="_blank" nehmen. [/edit2]


----------



## GENESIS2005 (9. Juli 2005)

Wegen dem target="_blank" meckert immer der W3C Validator, es sei kein XHTML 1.0 Strict, soll mir aber nu egal sein. Ich denke da wirds keine Probleme geben.

Ich habe nun Alles hochgeladen. Nun müsste es auch bei dir funktionieren .

*EDIT* Du hast in dem Unterem vergessen was zu ändern, aber habs nun mit "style" hochgeladen, "url" geschrieben und die Reihenfolge getauscht  . *EDIT

*EDIT2* Hier noch ein Hinweis auf mehrere IE Versionen

Mehrere IE Versionen auf einem Rechner *EDIT2*


----------



## Dr Dau (9. Juli 2005)

Buchstabendreher........


```
<!--[if lte IE 5.5999]>
<stlye type="text/css">
	@import ulr(data/general/generalie5.css);
	@import url(data/index/indexie5.css);
</style>
<![endif]-->
```
muss heissen....

```
<!--[if lte IE 5.5999]>
<stlye type="text/css">
	@import url(data/general/generalie5.css);
	@import url(data/index/indexie5.css);
</style>
<![endif]-->
```
Aber warum nimmt der IE6.0 nun die ....ie5.css?! 

[edit] Tausche mal die Reihenfolge für den IE6.0 mit dem IE5.5 [/edit]

[edit2]

```
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
```
[/edit2]


----------



## Dr Dau (9. Juli 2005)

Jetzt scheint es hinzuhauen.... das Menü hört am Ende vom unterm Bogen vom 1. "D" im Banner auf.

[edit] Nun meckert auch der Validator nichtmehr.  [/edit]

[edit2] Der Link für die IE's, ist gut möglich dass es das ist was ich mal gelesen hatte, mal gucken ob ich es irgendwann mal testen kann.... vorher Backup.  [/edit2]


----------



## GENESIS2005 (9. Juli 2005)

Das hört sich gut an, dass es nun funktioniert.
Was mich aber stutzig macht ist, dass es unter XP mit dem IE 5.5 und 5.0 nicht geht.
Da endet das Menü am "g" "von Windows-Programmierung".
Komische Welt .


----------



## Dr Dau (9. Juli 2005)

Hmm, da würde ich mir nicht so den Kopf drum machen.... immerhin ist bei XP von haus aus ja der IE6.0 mit dabei.... wer macht sich die Arbeit ein älteren Browser zum laufen zu bekommen?!
Unter Win2000 sieht es ja OK aus.


----------



## GENESIS2005 (9. Juli 2005)

Wie siehts mit der Content Box aus? Gehen die Linien genau auf?


----------



## Dr Dau (9. Juli 2005)

Nach unten und oben hin schliesst das Menü und Content genau ab.
Nach rechts hin hört Content im IE5.5 ca. eine Linienbreite vor dem Ende vom Banner auf.
Mit IE6.0 sah es zumindest optisch OK aus, habe ich jetzt aber nicht nochmal geprüft.... der PC ist schon wieder aus.
Opera und Mozilla ist alles bündig.

[edit] Hmm, im IE5.5 hört der Content nach unten hin auch eine Linienstärke zu früh auf. [/edit]


----------

