Cursor-Position im Text-Eingabefeld

papillona · 1 Juni 2008

Hallo allerseits,

ich habe das Problem, dass bei meinem Kontaktformular der Cursor, wenn man mit Tab ins Textfeld springt, nicht an der allerersten Position steht sondern ungefähr in der Mitte der ersten Zeile. Das finde ich ziemlich doof. Wie kann ich denn die Cursorposition erzwingen?

Meine php-Datei sieht so aus:

PHP:

<?php
  $fehler = "";
  $name = $_POST['name'];
  $adresse = $_POST['adresse'];
  $nachricht = $_POST['nachricht'];
  if (empty($name)) $fehler .="<li>der Absendername fehlt</li>";
  if (empty($adresse)) $fehler .="<li>die Absenderadresse fehlt</li>";
  if (empty($nachricht)) $fehler .="<li>Nachricht fehlt</li>";
  if (empty($fehler)) {
    $an = "***";
    $betreff = "Nachricht via Kontaktformular";
    $from = "From: $adresse";
    mail ($an,$betreff,$nachricht,$from);
  }
  include("gesendet.html");
  
  
?>

und die HTML-Datei so:

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">
  <meta name="generator" content="PSPad editor, www.pspad.com">
  <link rel="stylesheet" type="text/css" href="style.css" >
  <link rel="shortcut icon" type="image/x-icon" href="/favicon.ico">
  <title>Klatschmohn.de.gg - Impressum</title>
  </head>
  <body>
    <div id="header"></div>

   
    
    <div id="content" style="height:400px;">
    
      </td>
      </tr>
      <tr>
      <td>
        <h2> Kontaktformular </h2>
          <form action="auswertung.php" method="post">
            <table>
              <tr>
                <td style="font-style:italic;"> Dein Name </td>
                <td> <input name="name" size="53"></td>
              </tr>
              <tr>
                <td style="font-style:italic;"> Deine E-Mail-Adresse</td>
                <td> <input name="adresse" size="53"></td>
              </tr>
              <tr>
                <td style="font-style:italic;"> Deine Nachricht </td>
                <td> <textarea cols="40" rows="10" name="nachricht">
                   </textarea>
                </td>
              </tr>
            </table>
            <input type="submit" value="Ab die Post...">
          </form> 
        </td>
        </tr>
        
            
    </div>  
  </body>
</html>

Hat jemand eine Idee, woran das liegt?

Ich hänge mal noch das Bild dran, damit ihr wisst, was ich meine.

Danke & Gruß
Papillona

Gelöschtes Mitglied 3007 · 1 Juni 2008

in dem du

Code:

<textarea cols="40" rows="10" name="nachricht">
                   </textarea>

in

Code:

<textarea cols="40" rows="10" name="nachricht"></textarea>

änderst, da du bei dem ersten ja noch haufenweise leerzeichen drin hast... -.-'

nebenbei solange es um das geht was du ausgegeben bekommst also deinen HTML code hats nix mit PHP zu tun sondern mit HTML oder CSS!

Nebenbei designt man eine form nicht mit tabellen -.-'

papillona · 1 Juni 2008

Hallo Slibbo,

danke für die Antwort.

Gruß Papillona

Efchen · 2 Juni 2008

Slibbo schrieb:
Nebenbei designt man eine form nicht mit tabellen -.-'

Ach ja, und man zeichnet einen Header auch als solchen aus (mit <h1> bis <h6>) und nicht als leeres <div>.

Aber <div>s sind halt irgendwie cool![1]

Gruß,
-Efchen

P.S.: Für Mitlesende, das war Ironie. Ein <div> ist nur zum Gruppieren mehrerer Elemente zwecks gemeinsamer Formatierung durch CSS.

papillona · 2 Juni 2008

@ Efchen: Muss ich das jetzt verstehen oder richtete sich deine Antwort nicht an mich??

Gruß P.

Efchen · 2 Juni 2008

@papillona:
Jein. Es war eine Zusatzinformation, wo Du Dir überlegen kannst, ob Du sie nutzt oder nicht.

Slibbo hat Dich ja schon darauf hingewiesen, dass man keine Tabellen benutzt, um die Optik eines Formulars zu erstellen. Man zeichnet lediglich tabellatrische Daten als Tabelle aus. Für die Optik (Layout+Design) nimmt man CSS. Formulare kann man sehr schön mit CSS gestalten.

HTML ist eine Seitenbeschreibungssprache. Man zeichnet seinen Inhalt mit solchen Tags aus, die den Inhalt am besten beschreiben. Eine Überschrift zeichnet man daher nicht mit

Code:

<div id="header"></div>

aus, noch dazu, weil dieses Element keinen Inhalt hat, aber der Name vermittelt, dass es eine Überschrift sein soll, sondern man benutzt dazu die HTML-Tags für Überschriften, z.B.:

Code:

<h1>Überschrift</h1>

Ich kann Dir gern noch mehr erzählen zu dem Thema, wenn Du nicht die Forumssuche nutzen willst, denn ich lasse mich öfters über das Thema aus.

Gruß,
-Efchen

@Corvulus: Habe ich mir genug Zeit genommen?

papillona · 2 Juni 2008

Hallo Efchen,
normalerweise habe ich meine gesamte HP mit divs strukturiert und "designed". Das Kontaktformular war meine erste "Erfahrung" mit php. Dieses Formular habe ich quasi nur aus einem Buch abgetippt. Das finetuning kommt ja noch. Ich habe mit php noch nicht sehr viel Erfahrung und dachte deshalb, dass die Cursor-Position daher rührte.

Außerdem habe ich bei meinem Code nur einen Schnipsel eingefügt. "Header" impliziert bei mir jedoch keine Überschrift sondern ein Strukturelement nach dem Motto:

Header
Menu
Content

Zumindest habe ich so meine Seite strukturiert und finde das jetzt auch nicht so dramatisch. Ich hätte das ganze auch mit 1, 2 und 3 machen können. In meinem Header ist übrigens ein Foto als Hintergrund definiert. So gesehen ist da ja doch etwas drin. Ich meine, ich hätte auch das Hintergrundbild als "richtiges Bild" mit dem <img>-Tag einfügen können. ABer letztendlich hätte ich das doch auch entweder mit einem eigenen div und dann css formatiert oder meinetwegen gleich im img-Tag (geht das überhaupt?).

Verstehe jetzt nicht ganz, wo da das Problem ist. Vielleicht müsste man die gesamte Seite sehen, um sagen zu können, ob mein "Konzept" falsch ist?

Trotzdem danke für die Hinweise.

EDIT: Ich habe gerade mal nach define: header gegoogelt. Guuut, man versteht jetzt mehr die meta-Angaben darunter. Mein Gott, über solche Dinge habe ich mir bisher keine Gedanken gemacht. Ich hab mich gefreut, dass das email-Formular an sich funktioniert! ;-)

Gruß P.

Efchen · 3 Juni 2008

papillona schrieb:
normalerweise habe ich meine gesamte HP mit divs strukturiert und "designed".

Das macht man heutzutage nicht. Das ist semantisch gesehen genauso unsinnig wie Tabellenlayouts. Wer also von Tabellenlayouts umsteigt auf div-Suppe hat nicht wirklich einen Fortschritt erzielt.
Der Sinn von HTML ist und war es eigentlich shcon immer, dem Inhalt eine Bedeutung zu geben, zu beschreiben, was der Inhalt aussagen soll. Das ging früher nicht so gut, weil es keine Sprache gab, mit der man Layout+Design machen konnte. Deswegen musste man sich in diesem Bereich auch mit HTML behelfen und ergo hat jeder damals HTML zweckentfremdet. Seit Ende des letzten Jahrtausends gibt es aber nun CSS. Man kann endlich HTML wieder zum eigentlichen Zweck benutzen und macht Layout+Design allein mit CSS. Endlich kann man Inhalt und Layout voneinander trennen, und je strikter man das tut, desto leichter wird alles, von der Erstellung einer Seite bis hin zur Wartung und zum Redesign einer ganzen Site.
Allein durch die Tatsache, dass <div> ein HTML-Element ist, weist darauf hin, dass es nur zur Strukturbeschreibung dient, nicht aber zum Design. Allein deshalb schon muss einem auffallen, dass "Seite mit div designt" gar nicht hinhauen kann (tut es auch nicht).

Das Kontaktformular war meine erste "Erfahrung" mit php.

Das Formular selbst ist HTML. Die Auswertung mit PHP hat mit alldem, was ich gerade erzähle ohnehin rein gar nichts zu tun.

"Header" impliziert bei mir jedoch keine Überschrift sondern ein Strukturelement nach dem Motto:
Header
Menu
Content

Aber Header, Menu und Content sind auch Dinge, die man semantisch sinnvoll auszeichnen kann. Ein Menu z.B. wird man nicht als <div> auszeichnen, sondern als Liste (<ul>).
Du denkst noch zu sehr in Tabellenlayouts, scheint mir. Du nutzt HTML noch nicht gemäß seiner Bestimmung, sondern versuchst immer noch mit HTML das Layout umzusetzen. Wenn Du die Arbeit mal von der anderen Seite angehst, erst den Inhalt, dann die Auszeichnung mit HTML und erst danach das Layout, dann wirst Du feststellen, dass Dein Header tatsächlich doch eine Überschrift ist. Denn Du hast da wahrschienlich ein Banner oder Logo. Das sollte dann dementsprechend, da es ja Content ist, auch per <img>-Tag eingebunden werden, das wiederum wunderbar als <h1> ausgezeichnet werden kann. Wenn es nur ein Contentloses Banner ist, ohne jegliche wichtige Information, dann bindet man es als Hintergrundgrafik ein, und wenn es dann noch einen Großteil der Seite einnimmt, ohne dass es notwendig wäre, dann könnte ich mir auch eine Auszeichnung mit einem <div> vorstellen, aber ich halte das für sehr unwahrscheinlich. Ein Banner und/oder Logo ist eine klassische Überschrift, eine Seiten- oder gar Siteüberschrift.

