So habe mal beschlossen mich ein bissle in der Welt des html rumzzstöbern.

Habe meine Tuts von der Seite http://www.planethtml.de
Anfangs hat ja auch alles gut funktioniert, aber leider komme ich jetzt nicht mehr weiter und bei den tut´s steht da auch nichts von.

Also mein Problem liegt bei diesem Satz:

<center><span style="color: #ffffff;"> <b> Hy ich heiße </b></span></center>

Das *Hy ich heiße* sollte ja eigentlich ganz in der Mitte sitzen leider tut es das bei mir nicht sondern sitzt ganz Links genauso sollte die Schrift fett und weiß sein das wird aber auch nicht gemacht. Meine Befehle werden also vollkommen ignoriert.

Worin liegt mein Fehler??

Habe es auch schon mit einem anderem Befehl probiert den Satz in die mitte zu bekommen mit.

<div align="center"><span style="color: #ffffff;"> <b> Hy ich heiße </b></div>

Quellcode:<div style="margin: 0px auto; color: #FFFFFF; font-weight: bold;">Hi, ich hei&szlig;e</div> Fang bloß nicht an mit HTML die Sachen zu auszurichten und zu stylen. HTML ist nicht dafür zuständig, dafür wird CSS genutzt. Und zwar komplett.
Am besten natürlich ausgelagert und nur per id oder class referenziert, aber hauptsache jegliche graphische Aufbereitung mit CSS. Dafür hast du ja bei u.g. Seite eine (nahezu) komplette Referenz. Lern es besser gleich richtig, anstatt dass du dich später damit rumschlagen musst dich irgendwie umzugewöhnen.

http://de.selfhtml.org
http://www.css4you.de

sind deine Freunde.

Btw: falsches Board, das gehört ins Coding.

Sorry war wohl etwas zu schnell im Thema erstellen.
Wollte halt erst einmal anfangen mit html war der meinung das es für den anfang das beste ist!

Was für Programme sollte ich mir denn noch zulegen?
Sollten nicht grade alzuviel kosten am besten wären natürlich freeware progamme.

Aber würde dennoch gerne wissen was ich im oberen Code falsch gemacht habe!

MFG Delta

Bei html und css handelt reicht notepad. Wenn du mehr willst solltest du dir Adobe Dreamweaver anschaun. Ansonsten such einfach in Google.

www.the-crow.at - meine persönliche Website | TibiaGerman | Twitter | Wiaschtlsiada

Also ich persönlich arbeite unter Windows mit dem Notepad ;)
Programme brauchst du aber wirklich keine, zumindest, wenn du es ernst meinst.
Wenn du wirklich was lernen möchtest, dann soltest du wie gesagt einen einfachen Texteditor benutzen.

Im oberen Code ist eigentlich nichts direkt "falsch", aber wenn du es ordentlich machen willst, dann ist das die falsche Variante. Arbeite einfach mal das oben genannte durch und du wirst selber sehen...

Website

Es geht einfach um die Trennung Inhalt <~> Aussehen, sollte man so wenig wie möglich mischen da es nur Vorteile mit sich bringt die Sachen zu trennen.

Dreamweaver... mit einem ordentlichen Texteditor mit Syntax-Highlighting & Co kommt man wesentlich weiter. Es gibt eine Reihe nützlicher Firefox-Plugins die einen auf der Fehlersuche unterstützen (ColorZilla, (Firebug), Web Developer Toolbar, HTML Validator, ... ).

O o
/¯¯/_o___o___o___o____o__
\__\¯¯o¯¯¯o¯¯¯¯¯¯o¯¯¯¯¯¯o
i'm doctoroctogonnafuckinggonnapus blaaaaaaaaaaargggggg-

Ich kann Notepad++ wärmstens empfehlen (Open Source, Syntaxhighlighting und das ganze Zeug was man gerne hat). Zur besseren Anschaulichkeit war ich so frei gleich mal auf die Screenshotsseite zu verlinken.

