# Firefox & IE / Positionen



## -Raid- (20. Mai 2008)

Hi,
vielleicht erinnert ihr euch noch an: http://www.tutorials.de/forum/css/288586-leiste-rechts-links.html

Nach knapp einem Jahr Pause, habe ich jetzt wieder angefangen zu coden/programmieren.
Die Fehler mit den Leisten konnte ich nach langem hin und her selbst beseitigen.

Jetzt ist die Seite soweit fertig, jedoch sitzt die Content-Box im IE an einer andere Stelle wie im Firefox. Was mir auch noch aufgefallen ist, dass die Footerweite im IE die beiden Leisten links und rechts einbezieht, soll heißen, stell ich die Weite auf 100% ist der Footer im IE genau zwischen den beiden Leisten und schließt bündig ab, im Firefox hingegen wird nur die Linke Leiste mit einbezogen, was zu einem Anzeigefehler führt, entweder im IE (unter 100%) oder im Firefox (100%).

Kann ich den IE bzw. Firefox verschiedene Positionen zuweisen?







 FF Footer





 IE Footer





 IE Content





 FF Content

Mit freundlichen Grüßen,
-Raid-


----------



## Maik (20. Mai 2008)

Hi,

da du dich auf deinen vergangenen Thread beziehst, reiche ich dir hier die überarbeitete Fassung meines damaligen Demos nach, in der ich das Problem mit dem Footer gefixt habe.

Auszug aus dem Stylesheet:


```
<style type="text/css">
<!--
...

div#footer {
position:absolute;
bottom:0;
left:20px;
right:20px;
background:#76b9d2;
}
-->
</style>
<!--[if lt IE 7]>
<style type="text/css">
div#footer {
width:100%;
}
</style>
<![endif]-->
```
Was die Content-Box betrifft, müsstest du schon den aktuellen Quellcode der Seite posten, damit man darauf auch näher eingehen kann.


----------



## -Raid- (20. Mai 2008)

Erstmal ein Vorwort an dich Maik:
Ich finde es klasse, wie schnell und Sachlich du Antwortest. In manch einem Forum würden nur Sachen wie nutzt die Suchfunktion usw. gepostet und nicht auf einen eingegangen, dafür ein großes Lob an dich.

Hier die .css:


```
#lightbox{
	position: absolute;
	left: 0;
	width: 100%;
	z-index: 100;
	text-align: center;
	line-height: 0;
	}

#lightbox a img{ border: none; }

#outerImageContainer{
	position: relative;
	background-color: #fff;
	width: 250px;
	height: 250px;
	margin: 0 auto;
	}

#imageContainer{
	padding: 10px;
	}

#loading{
	position: absolute;
	top: 40%;
	left: 0%;
	height: 25%;
	width: 100%;
	text-align: center;
	line-height: 0;
	}
#hoverNav{
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	z-index: 10;
	}
#imageContainer>#hoverNav{ left: 0;}
#hoverNav a{ outline: none;}

#prevLink, #nextLink{
	width: 49%;
	height: 100%;
	background: transparent url(../images/blank.gif) no-repeat; /* Trick IE into showing hover */
	display: block;
	}
#prevLink { left: 0; float: left;}
#nextLink { right: 0; float: right;}
#prevLink:hover, #prevLink:visited:hover { background: url(../images/prevlabel.gif) left 15% no-repeat; }
#nextLink:hover, #nextLink:visited:hover { background: url(../images/nextlabel.gif) right 15% no-repeat; }


#imageDataContainer{
	font: 10px Verdana, Helvetica, sans-serif;
	background-color: #fff;
	margin: 0 auto;
	line-height: 1.4em;
	overflow: auto;
	width: 100%	
	}

#imageData{	padding:0 10px; color: #666; }
#imageData #imageDetails{ width: 70%; float: left; text-align: left; }	
#imageData #caption{ font-weight: bold;	}
#imageData #numberDisplay{ display: block; clear: left; padding-bottom: 1.0em;	}			
#imageData #bottomNavClose{ width: 66px; float: right;  padding-bottom: 0.7em;	}	
		
#overlay{
	position: absolute;
	top: 0;
	left: 0;
	z-index: 90;
	width: 100%;
	height: 500px;
	background-color: #000;
	}

.clearfix:after {
    content: "."; 
    display: block; 
    height: 100%; 
    clear: both; 
    visibility: hidden;
}

.clearfix {display: inline-block;}

/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */

   
   html,body {
	margin:0;
	padding:0;
	height:100%;
}
   body {
    font-size:100.01%;
    font-family: Times New Roman;
    margin: 0em 0em; padding: 0em 0em;
    background: #121212 url("http://www.tutorials.de/forum/images/BarL.jpg") repeat-y;
  }
	h1 {
    font-size: 1.0em;
    margin: 0px -6px 0.2em; padding: 74.5px;
    background: url("http://www.tutorials.de/forum/images/header.jpg");
  }
    ul#Navigation {
	font-size: 14px;
    float: left;
    margin: auto -3.9px; padding: 0em 0em;
    clear: left;
  }
    ul#Navigation p {
    color: white;
    background: url("http://www.tutorials.de/forum/images/NaviDown.jpg");
    margin: 0px 0px; pedding: 0px 0px;
    width: 135px; height: 19px;
    clear: left;
  }
    ul#Navigation li {
    list-style: none;
    border: 0px solid;
    clear: left;
  }
    ul#Navigation a {
    display: block;
    padding: 2px;
	clear:left;
  }
    ul#Navigation a:link {
    color: white; background: url("http://www.tutorials.de/forum/images/NaviButton.jpg");
    text-decoration:none;
    text-align:center;
    clear: left;
  }
    ul#Navigation a:visited {
    color: white;
    text-decoration:none;
    text-align:center
    color: white; background: url("http://www.tutorials.de/forum/images/NaviButton.jpg");
    text-align:center;
  }
    ul#Navigation a:hover {
    color: #970202; background: url("http://www.tutorials.de/forum/images/NaviButtonOver.jpg");
    text-align:center;
  }
    ul#Navigation a:active {
    color: #000000; background: url("http://www.tutorials.de/forum/images/NaviButtonPressed.jpg");
    text-align:center;
  }
    ul#Uhrzeit {
	text-align:center;
	color:white;
	float: left;
	margin: auto -3.9px; padding: 0em 0em;
	clear: left;
  }
    ul#Uhrzeit p {
    color: white;
    background: url("http://www.tutorials.de/forum/images/Counter.jpg");
    margin: 0px 0px; pedding: 0px 0px;
    width: 135px; height: 19px;
    clear: left;
  }
 
    ul#Counter {
	text-align:center;
	color:white;
	float: left;
	margin: auto -3.9px; padding: 0em 0em;
	clear: left;
  }
    ul#Counter p {
    color: white;
    background: url("http://www.tutorials.de/forum/images/Counter.jpg");
    margin: 0px 0px; pedding: 0px 0px;
    width: 135px; height: 19px;
    clear: left;
  }
    div#Inhalt {
	width: 86%;
	margin: -16px auto 5%; padding: 0px auto;
	color: #ffffff;
  }
    div#Inhalt h2 {
    font-size: 1em;
    margin: 0em 0em;
    background: url("http://www.tutorials.de/forum/images/NaviDown.jpg");
  }
    div#Inhalt p {
    font-size: 1em;
    margin: 0em 0em;
    padding: 0.8em 1em;
    background: url("http://www.tutorials.de/forum/images/InhaltBackground.jpg");
	margin-bottom: 0em;
  }	 
    div#footer {
	margin:  auto auto; pedding: auto auto;
	text-align: center;
	position:absolute;
	bottom:0;
	width:96.8%;
	color: #FFFFFF; background: url("http://www.tutorials.de/forum/images/NaviDown.jpg");
	clear:both;
  }
	div#wrapper {
    position:relative;
    background:url("http://www.tutorials.de/forum/images/barR.jpg") right repeat-y;
    min-height:100%;
    height:auto !important;
    height:100%;
    padding:0px 20px; margin: 0px 0px;
```

