Layout wird zerrissen

xthetronx · 11. Juli 2007

Hallo zusammen,

wahrscheinlich sehe ich den Wald vor lauter Bäumen nicht mehr, aber mein Layout macht mir ein paar Probleme.
Ich habe es so, dass es sich automatisch an die Fenstergrösse anpasst, was auch soweit wunderbar funktioniert.
Wenn es allerdings zu sehr zusammen gestaucht wird, dann zerreist es mir mein Layout, wie auf dem Beispiel zu sehen.
Ich möchte aber, dass es ab einem bestimmten Punkt starr bleibt, sich also nicht verschiebt.
Alles was ich bisher versucht habe, hat leider nicht zum Erfolg geführt.

Könnte mir jemand mit einem Tip helfen?

Wichtig sind das Div #mitte und #rightCol, sowie ul#navigation.

Vielen Dank

HTML:

  body {
    color: black; background-color: gray;
    font-size: 90.01%;
    font-family: Helvetica,Arial,sans-serif;
    margin: 0 3em 0 3em; padding: 1em;
    min-width: 41em; /* Mindestbreite verhindert Umbruch und Anzeigefehler in modernen Browsern */
  }
div#content{
	border:1px solid white;
	padding:0 0em;
	background-color:#c7c7c7;
}
div#header {
    margin: 0 0em 0em 0em;
    padding: 0 30em;
	height:108px;
	background-image:url(../images/header_background.jpg);
}

ul#navigation {
	margin: 0.0em 0 0.1em; padding: 0.1em 0em 0em;
	height:29px;
	background-image:url(../images/navi_background.gif);
	font-size:14px;
	font-weight:normal;
	border-bottom:1px solid white;
}
ul#navigation li{
	list-style:none;
	display:inline;
}
ul#navigation a, ul#navigation span {
	float:left; width:5em;
	margin: 0.0em; padding: 0.41em 1em 0.5em;
	text-decoration: none; font-weight: normal; text-align:center;
	color: maroon;
	border-right:1px solid white;
	border-left:1px solid white;
}

* html ul#navigation a, * html ul#navigation span {  /* Korrektur fuer IE 5.x */
	width: 8em;
	w\idth: 6em;
}
ul#navigation a:hover, ul#navigation span {
	border-color: white;
	background-image:url(../images/hintergrund_rot.jpg);
}
div#diashow {
	margin: 0 0 0.5em 0;
	height:100px;
	background-image:url(../images/slideshow.gif);
	/*background-image:url(../images/diashow_background.jpg);*/
	padding:5px 20px 0px 5px;
	color:white;
}
div#mitte {
    margin: 0 14em 0.3em 14em;
    padding: 0.5em 1em 0.3em 1em;
    border: 5px solid white;
	background-color:#e7e7e7;
} 

div#mitte h2 {
    font-size: 1.33em;
	margin:0 0 0 0;
}
div#mitte p {
    font-size: 1em;
	margin:0 0 0 0;
  }
div#infokasten_header {
	margin:0.2em auto 0.3em;
	background-image:url(../images/infokasten_header.gif);
	height:16px;
	width:175px;
	border:1px solid #ffffff;
	color:#FFFFFF;
	font-weight:bold;
	text-align:right;
	padding:0 5px 0 0;
}
#leftCol{ 
	float: left;
	margin:0 0 0 0.3em;
}
div#oben_links {
    font-size: 0.83em;
    width: 190px;
    margin: 0 0 0.5em; padding: 0;
    border: 1px solid white;
	background-color:#e7e7e7;
}
div#unten_links {
    font-size: 0.83em;
    width: 190px;
    margin: 0 0 0.5em; padding: 0;
    border: 1px solid white;
	background-color:#e7e7e7;
}

#rightCol{ 
	float: right;
	margin: 0 0.3em 0 0; /* rechter seitenabstand vom div#content */
}
div#oben_rechts {
    font-size: 0.9em;
    width: 190px;
    margin: 0 0 0.5em; padding: 0;
    background-color: #e7e7e7; 
	border: 1px solid white;
}
div#unten_rechts {
    font-size: 0.9em;
    width: 190px;
    margin: 0 0 0.5em; padding: 0;
    background-color: #e7e7e7; 
    border: 1px solid white;
}

