CSS Anfänger will Homepage mit Joomla bauen CSS Fail

[Riseofdead]

Hallo

ich möchte gerne eine Homepage mit Joomla bauen. Jedoch hab ich ein Problem mit der Navigationsleiste (nennt man das in der Websprache auch so?) Dieser Hintergrund von den Buttons ist viel viel größer als er eigentlich sein sollte. Gibt es irgendwo eine Möglichkeit die Buttons so einzustellen das die gleich groß sind und die Schrift drin zentriert ist.

Ich hab bereits im bplaced Forum um Hilfe gefragt und auch eine Antwort bekommen, jedoch ging mein Versuch das ganze zu beheben voll in die Hose. Link: http://forum.bplaced.net/viewtopic.php?f=18&t=23229
Auf bplaced wird auch meine Homepage gehostet.

Die Homepage lautet www.androidflash.eu/beta

Derzeit versuch ich das Problem mit probieren zu lösen. Sprich ich such in jeder Datei den Begriff .ct_left und falls ich was finde ändere ich die Pixelanzahl um paar Pixel, speichere die Datei ab und drück F5 im Browser.

Zum Thema CSS: Kann ich diese Sprache auch allein lernen. Weil ich hab mal gegoogled und anscheinend braucht man Vorkenntnisse in folgenden Sprachen: HTML, PHP, C++ (ist das auch CSS?) JAVA oder BASH. HTML versteh ich ja das ich das irgendwann mal können muss. Derzeit versteh ich nur das in einer HTML Datei Text und Medien sind und CSS quasi der Bauplan ist wo etwas hingehört.

 

[zEtTlAh]

Servus,

also so aus dem Stehgreif wird es nicht einfach dir zu helfen. Was CSS ist, hast du ajha schon erkannt und man sollte dafür wirlich etwas HTML und/oder PHP beherrschen. PHP ist beo joomla zweitrangig da die Seite ja schon fertig konfiguriert ist und man daran nicht "umstricken" muss. Hier reich CSS.

Was ich mich allerdings frage, in wie Fern du das CSS File anpassen willst. Es gibt hier eher einige andere Dinge zu prüfen. Passt das Layout das du verwendest überhaupt zu deiner joomla Version ? Darf man das Layout überhaupt ändern ? Und vor allem... ist es überhaupt ein "Fehler" ? Für mich sieht das eher aus, als würdest du keine einheitliche Struktur verwenden. Joomla bieter ja mehrere Arten das Menü einzubauen und bei dir sieht das aus, als hättest du einfach unterschiedliche Menütypen verwendet.

