"padding" funktioniert nicht richtig!

[Chrissomat5000]

Hallo,

ich bin beim 'bauen' einer Website und habe da ein Problem: Padding(-left) funktioniert nicht!

Die Datei sieht so aus:

  
  <!-- start #sidebar01 -->  
    <div id="sidebar01">  
    <h4>Men&uuml;</h4>  
    <p>Home<br /><br />  
    Charaktere<br /><br />  
    Ver&ouml;ffentlichungen<br /><br />  
    Link mich<br /><br />  
    G&auml;stebuch<br /><br />  
    Impressum  
    </p>  
    </div>  
    <!-- end #sidebar01 -->  
  
  
    <!-- start #top -->  
    <div id="top">  
    <img src="logo.jpg" alt="logo" width="728" height="90" />  
    </div>  
    <!-- end #top -->  
  
  
  
  
    <!-- start #line -->  
    <div id="line">  
    <b>Willkommen auf ...blabla...! ;-)</b>  
    </div>  
    <!-- end #line -->  
  
    <!-- start #maincontent -->  
    <div id="maincontent">  
    <p>  
...text...  
<br />  
F&uuml;r weitere Informationen zu diesem Thema siehe Rest der Website... :-)  
 </p>  
    </div>  
    <!-- end #maincontent -->  
    <br />  
    <br />  
    <!-- start #bottom -->  
    <div id="bottom">  
 ...copyrightvermerk...  
    </div>  
    <!-- end #bottom -->

und das CSS dazu sieht so aus:

body {  
  font-family: Arial, Helvetica, sans-serif;  
  margin: 0px;  
  color: black;  
  font-size: 100.01%;  
}  
  
#line {  
  text-align: right;  
  background-color: #AC003C;  
  padding-right: 10px;  
  background-image: url(bckgnavi.jpg);  
  color: white  
}  
  
#sidebar01 {  
  float: left;  
  width: 130px;  
  height: 463px;  
  background-color: #AC003C;  
  background-image: url(bckgnavi.jpg);  
  padding: 10px;  
  color: white;  
}  
  
#top {  
  background-color: #AC003C;  
  padding-top: 10px;  
  background-image: url(bckgnavi.jpg);  
  color: white;  
}  
  
#bottom {  
  padding: 10px 20px 20px;  
  margin: 0px;  
  border-top: 1px solid #353535;  
  text-align: center;  
  font-size: smaller;  
  font-style: italic;  
  letter-spacing: 2px;  
  line-height: 1.5;  
}  
  
#maincontent {  
  padding: 10px;  
}

Das padding bei #maincontent funktioniert nicht. Wieso?

[ChrisB]

Hi,

Das padding bei #maincontent funktioniert nicht. Wieso?

Doch, es "funktioniert" - aber anders, als du es dir vorstellst.

Das DIV-Element geht unter der gefloateten Sidebar nach wie vor bis an den linken Rand - lediglich seine inline-Inhalte fliessen um die Sidebar herum. Das Element hält darunter also durchaus ein padding-left ein - du merkst es nur nicht, weil sich dort keine Inhalte befinden, an denen man sehen könnte, dass sie auf Abstand gehalten werden.

Wenn du einfach #maincontent ein margin-left von der Breite der Sidebar (width plus padding) gibst - dann befindet sich der linke Elementrand genau neben der Sidebar, und dann wird auch das padding des Elementes "sichtbar".
Plus dem weiteren Vorteil(?), dass seine Inhalte nicht mehr unter die Sidebar laufen, wenn diese zuende ist.

MfG ChrisB

[Chrissomat5000]

Hi,

Das padding bei #maincontent funktioniert nicht. Wieso?

Doch, es "funktioniert" - aber anders, als du es dir vorstellst.

Das DIV-Element geht unter der gefloateten Sidebar nach wie vor bis an den linken Rand - lediglich seine inline-Inhalte fliessen um die Sidebar herum. Das Element hält darunter also durchaus ein padding-left ein - du merkst es nur nicht, weil sich dort keine Inhalte befinden, an denen man sehen könnte, dass sie auf Abstand gehalten werden.

Wenn du einfach #maincontent ein margin-left von der Breite der Sidebar (width plus padding) gibst - dann befindet sich der linke Elementrand genau neben der Sidebar, und dann wird auch das padding des Elementes "sichtbar".
Plus dem weiteren Vorteil(?), dass seine Inhalte nicht mehr unter die Sidebar laufen, wenn diese zuende ist.

