CSS:Nur padding-left funktioniert

imk82 · 21.07.2005

Hi!
Ich habe ein Problem beim erstellen einer Website.Da ich im Moment keinen Webspace zu verfügung habe kann ich das Problem leider nur schildern.
Es handelt sich um ein simples 3 Spalten(per css) Layout:

Container
Spalte1(Menü) Spalte2(Content) Spalte3(News etc.)

Wenn ich nun in den Content Bereich einen Text einfüge,"klebt" er quasi am Rand.Dies kann man ja mit dem Innenabstand beheben.
Doch wenn ich nun in der CSS Datei beim entsprechenden Element:

Code:

div#content  /* Der Hauptinhaltsteil*/
{
	padding-right:15px; <- schon bis 200px probiert,keine Reaktion
	padding-left:15px; 
	position:absolute;
	top: 90px;
	left: 125px; 
	width: 700px;
	height: 603px;
}
/

einfüge,verändert sich im Firefox nur der linke Innenabstand,der Rechte bleibt vollkommen unberührt.Auch wenn ich padding-left ganz lösche,reagiert es nicht.Ich habe auch schon padding-left zum probieren erhöht,das verschiebt den Content nach rechts bis über die 3.Spalte anstatt ne neue Zeile anzufangen,was ja auch nicht sein darf.
Im Internet Explorer funktioniert es völlig normal,d.h. der Innenabstand wird größer,meine Zeilen kürzer und er Abschnitt nach unten länger.
Padding-top bzw. bottom funktionieren übrigens auch normal.Was kann das sein?

imk82

[³dgamer] · 21.07.2005

Code:

.content
{
	padding:0px 15px 0px 15px;
	position:absolute;
	top: 90px;
	left: 125px; 
	width: 700px;
	height: 603px;
}

<div class=content>
text
</div>

Tom24 · 23.07.2005

Wie soll er denn das padding anpassen wenn du fixe Seitenbreiten hast?

Ziemlich grausam was du da machst.

Benutz em und ex statt px, also relative Groessenangaben statt Absolute.
Gib nur Groessen fuer die aeusseren Elemente an, sprich Menue, und News.

Ein Pixel ist nicht immer ein Pixel, und die Verwendung von px kann auf anderen Systemen schlimm aussehen, oder wenn einfach nur eine andere Schrift verwendet wird.

Seiten die fixe Breiten haben sehen bei anderen Fenstergroessen einfach schlimm aus. Machs lieber so:

Code:

div.content {
	padding-right: 10em;
	padding-left: 10em;
}

Dann ergibt die sich Breite von Content von allein, und du musst dich weniger um die Formatierung kuemmern, weil der Browser alles alleine macht.

imk82 · 24.07.2005

Hi!
Also,mein oben beschriebenes Problem hat sich mehr oder weniger von alleine gelöst.Ich verwende jetzt kein absolute Positionierung mehr,sonder ordne die Elemente nur noch mit float an.Seitdem funktioniert das padding einwandfrei.

@Tom24
Wie genau meinst Du das?Soll ich relative Angaben(em,%) nur für innenabstände,Schriftgrößen etc. verwenden oder für alle Seitenelemente?Wenn ich Seitenelmente mit relativen Größenangaben beschreibe(Breite,ggf. Höhe),wie setze ich dann Grafiken ein,die ja ein feste Größe haben?(z.B.Banner etc.).Ich habe es jetzt so gemacht das meine Seite auf eine Breite von 1024 Pixeln ausgerichtet ist und die Höhe soweit möglich flexibel ist.

Ein weiteres Problem was ich habe ist,das ich mir irgendwie unter em nix vorstellen kann.

Die Angabe soll sich ja auf die Schriftgröße im Elternelement beziehen,aber wie ist das genau gemeint?
Ein Innenabstand von z.B. 10em, ist der dann bei jedem gleich groß?

imk82

Tom24 · 24.07.2005

Soll ich relative Angaben(em,%) nur für innenabstände,Schriftgrößen etc. verwenden oder für alle Seitenelemente?

"em" fuer alles!

wie setze ich dann Grafiken ein,die ja ein feste Größe haben?

Am besten in flexible Gebilde die es schick umgeben, oder du setzt eine sehr geringe Mindesbreite an, etwa 700Pixel.

Ich habe es jetzt so gemacht das meine Seite auf eine Breite von 1024 Pixeln ausgerichtet ist und die Höhe soweit möglich flexibel ist.

IMHO ist das viel zu breit.
Ich kenne viele Leute die in einem Fenster surfen, dass meist nichtmal 800px breit ist, und Seiten die einfach zu breit und unflexibel sind, nerven tierisch.

