✔ Seite verschiebt sich mit Inhalt total?

2Pac · 20. Januar 2009

Hallo,

ich habe mir ein kleines Layout gebastelt. Doch mit dem CSS funktioniert es noch nicht ganz richtig. Es ist ein 2 Spaltiges Layout mit einem Rahmen drum herum.

Wenn ich jedoch zu wenig Inhalt im Contentbereich habe, dann überwiegt die Navigation und das Layout sieht verschoben aus.

Hier mein Code:

Code:

Die HTML Seite:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>CPUblog-Rodney Verwaltungsprogramm</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>

<div id="Seite">
  <ul id="Navigation">
    <li><a href="index.php">Home</a></li>
    <li>Hauptmenü</li>
    <li><a href="sponsoren.php">Sponsoren</a></li>
    <li><a href="termine.php">Termine</a></li>
    <li><a href="werbung.php">Auslaufende Werbung</a></li>
    <li><a href="rechnungen.php">Rechnungen</a></li>
    <li>Adminmenü</li>
    <li><a href="sponsorenmenu.php">Sponsorenmenü</a></li>
    <li><a href="terminmenu.php">Terminmenü</a></li>
    <li><a href="werbungsmenu.php">Werbungsmenü</a></li>
    <li><a href="rechnungsmenu.php">Rechnungsmenü</a></li>
  </ul>

  <div id="Inhalt">
     <h1>CPUrodney Verwaltungsprogramm</h1>
     <h2>Werbung</h2>
     <p>Diese Seite ist hat eine feste Breite von 760px und ist zentriert.</p>
     <p>Die Breite ist so gewählt, dass in 800px breiten Fenstern nicht horizontal
        gescrollt werden muss und auch ein Ausdruck keine Probleme bereiten sollte.</p>
  </div>
</div>
<center><font size="1" face="verdana">Copyright 2009 by <b>CPUblog-Rodney.de</b></font></center>

</body>
</html>


Die Style.css:


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

  div#Seite {
    text-align: left;    /* Seiteninhalt wieder links ausrichten */
    margin: 0 auto;      /* standardkonforme horizontale Zentrierung */
    width: 760px;
    height: 100%;
    padding: 0.5em;
    border: 2px ridge silver;
  }

  ul#Navigation {
    font-size: 0.91em;
    float: left; width: 22em;
    margin: 0; padding: 0;
    border: 1px dashed silver;
  }
  ul#Navigation li {
    list-style: none;
    margin: 0; padding: 0.5em;
  }
  ul#Navigation a {
    display: block;
    padding: 0.2em;
    font-weight: bold;
  }
  div#Inhalt {
    margin-left: 22em;
    padding: 0 1em;
    border: 1px dashed silver;
  }

Irgendwas mach ich doch falsch, wäre nett wenn mir jemand sagen könnte was?

Danke im Voraus!

Liebe Grüße
2Pac

Maik · 20. Januar 2009

Hi,

du hast es in dem Layout versäumt, die Floatumgebung mittels der clear-Eigenschaft wieder aufzuheben, was dazu führt, dass der Inhalt des linken Spaltenblocks #Navigation den unteren Rahmen des Elternelements #Seite "überlappt".

Webmaster FAQ -> CSS Warum passt sich die Boxenhöhe nicht dem Inhalt an?

mfg Maik

2Pac · 20. Januar 2009

Nein das Problem habe ich nicht. In dem Thread den du beigefügt hast, überlappen ja beide Div-Bereiche. Bei mir überlappt nur der Navigationsbereich, wenn der Inhalt kürzer ist. Wenn der Inhalt länger ist, ist alles wunderbar.

P.S: ich habe die Lösung aus dem Thread versucht, es bringt rein gar nichts

Bitte weitere Hilfe danke

Maik · 20. Januar 2009

2Pac hat gesagt.:
Nein das Problem habe ich nicht. In dem Thread den du beigefügt hast, überlappen ja beide Div-Bereiche. Bei mir überlappt nur der Navigationsbereich, wenn der Inhalt kürzer ist. Wenn der Inhalt länger ist, ist alles wunderbar.

P.S: ich habe die Lösung aus dem Thread versucht, es bringt rein gar nichts

Bitte weitere Hilfe danke

Du hast sehr wohl dieses Problem, denn ob hier nun ein oder zwei Spaltenblöcke das Elternelement "überlappen" ist absolut irrelevant, da die Ursache in beiden Fällen die gleiche ist

Dass bei dir ausschliesslich der linke Block das Elternelement überlappt, liegt einzig und allein daran, dass nur dieser mit der float-Eigenschaft formatiert ist. In meinem Demo habe ich aber als "Extrembeispiel" beide Spaltenblöcke mit dieser Eigenschaft ausgestattet, weshalb sie auch gemeinsam das Elternelement überlappen.

Ergo bringt die vorgeschlagene Lösung sehr wohl was, wenn man sie denn auch richtig anwendet

[edit]

(links: vorher, rechts: nachher)

