Ausgelagerte Datei - wie?

    Hallo zusammen


    ich bin neu hier und finde die Seite auch hammergeil, ist echt alles toll und verständlich erklärt. Allerdings habe ich ein Problem: ich bin nun zum CSS- Teil gekommen und habe die Methode mit der ausgelagerten Datei versucht, weil diese ja auch für später am besten ist. Allerdings weiss ich nicht, wie ich das anstellen muss. Muss ich einfach auf Neue Datei klicken und dort CSS auswählen? Und dann dort zwischen diese beiden geschweiften Klammern meine Einstellungen setzen? Das habe ich schon gemacht, und irgendwie hat es trotzdem nicht geklappt? Könnt ihr mir helfen? Ich verzweifle sonst noch... :(


    Danke schon im Voraus :wink:


    Sepp

    so, hab's jetzt trotzdem geschafft. Allerdings habe ich immer noch ein Problem: Bei mir funktioniert der Befehl letter-spacing irgendwie nicht. Egal ob ich jetzt letter-spacing:30; oder letter-spacing:500; eingebe, das Ergebnis ist immer das Gleiche. Könnt ihr mir helfen?

    Danke für eure Hilfe, ich habs jetzt geschafft :D Nun aber mittlerweile wieder ein anderes Problem: ich hab jetzt meine Homepage- STeuerung per float:left links hin gepappt. Soweit so gut. Auch der Text fliesst brav rechts daran vorbei. Allerdings geht der Text sobald die Steuerung fertig ist, wieder über die ganze Seite. Wie kann ich jetzt einstellen, damit der Text eigentlich in seinem "Block" bleiben soll? Wenn diese Frage im Seminar bereits erklärt wurde, tut es mir echt leid, aber ich kann mir leider nicht alles, was im Seminar steht merken :roll: (kommt noch :) )


    Gruss


    Sepp

    Am beten das float weglassen und allein für den Text ein extra Div machen, dass dann im ganzen neben dem Bild liegt.
    Zur Div-Positionieren siehe: position: absolute; (mit der Forensuche oder auf der Hauptseite suchen).

    Naja, ich habs jetzt einfach mit margin-left gemacht, sollte auch gehen und ist ein bisschen weniger kompliziert :) Und nun hab ich wieder ein Problem: ich habe jetzt ein tolles Hintergrundbild für meine Website gefunden. Allerdings will ich jetzt den Text weiss hinterlegen, damit er immer noch lesbar ist. Nun die Frage: mit background-color wird einfach die ganze Zeile weiss, es zieht sich also bis zur Steuerung. Wie kann ich jetzt aber machen, dass nur der Text- Block weiss hinterlegt wird?


    Sepp


    P.S. sry für die vielen Fragen, aber ich bin noch sehr neu und unerfahren und hier wird einem echt schnell geholfen!


    edit: ich habe es jetzt mit margin-left ausprobiert, allerdings geht der Hintergrund beispielsweise beim Titel immer noch weiter, und alles pixelgenau einzustellen nervt auch... gibt's dafür nicht irgend einen befehl?

    kann mir denn niemand helfen? :cry: Problem ist ja, dass sich die Hintergrundfarbe über die SChrift hinaus weiter zieht. Ist recht unangenehm für den Betrachter...

    Quellcode und evtl. Screenshot wären nicht schlecht.


    Wie das mit der Hintergrundfarbe bei dir aussehen soll, kann ich mir nicht ganz vorstellen...
    Bei mir kommt mit diesem Quellcode:

    HTML
    <html>