und hier die index.php:

```
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta name="description" content="'Get Back' ist eine Seite der Band "Get Back""/>
<meta name="author" content="[...]"/>
<meta name="keywords" content="Get, Back, Get Back, Band, Musik, NRW"/>
<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/scriptaculous.js?load=effects"></script>
<script type="text/javascript" src="js/lightbox.js"></script>
<script type="text/javascript" src="audio-player/audio-player.js"></script>
<title>Get Back - Willkommen</title>
<LINK REL="SHORTCUT ICON" href="http://www.tutorials.de/forum/images/favicon.jpg">
<style type="text/css">
@import "layout.css";
</style>
<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />
</head>
<body>
<div id="wrapper" class="clearfix">
<h1></h1>

<ul id="Navigation">
  <center><p>Navigation</p></center>
  <li><a href="index.php">Willkommen</a></li></center>
  <li><a href="band.php">Band</a></li></center>
  <li><a href="musik.php">Musik</a></li></center>
  <li><a href="kontakt.php">Kontakt</a></li></center>
  <li><a href="impressum.php">Impressum</a></li></center>
  <p></p><br>
</ul>

<ul id="Navigation">
<center><p>Uhrzeit</p></center>
</ul>
<ul id="Uhrzeit">
<p><script type="text/javascript" src="js/uhrzeit.js"></script></p>
</ul>
<ul id="Navigation">
<p></p><br>
</ul>

<ul id="Navigation">
  <center><p>Counter</p></center>
</ul>
<ul id="Counter">
<p><? include ("Counter.php"); ?></p>
</ul>
<ul id="Navigation">
<p></p></ul>
</ul>

<div id="Inhalt">
  <h2><center>Willkommen</center></h2>
 <center><p>Willkommen auf der Seite von 'Get Back'!<br>
 Zum vergrößern eines Bildes, auf ein Bild klicken.<br><br>
[Persöhnliche Daten vorerst entfernt, noch keine Zustimmung der Personen]
</p><h2>&nbsp</h2></center>
</div>
<div id="footer"><center>© 2008 Get Back</center></div>
</body>
</html>
```


----------



## Maik (20. Mai 2008)

Versuch es mal hiermit:


```
* {
margin:0;
padding:0;
}

ul#Navigation {
    font-size: 14px;
    float: left;
    margin: 0 ;
    padding: 0em 0em;
    clear: left;
    width:135px;
  }

div#Inhalt {
        margin: 0 0 0 135px;
        padding: 0px auto;
        color: #ffffff;
}
```
Und korrigiere den Schreibfehler bei den padding-Eigfenschaften, wo du *pedding* geschrieben hast.

Zudem muss eine ID im HTML-Dokument eindeutig sein, sprich sie darf darin nicht mehrmals vergeben werden.

Ebenso ist das center- und p-Element kein Nachfahreelement des ul-Elements.


----------



## -Raid- (20. Mai 2008)

Das mit dem ul...
Ich wollte das der Counter eine andere Hintergrundgrafik bekommt, wie der obere und unter Balken. Habe das nicht anders hinbekommen, klappt aber auch.  Ich kenn mich noch nicht sogut mit diesen Teilen aus, also <ul> <p> etc..

Nachtrag:
Folgender Fehler tritt nun im IE auf:





Wie kann ich 2 Wrapper einfügen, einen für Links und einen für rechts?
Wenn ich das richtig sehe, umschließt bei meinem Versuch der Wrapper 1, den Wrapper 2 und somit haben die Leisten verschiedene größen.


```
}
	div#wrapper {
    position:relative;
    background:url("http://www.tutorials.de/forum/images/barR.jpg") right repeat-y;
    min-height:100%;
    height:auto !important;
    height:100%;
    padding:0px 20px; margin: 0px 0px;
  }
	div#wrapper2 {
    position:relative;
    background:url("http://www.tutorials.de/forum/images/barL.jpg") left repeat-y;
    min-height:100%;
    height:auto !important;
    height:100%;
    padding:0px 20px; margin: 0px 0px;
```


```
<div id="wrapper" class="clearfix"><div id="wrapper2" class="clearfix">
```


----------



## Maik (20. Mai 2008)

Kann man sich die Seite mal "live" anschauen? Bei mir gab's da nämlich heute Morgen keine Probleme im IE.

Und wofür benötigst du nun zwei ineinander verschachtelte *wrapper*-Blöcke? Zumal diese "Technik" mit ihrer 100%-Mindesthöhe so nicht mehr funktionieren wird.

Das eine Hintergrundbild wird doch direkt im body-Element eingesetzt - und diese Methode funktioniert einwandfrei.


----------



## -Raid- (20. Mai 2008)

Du kriegst gleich Post mit dem Link zum Server.


----------



## Maik (20. Mai 2008)

Dann schau dir mal dieses Dokument an:


```
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="description" content="'Get Back' ist eine Seite der Band Get Back">
<meta name="author" content="Kevin Wirtz">
<meta name="keywords" content="Get, Back, Get Back, Band, Musik, NRW">
<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/scriptaculous.js?load=effects"></script>
<script type="text/javascript" src="js/lightbox.js"></script>
<script type="text/javascript" src="audio-player/audio-player.js"></script>
<title>Get Back - Willkommen</title>
<LINK REL="SHORTCUT ICON" href="http://www.tutorials.de/forum/images/favicon.jpg">
<style type="text/css">
* {
margin:0;
padding:0;
}

.clearfix:after {
    content: ".";
    display: block;
    height: 100%;
    clear: both;
    visibility: hidden;
}

.clearfix {display: inline-block;}

/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */


   html,body {
        margin:0;
        padding:0;
        height:100%;
}
   body {
    font-size:100.01%;
    font-family: Times New Roman;
    margin: 0em 0em; padding: 0em 0em;
    background: #121212 url(images/BarL.jpg) left top repeat-y;
  }
        h1#header {
    font-size: 1.0em;
    margin: 0px -6px 0.2em; padding: 74.5px;
    background: url(images/Header.jpg);
  }

  ul {
  list-style:none;
  }
    ul.Navigation {
        font-size: 14px;
    float: left;
    margin: 0;
    padding: 0em 0em;
    clear: left;
    width:135px;
  }
    ul.Navigation li.NaviDown {
    color: white;
    background: url(images/NaviDown.jpg);
    margin: 0px 0px; padding: 0px 0px;
    width: 135px; height: 19px;
    clear: left;
    text-align:center;
  }
    ul.Navigation li {
    list-style: none;
    border: 0px solid;
    clear: left;
  }
    ul.Navigation a {
    display: block;
    padding: 2px;
        clear:left;
  }
    ul.Navigation a:link {
    color: white; background: url(images/NaviButton.jpg);
    text-decoration:none;
    text-align:center;
    clear: left;
  }
    ul.Navigation a:visited {
    color: white;
    text-decoration:none;
    text-align:center
    color: white; background: url(images/NaviButton.jpg);
    text-align:center;
  }
    ul.Navigation a:hover {
    color: #970202; background: url(images/NaviButtonOver.jpg);
    text-align:center;
  }
    ul.Navigation a:active {
    color: #000000; background: url(images/NaviButtonPressed.jpg);
    text-align:center;
  }
    ul#Uhrzeit {
        text-align:center;
        color:white;
        float: left;
        margin: 0; padding: 0;
        clear: left;
  }
    ul#Uhrzeit li.Uhrzeit {
    color: white;
    background: url(images/Counter.jpg);
    margin: 0; padding: 0;
    width: 135px; height: 19px;
    clear: left;
    text-align:center;
  }

    ul#Counter {
        text-align:center;
        color:white;
        float: left;
        margin: 0; padding: 0em 0em;
        clear: left;
  }
    ul#Counter li.Counter {
    color: white;
    background: url(images/Counter.jpg);
    margin: 0px 0px; padding: 0px 0px;
    width: 135px; height: 19px;
    clear: left;
    text-align:center;
  }
    div#Inhalt {
        margin: 0 0 0 135px;
        padding: 0px auto;
        color: #ffffff;
        background: url(images/InhaltBackground.jpg);
  }
    div#Inhalt h2 {
    font-size: 1em;
    margin: 0em 0em;
    background: url(images/NaviDown.jpg);
    height:1%;
  }
    div#Inhalt p {
    font-size: 1em;
    margin: 0em 0em;
    padding: 0.8em 1em;
    margin-bottom: 0em;
  }
    div#footer {
        margin:  auto auto; padding: auto auto;
        text-align: center;
        position:absolute;
        bottom:0;
        left:16px;
        right:16px;
        color: #FFFFFF; background: url(images/NaviDown.jpg);
  }
        div#wrapper {
    position:relative;
    background:url(images/BarR.jpg) right top repeat-y;
    min-height:100%;
    height:auto !important;
    height:100%;
    padding:0px 16px; margin: 0px 0px;
}
</style>
<!--[if lt IE 7]>
<style type="text/css">
ul.Navigation li {
float:left;
width:135px;
}
div#footer {
width:100%;
}
</style>
<![endif]-->
<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />
</head>
<body>
<div id="wrapper" class="clearfix">
<h1 id="header"></h1>

<ul class="Navigation">
  <li class="NaviDown">Navigation</li>
  <li><a href="index.php">Willkommen</a></li>
  <li><a href="band.php">Band</a></li>
  <li><a href="musik.php">Musik</a></li>
  <li><a href="kontakt.php">Kontakt</a></li>
  <li><a href="impressum.php">Impressum</a></li>
  <li class="NaviDown"></li>
</ul>

<ul class="Navigation">
    <li class="NaviDown">Uhrzeit</li>
</ul>

<ul id="Uhrzeit">
    <li class="Uhrzeit"><script type="text/javascript" src="js/uhrzeit.js"></script></li>
</ul>

<ul class="Navigation">
    <li class="NaviDown"></li>
</ul>

<ul class="Navigation">
  <li class="NaviDown">Counter</li>
</ul>

<ul id="Counter">
    <li class="Counter"><? include ("Counter.php"); ?></li>
</ul>

<ul class="Navigation">
    <li class="NaviDown"></li>
</ul>

<div id="Inhalt">
  <h2><center>Willkommen</center></h2>
 <center><p>Willkommen auf der Seite von 'Get Back'!<br>
 Zum vergrößern eines Bildes, auf ein Bild klicken.<br><br>
[Persöhnliche Daten vorerst entfernt, noch keine Zustimmung der Personen]
</p><h2>&nbsp;</h2></center>
</div>
<div id="footer"><center>© 2008 Get Back</center></div>
</div>
</body>
</html>
```
Getestet unter WinXP Prof. SP2 in Firefox 2.0.0.14, IE 6 + 7, Netscape 7.1,  Opera 9.24, Safari 3.0.4


----------



## -Raid- (20. Mai 2008)

Genial 

Vielen dank Maik! Hast mir wirklich sehr weitergeholfen!

Nachtrag: Soweit habe ich jetzt alles angepasst. Zwei kleine Sachen passen mir noch nicht (kein Abstand der Navigation zur Uhrzeit und von der Uhrzeit zum Counter, vorher mit <br> gelöst, funktioniert aber nicht (mehr) im IE) (Inhalt hat keinen Abstand zur Navigation, der Background bleibt in der gleichen Position, nur der Anfang mit dem Titel und der Abschluss verschieben sich) aber ich denke (hoffe) die Probleme werde ich alleine lösen.

Ich konnte so einiges rauslesen und nachvollziehen, was du gemacht hast, dass wird mir das erstellen meiner nächsten Seite weitaus einfacher machen. 

Nachtrag 2: Warum ich einen 2ten Wrapper brauchte, war der Grund, dass ich die Seite einrücken wollte, also 2em Platz links und rechts, also die Seite sollte erst bei 2em anfangen und 2em früher aufhören, aber da trau ich mich jetzt nichtmehr ran, bin froh, wenn die Seite steht.
Nachtrag 2²: Hab es jetzt geschaft, die Seite hat einen 2em dicken Rand. Habe einfach die Bildbreite angehoben und so ging es dann auch ohne einen 2ten Wrapper. 

Nachtrag Nummer 3: Oh, schon 6 Uhr...
Ich hätte da noch ne Idee, habe aber im Moment noch nicht wirklich eine Ahnung wie ich die umsetzen soll. Hatte mir gedacht, ich erstelle einfach eine Tabelle zwischen Navi und Content und zieh die in die Länge, Image der rechten Leiste und gut ist, klappte aber nicht.

Mit Paint bearbeitet, so sollte es aussehen.




Ist jetzt aber nicht notwendig.

Eine kleine Aufgabe hab ich noch für dich. Auf der Seite steht das Problem.
Die Seite ist aktualisiert auf dem Server.

Nochmals vielen dank an dich!

Mit freundlichen Grüßen,
-Raid-


----------



## Maik (21. Mai 2008)

Moin.


-Raid- hat gesagt.:


> Zwei kleine Sachen passen mir noch nicht (kein Abstand der Navigation zur Uhrzeit und von der Uhrzeit zum Counter, vorher mit <br> gelöst, funktioniert aber nicht (mehr) im IE) (Inhalt hat keinen Abstand zur Navigation, der Background bleibt in der gleichen Position, nur der Anfang mit dem Titel und der Abschluss verschieben sich) aber ich denke (hoffe) die Probleme werde ich alleine lösen.


Neues Markup:

```
<ul class="Navigation">
  <li class="NaviDown">Navigation</li>
  <li><a href="index.php">Willkommen</a></li>
  <li><a href="band.php">Band</a></li>
  <li><a href="musik.php">Musik</a></li>
  <li><a href="kontakt.php">Kontakt</a></li>
  <li><a href="impressum.php">Impressum</a></li>
  <li class="NaviDown"></li>
</ul>

<ul id="Uhrzeit">
    <li class="NaviDown">Uhrzeit</li>
    <li class="Uhrzeit"><script type="text/javascript" src="js/uhrzeit.js"></script></li>
    <li class="NaviDown"></li>
</ul>

<ul id="Counter">
    <li class="NaviDown">Counter</li>
    <li class="Counter">8</li>
    <li class="NaviDown"></li>
</ul>
```
Neues Stylesheet:

```
/*  aus ul.Navigation li.NaviDown {...} wird li.NaviDown {...} */
li.NaviDown {
    color: white;
    background: url(images/NaviDown.jpg);
    margin: 0px 0px; padding: 0px 0px;
    width: 135px; height: 19px;
    clear: left;
    text-align:center;
}

ul#Uhrzeit {
    text-align:center;
    color:white;
    float: left;
    margin: 0;
    margin-top:10px;
    padding: 0;
    clear: left;
}

ul#Counter {
    text-align:center;
    color:white;
    float: left;
    margin: 0;
    margin-top:10px;
    padding: 0em 0em;
    clear: left;
}
```



-Raid- hat gesagt.:


> Eine kleine Aufgabe hab ich noch für dich. Auf der Seite steht das Problem.
> Die Seite ist aktualisiert auf dem Server.





> Zwischen dem Inhalt und der Navigation sollen 0.2% Platz sein. Leider verschiebt sich der Hintergrund nicht mit.


Das mit den 0.2% haut so nicht hin, da die linke Spalte eine fixe Breite besitzt, aber so richtest du einen Abstand zwischen den beiden Spalten ein:


```
div#Inhalt {
        background: #262626;
        margin: 0 0 3% 140px; /* von mir frei gewählt */
        padding: 0 0.2%;
        color: #ffffff;
}
```


----------



## -Raid- (21. Mai 2008)

Danke Maik, die Seite ist jetzt komplett Fertig.
Könntest du mir zum Abschluss die Reihenfolge von margin und padding erklären?
Ich teste das immer aus. 

Bsp: margin: 0 0 0 0

Für was steht welche Zahl?

Ansonsten danke ich dir vielmals. Meine erste fertige Seite. 

Mit freundlichen Grüßen,
-Raid-


----------



## Maik (21. Mai 2008)

Mahlzeit 


-Raid- hat gesagt.:


> Könntest du mir zum Abschluss die Reihenfolge von margin und padding erklären?
> Ich teste das immer aus.
> 
> Bsp: margin: 0 0 0 0
> ...


Die vier Angaben beginnen oben (= margin-top / padding-top) und setzen sich dann im Uhrzeigersinn fort.



			
				SELFHTML - margin hat gesagt.:
			
		

> Bei mehreren Angaben werden diese abhängig von deren Anzahl interpretiert.
> Zwei Angaben bedeuten: die erste Angabe bedeutet den Abstand für oben und unten, die zweite den Abstand für rechts und links.
> Drei Angaben bedeuten: die erste Angabe bedeutet den Abstand für oben, die zweite den Abstand für rechts und links und die dritte den Abstand für unten.
> Vier Angaben bedeuten: die erste Angabe bedeutet den Abstand für oben, die zweite den Abstand für rechts, die dritte den Abstand für unten und die vierte den Abstand für links.



Quelle: http://de.selfhtml.org/css/eigenschaften/randabstand.htm#margin



			
				SELFHTML - padding hat gesagt.:
			
		

> Bei mehreren Angaben werden die Angaben intern nach der angenommenen Reihenfolge für 1=oben, 2=rechts, 3=unten, 4=links interpretiert.
> Zwei Angaben bedeuten: die erste Angabe bedeutet den Abstand für oben und unten, die zweite den Abstand für rechts und links.
> Drei Angaben bedeuten: die erste Angabe bedeutet den Abstand für oben, die zweite den Abstand für rechts und links und die dritte den Abstand für unten.
> Vier Angaben bedeuten: die erste Angabe bedeutet den Abstand für oben, die zweite den Abstand für rechts, die dritte den Abstand für unten und die vierte den Abstand für links.



Quelle: http://de.selfhtml.org/css/eigenschaften/innenabstand.htm#padding


----------



## -Raid- (24. Mai 2008)

Hi zusammen,
ich hab da noch ne Frage. Wie kann ich die Seite "fest" darstellen lassen.
Bsp.: http://www.goarmy.de
Auch wenn man hier den Browser minimiert und verkleinert verschiebt sich nichts.
Bei mir sieht das etwas anders aus:







Wie kann ich diesen "Effekt" erzielen?

Zudem will ich das Links, die im Body stehen, eingefärbt werden.
Hier mein Code:

```
a:link { color: white; }
a:visited { color: white; }
a:hover { color: red; }
```

Das funktioniert leider nur, wenn ich diesen Code:

```
<style type="text/css">
a:link { color: white; }
a:visited { color: white; }
a:hover { color: red; }
</style>
```

direkt in die jeweilige Seite einfüge, wenn ich den Code nur in die layout.css setze, funktioniert es nicht.

Hoffe ihr (Maik *grins*) könnt mir da weiterhelfen.

Mit freundlichen Grüßen,
-Raid-


----------



## Maik (24. Mai 2008)

Hi,

hierfür müsstest du das DIV *#wrapper* mit einer fixen Breite ausstatten und ggfs. mit margin:0 auto im Browserfenster horizontal zentrieren - in der genannten Seite, die auf einem tabellengestützten Layout basiert, besitzt die äußere Tabelle ebenfalls eine feste Breite und wird mit dem HTML-Attribut align=center im Viewport horizontal zentriert.

Die beiden äußeren Rand-Grafiken liessen sich dann auch in einer einzigen Grafik vereinen, und als Hintergrund für den Dokumentkörper oder das DIV*#wrapper* deklarieren.

Zu deiner Frage bzgl. der Linkformatierung empfehle ich dir meinen Artikel CSS Wie können Links in einer Seite unterschiedliche Schriftfarben erhalten? in den Webmaster FAQ.


----------



## -Raid- (24. Mai 2008)

Hi Maik,
das mit den Linkfarben habe ich noch rausbekommen, bevor du gepostet hattest. *stolz*
Hab es so gemacht:

```
div#footer a:link {
		color: white;
  }	
	div#footer a:visited{
		color: white;
  }  
	div#footer a:hover{
		color: #970202;
		text-decoration:none;
```

Mit der fixen Breite kann ich dir leider nicht folgen.
Hab es mit Margin und Padding versucht, aber ich bekomme nicht das Resultat, was ich haben will. 