.clearDiv{ 
	font-size: 1px;
	line-height: 0em;
	height: 0;
	clear: both;
}
  p#Fusszeile {
    clear: both;
    font-size: 0.9em;
    margin: 0; padding: 0.1em;
    text-align: center;
	background-image:url(../images/infokasten_header.gif);
    border-left: 1px solid white;
	border-right:1px solid white;
	border-bottom:1px solid white;
  }
div#infokasten_img {
	margin:0 auto 0.3em;
	border:1px solid #ffffff;
	width:175px;
	height:83px
}  
div#infokasten_text {
	margin: 0 0.5em 0.3em;
	background-color:#FFFFFF;
	width:177px;
	padding-left:5px;
	padding-right:1em;
	overflow:hidden;
}
p#text {
    clear: both;
    font-size: 0.9em;
    margin: 0 auto 0.3em; padding: 5px 5px 0 5px;
	width:167px;
    text-align: left;
    background-color: white; 
	overflow:hidden;
}

Maik · 11. Juli 2007

Hi,

die horizontale "Stauchung" des Layouts liesse sich durch eine Mindestbreite (min-width) für das übergeordnete Element #content verhindern.

xthetronx · 11. Juli 2007

Hi Michael,

danke für Deinen Hinweis, aber das scheint es nicht zu sein.
Probiert hatte ich das auch schon, aber ohne Ergebnis.

HTML:

div#content{
	border:1px solid white;
	padding:0 0em;
	background-color:#c7c7c7;
        min-width:800px;
}

Zwar wird, auch ohne min-width der Content-Bereich beim Verkleinern irgendwann vom Browserfenster überlagert, aber der Inhalt vom Content, bleibt leider nicht an Ort und Stelle.

Maik · 11. Juli 2007

Kann es sein, dass du das im IE (<7) überprüft hast? Denn die Vorgänger der aktuellen Version unterstützen die min-width-Eigenschaft nicht.

Ansonsten funktioniert es bei mir in den modernen Browsern einwandfrei.

Dass der Inhalt (in der mittleren Spalte?) nicht an seiner Stelle bleibt, liegt daran, dass sie (die mittlere Spalte) sich, je nach Fenstergröße mehr oder weniger, bis zum Erreichen der Mindestbreite des Elternelements zusammenschieben lässt - rechnerisch sind das (ohne Rahmen und Außenabstände) 800px - 2*190px = 420px.

Außerdem ist es empfehlenswert, das Boxmodell in einer Einheit umzusetzen, und nicht px (absolut) und em (relativ) in einen Topf zu schmeissen.

tequila slammer · 14. Juli 2007

Hallo,

ich benutze diesen Beitrag gleich mal mit, da ich gerade ein ähnliches Problem mit meiner Website festgestellt habe.

Im IE sieht meine Seite so aus, wie ich mir das vorstelle aber im FF ist alles ineinander verschoben. Ich hatte mir beim erstellen größte Mühe gegeben genau dies zu verhindern und nun passiert es trotzdem. Mein css ist wie folgt aufgebaut und ich habe schon viel mit Browsershots ausprobiert, bekomme es alleine jedoch nicht mehr hin.

Code:

* {
   margin: 0;
   padding: 0;
} 

body, html {
   background-image: url(hint.gif);
   background-repeat: repeat-x;
   background-color: #FFFFFF;
   color: #E1E1E1;
   
   font-family: verdana, tahoma, arial;
}

#container {
  width: 900px;
  margin: 0 auto;

  padding-top: 20px;
}

/* Header Formatierungen */

#header {
   height: 227px;
   background-image: url(header.gif);
}

#splash {
   padding: 52px 0px 0px 1px;
}

#splash a {
   text-decoration: none;
   color : #696969;
}

#splash a:hover {
   text-decoration: none;
   color : #000000;
}

#splash ul {
   list-style-type: none;
   
   text-align: right;
   font-size: 11px;
   color: #696969;
}