Das Layout ist eh etwas kirre... passt sich in der Breite nicht an und macht (wenn man nicht gerade einen alten 15" TFT hat) komplett wahnsinnig.

Schon mal an ein anderes Layout Paket gedacht (was vielleicht auch dein Problem beseitigt) ?



Gruß Marco

 

[Riseofdead]

hmm gibt es ein Layout Paket das so Giftgrün ist? Sollte zu dem Android Männchen passen bzw generell zu Android. Das Template habe ich von hier http://www.joomla24.com/gallery/album10/tpl_cleanlogic_j3

Joomla hab ich Joomla!-Version Joomla! 3.1.1 Stable [ Ember ] 26-April-2013 14:00 GMT

Das Template ist für 3.x.x

 

[trakakabubu]

Ich bin keinesfalls "Profi" was HTML, CSS und PHP angeht. Aber meines Erachtens kann man CSS nicht einfach so "lernen". Learning-by-doing, insbesondere in Verbindung mit http://www.w3schools.com/ und Google, hat bei mir sehr gut geholfen.
Zum Lernen von CSS ein Joomla-Design anpassen, finde ich auch... nunja... mit Verlaub gesagt nicht ganz optimal, da dort vermutlich so viel enthalten ist, dass man es als Neuling zumindest in weiten Teilen überhaupt nicht versteht. Versuch vielleicht das Layout - mehr oder weniger - selbst zu erstellen und dich so in die Materie einzuarbeiten. Bei Fragen hilft Google in 99,999% der Fälle weiter.

Was mir jetzt beim schnellen Überfliegen des Codes der Navileiste aufgefallen ist, ist, dass du dort viele verschiedene classes verwendest, obwohl das (aus der Sicht, wie du es im Eröffnungspost schilderst) vermutlich garnicht notwendig ist.

Vielleicht hilft das dir weiter:
Boxmodel

 

[Riseofdead]

weiterhelfen tut mir das leider nicht weil ich nicht mal weiß wo die Datei genau liegt. In dem css Ordner sind 16 css Dateien. Was die richtige ist weiß ich leider nicht.

Mit dem Chrome hab ich vielleicht irgendwie das verzeichnis rausgefunden. Es sieht so aus



Ich bin da echt schon so verzweifelt das ich euch die ftp Daten geben werde.

Adresse: ftp://www.androidflash.eu (das www muss vorhanden sein weil es ohne nicht geht)
Username: androidflash_beta
Passwort: tester
Port: 21

Kann da bitte jemand die Dateien ansehen.

Den Zugang hab ich so angelegt dass das Rootverzeichnis für den Zugang /beta/templates ist. An die Mods, ich hab ein Backup der kompletten Seite inklusive SQL Tabelle auf meinem Raspberry Pi daheim wo ich die Homepage verzweifelt nach dem Fehler durchsuche. Es muss irgendwas mit nav_pills sein laut Google Chrome.

 

[powerfx]

Das Hauptmenü hat doch eine andere Klasse:

<ul class="nav menu nav-pills">

Willst du das einfach zu

<ul class="nav menu">

ändern, oder wie?

 

[Daaron]

Derzeit versuch ich das Problem mit probieren zu lösen. Sprich ich such in jeder Datei den Begriff .ct_left und falls ich was finde ändere ich die Pixelanzahl um paar Pixel, speichere die Datei ab und drück F5 im Browser.

Das hilft dir nicht weiter, glaub mir. Das ist blindes Herumstochern, und behebt nicht einmal die Symptome der Krankheit.

Zum Thema CSS: Kann ich diese Sprache auch allein lernen.

Mit viel Zeit und Mühe... Ich mach den Scheiß seit ein paar Jahren beruflich und lern immer noch neue Tricks...

Weil ich hab mal gegoogled und anscheinend braucht man Vorkenntnisse in folgenden Sprachen: HTML, PHP, C++ (ist das auch CSS?) JAVA oder BASH. HTML versteh ich ja das ich das irgendwann mal können muss. Derzeit versteh ich nur das in einer HTML Datei Text und Medien sind und CSS quasi der Bauplan ist wo etwas hingehört.

HTML: Ja, muss sein. Du musst schließlich die Struktur der Daten kennen & verstehen, bevor du ihre Darstellung anpassen kannst
JavaScript (hat nix mit Java zu tun!): Nützlich, aber nicht zwingend nötig. JS manipuliert HTML und CSS in Echtzeit...
PHP, Java, C++, BASH (ist keine Sprache, das ist die Bourne Again Shell, die wohl beliebteste Konsole für Linux-Systeme) brauchst du definitiv nicht. Joomla basiert zwar auf PHP, aber das muss dich da nicht kratzen. CSS manipuliert die Darstellung der HTML-Struktur, nicht den PHP-Code, der den HTML-Code erst erstellt.

Insgesamt kann man aber nur sagen: Abreißen, neu bauen...
Die CSS-Deklaration strotzt vor falschen Ansätzen. Was da alles wie oft und wohin vererbt wird, davon kriegt man ja Augenkrebs.

Deine beste Chance ist: das CSS-Dokument komplett leer machen und Stück für Stück neu aufbauen, und dich dabei nur auf das Nötigste beschränken. Dass du dafür CSS erlernen musst steht auf einem anderen Blatt. Reparieren ist hier kaum eine Option, dafür ist zu viel kaputt. Am Ende hätte die Person, die das Ding repariert, einige Stunden auf ein totes Pferd eingeschlagen.

Viel sinnvoller: Such dir auf Themeforrest oder ähnlichen Seiten ein hübsches und modernes Layout. Da gibts wirklich ansehnlichen Kram für 25$. Klar, das ist alles nur 08/15 und für Firmenauftritte viel zu unpersönlich, aber hey... du bist keine Firma, die für sich und ihre Produkte Werbung machen will, oder?
Wenn du dann mit nem gekauften Template erst einmal eine gute Grundlage hast, dann kannst du dich daran machen, die Reste anzupassen, z.B. dem Ganzen deinen giftgrünen Touch zu geben.

Dein wichtigstes Werkzeug beim Erlernen von CSS ist, neben Seiten wie css4you, Chrome/Chromium. Das Ding hat von allen Browsern die mit Abstand besten Entwicklerwerkzeuge. Drück mal F12 und spiel herum...
Und natürlich: Abschreiben ist ERLAUBT! Guck dir eine Seite an, die dir gefällt und versuch zu verfolgen, was wie gemacht wird.

 

[Riseofdead]

Ok Danke, also muss ich mit HTML anfangen die Sprache zu erlernen und dann mich zu CSS weiterangeln oder ist das egal mit welcher Sprache ich anfange?

Hab mal den Ordner css aus dem Template Ordner gelöscht. Die Seite sieht zwar jetzt leer aus aber trotzdem nicht ganz so leer. Wenn ich z.b über die Buttons mit der Maus drüberfahre wird der Hintergrund trotzdem noch grau. Stört mich nicht aber ist das nicht auch so eine css Geschichte?

Also php, java und C++ kann ich weglassen? Bash ist dann das gleiche wie Putty? Hab Putty auf meinem PC damit ich mit meinem Raspberry Pi verbinden kann und der läuft mit einem Linux

http://de.html.net/tutorials/html/introduction.php Kann ich auf dieser Seite HTML gut lernen bzw ist die Seite gut für Anfänger verständlich? Da kann man auch CSS lernen.

Chrome verwende ich seit 2009, ein Glück das genau dieser Browser so gute Werkzeuge hat.

 

[Riseofdead]

Hmm sry für Doppelposting aber ich lese in einer Online Zeitung in den Kommentaren gerade was von HTML5 ist die Zukunft. Nun die Frage, lerne ich auf der Seite die ich in Posting #8 verlinkt habe HTML5? Ich will nicht das ich irgendwas lerne was schon hoffnungslos veraltet ist.

 

[Tion1392]

HTML5 ist eine Weiter-Entwicklung von HTML
Wenn du anfängst mit html und css zu lernen, benötigst du die Grundlagen. Diese Grundlagen sind bei HTML immer dieselben, egal welche Zahl dahinter steht.
HTML5 ist zwar schön und gut, aber versuch mal dem IE8 html5 beizubringen, das kannst du knicken. Je nach Anforderung kann man dann einige Dinge mit HTML5-Elementen machen. So kann man mit HTML5 sehr entspannt ein video-player einbinden. Aber auch da muss man dann wieder den Edge-Case IE mit bedenken. Wenn du erstmal die Basic in HTML lernst, ist das in der Regel ausreichend.

 

[Daaron]

Nun die Frage, lerne ich auf der Seite die ich in Posting #8 verlinkt habe HTML5? Ich will nicht das ich irgendwas lerne was schon hoffnungslos veraltet ist.

Nein, Selfhtml sind etwas... altbacken. Macht aber nix, da HTML5 einfach HTML4 um viele Aspekte erweitert. Es fallen ein paar Hirnlosigkeiten weg (z.B. <marquee>... dem trauert wohl niemand nach), primär kommen aber einfach Unmengen an geiler Features hinzu.

Außerdem muss man unterscheiden.
Wenn man absolut präzise ist, dann bezeichnet "HTML5" nur den erweiterten HTML-Sprachschatz mit all seinen neuen Elementen und Attributen.
Im regulären Sprachgebrauch wird bei "HTML5" aber üblicherweise von einem Konglomerat aus HTML5-Elementen, den neuen CSS3-Fähigkeiten sowie der stark erweiterten JavaScript - API gesprochen. So ist das HTML5-Element <canvas> ohne JavaScript vollkommen nutzlos, die Elemente <audio> und <video> sind zwar ohne JS nutzbar, aber verdammt hässlich und unflexibel.

HTML5 ist zwar schön und gut, aber versuch mal dem IE8 html5 beizubringen, das kannst du knicken.

1.) Das einzige OS, das noch wirklich IE8 verwendet, ist WinXP... dessen Support in ein paar Monaten ausläuft. Kein Mitleid für veraltete Software.
2.) Fallbacks gibts immer maximal 2 Generationen zurück... also bis IE9. Kein Mitleid für veraltete Software.
3.) Auch Holzklasse-Kunden steht es frei, endlich FF, Chrome, Opera,... zu verwenden. Kein Mitleid für IE-Nutzer.
4.) Du kannst mit einfachsten Mitteln sogar dem IE6 eine Basis-Kompatibilität zu den HTML5-Elementen beibringen. Ja, diese Holzklasse-Browser werden nie <canvas>, <video> oder <svg> können... und? Siehe Punkt 1-3.