```
[...]
	html,body {
		align: center;
		margin:0;
		padding:0;
		height:100%;
}
	body {
	    font-size:100.01%;
		font-family: Times New Roman;
		margin: 0em 0em; padding: 0em 2em;
	    background: #121212 url(images/BarL.jpg) left top repeat-y;
  }
		h1#header {
	    font-size: 1.0em;
		margin: 0px 0px 0em; padding: 74px;
		background: url(images/Header.jpg);
  }
  
	ul {
		list-style:none;
  }
    ul.Navigation {
		font-size: 14px;
		float: left;
		margin: 0;
		padding: 0em 0em;
		clear: left;
		width:135px;
  }
    li.NaviDown {
		color: white;
		background: url(images/NaviDown.jpg);
		margin: 0px 0px; padding: 0px 0px;
		width: 135px; height: 19px;
		clear: left;
		text-align:center;
}
  }
    ul.Navigation li {
		list-style: none;
		border: 0px solid;
		clear: left;
  }
    ul.Navigation a {
		display: block;
		padding: 2px;
        clear:left;
  }
    ul.Navigation a:link {
		color: white; background: url(images/NaviButton.jpg);
		text-decoration:none;
		text-align:center;
		clear: left;
  }
    ul.Navigation a:visited {
		color: white;
		text-decoration:none;
		text-align:center
		color: white; background: url(images/NaviButton.jpg);
		text-align:center;
  }
    ul.Navigation a:hover {
		color: #970202; background: url(images/NaviButtonOver.jpg);
		text-align:center;
  }
    ul.Navigation a:active {
		color: #000000; background: url(images/NaviButtonPressed.jpg);
		text-align:center;
  }
    ul#Uhrzeit {
		text-align:center;
		color:white;
		float: left;
		margin: 0;
		margin-top:15px;
		padding: 0;
		clear: left;
  }
    ul#Uhrzeit li.Uhrzeit {
		color: white;
		background: url(images/Counter.jpg);
		margin: 0; padding: 0;
		width: 135px; height: 19px;
		clear: left;
		text-align:center;
  }
    ul#Counter {
		text-align:center;
		color:white;
		float: left;
		margin: 0;
		margin-top:15px;
		padding: 0em 0em;
		clear: left;
  }
    ul#Counter li.Counter {
		color: white;
		background: url(images/Counter.jpg);
		margin: 0px 0px; padding: 0px 0px;
		width: 135px; height: 19px;
		clear: left;
		text-align:center;
  }
    div#Inhalt {
		background: #262626;
        margin: 0 0 3% 138px;
        padding: 0 0%;
        color: #ffffff;
  }
    div#Inhalt li.admin {
		display: block;
		text-align: center;
		font-size: 1em;
		margin: 0em 0em;
		background: url(images/NaviDown.jpg);
		height:1%;
  }
    div#Inhalt h2 {
		font-size: 1em;
		margin: 0em 0em;
		background: url(images/NaviDown.jpg);
		height:1%;
  }
    div#Inhalt p {
		font-size: 1em;
		margin: 0em 0em;
		padding: 0.8em 1em;
		margin-bottom: 0em;
  }
    div#footer {
        margin:  auto auto; padding: auto auto;
        text-align: center;
        position:absolute;
        bottom:0;
        left:16px;
        right:16px;
        color: #FFFFFF; background: url(images/NaviDown.jpg);
  }	
	div#footer a:link {
		color: white;
  }	
	div#footer a:visited{
		color: white;
  }  
	div#footer a:hover{
		color: #970202;
		text-decoration:none;
  }
	div#wrapper {
		position:relative;
		background:url(images/BarR.jpg) right top repeat-y;
		min-height:100%;
		height:auto !important;
		height:100%;
		padding:0px 16px 0 16px; margin:0 auto 0 0px;
  }
    div#NaviBar {
		margin: 0 0 0% 9px;
		padding: 0 0%;
		color: #ffffff; background: url(images/BarR.jpg);
```

Mit freundlichen Grüßen,
-Raid-


----------



## Maik (24. Mai 2008)

Schau dir doch zum Vergleich einfach mal den Quellcode der von dir genannten Seite etwas genauer an.

Die äußere Tabelle, die deinem DIV *#wrapper* entspricht, besitzt eine feste Breite (width="1059"), die sie beim Verkleinern des Browserfensters beibehält, und somit alle in ihr eingebundenen Seitenbereiche / Inhalte in ihrer vorgesehenen Position verharren.

Bei dir nimmt das DIV *#wrapper* aber derzeit ohne jegliche Breitenangabe einem Blockelement entsprechend eine relative Breite von 100% im Viewport ein, und reagiert auf das horizontale Verkleinern des Browserfensters, sprich verkleinert sich ebenfalls, und der Inhalt der rechten Spalte verschiebt sich somit nach links, und dürfte ab einem gewissen Grad an gewissen Stellen in die nächste Zeile umgebrochen werden.

Wenn für die Eltern-Box aber eine feste Breite deklariert wird, behält sie diese auch beim Skalieren des Browserfensters, und die Spalten verschieben sich somit nicht mehr.

In Anlehnung zur genannten Seite würde die Regel für die Box *#wrapper* dann folgendermaßen lauten:


```
div#wrapper {
    position:relative;
    width:1059px; /* fíxe Breite für die Box */
    min-height:100%;
    height:auto !important;
    height:100%;
    padding:0px;
    margin: 0px auto; /* zentriert die Box horizontal im Fenster */
  }
```


----------



## Maik (24. Mai 2008)

So, da das F1-Qualifying vorbei ist, hab ich mich mal fix dran gesetzt, und in der angehängten Vorlage Nr.3  dem DIV *#wrapper* eine Breite von 800px verpasst (ich weiß ja nicht, welche Breite dir da vorschwebt) und die beiden Randgrafiken "BarL.jpg" und "BarR.jpg" in einer Grafik (wrapper_border.png / 800*1px) zusammengeführt, die der Box als Hintergrundbild dient.

Desweiteren habe ich als Zugabe in dem Layoutkonzept eine globale linke Spalte *#leftCol* eingerichtet, die nun die Navigation, die Uhrzeit und den Counter umschliesst, und vom Inhalt rechts umflossen wird - somit entfallen die immer wiederkehrenden  float:left- und clear:left-Eigenschaft im Stylesheet für die einzelnen Listen.

Ich hoffe, dass du anhand dieses Beispiels die Technik nun besser nachvollziehen kannst.


----------



## -Raid- (24. Mai 2008)

Erstmal danke, dass du dir solch eine Mühe gemacht hast.
Ich habe in den letzten 7 Tagen 50 Stunden an der Seite garbeitet und du schüttelst sowas aus dem Ärmel... 

Gute Idee die Lightbox.css auszulagern. 
Sowie ich das sehe, hast du den Hintergrund und die Leisten in die Datei:
wrapper_border.png
gepackt.
Das Problem ist nur, dass ich eine %-Angabe machen wollte, damit die Seite sich der Auflösung anpasst.

Habe jetzt alle Seiten angepasst, ist doch einiges hinzugekommen, was bei deiner Version nicht dabei war. 
Die Seite ist aktualisiert auf dem Server.
(Der Webspace ist bestellt, deswegen muss die Seite langsam fertig werden.)

Hab' einen guten Editor, damit kann ich sehr einfach sehen, was du verändert hast:





War das jetzt schlimm, dass ich immer gecleart habe, oder ist das einfach nur besser von der Übersicht?

Zudem hätte ich noch eine Frage. Meine Uhr will einfach nicht laufen (Sekunden). Versuche jetzt schon seit 3 Stunden diese Uhr zum laufen zu bringen. 

```
var Datum = new (Date);
var Tag = Datum.getDate();
var Monat = Datum.getMonth();
var Jahr = Datum.getFullYear();
var Monatname = new Array("01", "02", "03", "04", "05", "06", "07", "08", "09", "10", "11", "12");
var Stunde = Datum.getHours();
var Minute = Datum.getMinutes();
var Sekunde = Datum.getSeconds();

if(Sekunde < 10)
{
    Sekunde = "0" + Sekunde;
}

if(Minute < 10)
{
    Minute = "0" + Minute;
}

if(Stunde < 10)
{
    Stunde = "0" + Stunde;
}
/*window.setTimeout("showtime()",1000);*/

document.write(Tag+"."+Monatname[Monat]+"."+Jahr+" "+Stunde+":"+Minute+":"+Sekunde);
```