[/edit]

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>CPUblog-Rodney Verwaltungsprogramm</title>
<style type="text/css">
body {
    color: black; background-color: white;
    font-size: 100.01%;
    font-family: Helvetica,Arial,sans-serif;
    margin: 0; padding: 1em 0;
    text-align: center;  /* Zentrierung im Internet Explorer */
  }

  div#Seite {
    text-align: left;    /* Seiteninhalt wieder links ausrichten */
    margin: 0 auto;      /* standardkonforme horizontale Zentrierung */
    width: 760px;
    height: 100%;
    padding: 0.5em;
    border: 2px ridge silver;
  }

  ul#Navigation {
    font-size: 0.91em;
    float: left; width: 22em;
    margin: 0; padding: 0;
    border: 1px dashed silver;
  }
  ul#Navigation li {
    list-style: none;
    margin: 0; padding: 0.5em;
  }
  ul#Navigation a {
    display: block;
    padding: 0.2em;
    font-weight: bold;
  }
  div#Inhalt {
    margin-left: 22em;
    padding: 0 1em;
    border: 1px dashed silver;
  }

.clearfix:after {
content:".";
display:block;
height:0;
font-size:0;
clear:both;
visibility:hidden;
}

.clearfix {display:inline-block;}

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

<div id="Seite" class="clearfix">
  <ul id="Navigation">
    <li><a href="index.php">Home</a></li>
    <li>Hauptmenü</li>
    <li><a href="sponsoren.php">Sponsoren</a></li>
    <li><a href="termine.php">Termine</a></li>
    <li><a href="werbung.php">Auslaufende Werbung</a></li>
    <li><a href="rechnungen.php">Rechnungen</a></li>
    <li>Adminmenü</li>
    <li><a href="sponsorenmenu.php">Sponsorenmenü</a></li>
    <li><a href="terminmenu.php">Terminmenü</a></li>
    <li><a href="werbungsmenu.php">Werbungsmenü</a></li>
    <li><a href="rechnungsmenu.php">Rechnungsmenü</a></li>
  </ul>

  <div id="Inhalt">
     <h1>CPUrodney Verwaltungsprogramm</h1>
     <h2>Werbung</h2>
     <p>Diese Seite ist hat eine feste Breite von 760px und ist zentriert.</p>
     <p>Die Breite ist so gewählt, dass in 800px breiten Fenstern nicht horizontal
        gescrollt werden muss und auch ein Ausdruck keine Probleme bereiten sollte.</p>
  </div>
</div>
<center><font size="1" face="verdana">Copyright 2009 by <b>CPUblog-Rodney.de</b></font></center>

</body>
</html>

mfg Maik

2Pac · 20. Januar 2009

Ich gebe dir Recht. Meine Schuld. Bitte vielmals um Entschuldigung, ich setzte die Klasse auf einen andere div stelle

//edit