Aber auch da muss man dann wieder den Edge-Case IE mit bedenken.

Du weißt schon, wie das Standardverhalten von <video> lautet, wenn der Browser das Element nicht beherrscht, oder? Da muss man nix "bedenken", das ist ein Nobrainer.

 

[Riseofdead]

Ok also ich fange gerade mit den ersten Übungen an. Was ich schon mal rausgefunden habe ist das man nicht 2 Attribute einem Text geben kann. Ich habe versucht den background-color auf grey und den color des Textes selbst auf 00ff00 zu setzen. Angezeigt wird nichts.

<h1 style="background-color:grey;"style="text-color:#00ff00;"Willkommen auf Androidflash</h1>

Derzeit versuche ist den Hintergrund der ganzen Seite auf Grau zu ändern aber background-color ändert irgendwie nur den Hintergrund des Textes bzw der Zeile.

Als Editor benutze ich Notepad++ aber ich glaub ich werd auf den Windows eigenen Editor umsteigen. Ich check einfach nicht was die ganzen Farben im Text bedeuten. 1x ist was rot, vieles ist blau, manches ist lila. Ich hab da echt keinen Plan mehr

 

[Hancock]

Also richtige Syntax ist

<h1 style="background-Color:grey;Color:#00ff00">Blub</h1>