----------



## Maik (24. Mai 2008)

Deinen Beitrag von heute Mittag  habe ich aber so interpretiert, dass du nun ein fixes Layout einrichten möchtest, eben so, wie auf der von dir verlinkten Seite.

Wenn du weiterhin eine relative Breite für die Parent-Box verwenden möchtest, solltest du für sie zusätzlich mit der min-width-Eigenschaft eine Mindestbreite einrichten, damit sie sich nur bis zu einem bestimmten Punkt zusammenstauchen lässt.

Aber Achtung: diese Eigenschaft wird von den älteren IE-Versionen bis einschliesslich dem IE6 nicht unterstützt, und es wäre ein Workaround erforderlich, wie ihn z.B. Stu Nicholls mit Min-Width for Internet Explorer demonstriert.

Jo, ich hab vorhin mal entsprechend dem HTML-Code für eine chronologische Reihenfolge im Stylesheet gesorgt, denn ich hasse nämlich nichts mehr, wenn die Selektoren in einer wahllosen Reihenfolge im CSS-Code umherschwirren, und man ständig darin rauf- und runterscrollen muss, um sich die einzelnen Passagen näher anzuschauen.

Eine funktionstüchtige Alternative zu deinem Uhrzeit-Script findest du hier http://www.jswelt.de/index.php?opencat=JavaScripts&artid=1004961413


----------



## -Raid- (24. Mai 2008)

Das war doch, was ich wollte.  War leicht irritiert.
Die Seite wird jetzt bis 1024x768 komplett angezeigt, bei einer Auflösung unter 1024x768 muss man scrollen.

Du hast echt auf alles 'ne Antwort.

Die Uhrzeit habe ich entfernt. Ich hätte sonst einen Banner in die Seite einfügen müssen.
Jetzt steht an der Stelle das Datum + Tagnamen:
Samstag, 24.05.2008

Das war's dann auch erstmal wieder von mir, bis zum nächsten mal. 

Mit freundlichen Grüßen,
-Raid-


----------



## Maik (25. Mai 2008)

-Raid- hat gesagt.:


> Du hast echt auf alles 'ne Antwort.


Anders herum würde es hier im CSS-Board ziemlich mau aussehen, und du wärst vermutlich mit deinem Projekt noch keinen bedeutenden Schritt weiter ;-)


----------



## -Raid- (25. Mai 2008)

Jeder fängt mal klein an. 
Es ist sehr, sehr hilfreich, wenn man jemanden bei Problemen fragen kann, denn sonst hängt man solange an einer Stelle fest, dass man irgendwann die Lust verliert. Konnte ja das ein oder andere von dir lernen. 

Etwaige Rechtschreibfehler sind zu entschuldigen, bin gerade erst aus dem Bett gefallen.
(Natürlich nicht, bin aufgestanden...)

Mit freundlichen Grüßen,
-Raid-


----------



## Maik (25. Mai 2008)

-Raid- hat gesagt.:


> Etwaige Rechtschreibfehler sind zu entschuldigen, bin gerade erst aus dem Bett gefallen.
> (Natürlich nicht, bin aufgestanden...)


Moin 

Ich kann da zwar keine entdecken, dafür bist du diesmal ausnahmsweise mir einen deutlichen Schritt voraus, denn ich war noch garnicht im Bett :suspekt:

Meine Süße wird sich nachher mächtig wundern, wenn sie neben einem "frisch gemachten" Bett aufwacht 

Ich wünsche dir auf jeden Fall einen schönen Sonntag 

Gruß
Maik


----------



## -Raid- (25. Mai 2008)

Maik hat gesagt.:


> Moin
> 
> Ich kann da zwar keine entdecken, dafür bist du diesmal ausnahmsweise mir einen deutlichen Schritt voraus, denn ich war noch garnicht im Bett :suspekt:
> 
> ...



Danke, dir auch einen schönen Sonntag.
Nochmehr wird sie sich wundern, wenn sie deine Blutunterlaufenden Augen sieht?!  ;-)
Oder ist's noch nicht so schlimm? 

Jetzt ist aber genug Off-Topic hier Maik, und sowas noch als Mod... *hust* 

Mit freundlichen Grüßen,
-Raid-


----------



## Maik (25. Mai 2008)

-Raid- hat gesagt.:


> Nochmehr wird sie sich wundern, wenn sie deine Blutunterlaufenden Augen sieht?!  ;-)
> Oder ist's noch nicht so schlimm?
> 
> Jetzt ist aber genug Off-Topic hier Maik, und sowas noch als Mod... *hust*


Nö, eine durchgemachte Nacht sieht man mir nicht so schnell an - da müssten schon mehrere hintereinander folgen - aber wer steht das schon durch? ;-)

So, als zuständiger Moderator dieses Forums erteile ich uns beiden nun bis auf weiteres Redeverbot in dem Thread, bis hier wieder Fragen rund um CSS erörtert werden


----------



## -Raid- (25. Mai 2008)

Tja, dann editier ich die Frage mal eben aus den anderen Beitrag wieder raus... 

*wieder einfüg*

//Ahhhhhh!! Hab einen Fehler in der Seite entdeckt.
Die Anfangs- und Abschlussleiste sind 3 Pixel im FF und ganze 6 ! Pixel im IE eingerückt. 

Mit freundlichen Grüßen,
-Raid-


----------



## Maik (25. Mai 2008)

Da wirst du mir jetzt schon mit dem aktuellen Quellcode oder dem Link zur Seite auf die Sprünge helfen müssen, denn die tutorials.de-Glaskugel hat sonntags standesgemäß frei


----------



## -Raid- (25. Mai 2008)

Das auch noch, man man man. 