#splash li {
   display: inline;
   padding: 0 10px;
}

.right {
   
}
/* Header Formatierungen End */

/* Menü Formatierungen */

#menue {
   width: 900px;
   height: 34px;
   background-image: url(menue_hint.gif);
   color: #696969;
}

#menue ul {
   margin: 10px 0 0 20px;
   padding: 0;
   list-style-type: none;
   font-size: 11px;
}

#menue li {
   display: inline;
   padding: 0 10px;
}

#menue a {
   text-decoration: none;
   color : #696969;
}

#menue a:hover {
   text-decoration: none;
   color : #000000;
}
/* ENDE Menü Formatierungen */

.clear {
   clear: both;
   font-size: 1px;
}

#contentcontainer {
   min-height: 200px;
   height: auto !important;
   height: 200px;
   width: 898px;
   color: #696969;
   border-right: 1px solid #696969;
   border-left: 1px solid #696969;
   
   background-image: url(sub_hint.gif);
   background-repeat: repeat-y;
}

/* Submenü Formatierung */
#submenue {

   min-height: 200px;
   height: auto !important;
   height: 200px;
   width: 117px;
   background-color: #E1E1E1;
   
   padding: 20px 5px 10px 10px;
   float: left;
   
   font-size: 10px;
}

#submenue li {
   padding: 10px 0 0 0;

   font-size: 10px;
}

#submenue a {
   text-decoration: none;
   color : #000000;
}

#submenue a:hover {
   text-decoration: none;
   color : #000000;
}
/* Submenü Formatierung  Ende*/

/* Contentformatierungen Start */

#content {
   min-height: 200px;
   height: auto !important;
   height: 200px;
   width: 600px;
   background-color: #FFFFFF;
   
   padding: 20px 10px 10px 30px;
   float: center;
   
   font-size: 11px;
   text-align: justify;
}

#content p {
   margin: 0;
   padding: 10px 5px 0px 10px;
}

#content ul {
   list-style-position: inside;
}

#content p, #content ul {
   margin: 0;
   padding: 10px 5px 0px 10px;
}

#content h1 {
   padding-left: -10px;
   padding-bottom: 10px;
   font-size: 12px;
}

#content h2 {
   padding: 10px 0 15px 0;
   font-size: 11px;
}

.form_button {
   font-size: 10px;
   text-align: center;
   color: #696969;
}

#content a {
   text-decoration: none;
   color : #000000;
}

#content a:hover {
   text-decoration: none;
   color : #000000;
}

/*Contentformatierungen End*/

#footer {
   background: url(footer.gif) no-repeat;
   width: 900px;
   height: 7px;
}

.floatleft {
   float: left;
   margin: 0 20px 10px 0;
   padding: 0;

}

.floatright {
   float: right;
   margin: 0 0 10px 20px;
   padding: 0;
}

Kann mir einer einen Hinweis geben was ich falsch umgesetzt habe?

Maik · 14. Juli 2007

Hi,

kannst du auch mal den vollständigen Quelltext des HTML-Dokuments zeigen?

Wenn im Firefox alles ineinander verschoben ist, lässt dies erstmal die Vermutung zu, dass das Dokument im Quirksmodus übergeben wird, und der IE daher das Boxmodell fehlerhaft interpretiert, sprich die zum Teil gesetzte padding-Eigenschaft nicht zur width- und height-Eigenschaft eines Elements hinzuaddiert, was Firefox hingegen macht, und somit den CSS-Code richtig interpretiert, und eben nicht der IE.

Wie gesagt, ist meine Vermutung ohne den HTML-Code gesehen zu haben, daher erstmal: "Alle Angaben ohne Gewähr".

Achja, einen Wert center gibt es für die float-Eigenschaft nicht, und dieser Hinweis ist mit Gewähr.

tequila slammer · 15. Juli 2007

Nachfolgend habe ich mal den Quelltext stellvertretend für die restlichen Seiten angehängt.

HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html><head><title>Cayas - MapService</title>
<link rel="stylesheet" type="text/css" href="style.css" media="screen">
</head>
<body>
<div id="container">
<div id="header">
<div id="splash"><ul><li><a href="impressum.php">Impressum</a></li><li><a href="kundenlogin.php"><img src="locked.gif" border="0" alt="Kundenlogin" /></a></li></ul><p><img src="header_splash.jpg" border="0" alt="cayas_splash" /></p></div>
</div>
<div id="menue"><ul><li><a href="index.php">Startseite</a></li><li><a href="unternehmen.php">Unternehmen</a></li><li><a href="leistungen.php">Dienstleistungen</a></li><li><a href="mapservice.php">Produkte</a></li><li><a href="kontakt.php">Kontakt</a></li></ul></div>
<div id="contentcontainer">
<div id="submenue"><ul><li>Wir beraten Sie</li><li>jeder Zeit unter der 0176 68 01 67 82</li></ul></div>
<div id="content">
<h1>Cayas MapService - Alle Informationen auf einem Blick</h1>
Mit dem Cayas MapService erhalten Sie &Auml;nderungsinformationen von ScanPrix Preislisten. Sie k&ouml;nnen komfortabel Preislisteninformationen auslesen und diese zur weiteren Verarbeitung in eine Datenbank oder als .*csv Datei abspeichern. Dabei bestimmen Sie die Anzahl der auszulesenden Informationen mit einem Klick.
<p></p>Durch die Verwendung der einfach zu bedienenden Zeitsteuerung, k&ouml;nnen Sie das Aktualisieren der Listeninformationen automatisieren und zum Beispiel in Ihrem Intranet zur Verf&uuml;gung stellen.
<p></p>
<span class="floatleft">Der MapService bietet Ihnen:<img src="mapservice_screen2.jpg" class="floatright" alt="MapService" />
<ul>
<li>schnelle Informationen &uuml;ber aktuelle Preislisten</li>
<li>individuell anpassbare Preislisteninformationen
<li>eine einfach und intuitiv zu bedienende Oberfl&auml;che</li>
<li>Aktualisierungsautomation</li>
</ul>
<p></p>
Kontaktieren Sie uns. Wir beraten Sie gern.
<p><a href="kontakt.php">Kontaktformular</a>
<br><a href="impressum.php">Kontaktdaten</a>
</p>
<br>
Oder fordern Sie unsere Demo-Software an.<p><a href="demo_anforderung.php">Demoversion anfordern</a></span>
</div>
<div class="clear">&nbsp;</div>
</div>
<div id="footer"></div>
</div>
</body>
</html>

Des center Float habe ich nun entfernt. Danke für den Hinweis.

Maik · 15. Juli 2007

Das einzige, was bei mir im Firefox verschoben wird, ist der Inhalt im DIV #content, der am unteren Ende des linken Menüs #submenue in die nächste Zeile umgebrochen und nach links eingerückt, sprich unterhalb des Menüs fortgesetzt wird.

Der Grund hierfür ist der fehlende linke Außenabstand:

Code:

#content {
   min-height: 200px;
   height: auto !important;
   height: 200px;
   width: 600px;
   background-color: #FFFFFF;

   padding: 20px 10px 10px 30px;
   margin: 0 0 0 132px; /* #submenue width:117px + padding-right:5px + padding-left:10px */

   font-size: 11px;
   text-align: justify;
}

tequila slammer · 17. Juli 2007

Durch das Einfügen deiner margin Anweisung ist es schon besser geworden.

Jedoch habe ich noch ein Problem mit meinem Menue. Im FF wird es nach oben gezogen und schiebt dadurch die Grafik auch nach oben. Liegt das nun auch an dem margin: 10px 0 0 20px des ul Tags?

Maik · 17. Juli 2007

Hi,

bei mir wird das Menü (innerhalb vom DIV #menue) nach unten verschoben, was eben am oberen Außenabstand für das Listenelement liegt.

Layout wird zerrissen

xthetronx

Erfahrenes Mitglied

Anhänge

Maik

xthetronx

Erfahrenes Mitglied

Maik

tequila slammer

Erfahrenes Mitglied

Maik

tequila slammer

Erfahrenes Mitglied

Maik

tequila slammer

Erfahrenes Mitglied

Maik

Neue Beiträge