Achte auf: <h1...> TEXT </h1>, also dass deine spitzen Klammern auch alle schön zugehen.

 

[Speedy.]

Wenn du schon anfängst CSS zu lernen dann richtig: schreib dein CSS in eine seperate Datei, meinetwegen style.css oder so. Inlinestyles sind zwar nicht falsch, aber einfach ein schlechter Stil.

Wegen dem grauen Hintergrund: klar wird nur die Überschrift grau hinterlegt, denn du sprichst das h1-Element an. Wenn die gesamte Seite grau sein soll, reicht es eigentlich, dem html oder body-Element ein background-color: gray; mitzugeben.

Die Farben im Notepad++ (genannt Syntaxhighlight) sind, wenn man sich etwas mit der Materie beschäftigt, enorm hilfreich. Der blanke Windows Editor ist doch eine Katastrophe für Webentwicklung... So hast du Tags, Attribute, Text usw. schön farblich getrennt und bekommst eine viel bessere Übersicht.

 

[powerfx]

Beim Windows-eigenen Notepad hast du doch genau das Gleiche, nur einfarbig. Selbst wenn man nicht weiß, wofür die Farben stehen, ist es doch übersichtlicher, wenn einzelne Bestandteile dadurch abgegrenzt werden.

Außerdem ist es für den Browser später einfacher die Teile auseinanderzuhalten:
http://www.linux-community.de/var/e...Programmieren-mit-Professor-Ross_geekhero.png

 

[Riseofdead]

wie seperate Datei? Wie soll ich dann in der HTML Datei beibringen das ein Text mit genau dieser Formatierung aus einer CSS Datei übernommen wird? Check ich gerade gar nicht