Auszeichnung mit HTML bedeutet, dass man rein anhand der HTML-Datei den kompletten Inhalt der Seite erfassen und verstehen kann. Alles, was wichtig ist, was Content ist, muss in der HTML-Datei stehen, denn das ist z.B. die einzige Datei, die von Suchmaschinen gelesen wird. Und Du musst zugeben, wenn Du eine Seite nur anhand des HTML-Codes lesen solltest, und Du triffst auf ein allgemeines Block-Element ohne Inhalt, dann fragst Du Dich auch, ob da nicht eigentlich Content hätte drin sein sollen.

Zumindest habe ich so meine Seite strukturiert und finde das jetzt auch nicht so dramatisch.

Nein, es ist nicht dramatisch. Aber es geht besser, sinnvoller, und eigentlich auch leichter und logischer. divs wie mit einem Salzstreuer in eine Seite zu packen hat IMHO nichts mit Logik zu tun.

In meinem Header ist übrigens ein Foto als Hintergrund definiert. So gesehen ist da ja doch etwas drin.

Nein. Schau Dir den HTML-Code an. Es ist nichts drin. Definitiv. Wenn etwas "drin" wäre, müsste man das im HTML-Code sehen. Alles, was im Stylesheet steht, ist nur unwichtiges Beiwerki, nur Design.

Ich meine, ich hätte auch das Hintergrundbild als "richtiges Bild" mit dem <img>-Tag einfügen können.

Nur, wenn das Bild mehr als reine Zierde ist, also einen Text (Überschrift) enthält. Ansonsten ist es tatsächlich nur Beiwerk.

ABer letztendlich hätte ich das doch auch entweder mit einem eigenen div und dann css formatiert oder meinetwegen gleich im img-Tag (geht das überhaupt?).

Warum soll das nicht gehen? Ein Punkt für Anfänger im CSS-Laoyut ist, dass sie Schwierigkeiten damit haben, zu verstehen, dass man ein Element nicht in ein <div> packen muss, um es zu formatieren. Man kann es auch direkt formatieren! Es gibt eigentlich keinen logischen Grund, das anzuzweifeln, dass das geht.
Letztendlich hättest Du Dein <img> sicher nicht mit einem <div> ausgezeichnet, sondern wenn das Bild nicht nur Zierde ist, und eine Überschrift enthält, dann hättest Du es mit <h1> ausgezeichnet.

Verstehe jetzt nicht ganz, wo da das Problem ist. Vielleicht müsste man die gesamte Seite sehen, um sagen zu können, ob mein "Konzept" falsch ist?

Es gibt kein Problem, ich versuche Dir nur zu erklären, was HTML ist, und wie man es heutzutage, dank CSS, endlich benutzen kann, und wie die größtmögliche Benutzbarkeit dabei heraus kommt.

Trotzdem danke für die Hinweise.

Gern geschehen, wenn sich jemand darüber Gedanken macht.

EDIT: Ich habe gerade mal nach define: header gegoogelt. Guuut, man versteht jetzt mehr die meta-Angaben darunter. Mein Gott, über solche Dinge habe ich mir bisher keine Gedanken gemacht.

Das ist es eben. Die wenigsten machen sich ernste Gedanken, was sie da tun, die wenigsten wissen, was sie anrichten, was ihre Arbeit für Effekte haben können. Deswegen versuche ich, diese Leute aufzuklären. :-)
Letztendlich wird die Arbeit deutlich leichter, hat man das kapiert, was HTML ist. Und die Seiten werden leichter benutzbar, besser für Suchmaschinen zu lesen und sie sind barrierefrei! Ohne großen Aufwand!

Viele Grüße,
-Efchen

papillona · 3 Juni 2008

Moin Efchen,

danke erstmal für die ausschweifenden Erklärungen!
Aber jetzt bin ich total verwirrt und kann mir gerade nicht vorstellen, wie ich das nun umsetzen soll, wobei es immer noch eine separate CSS-Datei geben soll?

Also würde ich das Menü als Liste definieren? Öhm hab ich auch gemacht, fällt mir da ein. Aber ich frage mich, wie ich dann den eigentlichen Content meiner Website rechts daneben ausgeben lasse. Muss ich dann um die Liste ein float machen oder wie?? Ok, und meinen Banner aus dem Head füge ich also einfach als <img> ein. Quasi so:

<img src="..." alt="..." style="...">
Aber muss ich dann nicht die CSS-Anweisungen direkt in dieses Tag schreiben? Wenn ich denn in der CSS-Datei quasi eine allgemeine Angabe zu img machen würde, würden ja dann alle Bilder bspw. in der entsprechenden Größe ausgegeben werden.

Schreibt man denn nun CSS direkt mit in die HTML-Datei rein oder eben doch in eine eigene Datei?? Man man man... *kopfschüttel* Da ist man als Anfänger(in) glücklich, dass das ganze einigermaßen gescheit aussieht und der html- und css-Validator 0 Fehler ausspuckt und dann das... Das wirft einen in seinem Selbstbewusstsein, schon so gut voran gekommen zu sein, wieder um Lichtjahre zurück, finde ich. :???: *seufz*

Gruß Papillona

Efchen · 3 Juni 2008

papillona schrieb:
Aber jetzt bin ich total verwirrt

Nichts liegt mir ferner, als jemanden zu verwirren. Aber wie es am Anfang eines Lernprozesses nunmal ist, kriegt man viel um die Ohren gehauen und kann nur mit wenig etwas anfangen. Man muss halt kleine Schritte gehen.

Also würde ich das Menü als Liste definieren? Öhm hab ich auch gemacht, fällt mir da ein. Aber ich frage mich, wie ich dann den eigentlichen Content meiner Website rechts daneben ausgeben lasse. Muss ich dann um die Liste ein float machen oder wie??

Ja, ein Menü zeichnet man für gewöhnlich als Liste aus, weil eine Liste das ist, was ein Menü am besten beschreibt. Ein eigenes Tag für Menüs gibt es bislang noch nicht in (X)HTML. Wie das dann am Bildschirm dargestellt wird, ist für die bloße Auszeichnung zunächst völlig irrelevant.

Wenn Du nun Block-Elemente nebeneinander ausgeben lassen willst, musst Du eines davon floaten und ihm eine Breite mitgeben. Dann wird das gefloatete Element aus dem Textfluss genommen und das nachfolgende Element "unterhalb" des gefloateten Elements gelegt, an genau die Position, an der auch das gefloatete Element steht. Um das besser zu verstehen, lege Dir zwei Block-Elemente an, gib dem einen ein float und gib dann beiden einen Rahmen oder eine Hintergrundfarbe. Dann siehst Du es.

Ok, und meinen Banner aus dem Head füge ich also einfach als <img> ein. Quasi so: <img src="..." alt="..." style="...">

Ich kenne Dein Banner nicht. Ich habe nur theoretisch gesprochen. Es gibt Banner, die man als Hintergrundgrafik einfügt, und solche, die man als <img> einfügt. Es kommt schlicht darauf an, ob das Banner Content enthält oder ob es nur zur Zierde da ist. Content kommt in die HTML-Datei, Zierde ins Stylesheet.

Aber muss ich dann nicht die CSS-Anweisungen direkt in dieses Tag schreiben? Wenn ich denn in der CSS-Datei quasi eine allgemeine Angabe zu img machen würde, würden ja dann alle Bilder bspw. in der entsprechenden Größe ausgegeben werden.

Zur "Trennung von Inhalt und Layout" gehört auch, dass man alle CSS-Angaben immer in ein externes Stylesheet schreibt. Natürlich gibt es drei Möglichkeiten, Styles zu schreiben, aber nur, wenn man alles ins externe Stylesheet schreibt, hat man eine echte Trennung von Inhalt und Layout.
Das Problem das Du hast ist, dass Du anscheinend nicht weißt, was Klassen und IDs sind. Du kannst Elementen eine eindeutige ID zuweisen, oder eine Klasse (die im Gegensatz zur ID mehrmals vorkommen kann). Das sieht in HTML dann so aus:

Code:

<h1 id="Header">
<img class="klasse1" ... />
<p class="klasse1">

Über CSS kannst Du dann diese IDs bzw. Klassen selektieren. Eine ID wird immer mit einem "#" davor, eine Klasse mit einem "." davor angesprochen, also so:

Code:

h1#Header { font-size:1.5em; }
.klasse1 { float:left; }
h2#Header { /* ist im HTML-Code nicht definiert */ }
p#klasse1  { /* Ist auch nicht definiert, die ID "klasse1" }

Die ersten beiden Zeilen passen zum HTML-Code darüber, die beiden letzten sind nirgendwo definiert, haben also keine Auswirkung.

Schreibt man denn nun CSS direkt mit in die HTML-Datei rein oder eben doch in eine eigene Datei??