Was immer auch geschieht: Nie sollt Ihr so tief sinken, von dem Kakao, durch den man Euch zieht, auch noch zu trinken! -- Erich Kästner

@LeJean
Habe es jetzt mal mit deinem Code Probiert leider klappt es da auch nicht wahrscheinlich vorher schon irgendein fehler gemacht.
Doch wenn ich mein Code hinter deinem setzte dann funktionniert meiner und deiner bleibt Links oben im Eck.

@rawe
Ok das habe ich jetzt nicht ganz kapiert
vll. weis ich das wenn ich die seiten mal durchgelesen habe. aber sind ja extrem viele.

Lohnt sich das auch die seiten durchzulesen wo erklärt wirt was html, php, Javascript ist und so? Oder versteht man das nachher eh wenn man das mal ausprobiert hat?
PS: Danke für eure Antworten

Der Code von Jean funktioniert nicht, weil er zwar standardkonform ist, aber sich die Browser nicht so ganz dran halten. Mit einem Übergeordneten Div-container mit text-align: center sollte es klappen.

Und ja, du solltest dir die ganzen Einleitungen durchlesen.

Edit: Mir ist grad aufgefallen, dass ich doch sehr viele Programme benutze: Browser...

Website

und immer in verschiedenen browsern gleichzeitig angucken, was du verzapfst.
firefox und IE stellen doch viele sachen sehr sehr unterschiedlich dar, das später zu korrigieren dauert lange und kann durch paralleles begutachten vermieden werden.

"selbermachen rockt am meisten :D" - -LeJean-

Ja, Notepad rult. HTML-Editoren mit farbigen Tags und foo sind doch für Pussies. X-D

Es gibt 2 Möglichkeiten, eine Kristallkugel zu benutzen:
a) um damit Spekulationen über ein Problem eines Users zu machen und
b) um sie einem besonders unkooperativen User über den Schädel zu ziehen.
- bloggt jetzt auch selbst auf Sclavia.de

Mir ist bei Editoren immer wichtig, dass es ein ordentliches Syntax-Highlight und Zeilennummern gibt. Alles andere ist Ansichtssache. Aber sowas wie Dreamweaver ist mMn unnütz, das ist ja fast nur ein aufpoliertes Frontpage.
Wer seinen Code im Griff haben will und die Übersicht behalten möchte, der schreibt alles selber. Bei Grafiken die du evtl. erstellen möchtest kannst du ja auf Gimp und Inkscape zurückgreifen. Vergiss Paint!

Sehr hilfreich sind solche Dinge wie die Web-Developer Toolbar für den Firefox.

Dass mein Code nicht geht mag daran liegen, dass das Div keine Breitenangabe erhalten hat, was es manchen Browsern schwer macht das Teil mittig zu positionieren. An sich klappt das aber nach dem Schema.

So gehts:
Quellcode:<div style="width: 200px; margin: 0px auto; color: #FFF; font-weight: bold;">Hi, ich heiße</div> (der Farbcode mit nur 3 Stellen ist übrigens auch richtig, bevor jemand schreit)
Und vergiss irgendwelche übergeordneten Div-Container mit text-align: center.. (Vererbung etc.)

Wenn du übrigens auch mit PHP anfangen willst, dann empfehle ich dir das PHP-Plugin für Eclipse. Gibts beides kostenlos. Die Eclipse-Umgebung mag zwar für Einsteiger etwas überpowert erscheinen, aber man lernt schnell die Vorzüge zu schätzen. Funktionsübersichten sind wichtig (v.a. bei objektorientierter Programmierung), einstellbare Tabulatortiefe, einstellbare Syntaxhighlightfarben, Code-Completion (wie bei Eclipse auf Strg+Leertaste, bzw. einfach durch Auswahl eines Vorschlags) und vor allem die parallele Verwaltung von mehreren Projekten. Nett ist auch eine SVN-Erweiterung, aber das braucht man eigentlich nicht sofort.

