Inhalt gleitet bei kleinerem Browserbild nicht nach links

[mariacati]

Hallo!

Ich bin Anfängerin im Programmieren. Habe ein kleines Projekt und möchte, das mein Inhalt bei kleinerem Browserfenster nach links an den Browserfesterrand rutscht. Habe alles versucht! Bitte um Tipps, was ich falsch gemacht habe.

http://detering-design.de/bin/journalismus/journalismus.html

hier die CSS datei:
/* Global Styles */

body {
 background-repeat: no-repeat;
 margin-top: 33px;
 margin-right: auto;
 margin-bottom: 64;
 margin-left: auto;
 padding-top: 33px;
 padding-right: 50em;
 padding-bottom: 64px;
 padding-left: 15em;
 position: absolute;
 width: 544px;
 float: none;
 background-color: #EFDAA5;
 }

td {
 font:11px Arial, Helvetica, sans-serif;
 color:#FFFF00;
 }

a {
 color: #FF080E;
 }

a:hover {
 color: #FF9900;
 }

/* ID Styles */

#navigation td {
 border-bottom: 1px solid #FF9900
 }

#navigation a {
 font:11px Arial, Helvetica, sans-serif;
 color: #FF9900;
 line-height:16px;
 letter-spacing:.1em;
 text-decoration: none;
 display:block;
 padding:8px 6px 8px 22px;
 }

#navigation a:hover {
 color:#FFFFCC;
 font-weight:bold;
 background: url("mm_bullet_yellow.gif") 10px 50% no-repeat;
 }

#navheader {
 font:24px georgia;
 color: #1F2669;
 letter-spacing:0.4em;
 line-height:20px;
 }

#logo  {
 font:14px Arial, Helvetica, sans-serif;
 color: #FF9900;
 letter-spacing:.5em;
 line-height:30px;
 }

#tagline  {
 font:11px Arial, Helvetica, sans-serif;
 color: #FF9900;
 letter-spacing:.2em;
 line-height:14px;
 }

#monthformat td {
  border-bottom: 1px solid #FFFFCC;
  }

#dateformat {
 font:11px Arial, Helvetica, sans-serif;
 color: #FFFF00;
 letter-spacing:.4em;
 }

#dateformat a {
 font: 11px Arial, Helvetica, sans-serif;
 color: #FFFF00;
 letter-spacing:.1em;
 text-decoration: none;
 }

#dateformat a:hover {
 color: #FFFFCC;
 }

/* Class Styles */

.bodyText {
 font:11px Arial, Helvetica, sans-serif;
 color:#FFFF00;
 line-height:22px;
 margin-top:0px;
 letter-spacing:.1em;
 }

.pageName{
 font:18px Arial, Helvetica, sans-serif;
 color: #FFFF00;
 line-height:24px;
 letter-spacing:.3em;
 }

.columnHeader {
 font: 11px Arial, Helvetica, sans-serif;
 color: #FF080E;
 line-height:18px;
 letter-spacing:.05em;
 }

.subHeader {
 font:bold 11px Arial, Helvetica, sans-serif;
 color: #FF080E;
 line-height:18px;
 letter-spacing:.1em;
 }

.smallText {
 font:10px Arial, Helvetica, sans-serif;
 color:#333333;
 }

.navText {
 font:11px Georgia, Times New Roman, Times, serif;
 color: #1F2669;
 line-height:16px;
 letter-spacing:.1em;
 text-decoration: none;
 }
.Stil5 {
 font-family: Arial, Helvetica, sans-serif;
 font-size: 28px;
 line-height: 20px;
 font-weight: normal;
 color: #FF9900;
 font-style: normal;
}

Vielen Dank im voraus!!!

Herzliche Grüße von Maren

[Kalle_B]

Hallo!

Ich ... möchte, das mein Inhalt bei kleinerem Browserfenster nach links an den Browserfesterrand rutscht.

Hier ist der Übeltäter:

body {
padding-left: 15em;
}

Das sind immer "mindestens" 15 Einheiten vom linken Rand.

Kalle

[mariacati]

Hallo!

Ich ... möchte, das mein Inhalt bei kleinerem Browserfenster nach links an den Browserfesterrand rutscht.

Hier ist der Übeltäter:

body {
padding-left: 15em;
}

Das sind immer "mindestens" 15 Einheiten vom linken Rand.

Kalle

Hallo Kalle,

danke für die Antwort!
Okay, dann hat der Inhalt nicht mehr gezwungenen Abstand von links.
Allerdings sollte der Inhalt bei großem Bildschirm mittig stehen, mit beigem Umfeld und dann bei kleinem Bildschirm nach links wandern.

Viele Grüße von Maren

[Kalle_B]

Hallo Kalle,

danke für die Antwort!
Okay, dann hat der Inhalt nicht mehr gezwungenen Abstand von links.
Allerdings sollte der Inhalt bei großem Bildschirm mittig stehen, mit beigem Umfeld und dann bei kleinem Bildschirm nach links wandern.

Viele Grüße von Maren

Hallo, Maren,

schaue mal in das Box-Modell, dann wird dir klar, warum ein Element ohne Aussenabstamd (margin) trotzdem noch Abstand haben kann.