http://www.csszengarden.com/
Du siehst im Defaultstyle wie sich das mittlere Textfeld dynamisch verhaelt, und erst wenn die Gesamtbreite des Fensters unter 765Pixel faellt, wird's kritisch.

Ein weiteres Problem was ich habe ist,das ich mir irgendwie unter em nix vorstellen kann. Die Angabe soll sich ja auf die Schriftgröße im Elternelement beziehen,aber wie ist das genau gemeint?
Ein Innenabstand von z.B. 10em, ist der dann bei jedem gleich groß?

Ein "em" ist so breit wie ein "m" in der aktuellen Schriftart, Schriftgroesse, Systems. Das wiederum bedeuted, dass z.B. die Breite einer Navigationsleiste, egal auf welchem System sie dargestellt wird, immer ihrem Inhalt anpasst, und die Schriften stetig proportional zu ihrer Umgebung sind, egal ob Drucker, Mac, Windows, Unix.

Wenn du Pixel nimmst, passt sich nichts an, und die Warscheinlichkeit ist gross, dass deine Seite in einer anderen Umgebung unkenntlich wird. Hinzu kommt, dass auf vielen Systemen Pixel unterschiedlich breit sind, was ebenfalls verheerend wirken kann. Daher sind "em" und "ex" (ex beschreibt die Hoehe des aktuellen Buchstaben "x", ebenfalls des Kleinbuchstaben uebrigens) optimal.

Hab ich's irgendwie verstaendlich rueberbringen koennen?

imk82 · 25.07.2005

Hi!
Danke für die ausführliche Erklärung.Also,im Moment denke ich schon das es verständlich war.Wirklich merken werde ich das wohl allerdings erst wenn ich bisl was damit gemacht habe.

imk82

imk82 · 25.07.2005

Hi!
Also,ich hab grad ein Problem festgestellt,welches mit em Angaben auftritt.Vielleicht ist es aber auch irgendwie mein Fehler...
Ich habe einen Container der 61em breit ist und eine Navleiste die ebenfalls 61em breit ist.Die Schriftgröße in der Leiste ist auf 0.75em eingestellt.
Wenn man nun aber mit Schriftgrad klein(Im IE) die Seite öffnet,ist die Navleiste nur noch halb so breit wie der Container.Das ist doch aber genau das was die em Angabe verhindern soll,oder?

imk82

Tom24 · 25.07.2005

imk82 schrieb:
aus diesem Posting

Hi!
Also,ich hab grad ein Problem festgestellt,welches mit em Angaben auftritt.Vielleicht ist es aber auch irgendwie mein Fehler...
Ich habe einen Container der 61em breit ist und eine Navleiste die ebenfalls 61em breit ist.Die Schriftgröße in der Leiste ist auf 0.75em eingestellt.
Wenn man nun aber mit Schriftgrad klein(Im IE) die Seite öffnet,ist die Navleiste nur noch halb so breit wie der Container.Das ist doch aber genau das was die em Angabe verhindern soll,oder?

imk82

Das ist das war "em" bewirken soll, die Breite der Nav passt sich an die Schriftart an. Verwendest du Bilder empfiehlt es sich eine "min-width" angeben. Mit 61 em ist deine Nav echt breit, wie kann man sich das denn vorstellen?

Uebrigens stellt der IE die Schriftgroessen inkonsistent dar, fuer eine initiale, einmalige Angabe der Schriftgroesse, hab ich als Wuergaround Pixel genommen, und das im body festgelegt. Von da aus kann man dann relativ weitermachen.

imk82 · 27.07.2005

Hi!
Also,das letzt Problem mit der überbreiten Navleiste bei kleiner Schrift hat sich erledigt,da war irgendeine em Angabe falsch.Ich hab allerdings schon wieder ein neues Problem,was mir nicht in den Kopf will.Folgender Code:

CSS:

Code:

@charset "iso-8859-1";

#mainmenue		
{
	text-align:left;
	float:left;
	margin:0.5em 0em 0em 0em;
}

ul#mainmenuelist
{
	border-top:1px solid #0A2864;
	border-bottom:1px solid #0A2864;
	border-right:1px solid #0A2864;
	background-color:#99ACD6;
}

ul#mainmenuelist li
{
	
}

ul#mainmenuelist li a 
{
	display:block;
	padding:0.28em 1em 0em 0.75em;
	font-size: 0.75em;
}

ul.linklist
{
	font-family:arial;
	padding: 0em;
	margin: 0em;
	list-style-type: none;
}

.link a:link,	li.link a:link , p.link a:link
{
	font-family:arial;
	color: #0A2964;
	text-decoration:none;	
}

.link a:visited,	li.link a:visited, p.link a:visited
{
	font-family:arial;
	color: #0A2964;
	text-decoration:none;
}