```
* {
	margin:0;
	padding:0;
}

html,body {
	margin:0;
	padding:0;
	height:100%;
}

body {
	font-size:100.01%;
	font-family: Times New Roman;
	background: #121212;
}

div#wrapper {
	position:relative;
	background:url(images/wrapper_border.jpg) left top repeat-y;
	width:1024px;
	min-height:100%;
	height:auto !important;
	height:100%;
	padding:0px; margin: 0px auto;
}

.clearfix:after {
	content: ".";
	display: block;
	height: 100%;
	clear: both;
	visibility: hidden;
}

	.clearfix {display: inline-block;}

	/* Hides from IE-mac \*/
	* html .clearfix {height: 1%;}
	.clearfix {display: block;}
	/* End hide from IE-mac */

h1#header {
	font-size: 1.0em;
	margin: 0px 14px 0 15px;
	padding: 74px;
	background: url(images/Header.jpg);
}

#leftCol {
	float:left;
	width:135px;
	margin:0 0 0 15px;
	display:inline;
}

ul {
	list-style:none;
}

ul.Navigation {
	font-size: 14px;
	margin: 0;
	padding: 0em 0em;
	width:135px;
}

li.NaviDown {
	color: white;
	background: url(images/NaviDown.jpg);
	margin: 0px 0px;
	padding: 0px 0px;
	width: 135px;
	height: 19px;
	text-align:center;
}

ul.Navigation li {
	list-style: none;
	border: 0px solid;
}

ul.Navigation a {
	display: block;
	padding: 2px;
}

ul.Navigation a:link {
	color: white;
	background: url(images/NaviButton.jpg);
	text-decoration:none;
	text-align:center;
}

ul.Navigation a:visited {
	color: white;
	text-decoration:none;
	text-align:center
	color: white;
	background: url(images/NaviButton.jpg);
	text-align:center;
}

ul.Navigation a:hover {
	color: #970202;
	background: url(images/NaviButtonOver.jpg);
	text-align:center;
}

ul.Navigation a:active {
	color: #000000;
	background: url(images/NaviButtonPressed.jpg);
	text-align:center;
}

ul#Datum {
	text-align:center;
	color:white;
	margin: 0;
	margin-top:10px;
	padding: 0;
}

ul#Datum li.Uhrzeit {
	color: white;
	background: url(images/Counter.jpg);
	margin: 0;
	padding: 0;
	width: 135px;
	height: 19px;
	text-align:center;
}

ul#Counter {
	text-align:center;
	color:white;
	margin: 0;
	margin-top:10px;
	padding: 0em 0em;
}

ul#Counter li.Counter {
	color: white;
	background: url(images/Counter.jpg);
	margin: 0px 0px;
	padding: 0px 0px;
	width: 135px; height: 19px;
	text-align:center;
}

div#Inhalt {
	background: #262626;
	margin: 0 14px 3% 153px;
	padding: 0 0.2%;
	color: #ffffff;
}

div#Inhalt h2 {
	font-size: 1em;
	margin: 0em 0em;
	padding: 0 0 0 0;
	background: url(images/NaviDown.jpg);
	height:1%;

}

div#Inhalt li.admin {
	display: block;
	text-align: center;
	font-size: 1em;
	margin: 0em 0em;
	background: url(images/NaviDown.jpg);
	height:1%;
}

div#Inhalt p {
	font-size: 1em;
	margin: 0em 0em;
	padding: 0.8em 1em;
	margin-bottom: 0em;
}
	
div#footer {
	text-align: center;
	margin:0 16px 0 15px;
	padding: 0;
	position:absolute;
	bottom:0;
	width:993px;
	clear:left;
	color: #FFFFFF;
	background: url(images/NaviDown.jpg);
}	
	
div#footer a:link {
	color: white;
}	
	
div#footer a:visited{
	color: white;
}  

div#footer a:hover{
	color: #970202;
	text-decoration:none;
}
```


```
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta name="description" content="'Get Back' ist eine Seite der Band "Get Back""/>
<meta name="author" content="Kevin Wirtz"/>
<meta name="keywords" content="Get, Back, Get Back, Band, Musik, NRW"/>
<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/scriptaculous.js?load=effects"></script>
<script type="text/javascript" src="js/lightbox.js"></script>
<script type="text/javascript" src="audio-player/audio-player.js"></script>
<title>Get Back - Auftritte</title>
<LINK REL="SHORTCUT ICON" href="http://www.tutorials.de/forum/images/favicon.jpg">
<style type="text/css">
@import "layout.css";
</style>
<!--[if lt IE 7]>
<style type="text/css">
ul.Navigation li {
float:left;
width:135px;
}
div#footer {
width:100%;
}
</style>
<![endif]-->
<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />
</head>
<body>

<div id="wrapper" class="clearfix">
     <h1 id="header"></h1>
	    <div id="leftCol">
          <ul class="Navigation">
              <li class="NaviDown">Navigation</li>
              <li><a href="index.php">Willkommen</a></li>
				<li><a href="band.php">Band</a></li>
					<li><a href="musik.php">Musik</a></li>
					<li><a href="auftritte.php">Auftritte</a></li>
					<li><a href="gaestebuch.php">Gästebuch</a></li>
					<li><a href="kontakt.php">Kontakt</a></li>
					<li><a href="impressum.php">Impressum</a></li>
				<li class="NaviDown"></li>
          </ul>

		  <ul id="Uhrzeit">
              <li class="NaviDown">Datum</li>
              <li class="Uhrzeit"><script type="text/javascript" src="js/uhrzeit.js"></script></li>
              <li class="NaviDown"></li>
          </ul>

          <ul id="Counter">
              <li class="NaviDown">Counter</li>
              <li class="Counter"><?php include("Counter.php"); ?></li>
              <li class="NaviDown"></li>
          </ul>
     </div>

<div id="Inhalt">
  <h2><center>Auftritte</center></h2>
 <center><p>Keine Einträge vorhanden.<br>
</p><h2>&nbsp </h2></center>
</div>
<div id="footer"><a href="impressum.php">© 2008 Get Back</a></div>
</div>
</body>
</html>
```

Und da fällt mir nochwas ein:

```
div#Inhalt li.admin {
	display: block;
	text-align: center;
	font-size: 1em;
	margin: 0em 0em;
	background: url(images/NaviDown.jpg);
	height:1%;
}
```

Das ist für das Gästebuch. Dort steht ein Link in der unteren Leiste und da der nicht in h2 angezeigt werden sollte, hab ich das reingeschrieben. Funktioniert auch, nur leider wird im IE ein Punkt neben dem Link angezeigt.

Die Seite liegt auch auf dem Server, solltest du dir das angucken wollen.

Mit freundlichen Grüßen,
-Raid-


----------



## Maik (25. Mai 2008)

-Raid- hat gesagt.:


> Die Seite liegt auch auf dem Server, solltest du dir das angucken wollen.


Jo, dann nenn mal die Adresse zum Server, denn dein zuletzt genannter Link in der PN spuckt das hier aus:



> Diese Seite ist leider nicht verfügbar.
> 
> Richte auch du Deine kostenlose Homepage beim kostenlosen Webspace bei Funpic.de ein.
> 
> Kostenlos: 2500 MB Webspace, PHP, MySQL, FTP!


Und von welcher Anfangs- und Abschlussleiste sprichst du?

Wenn ich den Quellcode in den Browsern aufrufe, "sitzt" die linke Spalte in allen Browsern über dem linken grafischen Rahmen des *wrapper*-Blocks, und die Footer-Grafik überlappt den Rahmen im IE auf beiden Seiten, was an der nicht-entfernten width:100%-Deklaration liegt - vergleiche hierzu einfach mal mein gestern erstelltes Beispiel ;-)

Die übrigen Browser richten die Footer-Grafik, wie auch die linke Spalte zu weit links aus, da du den linken Außenabstand zu gering gesetzt hast - auch hier hilft ein Blick in meine gestrige Vorlage.


----------



## -Raid- (25. Mai 2008)

Kann dir gerade nicht folgen, kriegst gleich Post.

Die Seite wird bei mir im IE und FF einwandfrei dargestellt?
Ahso, stimmt, hatte ich nur in der index.php gelöscht.
Hatte mir dein Teil D) schon angeguckt.

MfG, <- Kurzfassung
-Raid-


----------



## Maik (25. Mai 2008)

-Raid- hat gesagt.:


> Kann dir gerade nicht folgen, kriegst gleich Post.
> 
> Die Seite wird bei mir im IE und FF einwandfrei dargestellt?
> 
> ...


Naja, zumindest stimmt dein geposteter HTML-Quelltext nicht mit dem der Seite überein, denn dort hast du die angesprochene width:100%-Deklaration für den Footer entfernt, und da ich bis eben nicht wusste, wie sich deine Version der Grafik "wrapper_border.jpg" darstellt, hatte es bei mir  gerade den Anschein, als würde der linke Teil des Rahmens von den genannten Elementen überlappt werden.