<body>
<font style="background-color: black; color: white;">Das ist Text! <br />
Das hier auch!</font>
</body>
</html>


    das hier raus:
    [Blockierte Grafik: http://xs224.xs.to/xs224/08075/unbenannt513.jpg]

    Jo also hier der gesamte Quelltext:




    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">


    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
    <head>
    <title>Titel</title>
    <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
    <meta name="description" content="" />
    <meta name="author" content="" />
    <meta name="keywords" content="" />
    <meta name="generator" content="Webocton - Scriptly" />
    <link href="style.css" type="text/css" rel="stylesheet" />
    <style type="text/css">
    /*<![CDATA[*/


    <!-- #navi
    {
    width:150px;
    background-color:silver;
    border:5px double red;
    float:left;
    margin-right:50px;
    }
    -->
    </style>
    <style type="text/css">
    html, body {
    background:url("../stein1.jpg");
    }
    </style>
    <style>
    p{
    background-color:white;
    margin-left:200px;}
    h2{
    background-color:white;
    margin-left:200px;}
    </style>



    </head>


    <body>
    <div id="navi">
    <ul>
    <li><a href="index.html">Startseite</a></li>


    <li><a href="ueber_mich.html">Über mich</a></li>


    <li><a href="links.html">Links</a></li>


    <li><a href="dankeschoen.html">Dankeschön</a></li>
    </ul>
    </div>


    <h2>Herzlich Willkommen auf meiner Homepage</h2>


    <p>Herzlich willkommen auf meiner Homepage, sehr geehrte Besucher. Diese Seite befindet sich leider im Moment noch im Aufbau. Ich danke Ihnen für Ihr Verständnis.</p>
    </body>
    </html>



    Problem ist eben, wie man in der Vorschau sieht, dass zum Beispiel beim "Herzlich Willkommen...." der Hintergrund sich noch weiter zieht, auch wenn der Text schon zu Ende ist. Das will ich wegbekommen.

    Hi, scheint so, als ob h2 ganz einfach hervorruft, dass die gesamte Zeile weiß hinterlegt wird.
    Mach also am besten die Überschrift, so wie ich, in ein <font>-Tag und formatiere alles so, dass es wieder aussieht wie die h2-Überschrift (also einfach font-size und evtl. font-weight ändern (Attribut von font-weight wäre bold; die Schrift wird also fett)).

    hmm... also mit font klappt es jetzt, aber gibt es dafür nicht auch eine andere möglichkeit? mit einfach <p style="background-color: white"> hat es auf jeden fall nicht geklappt... oder ist das die einzige Möglichkeit? Weil Pixel abzählen für die richtige Grösse nervt auf Dauer auch...

    Naja mit background-color: sorgst du ja dafür, dass der gesamte Hintergrund des Feldchens weiß ist und nicht nur die Schrift...
    Wenn du nur für die Schrift einen Hintergrund haben willst, bräuchstest du ein CSS-tag wie font-background: aber das gibts afaik nich; also musst du das dann doch mit dem HTML-font-tag machen.
    Da kannst du theoretisch einfach ganz am Anfang deines Textes ein font-tag mit den CSS-Angaben machen und am Ende des Textes wieder ein schließendes tag.


    Eine elegantere Lösung wäre natürlich transparenter Hintergrund.
    Den kannst du entweder hinbekommen, indem du den gesamten Hintergrund als ein einziges großes Bild machst, was allerdings sehr zu lasten der Ladezeit gänge, für Webprojekte also eher ungeeigntet ist.
    Folgendes Bild ist aus einem Projekt, das wohl nie das Licht des Internetz' erblicken wird, und nur auf CD veröffentlicht wird. Ladezeit spielt da also keine Rolle:
    [Blockierte Grafik: http://foster116.fo.funpic.de/zeug/htmlseminar/dbg_max.jpg]


    Auf dem weißen Feldchen lässt sich dann auch schwarze Schrift prima erkennen.



    Möglichkeit für dich wäre also die Transparenz per speziellem CSS-Code (also der kommt in die CSS-Datei; ob es wirklich CSS ist weiß ich nicht):

    Code
    filter: alpha(opacity=75);
    filter: progid:DXImageTransform.Microsoft.Alpha(opacity=75);
    -moz-opacity: 0.75; opacity:0.75;


    Keine Ahnung, was das im einzelnen bedeutet aber das ist jedenfalls alles notwendig, damit es in allen Browsern schön angezeigt wird. Die 75 bzw 0.75 ist ganz einfach der Grad der Transparenz... in dem Fall also zu 75% transparent.
    Angewandt könnte das dann so aussehen:
    [Blockierte Grafik: http://foster116.fo.funpic.de/zeug/htmlseminar/transparent.jpg]


    Sieht halt sehr schick aus, wenns auch etwas kompliziert ist.
    Den Code hab ich glaube von <!-- w --><a class="postlink" href="http://www.cssplay.co.uk">http://www.cssplay.co.uk</a><!-- w --> , was für mich eigentlich immer eine vertrauenswerte Seite war, daher nehme ich ganz einfach an, dass der obige Code valide ist... :)

    Also nach laaaanger Zeit wende ich mich mal wieder dem CSS zu :wink: Und gleich schon wieder zwei Fragen:
    1. Wo setze ich font oder font-background ein und wenn wo, welches von beiden?
    2. Wo setze ich den CSS Tag für die Transparenz ein? In der CSS Datei schon klar (übrigens schreibe ich jetzt alles oben in den Head- Bereich rein, geht einfacher), aber wo? wenn ich es entweder beim <p> einsetze erscheint es rot -> falsch, wenn ich es einfach so einsetze -> rot -> falsch. Kannst du mir helfen?

    1. Die font-Tags kannst du in jedem Element einsetzen, dass Schrift in sich enthält.
    Dabei gibts es ganz einfach verschiedene font-Tags: font-background, font-size, font-family, usw.
    Nur font ist da sozusagen ein unspezifiziertes Tag und kann afaik für alle Typen benutzt werden. Ganz so sicher bin ich mir mit diesem "nur font" aber auch nicht. Ich empfehle also eher ganz einfach immer die ausgeschriebene Variante zu nehmen.


    2. Das mit der Transparenz ist eigentlich genauso wie bei 1.
    Du kannst das überall einsetzen, sinnvoll aber natürlich zB in einem Div oder <p>, der eine beispielsweise weiße Hintergrundfarbe hat und mit der Transparenz dann durchscheinend weiß wirkt (man kann dann zB auch ein farbiges Hintergrundbild unter dem transparenten Div durchscheinen sehen).


    Mir ist allerdings nicht ganz klar, was du mit "wenn ich es entweder beim <p> einsetze erscheint es rot -> falsch, wenn ich es einfach so einsetze -> rot -> falsch" meinst. Ist das aus deinem HTML-Editor?
    Wenn ja, poste mal bitte genau den Quellcode von der Stelle.
    (kann auch sein, dass dein HTML-Editor den Transparenz-Code ganz einfach nich kennt und ihn als falsch ansieht. Wenn du deine Seite aber in verschiedenen Browser ausprobierst und es überall gut aussieht, brauchst du dir darüber auch keine Gedanken zu machen.)

    Foster -

    Code
    filter: alpha(opacity=75);
    filter: progid:DXImageTransform.Microsoft.Alpha(opacity=75);
    -moz-opacity: 0.75; opacity:0.75;


    könntest du mir dazu einen Browserhack für den Opera benennen?


    Ich habe in einer meiner Seiten eine Fotoseite eingebunden, die auf opacity fundiert - nur spielen da leider wieder einmal nicht alle Browser mit :wink:

    Also zu erst einmal habe ich den Quellcode (praktisch) gar nicht seit dem letzten Posten geändert, also kannst du dafür oben nachschauen :wink: Dann wegen dem Rot: Ja, ich arbeite mit Scriptly, das mir den Tag rot anzeigt und es funnktioniert auch nicht in der Vorschau.


    Zu 1.: font-background ist imo ein unmöglicher Befehl, in eurem Tutorial wurde er auch nicht erwähnt, und er wird auch rot angestrichen.


    Zu 2.: ich habe jetzt mal versucht, das Teil in meine Definition von den <p>- Stellen einzusetzen -> immernoch rot und auch keine Veränderung im Browser.


    Gruss


    Sepp

    Peter: für Opera ist das opacity:0.75;


    Sepp: hast recht, font-background gibt es wirklich nich...
    Und warum es Scriptly wahrscheinlich rot anstreicht, hab icha ja schon geschrieben. Und welchen Browser exakt meinst du mit "nur spielen da leider wieder einmal nicht alle Browser mit " ?

    Das mit dem "nur spielen da leider wieder einmal nicht alle Browser mit " hab ich nicht geschrieben, warst so viel ich mich erinnern kann du :wink: Und was ich damit meine: in der Vorschau, die bei mir den Inet Explorer benutzt, verändert sich nichts. Das ist das Problem...
    Edit: was kann ich denn statt font-background nehmen?

    hallo,


    also "font-background" sowas gibts nicht :lol:
    Was willst du denn nun tun - einem Absatz eine Hintergrundfarbe oder eine Grafik einverleiben :?:


    Dann füge in deinen p- oder div-Tag zum Beispiel entweder ein style="background-color:#0000ff;" oder style="url(ordner/meinegrafik.jpg);" oder auch beides je nach Belieben

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!

Benutzerkonto erstellen Anmelden