Wenn Du alles in ein externes Stylesheet schreibst, hat das den Vorteil, dass alle Deine Angaben zu Layout und Design in einer Datei (oder auch mehreren) stehen, die dann nach einmaligem Laden im Browsercache abgelegt werden und somit nicht mehr vom Server geladen werden müssen. Außerdem kannst Du, wenn Du alles in Stylesheets hast, jederzeit das Aussehen ALLER Seiten auf einmal ändern, indem Du nur eine Datei (das Stylesheet) änderst. So kannst Du einen kompletten Redesign machen, indem Du nur das Stylesheet austauschst. Siehe dazu auch css Zen Garden: The Beauty in CSS Design, das ist ein gutes Beispiel dafür, alle diese hunderte von Seiten haben den SELBEN HTML-Code, nur jeweils ein anderes Stylesheet.

Man man man... *kopfschüttel* Da ist man als Anfänger(in) glücklich, dass das ganze einigermaßen gescheit aussieht und der html- und css-Validator 0 Fehler ausspuckt und dann das... Das wirft einen in seinem Selbstbewusstsein, schon so gut voran gekommen zu sein, wieder um Lichtjahre zurück, finde ich. :???: *seufz*

Lass DIch doch nicht so schnell entmutigen. Webseiten erstellen ist ein Handwerk wie jedes andere auch. Es ist zwar richtig, dass man schnell einsteigen kann, und die Mehrheit der Menschen damit eher was anfangen kann, als mit anderen handwerklichen Aufgaben, Tapezieren, Dachdecken, Sanitärinstallationen usw. Aber Tatsache ist halt auch, dass eine Website normal nicht nur für sich selbst ist, sondern für andere. Und daher sollte das Ziel auch sein, eine möglichst hohe Benutzbarkeit zu erreichen.

Das, was ich Dir jetzt hier mitgeteilt habe, sind die Vorgehensweisen, wenn man es perfekt machen will. Wenn Du z.B. kein externes Stylesheet machst, kannst Du trotzdem ein Redesign deiner Site machen. Das dauert dann halt nur sagen wir 3 Wochen im Gegensatz zu 2 Stunden, wenn Du alles in einem Stylesheet hast.

Wenn Du allerdings diese Vorgehensweisen schon jetzt lernst, baust Du schon jetzt qualitativ hochwertigere Sites und das kann für Dich und für Deine Besucher nur Vorteile bedeuten!

Eine Basis aus validen Code ist schonmal gut. Denn sonst ist auch die Darstellung am Ende reine Glücksache. Semantisch korrekt sollte der Code sein, damit Suchmaschinen ihn sinnvoll interpretieren können, und er barrierefrei ist. Ein semantisch guter Code kann auch von Clients interpretiert werden, die nichts visuell darstellen. Und die von mir beschriebene Vorgehensweise hilft Dir dabei, Deinen Arbeitsaufwand zu minimieren und das Ergebnis zu optimieren.

Ich wollte Dich weder deprimieren, noch Dir Dein Selbstbewusstsein rauben.
Ich finde es aber gut, dass Du Dich dafür zu interessieren scheinst und Dir Gedanken machst, das sind gute Voraussetzungen, dass Du das verstehst und anzuwenden lernen kannst. Manch anderen interessiert das nicht die Bohne. Also auch mal ein Lob für Dein Interesse! :-)

Ich beantworte gerne auch alle weiteren Fragen!
-Efchen

papillona · 3 Juni 2008

Hi Efchen,

Efchen schrieb:
Also auch mal ein Lob für Dein Interesse!

;JumpDanke!! ;Jump

Das Prinzip mit id bzw. class und der externen css-Datei habe ich bereits angewendet. Mir war gar nicht bewusst, dass ich das für jedes html-tag anwenden kann. Ich dachte immer nur für div. Deshalb habe ich natürlich alles mit div gemacht. Aber jetzt, wie du mir das erklärt hast, macht es Sinn. Und ich werde, wenn ich wieder genügend Zeit habe, das so umsetzen.
Naja, der Banner dient gleichzeitig als Kopf / Überschrift... ach keine Ahnung... Quasi so, wie hier im Forum ganz oben der Kopf <html.de> ist, bloß ohne Verlinkung ist meiner. Also ich habe ein Foto und auf diesem habe ich einen Schriftzug mit dem Titel meiner Website. Schriftzug+Foto=1Grafik. Also ist es jetzt Content? :mrgreen:
Ich möchte meine Seite so "perfekt wie möglich" machen, weil es eben auch eine - wenn nur kleine - Referenz für potentielle Arbeitgeber sein könnte. Und da möchte ich auch einfach, wenn sich das einer vom Fach ansieht,der eventuell eben auch hinter die Kulissen schaut, dass das alles nach fortgeschrittenem Status ausschaut. ;)
HTML, CSS, PHP, Javascript => was man eben für Webseiten aus meinem Fachgebiet so braucht, sind zwar keine Spezialgebiete von mir, aber es steigert natürlich den Marktwert, wenn man neben seiner eigentlichen Berufung diese auch noch beherrscht und damit die eigentliche Arbeit effektiver gestalten kann. Deshalb bin ich schon sehr motiviert, das alles RICHTIG zu lernen. In der Uni bekommt man eben nur immer Randbereiche vermittelt wie bspw. id bzw class für div.
So, schönen Dank jedenfalls für die vielen Erklärungen. :-D