width:800px; left-margin:auto; right-margin-auto
bedeutet: Das Element sollte 800 Pixel breit sein (der IE entwicklet aber gerne eigene Ideen) zuzüglich Rahmen (border) und Innenabstand (padding).

Deine Tabelle hat bei kleinem Anzeigebereich tatsächlich keinen Aussenabstand (margin) mehr, aber sehr wohl den von dir verlangten Innenabstand von 15 m. Also der Buchstabe m passt 15 mal in den Innenabstand. Abhängig von der eingestellten Schriftgröße kann das mehr oder weniger sein, aber eben nicht Null.

Kalle

[Auge]

Hallo

Ich bin Anfängerin im Programmieren. Habe ein kleines Projekt und möchte, das mein Inhalt bei kleinerem Browserfenster nach links an den Browserfesterrand rutscht. Habe alles versucht! Bitte um Tipps, was ich falsch gemacht habe.

http://detering-design.de/bin/journalismus/journalismus.html

Dass der Inhaltsblock nicht auf die neue Browserfensterbreite zentriert wird, liegt wahrscheinlich an den Angaben leftmargin="auto" und rightmargin="auto" im Tag <body>. Auto ist nur in CSS ein erlaubter Wert für margin, nicht in den HTML-Attributen für ***margin. Da diese aber in den CSS-Angaben ebenfalls erfolgen, kannst du sie als HTML-Attribute auch einfach weglassen (und eventuell im CSS anpassen).

Zudem ist der, offensichtlich von einem Macromedia-Produkt generierte, HTML-Code an einigen Stellen fehlerhaft (z.B. die falsch verpackte Klassenangabe: <ul style=" class="Stil4">), von der Sinnhaftigkeit mancher Konstruktionen (z.B.: <p class="Stil5">Journalistische Biographie</p> ist <http://de.selfhtml.org/html/text/ueberschriften.htm@title=eine Überschrift>, sollte also auch als solche ausgezeichnet werden) mal ganz abgesehen.

Die Benutzung eines Validators zur Überprüfung des Codes ist empfehlenswert, also tue ich das auch mal: Ergebnisse der Prüfung durch den w3.org-Validator oder SELFHTML-Validator (URL zur Seite bitte selbst eintragen). ;-)

Hernach die angemeckerten Fehler beseitigen und schauen, was passiert. Es könnte sein, dass es erstmal schlimmer aussieht, da die jetzt noch per HTML-Attributen vorgeschriebenen Layoutangaben in deinem CSS noch keine Entsprechnung haben. Aber das können wir ja korrigieren.

Wenn dir daran liegt, den ganzen Code zu entschlacken und nach modernen Methoden neu aufzubauen (ist allerdings ein Stück Arbeit, da du dich mit den Grundlagen auseinandersetzen musst), solltest du das <http://de.selfhtml.org/css/layouts/index.htm@title=SELFHTML-Kapitel CSS-basierte Layouts> lesen.

Noch ein paar Tips:

body {

/.../
margin-top: 33px;
margin-right: auto;
margin-bottom: 64;
margin-left: auto;
padding-top: 33px;
padding-right: 50em;
padding-bottom: 64px;
padding-left: 15em;

  
Sowohl die `margin`{:.language-css}- als auch `padding`{:.language-css}-Angaben lassen sich zusammenfassen. Hier hieße das: `margin: 33px auto 64px auto;`{:.language-css} (merke: sobald ein Zahlenwert ungleich 0 ist, braucht er eine Einheit; das hast du bei `margin-bottom`{:.language-css} vergessen). Das Vorgehen bei `padding`{:.language-css} erfolgt analog.  
  

>  ~~~css

position: absolute;  

>  width: 544px;  
>  float: none;  
>  /*...*/  
>  }

ohne Angaben zu top, left oder auch right und bottom bleibt die Verwendung von position: absolute; ohne direkte optische Auswirkung. float: none; bleibt hier auch ohne Auswirkung, da dies der Vorgabewert ist.

Soweit das, was ich auf die Schnelle bemerkt habe.

Tschö, Auge

[Kalle_B]

Hallo,

ohne Angaben zu top, left oder auch right und bottom bleibt die Verwendung von position: absolute; ohne direkte optische Auswirkung.

Die Aussage ist falsch. position:absolute bezieht sich auf ein Elternelement, das selbst absolute oder relative definiert wurde.

Fehlt das, wird <body> genommen. left:0 und top:0 sind voreingestellt. Das bedeutet, dass ein absolute-Element ohne sonstige Angaben immer links oben in der Ecke klebt und keinesfalls dort, wo es im Code definiert wurde.

Kalle

[ChrisB]

Hi,

left:0 und top:0 sind voreingestellt.

Nein, auto ist der Defaultwert.
http://www.w3.org/TR/CSS21/visuren.html#position-props

Das bedeutet, dass ein absolute-Element ohne sonstige Angaben immer links oben in der Ecke klebt und keinesfalls dort, wo es im Code definiert wurde.

Interessante Lektuere: Auto Positioning for Absolute Elements

MfG ChrisB

[mariacati]

Hallo Auge!

Vielen Vielen Dank. Jetzt scheint es zu funktionieren.
Ich bin sehr froh!

Herzliche Grüße
von Maren