Hey ich hab das übernommen aber irgendwie klappt das nicht so wie ich will. Wenn ich deines 1:1 übernehme gehts. Aber das hier nicht:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>CPUblog-Rodney Verwaltungsprogramm</title>
<style type="text/css">

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

  div#Seite {
    text-align: left;    /* Seiteninhalt wieder links ausrichten */
    margin: 0 auto;      /* standardkonforme horizontale Zentrierung */
    width: 760px;
    height: 100%;
    padding: 0.5em;
    border: 2px ridge silver;
  }

  ul#Navigation {
    font-size: 0.91em;
    float: left; width: 22em;
    margin: 0; padding: 0;
    border: 1px dashed silver;
  }
  ul#Navigation li {
    list-style: none;
    margin: 0; padding: 0.5em;
  }
  ul#Navigation a {
    display: block;
    padding: 0.2em;
    font-weight: bold;
  }
  ul#Navigation a:link {
    color: white; background-color: #1C8DD5; text-decoration: none;
  }
  ul#Navigation a:visited {
    color: white; background-color: #1C8DD5; text-decoration: none;
  }
  ul#Navigation a:hover {
    color: white; background-color: #7AC4F4; text-decoration: none;
  }
  ul#Navigation a:active {
    color: white; background-color: #1C8DD5; text-decoration: none;
  }

  div#Inhalt {
    margin-left: 22em;
    padding: 0 1em;
    border: 1px dashed silver;
  }
  div#Inhalt h1 {
    font-size: 1.5em;
    margin: 0 0 1em;
  }
  div#Inhalt h2 {
    font-size: 1.2em;
    margin: 0 0 1em;
  }
  div#Inhalt p {
    font-size:1em;
    margin: 1em 0;
  }
  p {
    text-align: justify;
  }
  td#Header { border:1px solid #000; vertical-align:top; overflow:hidden; background-color: #1C8DD5; color: white }
  td#Inhalt { border:1px solid #000; vertical-align:top; overflow:hidden; }
  a:link {
    color: #1C8DD5; text-decoration: none; font-weight: bold;
  }
  a:visited {
    color: #1C8DD5; text-decoration: none; font-weight: bold;
  }
  a:hover {
    color: #1C8DD5; text-decoration: underline; font-weight: bold;
  }
  a:active {
    color: #1C8DD5; text-decoration: none; font-weight: bold;
</style>

</head>
<body>

<div id="Seite" class="clearfix">
  <ul id="Navigation">
    <li><a href="index.php">Home</a></li>

    <li>Hauptmenü</li>
    <li><a href="sponsoren.php">Sponsoren</a></li>
    <li><a href="termine.php">Termine</a></li>
    <li><a href="werbung.php">Auslaufende Werbung</a></li>
    <li><a href="rechnungen.php">Rechnungen</a></li>
    <li>Adminmenü</li>

    <li><a href="sponsorenmenu.php">Sponsorenmenü</a></li>
    <li><a href="terminmenu.php">Terminmenü</a></li>
    <li><a href="werbungsmenu.php">Werbungsmenü</a></li>
    <li><a href="rechnungsmenu.php">Rechnungsmenü</a></li>
  </ul>

  <div id="Inhalt">

     <h1>CPUrodney Verwaltungsprogramm</h1>
     <h2>Sponsoren, Termine, Auslaufende Werbung, Rechnungen</h2>
     <p>Diese Seite ist hat eine feste Breite von 760px und ist zentriert.</p>
     <p>Die Breite ist so gewählt, dass in 800px breiten Fenstern nicht horizontal
        gescrollt werden muss und auch ein Ausdruck keine Probleme bereiten sollte.</p>
  </div>
</div>
<center><font size="1" face="verdana">Copyright 2009 by <b>CPUblog-Rodney.de</b></font></center>

</body>
</html>

Warum? Danke für die Hilfe nochmal!

Maik · 21. Januar 2009

Mein Webmaster-FAQ-Artikel und mein zuletzt gezeigter Quellcode beantwortet eigentlich deine Frage, warum es so bei dir nicht funktioniert.

CSS:

.clearfix:after {
content:".";
display:block;
height:0;
font-size:0;
clear:both;
visibility:hidden;
}

.clearfix {display:inline-block;}

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

... diesen erforderlichen Teil hast du entweder in dem Stylesheet wieder entfernt, oder nicht übernommen, weshalb der Klassenaufruf im DIV #Seite nicht greift:

Code:

<div id="Seite" class="clearfix">...</div>

mfg Maik

2Pac · 21. Januar 2009

Hallo nochmal eigentlich habe ich das übernommen, ich habe dir den Quelltext der Ausgabe hier rein kopiert. Aber ich habe es eigentlich übernommen 1:1 und eingefügt. Aber scheinbar wird es nicht angezeigt.

Maik · 21. Januar 2009

Hi,

ich kann dir leider nicht folgen, wo hier plötzlich das Problem liegt, den Quellcode (vollständig oder die relevanten Passagen) zu kopieren und dauerhaft zu speichern, also, dass der Code auch in der anschliessenden (Browser?)-Ausgabe enthalten ist, denn dieser Antwort zufolge, hast du es gestern Abend wohl soweit auch schon mal hinbekommen:

2Pac hat gesagt.:
Ich gebe dir Recht. Meine Schuld. Bitte vielmals um Entschuldigung, ich setzte die Klasse auf einen andere div stelle

Wenn ich dann was von "eigentlich" und "scheinbar" lese, solltest du nochmal überprüfen, ob du den Quellcode tatsächlich 1:1 übernommen hast, ansonsten wiederholst du die Prozedur, denn ohne Grund wird der besagte Teil im zentralen Stylesheet nicht fehlen, aber kurioserweise ein paar Code-Zeilen tiefer das class-Attribut im DIV #Seite existieren.

Mehr fällt mir dazu nicht ein.

mfg Maik

2Pac · 21. Januar 2009

Ja aber nur kurzfristig und nur mit dem Anfangsquellcode von oben, wo die Formatierung der Navigation nicht mit drin war.

Habe es erneut versucht und 1:1 übernommen. Es klappt mit dem Firefox nicht. Keine Ahnung warum. Im Internet Explorer ist jedoch alles wunderbar komischerweise. Also da die Seite nicht für Besucher bestimmt ist, reicht mir das so, aber mein Firefox zeigt es mir nicht so wie auf deinen Bildern an. Weiß der Geier warum.

Danke trotzdem nochmal für die Hilfe.

Maik · 21. Januar 2009

2Pac hat gesagt.:
Im Internet Explorer ist jedoch alles wunderbar komischerweise.

Dann schau dir mal das hier an: http://www.tutorials.de/forum/attachments/webmaster-faq/38888d1208564092-float-container_ie.jpg

... und das ohne Anwendung der "clearfix"-Methode.

Ansonsten weiß ich nicht, was da bei dir falsch läuft.

Ich für meinen Teil hab dir erläutert, wie es zu diesem Darstellungsfehler kommt, und wie er sich beheben lässt.

mfg Maik

✔ Seite verschiebt sich mit Inhalt total?

2Pac

Erfahrenes Mitglied

Maik

2Pac

Erfahrenes Mitglied

Maik

2Pac

Erfahrenes Mitglied

Maik

2Pac

Erfahrenes Mitglied

Maik

2Pac

Erfahrenes Mitglied

Maik

Neue Beiträge