EDIT: ich wollte jetzt gleich mal dieses probieren:

<h1 id="Header">
<img class="klasse1" ... />
<p class="klasse1">

h1#Header { font-size:1.5em; }
.klasse1 { float:left; }
h2#Header { /* ist im HTML-Code nicht definiert */ }
p#klasse1 { /* Ist auch nicht definiert, die ID "klasse1" }

Das sieht im konkreten Bsp so aus:

Code:

<html>
  <head>
    <title>Website-Titel</title>
        <link rel="stylesheet" type="text/css" href="style.css">
  </head>
  <body>
    <form id="form" name="mapserv" method="GET" action="/cgi-bin/mapserv">
      <input type="hidden" name="map" value="[map]"/>
      <input type="hidden" name="imgext" value="[mapext]"/>
<!--      <input type="hidden" name="imgxy" value="300 300">-->
          <input type="image" name="img" src="[img]"/> <br>
           <!-- The scale bar-->
          <img src="[scalebar]" alt="Scale Bar" align="left" id="scalebar">          </form>
  </body>
</html>

/*CSS Stylesheet*/

Code:

body
{
background-color:#FFFFFF;
font-family:Arial,sans-serif;
font-size:9pt;
font-weight:normal;
}

h1 { font-size:24pt; margin:9px; }
h2 { font-size:14pt; margin:9px; font-weight:normal; }
h3 { font-size:12pt; margin:9px; font-weight:normal; }

input#map {
border:2px solid red;
float:right;
}

form#form {
border:2px solid green;
}

img#scalebar {
border:solid 2px red;
}