.link a:hover,	li.link a:hover, p.link a:hover, .link a:focus,	li.link a:focus, p.link a:focus
{
	font-family:arial;
	background-color:#FF9900;
	text-decoration:none;
	color: #0A2964;
}

.link a:active,	li.link a:active , p.link a:active
{
	font-family:arial;
	text-decoration:none;
	color:#0A2964;
}

HTML:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
 <head>
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
	<title>
	Test
	</title>
	<meta Name="Publisher" content="test">
	<link rel="stylesheet" type="text/css" href="css/mainsite.css">
 	</head>

<BODY>
  <div id="mainmenue">
    <ul id="mainmenuelist" class="linklist">
	<li class="link"> <a href="index.html">Home </a></li>
	<li class="link"> <a href="kontakt_css.html">Vereinsdetails </a></li>
	<li class="link"> <a href="trainingszeiten_css.html">Mannschaft</a></li>
	<li class="link"> <a href="forum_css.html">Vereinsleben </a></li>
	<li class="link"> <a href="weiterelinks_css.html">weiterführende Links </a></li>
	<li class="link"> <a href="impressum_css.html">Impressum </a></li>
    </ul>
  </div>
</BODY>

Mein Problem tritt wieder nur im IE auf:
Sobald ich in ul#mainmenuelist li a display:block; eintrage, stellt der IE zwischen Mannschaft und Vereinsleben einen Abstand dar.Ich kann mir aber nicht erklären warum er das tut.Im Firefox ist alles ok.

imk82

feelx · 27.07.2005

hi
Woran das liegt kann ich nur vermuten (VERDAMMTER IE BUG) - aber habe rausgefunden, wenn man die entsprechenden LI zeilen auf 1 Zeile nimmt und keinen Abstand zwischen den Tags macht, ist der Fehler weg... Wie gesagt keine Ahnung wieso... aber bei mir hat's so funktioniert

...
<li class="link"> <a href="index.html">Home </a></li>
<li class="link"><a href="kntakt_css.html">Vereinsdetails </a></li>
<li class="link"> <a href="training.html">Mannschaft</a></li><li class="link"><a href="forum_css.html">Vereinsleben </a></li>
<li class="link"> <a href="weiterelinks_css.html">weiterführende Links </a></li>
...

Also das rote auf eine Zeile und kein Abstand daziwschen (weder Space noch Tab) .... Aber woran liegt das??
______________________________________________________________________
Edit

Ne bessere Alternative - Sobald es ein "Space" / Tab oder Einrückung im Code hat, verhält sich der IE so... Es hilft aber, wenn du statt einem block-element ein Inline-Element daraus machst... Also wie folgt:

Mach statt einem 'display: block' daraus ein 'display: inline' im css
Dann sollte es funktionieren...

imk82 · 27.07.2005

Hi!
Dank Dir erstmal für die Hilfe.Hab das mit dem auf eine Zeile nehmen auch schon mitbekommen.Die eigentliche Ursache des Übels scheinen aber die Leerzeichen bei den Menüeinträgen zu.Hinter Mannschaft ist keins,hinter allen anderen ist eins.Sobald ich eins rein mache funktioniert es.Das verstehe wer will. *chatt*

Deinen Vorschlag ein Inline Element daraus zu machen kann ich aus designtechnischen Gründen nicht umsetzen,da ich möchte das sich die Hintergrundfarbe auf der ganzen Menübreite ändert und nicht nur hinter der Schrift.

imk82

feelx · 28.07.2005

Hi

Verstehen tut das wohl niemand

Aber du hast völlig recht, natürlich stimmt nachher das highlighting nicht mehr

- Also entweder du bastelst das Leerzeichen in den link - was ich machen würde - oder du beschränkst die Breite der "li"-Elemente mit z.B. "width: 8.5em" [das tiefste was bei mir geht] - Der Nachteil davon ist natürlich, wenn du einen grösseren Linktext ins Menu bastelst, wird ein Zeilensprung gemacht - daher würd ich einfach nen "Space" reinhauen...

PS: Was ist das für ein IE Bug ? Ich finde nur dutzende andere

ist der spezifisch, wenn man mit "em" arbeitet, oder immer wenn man gar keine Breite definiert?

CSS:Nur padding-left funktioniert

imk82

Vice Admiral Special

[³dgamer]

Grand Admiral Special

Tom24

Grand Admiral Special

imk82

Vice Admiral Special

Tom24

Grand Admiral Special

imk82

Vice Admiral Special

imk82

Vice Admiral Special

Tom24

Grand Admiral Special

imk82

Vice Admiral Special

feelx

Grand Admiral Special

imk82

Vice Admiral Special

feelx

Grand Admiral Special

Ähnliche Themen