Am besten liest du dir mal die Definitionen der verschiedenen Sprachen bei Wiki oder so durch, musst ja nicht gleich Tutorials durchackern. Dann siehst du schon was du wofür brauchst und kannst abschätzen was inwiefern miteinander zusammenhängt und was man wie nutzt.

Viel Spaß weiterhin :)

Edit:
Etwas Theorie bitte vorher, dann weisst du was du machst und wovon du sprichst ;)

http://de.selfhtml.org
http://www.css4you.de
http://de.wikipedia.org/wiki/Cascading_Style_Sheets

http://de.wikipedia.org/wiki/Php
http://www.php.net (!!)
http://de.wikipedia.org/wiki/Javascript

http://www.eclipse.org/
http://www.phpeclipse.de/
http://de.wikipedia.org/wiki/Subversion_%28Software%29

Zitat:

LeJean postete

Dass mein Code nicht geht mag daran liegen, dass das Div keine Breitenangabe erhalten hat, was es manchen Browsern schwer macht das Teil mittig zu positionieren. An sich klappt das aber nach dem Schema.

So gehts:
Quellcode:<div style="width: 200px; margin: 0px auto; color: #FFF; font-weight: bold;">Hi, ich heiße</div> (der Farbcode mit nur 3 Stellen ist übrigens auch richtig, bevor jemand schreit)
Und vergiss irgendwelche übergeordneten Div-Container mit text-align: center.. (Vererbung etc.)

So müsste es sein:

Quellcode:<div style="text-align:center; color:white; font-weight: bold;">Hi, ich heiße</div> Wobei ein Block-Element bspw. ein ganzer Div-Container mit
margin:auto; zentriert wird.

Die 0px bei 'Margin: 0px auto;' sind nebenbei auch sinnlos, da mit dem Befehl 'auto' schon angegeben wird das die Außenabstände gleichgroß sein sollen.

ich dächte aber, dass es zu anzeigefehlern ohne die "0px" kommt/kommen kann.

"selbermachen rockt am meisten :D" - -LeJean-

margin: 0px auto; ist überhaupt nicht sinnlos...
der erste Wert gibt die vertikalen Werte an und der zweite die horizontalen. Es wäre also das selbe wie margin: 0px auto 0px auto;

Das System braucht man zwar nicht anzuwenden, es wäre dennoch sinnvoll, es zu verstehen, wenn man Kritik dagegen aufbringt...

Edit: Man könnte die Angabe "0px" auf "0" reduzieren, da bei 0 ja egal ist, ob Prozent oder Pixel oder sonstwas... aber das nur nebenbei ;)

Website

Ertappt...ich verstehe das System nicht...

margin:auto; wirkt sich sowieso nur auf die Horizontale aus...zumindest nahm ich das so war.

Zitat:

pogomeal postete
Wobei ein Block-Element bspw. ein ganzer Div-Container mit
margin:auto; zentriert wird.

Quellcode:<div style='width:100px;position:absolute;left:50%;margin-left:-50px;'></div>


Ich denke, ich werde hier mal die Diskussion abzubrechen versuchen. Letztlich geht es nicht mehr ums eigentliche Topic, und der Threadersteller hat glaube ich auch verstanden, was er zu tun hat.

Das hier ist quasi nurnoch ein virtueller Schwanzvergleich. (Ja, ich gebe zu, ich habe auch mitgemischt, und ich schäme mich ;)
Wenn's unbedingt nötig ist macht eben einer einen "Postet eure html-zentrierungsmöglichkeiten"-Thread auf o_O

Website

Zitat:

CPoly postete

Zitat:

pogomeal postete
Wobei ein Block-Element bspw. ein ganzer Div-Container mit
margin:auto; zentriert wird.

Erklär das bitte dem IE. Also sofern eine konkrete Breite festgelegt ist, wird so zentriert (Funktionierte bisher ausnahmslos in allen von mir getesteten Browsern. Weshalb auch nicht?)

Quellcode:<div style='width:100px;position:absolute;left:50%;margin-left:-50px;'></div>


Ich habe bewusst den ganzen Container zentriert.

Dann klär mich bitte auf :)