Aber das funzt nicht. :-( Wieso nicht?

BTW: soll man das Thema eventuell in das Unterforum CSS verschieben??

LG Papillona

Efchen · 3 Juni 2008

papillona schrieb:
Mir war gar nicht bewusst, dass ich das für jedes html-tag anwenden kann. Ich dachte immer nur für div.

Ja, es ist weit verbreitet, dass <div> irgendeine Art "Zaubertag" ist, ohne das man keine Seite erstellen kann. Genau das Gegenteil ist der Fall. Man kann problemlos auch Seiten ohne <div> machen. Viele denken heute ja, dass "Css-Layout" bedeutet, man mache sein Layout mt <div>. Aber das ist Quatsch.

Grundsätzlich kannst Du erstmal davon ausgehen, dass Du jede CSS-Eigenschaft auf jedes Tag anwenden kannst (gleiches gilt natürlich auch für die Verwendung von ID und CLASS, auch dem <body> kannst Du eine Klasse geben), Ausnahmen bestätigen die Regel. Dass ein <address> nichts mit list-style-type anfangen kann, versteht sich von selbst.

Deshalb habe ich natürlich alles mit div gemacht. Aber jetzt, wie du mir das erklärt hast, macht es Sinn. Und ich werde, wenn ich wieder genügend Zeit habe, das so umsetzen.

Das freut mich zu hören. Weniger, dass Du es machst, wie ich sage, sondern, dass Du es wohl begriffen hast! Semantische Auszeichnung. Dem Inhalt eine Bedeutung geben. Das ist HTML. Das ist das 21. Jahrhundert!

Also ich habe ein Foto und auf diesem habe ich einen Schriftzug mit dem Titel meiner Website. Schriftzug+Foto=1Grafik. Also ist es jetzt Content? :mrgreen:

Du sagst es ja selber: "Titel meiner Website". Gibt es etwas anderes, das garantierter eine Überschrift ist? Oder ist der Titel einer Website nur verzierendes Beiwerk? Nein, natürlich ist es Content!

Code:

<h1><img src="banner.jpg" alt="Der Text aus der Grafik hierhin" /></h1>

Ich möchte meine Seite so "perfekt wie möglich" machen, weil es eben auch eine - wenn nur kleine - Referenz für potentielle Arbeitgeber sein könnte. Und da möchte ich auch einfach, wenn sich das einer vom Fach ansieht,der eventuell eben auch hinter die Kulissen schaut, dass das alles nach fortgeschrittenem Status ausschaut.

Dann denke ich, dass Du mit meinen Tipps sehr gut fährst.

So, schönen Dank jedenfalls für die vielen Erklärungen.

Gern geschehen!

<img src="[scalebar]" alt="Scale Bar" align="left" id="scalebar">

Du solltest auf veraltete HTML-Attribute, die nichts mit der Semantik, sondern mit dem Layout zu tun haben, verzichten. Und stattdessen CSS anwenden. Ich meine hier "align".

h1 { font-size:24pt; margin:9px; }

Du solltest nicht "pt" als Einheit nehmen, denn das ist eine Schriftgröße für den Druck.
Für den Bildschirm würde sich "px" anbieten, da aber der IE Schrift mit der Einheit nicht mehr skaliert, sollte man stattdessen am besten "em" verwenden.

input#map

Es gibt kein <input>-Element mit der ID "map" in Deinem Code.

Aber das funzt nicht. :-( Wieso nicht?

Was "funzt" denn nicht? Einen Fehler konnte ich auf Anhieb entdecken, die fehlende ID.
Gruß,
-Efchen

papillona · 3 Juni 2008

Hallo Efchen,

dass man CSS für das Style benutzt und HTML für die Semantik war im Grunde klar. Das sagt ja auch schon CSS an sich ausgeschrieben. ;) Wie gesagt, mir wurde das so gesagt, dass man mit CSS designed und quasi dafür die divs benötigt. Aber gut, jetzt ist es ja klar!

Es funktioniert auch nicht bei der Scalebar. Und da habe ich ja eine id vergeben. Oder? Also daran liegt es jetzt generell nicht.

Es kommt keine Fehlermeldung. Es kommt einfach das Bild als wenn es keine CSS-Datei gäbe. Gut, die alten Anweisung mit align etc habe ich jetzt noch nicht entfernt, weil ich erstmal nur das grundsätzlich austesten wollte mit einem roten Rahmen. Ich muss mich ja peux a peux vortasten. :mrgreen:

Code:

<h1><img src="banner.jpg" alt="Der Text aus der Grafik hierhin" /></h1>

Wenn ich meinen Banner so mache, kann ich dann die Schrift auch so toll formatieren? Ich habe das ja mit einem anderen Programm erstellt und die Schrift ist da nicht gerade auf einer Linie sondern eben so in einer Welle, wenn du verstehst wie ich meine? Das ist so in der Art wie in MS Word das WortArt...

LG Papillona

Efchen · 3 Juni 2008

papillona schrieb:
Es funktioniert auch nicht bei der Scalebar. Und da habe ich ja eine id vergeben. Oder? Also daran liegt es jetzt generell nicht.

Ich weiß nur nicht, was nicht funktioniert, weil ich nicht weiß, was Du vor hast.
Du hast ein Frmular, zwei versteckte Eingabefelder, ein Image als Eingabefeld, das ist da, und ein normales Image, das nicht angezeigt werden kann, weil es wahrscheinlich die Datei "[scalebar]" nicht gibt.

Es kommt einfach das Bild als wenn es keine CSS-Datei gäbe.

Naja, dass das Bild kommt, liegt ja auch primär erstmal an HTML.

Code:

<h1><img src="banner.jpg" alt="Der Text aus der Grafik hierhin" /></h1>

Wenn ich meinen Banner so mache, kann ich dann die Schrift auch so toll formatieren? Ich habe das ja mit einem anderen Programm erstellt und die Schrift ist da nicht gerade auf einer Linie sondern eben so in einer Welle, wenn du verstehst wie ich meine? Das ist so in der Art wie in MS Word das WortArt.

Nein, das geht natürlich nur in der Grafik. Aber der Text im alt-Attribut sorgt dafür, dass der Text wenigstens angezeigt wird, wenn der Browser keine Grafiken darstellt. Du kannst den Text mit den herkömmlichen Methoden natürlich schon formatieren, aber keine Wellen oder sowas da rein machen. Du kannst den Text aber natürlich größer machen, Du kannst ihn fett oder kursiv machen, einfärben, was auch immer. Solange das Image dargestellt wird, siehst Du davon natürlich nichts.

Gruß,
-Efchen

Gelöschtes Mitglied 3007 · 3 Juni 2008

Du kannst Text, wie du sie mit WordArt bekommen würdest aber auch in PHP erstellen mit den PHP: Image Functions - Manual

Efchen · 3 Juni 2008

Dann ist es aber auch nur ein Image und das Problem mit der Formatierung des alt-Textes ändert sich dadurch nicht.

papillona · 3 Juni 2008

Also, was ich machen will, ist folgendes:
Ich habe den UMN-Mapserver laufen, dieser generiert Grafiken (==> [scalebar] ist die Maßstabsleiste). So und diese einzelnen Grafiken muss ich ja dann auch irgendwie noch mit CSS "hübsch" machen und in Form bringen. wenn ich zB in das <img>-Tag von scalebar die style-Anweisung direkt schreibe, funktioniert es auch. Eben nur nicht, wenn ich es über die Referenz zur CSS-Datei versuche. Und die scalebar wird ja auf jeden Fall angezeigt, eben nur nicht der verdammte rote Rahmen. :-( Also, die Datei ist also vorhanden. Nicht, dass es mir um den roten Rahmen ginge. Aber ich möchte ja letztlich eine gescheit strukturierte Website haben à la:

Code:

------------------------------------------------------------------------
|                                       |                              |
|                                       |             Legende          |
|                          Karte        |         Maßstabsleiste       |
|                                       |                              |
|                                       |                              |
|                                       |                              |
|                                       |                              |
|                                       |                              |
------------------------------------------------------------------------

So, und wenn ich nach Efchens Tips gehe, dass ich das nicht alles noch extra mit divs umschließen soll, muss ich ja auf die einzelnen Elemente ids vergeben, über die ich sie dann aus der CSS-datei quasi "ansteuern" kann. Und ohne CSS sieht die Seite so aus bzw. mit dem Versuch über die einzelnen ids:

Code:

-----------------------------------------
|                                       |        
|                                       |       
|                          Karte        |     
|                                       |      
|                                       |      
|                                       |                             
----------------------------------------
|Legende|
|Maßstabsleiste|

Und das ist doch blöd!

Zum Banner: naja, ich glob, ich lass das so mit Bild + Schrift in einer Grafik, auch wenn das jetzt vielleicht nicht 100%ig in das Konzept HTML=Inhalt, CSS=Design passen sollte. jetzt auch noch großartig mit php anzufangen, nur um so ne *blöde* Überschrift wellig zu machen, ooh neee... Dafür habe ich dann doch zu viel wichtigere Sachen zu tun.;-) Trotzdem danke für den Tipp. Sollte ich wider Erwarten doch zu viel Freizeit haben, probiere ich es eventuell mal aus.

LG Papillona

Efchen · 3 Juni 2008

papillona schrieb:
Also, was ich machen will, ist folgendes...

Also ICH bin jetzt an einer Stelle, an der ich nen Link brauche.

Zum Banner: naja, ich glob, ich lass das so mit Bild + Schrift in einer Grafik, auch wenn das jetzt vielleicht nicht 100%ig in das Konzept HTML=Inhalt, CSS=Design passen sollte.

Banner mit Text in der Grafik ist schon okay, das hat auch nichts mit dem "Konzept" zu tun. Da stellt sich nur die Frage, Hintergrundgrafik (Beiwerk) oder img-Tag (Inhalt), und die haben wir glaube ich beantwortet. Der Tipp mit PHP ist zwar sicher nicht falsch, aber hier wohl fehl am Platze, da Du die Grafik ja schon hast.

Schönen Abend,
-Efchen

papillona · 3 Juni 2008

Efchen schrieb:
Also ICH bin jetzt an einer Stelle, an der ich nen Link brauche.

*humpf* würde ich da mal sagen. WEIL ich dir dazu leider keinen Link schicken kann. DENN das Projekt ist ein *geheimes* Projekt :mrgreen: (also Betriebsgeheimnis). Und ich selber habe keinen privaten Webserver, auf dem ich ggf. eine solche Applikation laufen lassen könnte. Wenn mein Mapserver jetzt nicht grad am Abkacken wäre (ich glob der hat die Schnauze voll vom vielen HTML- und CSS-Gedönse

), dann könnte ich einen Screenshot von der Seite machen. Sollte er morgen wieder laufen, dann werde ich mal sehen, dass ich einen Screenshot einfüge. Das geht dann aber erst morgen abend von daheim aus...

Trotzdem schon mal echt vielen vielen Dank für die Geduld! ;Jump

Also bis morgen Papillona

Efchen · 4 Juni 2008

DANN tut es mir leid. Ich denke auch nicht, dass mir ein Screenshot was bringen würde.
Irgendwo scheint da ja noch ein zweites Stylesheet zu existieren, was nach Deinem Stylesheet ausgeführt wird, also Deine Einstellungen wieder überschreibt. Nach sowas kann man am besten am lebenden Patienten suchen :-)

Ich kann Dir nur noch Firebug, ein Plugin für den Firefox empfehlen, mit dem kann man eine ganze Menge tolle Sachen anstellen, vielleicht bringt Dich das weiter.

Gruß,
-Efchen

Cursor-Position im Text-Eingabefeld

Neues Mitglied

Gelöschtes Mitglied 3007

Guest

Neues Mitglied

Efchen

Guest

Neues Mitglied

Efchen

Guest

Neues Mitglied

Efchen

Guest

Neues Mitglied

Efchen

Guest

Neues Mitglied

Efchen

Guest

Neues Mitglied

Efchen

Guest

Gelöschtes Mitglied 3007

Guest

Efchen

Guest

Neues Mitglied

Efchen

Guest

Neues Mitglied

Efchen

Guest