[CSS] Problem mit Formatierung!

[Weichzeichner]

Hallo PSDler!



Ich habe ein Problem. Undzwar diesmal im Webbereich (Überraschung ).
Ich denke mal es ist ein ganz einfaches Problem, aber irgendwie stehe ich auf dem Schlauch.......



Hmhm wie dem auch sei:

Auf einer Website, an der ich grade Arbeite (ich glaube meine 3te, meine erste mit CSS) übernehme ich diverse Formatierungen mit CSS. Doch nun mein Problem: Ich habe ein Formular mit CSS formatiert, und sobald ich das in die CSS mitreinnehme, wird die Schrift insgesamt irgendwie kleiner....... undzwar sehr viel kleiner, sodass sie unlesbar wird. Es MUSS an dem Block liegen, das habe ich bereits getestet (nur in die kontakt.html eingebunden, selbes Problem!). Doch WO liegt nun der Fehler? HILFE!

Meine CSS (Der Übeltäter ist Fett!):

body { background-color:#1b1b1b;
}

.normal { font-family:Verdana; font-size:0.8em; color:white; }
.small { font-family:Verdana; font-size:0.6em; color:white; }
.impressum { font-family:Verdana; font-size:0.6em; color:white;
}
.smallgray { font-family:Verdana; font-size:0.6em; color:#1e1e1e; }

a:link { color:white; bold; text-decoration:none; }
a:visited { color:white; bold; text-decoration:none;  }
a:hover { color:#1b1b1b; text-decoration:none; font-weight:bold; background-color:#fff; }


.MeineTabelle {
  width:1280;
  height:717;
  margin-left:auto;
  margin-right:auto;
}

.kein_rahmen {
border:none;
}

[B]form { 
background-color:#1e1e1e; border:1px solid #ffffff; 
}
td, input, select, textarea { color:#FFFFFF; font-size:9px; font-family:Verdana,sans-serif; }
.Feld { background-color:#1e1e1e; width:166px; height:16px; border:1px solid #FFFFFF; }
.Bereich { background-color:#1e1e1e; width:455px; height:107px; border:1px solid #FFFFFF; }
.Auswahl { background-color:#dff; width:166px; border:1px solid #FFFFFF; }
.Button { background-color:#1e1e1e; font-size:11px; font-weight:Bold; font-family:Verdana,sans-serif; color:#fff; width:83px; height:20px; border:1px solid 
#FFFFFF }[/B]

(wenn das nicht reichen sollte, dann bitte bescheidsagen)



Achja: Wenn wir grade dabei sind: Wie kann ich den Text im Formular weiter vom Rand entfernen?



Danke im Vorraus!
Ich verlasse mich auf euch!

 

[sokie]

AW: [CSS] Problem mit Formatierung!

wenn man den ganzen inputs eine font-size von 9px zuweist, dann ist das eben winzig.

im body ist keine schriftgrössenangabe; hier vielleicht schon mal font-size:101%; setzen

zu2 : auch dem Form-element kannst du ein padding zuweisen.

 

[Weichzeichner]

AW: [CSS] Problem mit Formatierung!

wenn man den ganzen inputs eine font-size von 9px zuweist, dann ist das eben winzig.

Sry verstehe ich leider nicht so ganz...
Was meinst du genau? Ich habe mein Wissen leider ausschließlich von Sellfhtml und alles selbst beigebracht, und naja ich bin noch Anfänger.
Habe ich da bei der CSS etwas grundlegend falschgemacht?

Aber danke für die Tipps, ich werde das mal versuchen!

 

[sokie]

AW: [CSS] Problem mit Formatierung!

td, input, select, textarea { color:#FFFFFF; font-size:9px; font-family:Verdana,sans-serif; }

hier setzt du die schriftgrösse für alle elemente, die in irgendeiner Tabellenzelle liegen auf 9px.
ausserdem alle eingabeelemente.
9px ist eigentlich schon zu wenig, um eine Schrift noch lesbar darzustellen.

 

[rapzitis]

AW: [CSS] Problem mit Formatierung!

tu dir selber ein gefallen und formatier dein code schöner - etwa so z.B.:

.Feld
{
background-color:#1e1e1e;
width:166px;
height:16px;
border:1px solid #FFFFFF;
}

ist übersichtlicher und erleichtert das copy/pasten

Ich bin mir nich 100%ig sicher, aber klassen und IDs sollten nicht mit großbuchstaben beginnen. Ich hab mir einfach angewöhnt einfach alles klein zuschreiben. Groß- und kleinschreibung ist einfach nur eine weitere fehlerquelle und stiftet verwirrung.

Ansonsten hat sokie recht, 9px sind zu wenig.

Achja: Wenn wir grade dabei sind: Wie kann ich den Text im Formular weiter vom Rand entfernen?

Wie meinste das? Vom welchem Rand? Meinste den Text welchen man in den Input-Felder schreiben kann?

In diesem Fall dem Input-Feld ein gewünschten padding-wert (abstand innen) geben - fertig.

Da wär wie immer ein link am hilfreichsten um besser helfen zu können.

 

[Weichzeichner]

AW: [CSS] Problem mit Formatierung!

Ja, natürlich ist das wenig, aber sie ist dann ja noch lesbar!
Sieh selbst:

Das kann ich mir nicht erklären!

EDITH: Danke Rapzitis! Ich werde die CSS nochmal überarbeiten, hast recht! Der Link ist jetzt da (Gedankenübertragung )

 

[rapzitis]

AW: [CSS] Problem mit Formatierung!

ahhhhhhhhhh, jawohl.

da liegt um den text ein span:

in deiner stylesheet.css in zeile 5 wird dieser definiert:

.small {
color:white;
font-family:Verdana;
font-size:0.6em;
}



die 0.6em sind ein relativer wert. Dieser span, liegt innerhalb einer tabellenzelle <td>, welche wiederrum eine font-size von 9px zugewiesen bekommen hat.

Diese 9 px gelten in diesem moment als grundschriftartgröße für innenliegene objekte = 1em.

Er nimmt nun quasi 60% von 9px.


edit: das gleiche "problem" bei impressum-span und normal-span.

edit2: hmm glob das ist ein bissle doof zuz erklären und du fragst dich mit sicherheit für was die scheiß em-maßeinheit. Aber damit lässt sich wirklich tolles machen:
Die Selbe Technik auf ner schicken website: http://www.zdf.de
So kann man halt relativ zur gewählten Schriftgröße das Layout mitskalieren lassen ... was ja erst von der neuen browser-generation automatisch gemacht wird und was von IE7 total vermasselt wurde

 

[Weichzeichner]

AW: [CSS] Problem mit Formatierung!

ohoh, also daran liegts. Soll ich dann also Pixelgrößen nehmen, oder die td-formatierung aus der CSS löschen?

 

[rapzitis]

AW: [CSS] Problem mit Formatierung!

hmm, also ich frag mich eher ob dieser span überhaupt sein muss ... du hast ja schon ein p-tag der den text umfasst.

Nur zur erklärung: ein p-tag sollte ein absatz umassen ... denn default-einstellung ist, das nach ein p-tag ein zeilenumbruch gemacht wird, mit abstand vor und nach dem absatz.

Das kann man dann schön mit css stylen ... ich finde nur "abstand nach" am sinnvollsten

<br /> ist zeilenumbruch innerhalb eines absatzes um einfach nur in die nächste zeile zurücken. "Enter"=<p> shift+Enter=<br/> um mal ein vergleich zu haben und so ist es ja auch in fast allen editoren.

Ebenso gibt es für auflistungen auch html-tags, welche mit css schön gestyled werden können.


Also aber zur eigentlichen frage: Mach das span im HTML weg und leg die klasse auf dem p-tag.

In der css, nimmst du die font-size definition einfach raus, oder am einfachsten nimmst eine pixel größe.

Würd mich aber mal mit schriftengrößen weiter außeinander setzen.

Am sinnvollsten ist wie bereits schon erwähnt eine schriftgröße im body-tag zu definieren.

Ich persönlich sag immer font-size 12px und kann für alle child-elemente (bei body sind es alle ) leichter mit relativen-werten arbeiten. Aber ich fnds auch nicht verkehrt nur pixel-werte zunehmen, ist anfangs leichter.

edit: < --- schickes teil

Und achja ... beim nächsten mal will ich keine tabelle mehr sehen.

 

[Weichzeichner]

AW: [CSS] Problem mit Formatierung!

Ok alles klar, danke für dir Hilfe!