MfG ChrisB

Danke! Es funktioniert! Echt hilfreiches Forum hier! ;-)

[EKKi]

Mahlzeit Chrissomat5000,

abgesehen von Deinem eigentlichen Problem:

<!-- start #sidebar01 -->
    <div id="sidebar01">
    <h4>Men&uuml;</h4>
    <p>Home<br /><br />
    Charaktere<br /><br />
    Ver&ouml;ffentlichungen<br /><br />
    Link mich<br /><br />
    G&auml;stebuch<br /><br />
    Impressum
    </p>
    </div>
    <!-- end #sidebar01 -->

Dein "Menü" möchte ganz dringend eine http://de.selfhtml.org/html/text/listen.htm#aufzaehlung@title=Liste sein!

MfG,
EKKi

[suit]

abgesehen von Deinem eigentlichen Problem:

ich auch

<!-- start #sidebar01 -->
    <!-- end #sidebar01 -->

Wenn diese Dinger nicht als Marker für deine Template-Engine dienen solltest du dich davon trennen und lieber einen Editor verwenden der dir das DOM ordentlich darstellt oder zumindest Start- und Endtag eines Elements hervorhebt. Das spart derartige Kommentare die imho etwas peinlich sind.

[Gunnar Bittersmann]

@@EKKi:

nuqneH

abgesehen von Deinem eigentlichen Problem:

Me three.

<h4>Men&uuml;</h4>

"Menü", nicht "Menü".

„Es ist fast immer besser, eine Zeichencodierung zu benutzen, die es erlaubt, die Zeichen in ihrer normalen Form zu verwenden, anstatt Zeichen-Entity-Referenzen oder numerische Zeichenreferenzen zu verwenden.
Die Verwendung von Escapes macht den Quelltext schlechter lesbar und schwerer zu pflegen und kann auch die Dateigröße beträchtlich erhöhen.“ [ESCAPES]

Ver&ouml;ffentlichungen<br /><br />

"Veröffentlichungen", nicht "Veröffentlichungen".

G&auml;stebuch<br /><br />

"Gästebuch", nicht "Gästebuch".

Zu "<br /><br />" siehe [ZITAT1275]

Qapla'

[Chrissomat5000]

@@EKKi:

nuqneH

abgesehen von Deinem eigentlichen Problem:

Me three.

<h4>Men&uuml;</h4>

"Menü", nicht "Menü".

„Es ist fast immer besser, eine Zeichencodierung zu benutzen, die es erlaubt, die Zeichen in ihrer normalen Form zu verwenden, anstatt Zeichen-Entity-Referenzen oder numerische Zeichenreferenzen zu verwenden.
Die Verwendung von Escapes macht den Quelltext schlechter lesbar und schwerer zu pflegen und kann auch die Dateigröße beträchtlich erhöhen.“
Qapla'

Ja, mag schon sein, nur macht mein Editor (Weaverslave) das automarisch... ;-)

[EKKi]

Mahlzeit Chrissomat5000,

„Es ist fast immer besser, eine Zeichencodierung zu benutzen, die es erlaubt, die Zeichen in ihrer normalen Form zu verwenden, anstatt Zeichen-Entity-Referenzen oder numerische Zeichenreferenzen zu verwenden.
Die Verwendung von Escapes macht den Quelltext schlechter lesbar und schwerer zu pflegen und kann auch die Dateigröße beträchtlich erhöhen.“

Ja, mag schon sein, nur macht mein Editor (Weaverslave) das automarisch... ;-)

Dann benutze einen vernünftigen Editor (einer, der das, was Du eintippst, nach eigenem Gutdünken umwandelt, ist definitiv *keiner*!).

MfG,
EKKi

[Detlef G.]

Hallo Chrissomat5000

Ja, mag schon sein, nur macht mein Editor (Weaverslave) das automarisch... ;-)

Wenn du ihn so einstellst, dass er das macht.

„Optionen” -> „Allgemein” -> „Editor”, dort unter „Spezielles” den Haken bei „Sonderzeichen ersetzen” entfernen.

Ich verwende unter Windows seit Jahren Weaverslave.
Mit seinem dateiübergreifenden Suchen und Ersetzen (mit Regulären Ausdrücken) habe ich schon hunderte HTML-Dateien in wenigen Minuten aufgeräumt.

Nur leider kann er kein UTF, so dass ich dann doch immer wieder einen anderen Editor nehmen muss.

Auf Wiederlesen
Detlef