color-background und andere Attribute habe ich in einem HTML Guide gefunden. Heißt das ich lerne die ganze Zeit schon CSS und bekomm es gar nicht mit? Weil auf dieser Seite gibt es ja genauso einen CSS Guide.

Das mit dem "Syntaxhighlighting" werd ich wohl lassen. Blau heißt wohl OK und lila das etwas falsch ist soweit ich dem ganzen Folgen kann. Hab aber auch schon mal was rot gesehen aber das ist meistens nur diese komische Linie die man mit Mausklick auf das Minuszeichen ein bzw. ausklappen kann.

Wenn du schon anfängst CSS zu lernen dann richtig: schreib dein CSS in eine seperate Datei, meinetwegen style.css oder so. Inlinestyles sind zwar nicht falsch, aber einfach ein schlechter Stil.

Wegen dem grauen Hintergrund: klar wird nur die Überschrift grau hinterlegt, denn du sprichst das h1-Element an. Wenn die gesamte Seite grau sein soll, reicht es eigentlich, dem html oder body-Element ein background-color: gray; mitzugeben.

Die Farben im Notepad++ (genannt Syntaxhighlight) sind, wenn man sich etwas mit der Materie beschäftigt, enorm hilfreich. Der blanke Windows Editor ist doch eine Katastrophe für Webentwicklung... So hast du Tags, Attribute, Text usw. schön farblich getrennt und bekommst eine viel bessere Übersicht.

 

[Daaron]

wie seperate Datei? Wie soll ich dann in der HTML Datei beibringen das ein Text mit genau dieser Formatierung aus einer CSS Datei übernommen wird? Check ich gerade gar nicht

Wie wärs damit: Du suchst dir eine einfache, aber technisch einwandfreie Webseite. Die Twitter Login-Seite ist z.B. relativ kompakt, aber technisch 100% sauber. So... und jetzt guckst du dir von dieser Seite einfach mal den Quellcode an.

Lernen heißt: Nicht laufend fragen, sondern eigenständig Quellen analysieren.

color-background und andere Attribute habe ich in einem HTML Guide gefunden. Heißt das ich lerne die ganze Zeit schon CSS und bekomm es gar nicht mit?

HTML "pur" würde verdammt trostlos aussehen. Es wäre effektiv nur beinahe unsortierter Text mit Bildern, Formularfeldern und evtl Audio/Video-Elementen.
Also wenn etwas bunt ist oder irgendwie hübsch formatiert wirkt: DAS ist CSS.

Das mit dem "Syntaxhighlighting" werd ich wohl lassen. Blau heißt wohl OK und lila das etwas falsch ist soweit ich dem ganzen Folgen kann. Hab aber auch schon mal was rot gesehen aber das ist meistens nur diese komische Linie die man mit Mausklick auf das Minuszeichen ein bzw. ausklappen kann.

Syntaxhighlight ist elementar wichtig, ohne kannst du JEGLICHE Form von Programmier-Arbeit vergessen, einfach weil der Durchblick irgendwann flöten geht und man Schusselfehler nicht mehr sieht.

Und um hier mal auf die Farbkodierung zurück zu kommen: Das Zeug da ist ROT weil es FALSCH ist. Deinem H1 fehlt ein ">".... und Violett ist einfach eben ein Inline-Style.

Gewöhn dir einen sauberen Stil an. Dazu gehört auch: Element öffnen, Element schließen... und DANN erst Element mit Inhalt füllen.

 

[Teisi]

servus,

mal kurz in raum geworfen:
gehe mal zu http://www.codecademy.com/de wenn du ein ganz klein wenig englisch kannst, ist das so ziemlich die beste seite, um mit programmieren anzufangen, da musst du nix kaufen nur etwas zeit investieren, ist alles super einfach beschrieben... auch für alte hasen, man lernt da doch tatsächlich noch so manches...

das hat mir am besten geholfen...

grüße

ps.:
wenn du dann mal soweit bist, lade dir aptana studio runter.... fürn anfang oder zwischendurch für schnelle sachen ist der notepad zwar auf keinen fall verkehrt, aber mir perönlich etwas.... trostlos...?! viel spass