text mit css gestalten

|o|o

ich muss hier einmal wissen, wie man einen text ganz normal in css gestaltet .. meinetwg farbe grau, schriftgröße 3 pix, und schriftart century gothic .. is es auch notwendig die hintergrundfarbe mit css zu bestimmen oder .. ich mein wozu is css denn nötig ? doch damit jeder die schrift gleich sieht, oder nicht ?! kenn mich da nich wirkluich aus .. lol gut nacht : )

Ed Home

Vielleicht hilft dir das hier erstmal weiter: selfhtml.org/css/intro

|o|o

ich hab das jetzt mal ein bissn probiert : ) also .. will ma wissn warum meine schrift hier immer so fett wird .. da is doch was falsch irgendwie. möchte schrift century gothic .. und die is immer so bold geschrieben .. das is gaaa nicht gut ..

HTML

<html>


<head>
<meta http-equiv="Content-Type"
content="text/html; charset=iso-8859-1">
<meta name="GENERATOR" content="Microsoft FrontPage Express 2.0">
<title>Jousy's Homepage</title>
</head>


<STYLE type="text/css">




A:link { COLOR: #FFFFFF; TEXT-DECORATION: none } A:visited {
COLOR: #FFFFFF; TEXT-DECORATION: none } A:active { COLOR:
#FFFFFF; TEXT-DECORATION: none } A:hover { BORDER-RIGHT: #FFFFFF
1px dashed; BORDER-TOP: #FFFFFF 1px dashed; BORDER-LEFT: #FFFFFF
1px dashed; CURSOR: crosshair; COLOR: #FFFFFF; BORDER-BOTTOM:
#FFFFFF 1px dashed; TEXT-DECORATION: none } </STYLE> <style type="text/css"> <!--
body { background-color:#000000;
     margin-left:10px; }
h1 { font-size:20px;
     color:#FFFFFF;
     font-family:Century Gothic;}
h2  { font-size:14px;
        font-family:Century Gothic;
        color:#C0C0C0; 
--> </style> </p>


<h1>hier die überschrift</h1>


<h2>


DER NORMALE TEXT ... [ ders deutlich fett geschrieben und das will ich nicht .. </p></h2>
</body>
</html>

Alles anzeigen

Rocco

ich weiß nicht obs daran liegt, aber du hast ersmal beim h2 vergessen die runde klammer } zuzumachen...

Rocco

hab herumprobiert. so gehts: einfach ein font-weight:normal; hinzufügen. also

Code

h2  { font-size:14px;
        font-family:Century Gothic;
        color:#C0C0C0; font-weight:normal; }

mfg
Rocco

Ed Home

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/DTD/loose.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<meta http-equiv="content-style-type" content="text/css">
<style type="text/css">
 <!--
 body {
     background-color:#000000;
     font-family:'century gothic', monospace, verdana;
     font-weight:100;
     color:#C0C0C0;
     font-size:100,01%;
     }
 #alles { margin-left:10px; }


 p  {font-size:0.9em;}
 h1 {font-size:1.5em;}
 h2 {font-size:1.1em;}


 a {font-size:0.9em; COLOR:#FFFFFF; TEXT-DECORATION:none; padding:0px 5px; BORDER:#000000 1px dashed;}
 a:hover { BORDER:#FFFFFF 1px dashed; }
 -->
</style>
<title>Jousy's Homepage</title>
</head>


<body>
<div id="alles">
<h1>hier die überschrift</h1>
<h2>Keine Paragraphen (P) innerhalb von Überschriften oder der Style-Angaben!</h2>




DER NORMALE TEXT ... (nicht mehr fett)...




    (100=dünn bis 900=fett  oder auch 'lighter')  </p>




[url='#']ProbeLink[/url]




   [url='#']ProbeLink[/url]




   
</p>
 </div>
</body>
</html>

Alles anzeigen

Hab den code mal etwas aufgeräumt.
Außerdem habe ich bei den normalen links einen schwarzen border zugefügt, dann springt das Ganze beim hovern nicht so.

|o|o

erstmal vielen dank an euch : )

aber ich möcht ersma wissn ..

1. wie änder ich nun einzeln die farben der schrift .. zb möchte ich für die überschrift die farbe weiß.

2. das mit dem hovern verrutschen find ich ja gut .. aber wo is dieser textteil geblieben, der definiert wie der link aussehen soll ? also jetzt auch schriftfarbe, und dass er umkastet werden soll .. er zb auch so klein ..

3. die umlaute und ebn zeichn werden zu einem kästchen .. muss ich mir dafür jetzt extra son code für jedes sonderzeichen holen ?! also ich hab hier mal ne sonderzeichen seite http://www.inter-medien.de/dreamweaver/so…eichen.htm#buch .. aber da sind ä ß usw gar nicht dabei, wieso geht dann das jetzt nicht mehr ?!

4. ich wollte das eigentlich so haben, dass wenn man auf ansicht schriftgrad irgendein grad : ) klickt, sich an der schriftgröße nix ändert. ich dachte ich kann das mit css erreichen .. aber nach deinem code geht das nicht. was mach ich da ?!

~ > tut mir leid das ich soviel .. naja ich denke für euch voll einfaches zeug frage, aber ich kann das nunma nich wirlich : )

Ronald

Hi,

Zitat von |o|o

erstmal vielen dank an euch : )

aber ich möcht ersma wissn ..

1. wie änder ich nun einzeln die farben der schrift .. zb möchte ich für die überschrift die farbe weiß.

ergänze einfach Deinen CSS-Style für Überschrift (h1):

Code

h1 {font-size:1.5em; color:#FFFFFF}

Übrigens solltest du die Schriftgrößen besser in Pixel (px) definieren, dann sieht es auch bei verschiedenen Browsern annähernd gleich aus ->

Code

h1 {font-size:18px; color:#FFFFFF}

Zitat von |o|o

2. das mit dem hovern verrutschen find ich ja gut .. aber wo is dieser textteil geblieben, der definiert wie der link aussehen soll ? also jetzt auch schriftfarbe, und dass er umkastet werden soll .. er zb auch so klein ..

du kannst verschieden Angaben machen, was mit den Links passieren soll:

Code

a:link       {color:# ....}    ## der Link an sich
a:visited   {color:# ....}    ## der Link, wenn er schon besucht wurde
a:hover    {color:# ....}    ##  bei Mouseover
a:active    {color:# ....}    ## im Augenblick des Anklickens
a:focus     {color:# .....}    ## wenn der Link einen Focus erhalten hat

Zitat von |o|o

3. die umlaute und ebn zeichn werden zu einem kästchen .. muss ich mir dafür jetzt extra son code für jedes sonderzeichen holen ?! also ich hab hier mal ne sonderzeichen seite http://www.inter-medien.de/dreamweaver/so…eichen.htm#buch .. aber da sind ä ß usw gar nicht dabei, wieso geht dann das jetzt nicht mehr ?!

Du hast einen im head einen Unicode-Zeichensatz definiert, ich weiß momentan nicht, welche Zeichen der kann. Sinnvoll wäre es einen europäischen Standardzeichensatz zu benutzen, der kennt dann auch die Umlaute:

Code

<meta http-equiv="content-type" content="text/html; charset=ISO-8859-15">

Zitat von |o|o

4. ich wollte das eigentlich so haben, dass wenn man auf ansicht schriftgrad irgendein grad : ) klickt, sich an der schriftgröße nix ändert. ich dachte ich kann das mit css erreichen .. aber nach deinem code geht das nicht. was mach ich da ?!

Das geht nicht wirklich: Wenn der User in seinem Browser die Funktion "Dokument erlauben, andere Schriftarten zu verwenden" deaktiviert hat, dann sieht er deine Schriftart gar nicht. Ich habe es so gemacht, denn ich will die Texte lesen können und nicht versuchen, irgendwelche Schreibschriften, pp. zu entziffern. B.t.w. macht es ohnehin Sinn, sich an Standardschrifften zu halten, will man daß die User wiederkommen. Die Schriftgröße kannst du meines Wissens ohnehin nicht fixen - was sollen dann Sehbehinderte machen, oder User mit Riesenmonitoren?

Zitat von |o|o

~ > tut mir leid das ich soviel .. naja ich denke für euch voll einfaches zeug frage, aber ich kann das nunma nich wirlich : )

Dafür ist das Forum ja da, frag ruhig weiter

Gruß aus der Marsch!

Ronald

Ed Home

@ Ronald

Zitat

Übrigens solltest du die Schriftgrößen besser in Pixel (px) definieren, dann sieht es auch bei verschiedenen Browsern annähernd gleich aus ->

Jein. bei EM kann der user selber eintscheiden, wie groß er die Schrift haben will. Es kommt doch auch auf die Einstellungen des einzelnen users an. (Opera z.B. erlaubt das völlige Abschalten des Autorenstyles) Mich persönlich hält nichts auf webseiten, die ich nicht mal lesen kann, weil der webmaster von seinem eigenen pc mit 800*600 ausgeht und mit Schriftgröße 9px verhindert, dass seine Seite auch bei 1280*1024 noch lesbar ist.

Zugänglichkeit.
barrierefreies-webdesign.de

Ronald

Das war ja auch das was ich geschrieben habe:

Mein Bowser ignoriert sämtliche Zeichenfixierungen. Er lädt zwar die Seite zunächst so, wie so voreingestellt ist, dann kann ich es aber größer oder kleiner drehen wie ich will, egal ob da etwas gefixt ist oder nicht.

|o|o

danke ich werd mir das nochmal angucken, aber jetzt hab ich grad keine zeit : ) danke !
ciao - - > Yousi

|o|o

also nich das ihr jetzt denkt ich hab für das hier keine zeit und für meine anderen [ neuen ] fragen schon .. aber ich muss im mom an 2 hps ~ arbeitn, die eine gehört nur zum teil mir, is aber ersma wichtiger !

das hier hab ich bei der halbmeinehp jetzt hingekricht ! danke !

Ronald

Zitat von |o|o

also nich das ihr jetzt denkt ich hab für das hier keine zeit und für meine anderen [ neuen ] fragen schon .. aber ich muss im mom an 2 hps ~ arbeitn, die eine gehört nur zum teil mir, is aber ersma wichtiger !!

Nur 2 Hp2?

Du glückliche

Ronald

|o|o

hallo : )
mal wieder so ein für euch einfaches problem denk ich ..

also bin jez grad ma soo .. krich zwar andre überschriften hin also mit h1, h2 und so .. das ich da die farbe angeb .. aber wie isn das mit nem andren normalen text .. check das grad alles nich so .. ersma hier der

HTML

<!doctype html public "-//W3C//DTD HTML 4.01 Transitional//EN"> 
<html> 
<head> 
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-15"> 
<meta http-equiv="content-style-type" content="text/css"> 
<style type="text/css"> 
 <!-- 
 body { 
     background-color:#000000; 
     font-family:'verdana';
     font-style:italic; 
     font-weight:100; 
     color:#C0C0C0; 
     font-size:100,01%;
scrollbar-3dlight-color:#C7C7C7; 
  scrollbar-arrow-color:#000000; 
  scrollbar-darkshadow-color:#C60421; 
  scrollbar-face-color:#C7C7C7; 
  scrollbar-highlight-color:#C60421; 
  scrollbar-shadow-color::#FFFFFF; 
  scrollbar-track-color:#E2E2E2;
     } 
 #alles { margin-left:10px; } 


 p  {font-size:1.0em;}
 p2 {color:#FFFFFF;}
 h1 {font-size:1.5em; color:#cc0000; font-style:normal;} 
 h2 {font-size:1.1em;} 
 h3 {font-size:1.4em;color:#FFFFFF;}


body{overflow-x:hidden;}




 a {font-size:0.9em; COLOR:#FFFFFF; TEXT-DECORATION:none; padding:0px 5px; BORDER:#000000 1px dashed;} 
 a:hover { BORDER:#FFFFFF 1px dashed; } 
 --> 
</style> 
<title>>>> Gut Sahara <<<</title> 
</head> 


<body> 
<table border=0 cellspacing=0 cellpadding=0> 
<tr> 
<td align=center width=820 height=175 background="http://gut-sahara.piranho.com/rechts/logo7.jpg"> 
<table border=0 cellspacing=0 cellpadding=0 width=100%> 
  <tr> 
  <td align=center width=220>


</td> 
  <td width=529 font-weight:bold"><h1 center>




Anmeldung</td> 
  </tr> 
</table> 
</td> 
</tr> 
</table> 
<div id="alles">






Hier könnt ihr euch anmelden! Füllt einfach die Felder da unten aus 
und klickt auf "Registrieren"   zur information~>  Dies ist nur die 
Voranmeldung für den Hof, auf dem Hof könnt ihr euch dann Tiere 
Jobs usw aussuchen! die anmeldung ganz ganz klar KOSTENLOS,
 is doch alles privat hier, also was soll der scheiß ;) dann ma lous!</br></br>


<SCRIPT language=JavaScript>
<!-- (c) AccessProtect.com
function r_check() {if (/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,6})+$/.test(document.regform.email.value)){}else{
alert("Email?");return (false);}if (document.regform.username.value.length < 3) {
alert("Benutzername?");document.regform.username.focus();return false;}if (document.regform.password.value.length < 3) {
alert("Passwort?");document.regform.password.focus();return false;}
}
// -->
</SCRIPT>
 
<FORM name=regform onsubmit="return r_check(this)" 
action=http://zoora.AccessProtect.com/reg/ method=post>
<P align=center><INPUT type=hidden value=DE name=LANG> <INPUT type=hidden 
name=URL_success> <INPUT type=hidden name=URL_unavailable> <INPUT type=hidden 
name=URL_userexist> </P>
<DIV align=center>
<TABLE align=center>
<TBODY>
<TR>
<TD noWrap><p2>Email:</FONT> </FONT></TD>
<TD noWrap><INPUT maxLength=70 size=26 name=email><FONT 
color=#66ccff></FONT></TD></TR>
<TR>
<TD noWrap><p2>Benutzername:</FONT> </FONT>[/B]</TD>
<TD noWrap><INPUT maxLength=26 size=26 name=username><FONT 
color=#66ccff></FONT></TD></TR>
<TR>
<TD noWrap><p2>Passwort:</FONT>[/B] </TD>
<TD><INPUT type=password maxLength=26 size=26 name=password></TD></TR>
<TR>
<TD></TD>
<TD><INPUT type=submit value=Registrieren name=B1></TD></TR></TBODY></TABLE></DIV></FORM>

Alles anzeigen

joa und nu hab ich bei p2 farbe weiß angegebn .. das wird bei mir aber nich weiß .. und dann is an dem code ja wohl irgendwienin fehler weil zumindest der inetex zeigt unten links immer ein fehler an

mfg etwas verwirrte |ousy

Ronald

Moin!

Versuche es mal so:

Code

<style type="text/css">
 <!--
...
 p  {font-size:1.0em;}
*.p2 {color:#FFFFFF; font-weight:bold} 
...
</style>


...


<TD noWrap><p class=p2>Benutzername:</p></TD>
...

Alles anzeigen

Durch das Sternchen und den Punkt definierst du den Begriff "p2" als eine eigen Klasse, die du dann jederzeit und überall einsetzen klannst. Die Klasse endet mit dem Schlußtag oder wenn ein neuer Tag beginnt

Aus der Marsch grüßt mal wieder....

Ronald

|o|o

ahaaa, thx : D und wer kann mir sagn was am code falsch is ? wenns jmd stört kann ich ihn auch kürzn

Ronald

Moin!

Ich habe dein Script mal eben so umgestrickt, wie ich es leiden mag, vielleicht gefällt es dir ja auch.

Zu den "Fehlern im Script": Wirkliche Fehler habe ich nicht entdeckt, es waren nur einige unnötige Dinge drinnen (unnötig weil ohne Funktion).

Du solltest Begriffe wie Name=meier besser immer in Anführungszeichen schreiben -> name="meier", das verstehen die Browser besser und ist im Editor auch übersichtlicher.

Das Script an sich funktioniert so weit, allerdings weiß ich nicht, was nach dem Absenden damit auf deinem Registrierungsserver passieren soll, denn es besteht nirgends eine Verbindung zu deineme Account - normalerweise muß da irgendwie noch ein (hidden) Input sein, ähnlich wie "username=123456".

Erstmal wieder ein Gruß aus der Marsch!

Ronald

HTML

<!doctype html public "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-15">
<meta http-equiv="content-style-type" content="text/css">
<style type="text/css">
 <!--
 body {
     background-color:#000000;
     font-family:'verdana';
     font-style:italic;
     font-weight:100;
     color:#C0C0C0;
     font-size:100,01%;
scrollbar-3dlight-color:#C7C7C7;
  scrollbar-arrow-color:#000000;
  scrollbar-darkshadow-color:#C60421;
  scrollbar-face-color:#C7C7C7;
  scrollbar-highlight-color:#C60421;
  scrollbar-shadow-color::#FFFFFF;
  scrollbar-track-color:#E2E2E2;
     }
 #alles { margin-left:10px; }


 p  {font-size:1.0em;}
 td {color:#FFFFFF;}
 h1 {font-size:1.5em; color:#cc0000; font-style:normal; padding-top:20px; text-align:center}
 h2 {font-size:1.1em;}
 h3 {font-size:1.4em;color:#FFFFFF;}


body{overflow-x:hidden;}




 a {font-size:0.9em; COLOR:#FFFFFF; TEXT-DECORATION:none; padding:0px 5px; BORDER:#000000 1px dashed;}
 a:hover { BORDER:#FFFFFF 1px dashed; }
 -->
</style>
<SCRIPT language=JavaScript>
<!-- (c) AccessProtect.com
function r_check()
  {
  if (/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,6})+$/.test(document.regform.email.value))
  {}
  else
  {
  alert("Email?");
  return false;
  }
  if (document.regform.username.value.length < 3)
  {
  alert("Benutzername?");
  document.regform.username.focus();
  return false;
  }
  if (document.regform.password.value.length < 3)
  {
  alert("Passwort?");
  document.regform.password.focus();
  return false;
  }
}
// -->
</SCRIPT>
<title>>>> Gut Sahara <<<</title>
</head>


<body>
<table border=0 cellspacing=0 cellpadding=0 height=100% width=828 align=center>
<tr>
<td align=center height=179 style="background-image:url(http://gut-sahara.piranho.com/rechts/logo7.jpg)"></td>
</tr>
<td height=100% valign="top" style="Padding:20"><h1>Anmeldung</h1>






Hier könnt ihr euch anmelden! Füllt einfach die Felder da unten aus und klickt dann auf "Registrieren"


<u>Zur Information:</u><ul>Dieses ist nur die Voranmeldung für den Hof. Auf dem Hof könnt Ihr euch dann Tiere Jobs usw. aussuchen!
Die Anmeldung ist natürlich [b]kostenlos[/b], ist doch alles privat hier, also was soll der Scheiß ;)
[/list].... dann ma lous!










<form name="regform" onsubmit="return r_check(this)" action="http://zoora.accessprotect.com/reg/" method="post">
<input type="hidden" value="de" name="lang">
<input type="hidden" name="url_success">
<input type="hidden" name="url_unavailable">
<input type="hidden" name="url_userexist">


<table align=center border=0 cellspacing=10 cellpadding=0>
  <tbody>
  <tr>
    <td>Email:</td>
    <td><input maxlength=70 size=26 name=email></td>
  </tr>
  <tr>
    <td>Benutzername:</td>
    <td><input maxlength=26 size=26 name="username"></td>
  </tr>
  <tr>
     <td>Passwort:</td>
     <td><input type="password" maxlength=26 size=26 name="password"></td>
  </tr>
  <tr>
    <td colspan=2 align=center><input type="submit" value="Registrieren" name="b1"></td>
  </tr>
  </tbody>
</table>
</form>
</body>
</html>

Alles anzeigen

|o|o

hmm die überschrift is ausm bild gerutscht... möchte die ja im bild haben : )

Ronald

Dann mal so...

Code

<table border=0 cellspacing=0 cellpadding=0 height=100% width=828 align=center>
<tr>
<td align=center valign=center height=179 style="background-image:url(http://gut-sahara.piranho.com/rechts/logo7.jpg)"><h1>Anmeldung</h1></td>
</tr>
<td height=100% valign="top" style="Padding:20">


(Rest wie gehabt)

G.a.d.M.

Ronald

|o|o

Zitat von Ronald

Hi,

Das geht nicht wirklich: Wenn der User in seinem Browser die Funktion "Dokument erlauben, andere Schriftarten zu verwenden" deaktiviert hat, dann sieht er deine Schriftart gar nicht. Ich habe es so gemacht, denn ich will die Texte lesen können und nicht versuchen, irgendwelche Schreibschriften, pp. zu entziffern. B.t.w. macht es ohnehin Sinn, sich an Standardschrifften zu halten, will man daß die User wiederkommen. Die Schriftgröße kannst du meines Wissens ohnehin nicht fixen - was sollen dann Sehbehinderte machen, oder User mit Riesenmonitoren?

Ronald

mal dazu : ) will gerne wissn wies geht, anscheinend viele kommen leute bei forum-hilfe ja auch damit klar .. : ) die ham das hier auch. na wie gehtn das ? =D

Tags