Und wenn die Seite in beiden Browsern einwandfrei dargestellt wird, wo ist dann das Problem? 

Denn ich kann da auch keine Unterschiede entdecken - zumal ich noch immer nicht weiß, was du nun mit der Anfangs- und Abschlußleiste meinst, und wo sie im Firefox 3px und im IE 6px eingerückt sind.

Mir scheint, ich bin ausgeschlafener als du, obwohl ich noch nicht im Bett war :suspekt:


----------



## -Raid- (25. Mai 2008)

Ich war die ganze Zeit auf Seite 2 und hab drauf gewartet das du schreibst, bis ich dann mal gesehen hab, dass es schon eine dritte Seite gibt. :suspekt:

Guck mal, hab extra ein Bild für dich gemalt: 






Hab gerade nachgezählt, sind doch nur 2 Pixel im FF. 

Hab jetzt erstmal in jeder Datei den Footer rausgelöscht, hatte ich nur bei der Index gemacht gehabt. Da es nicht störte, fiel es auch nicht wirklich auf.

Und "geh" mal mit dem IE auf die Seite Gaestebuch, mal unabhänig davon, dass die Mysql-Datenbank bei denen nicht laufen will. Der Link: "Administration", hat einen Punkt davor. Das kommt sicher daher, dass li eine Liste darstellt, aber was soll ich sonst benutzen?


----------



## Maik (25. Mai 2008)

Okay, hab mittlerweile in dem "dunklen Loch" den Unterschied lokalisiert ;-)

Durch die height-Deklaration für das umfliessende h2-Element macht sich im IE6 sein altbekannter "Three Pixel Gap"-Bug  bemerkbar.

Lösung:


```
div#Inhalt h2 {
        font-size: 1em;
        margin: 0 !important;
        margin:0 0 0 -3px;
        padding: 0 0 0 0;
        background: url(images/NaviDown.jpg);
        height:1%;
}
```


----------



## Maik (25. Mai 2008)

-Raid- hat gesagt.:


> Der Link: "Administration", hat einen Punkt davor. Das kommt sicher daher, dass li eine Liste darstellt, aber was soll ich sonst benutzen?


Wenn du schon das li-Element verwendest, solltest du ihm auch sein Elternelement ul oder ol gönnen, und dieses mit list-style-type oder list-style so formatieren, damit das Bullet-Zeichen in den Browsern nicht mehr angezeigt wird.


----------



## -Raid- (25. Mai 2008)

Die Lösung will nicht Lösen. 
In diesem dunklen "Loch" kann er sich aber auch gut verstecken. 

//Edit: Hab's, die 0.2% standen noch drin. Jetzt ist der Fehler auch im FF weg, hat doch was gebracht.


```
div#Inhalt {
	background: #262626;
	margin: 0 14px 3% 153px;
	padding: 0 0.2%;
	color: #ffffff;
}

div#Inhalt h2 {
        font-size: 1em;
        margin: 0 !important;
        margin:0 0 0 -3px;
        padding: 0 0 0 0;
        background: url(images/NaviDown.jpg);
        height:1%;
}

div#Inhalt li.admin {
	display: ;
	text-align: center;
	font-size: 1em;
	margin: 0em 0em;
	background: url(images/NaviDown.jpg);
	height:1%;
}
```

Und das mit dem li.admin, was wird mir da das CSS-"Wörterbuch" auf 2 Beinen sagen? 

Auch noch ein Doppelposter, na gibt's den sowas....!


```
<ul class="admin"><a href="administration.php">Administration</a></li>
```


```
div#Inhalt ul.admin {
	text-align: center;
	font-size: 1em;
	margin: 0em 0em;
	background: url(images/NaviDown.jpg);
	height:1%;
}
```

Und schon geht's.
Hmm, blöd, jetzt sind mir die Themen ausgegangen. 

MfG,
-Raid-


----------



## Maik (25. Mai 2008)

Dann leer mal deinen Browsercache, denn bei mir löst díe Lösung sehr wohl:




Ist mein Hinweis bzgl. des Bulletzeichens nicht aussagekräftig genug?

Ansonsten schau dir einfach mal an, was der w3c-Validator zu deinem Markup für Fehlermeldungen auswirft -> http://validator.w3.org/check?uri=h...(detect+automatically)&doctype=Inline&group=0 und mach dich mit der korrekten HTML-Syntax für Listen vertraut.


----------



## -Raid- (25. Mai 2008)

Ich haben fertig, du schreibst einfach zu lange. 
Ich schreib dir die URL immer peer PN und knallst hier nen Bild rein wo alles zu sehen ist. Genial. 
Ist jetzt eigentlich auch egal, da die Seite Dienstag Online geht.

Jetzt hab ich kein Gesprächsstoff mehr, ist jetzt wieder Post-Verbot? 

Mit freundlichen Grüßen,
-Raid-


----------



## Maik (25. Mai 2008)

-Raid- hat gesagt.:


> Ich schreib dir die URL immer peer PN und knallst hier nen Bild rein wo alles zu sehen ist. Genial.


Nu mach dir hier mal nicht in die Hosen, in zwei Tagen existiert diese Seite, wie schon die letzte, wohl eh nicht mehr auf dem Server.

Außerdem ist es mir überhaupt  nicht recht, dass du aus dem Link solch ein Staatsgeheimnis machst, und alle übrigen User im Forum ausschliesst, dir hier ebenfalls Hilfestellung zu leisten.

Schliesslich bin ich hier  nicht dein Personal-Trainer


----------



## -Raid- (25. Mai 2008)

Es geht ja auch nicht darum, sonder eher, dass hier Fotos von Personen zu sehen sind, die eigentlich noch nicht zu sehen sein sollen, aber wie gesagt, Dienstag geht die Seite Online, von daher geh ich jetzt einfach mal davon aus, dass es OK ist.

Aber die Idee mit den Personal Trainer find ich cool. *duck-und-weg*

MfG,
-Raid-


----------



## Maik (25. Mai 2008)

-Raid- hat gesagt.:


> Es geht ja auch nicht darum, sonder eher, dass hier Fotos von Personen zu sehen sind, die eigentlich noch nicht zu sehen sein sollen


Dann hättest du eben als verantwortlicher Webmaster der Seite "Dummy-Grafiken" einsetzen  sollen 

Beim ersten Link hast du aber auch ein Geheimnis daraus gemacht, und dort waren die Bilder noch nicht enthalten.


----------



## -Raid- (25. Mai 2008)

Gute Idee, merk ich mir für's nächste mal. 
btw., dass war auch nicht böse gemeint, nur soweit ich das weiß, muss eine Person die Zustimmung erteilen, bevor man ein Foto von jener veröffentlichen darf.
Da der Link zu Seite eigentlich unbekannt ist, dachte ich, dass es so auch geht bzw. habe ich nicht daran gedacht, Platzhalter einzufügen.

//Edit: Falsch Maik, ich hatte die Bilder, bevor ich dir den Link geschickt hatte, gelöscht.  Kannst du aber nicht wissen. Und beim zweiten mal hielt ich es nicht für nötig, da ich dir da vertraue.

MfG,
-Raid-


----------

