HP umgestalten mit CSS

    Hallo,
    erstmal ein Lob und vielen Dank für die tollen Infos hier.

    Ich (älteres Semester) plage mich schon xtage durch das große Netz um meine bisher als Frame aufgebaute HP (recht umfangreich) neu zu machen.

    Wenn ich die Empfehlungen richtig verstehe, wäre der beste Weg mit CSS. Leider sind ja die meisten Anleitungen in engl. und da happerts.

    Habe nun recht mühselig mal das Grundlayout erstellt und würde mich riesig freuen, wenn mal jemand einen Blick drauf werfen könnte ob es im Ansatz so ginge?
    Für Tipps, Anregungen und Kritik (wenn ich wieder mal was total verkehrt gemacht habe - bin Anfänger) bedanke ich mich im Voraus.

    http://home.arcor.de/deschner-clan/

    Die CSS-Datei würde ich natürlich anschließend auslagern als externes style.

    ganz liebe Grüsse
    brigi03

    hab deine seite grad mal durch den w3c-validator (http://validator.w3.org/) gejagt...ergebnis: 6 fehler

    das größte problem ist, dass du ID´s doppelt vergibst. Verwende stattdessen einfach Klassen!
    Außerdem hast du bei der einbindung des bildes im header des alt-atrribut vergessen...

    ansonsten sieht der code sehr gut aus. auch dass du auf tabellen verzichtest find ich klasse!

    willst du auch meinungen zum layout haben?

    ach übrigens gibt es für threads wie deinen eine eigen rubrik (eure homepage) ... also das nächste mal dort posten!

    Hallo und herzlich Willkommen im Forum!

    Zitat von gast brigi03

    Ich (älteres Semester)


    Jeder ist so alt wie er sich fühlt, bzw. anfühlt.

    Zitat von gast brigi03

    plage mich schon xtage durch das große Netz um meine bisher als Frame aufgebaute HP neu zu machen.


    Eine weise Entscheidung! Wenn Du Dich zukünftig an Webstandards konsequent hälst, wirst Du nie wieder große Mühe mit Weiterentwicklungen haben.
    Siehe hierzu auch das Buch "Webdesign mit Webstandards" von Jeffrey Zeldman. Die zweite Auflage ist natürlich auch in Deutsch übersetzt worden. Wenn Du keine Lust hast das Buch zu kaufen sollte Dich Zeldmans ehemaliges Projekt interessieren.

    Zitat von gast brigi03

    Wenn ich die Empfehlungen richtig verstehe, wäre der beste Weg mit CSS.


    Keine Empfehlung, sondern aktueller Webstandard.
    Inhalt = (X)HTML (Auszeichnungssprache)
    Layout = CSS (Layoutsprache)

    Zitat von gast brigi03

    Leider sind ja die meisten Anleitungen in engl. und da happerts.


    Es gibt aber auch gute in deutscher Sprache. Einführung in XHTML, CSS und Webdesign

    Zitat von gast brigi03

    Habe nun recht mühselig mal das Grundlayout erstellt


    Hhmmm, sieht aber eher nach einem technisch guten Template aus... aber egal.

    Zitat von gast brigi03

    und würde mich riesig freuen, wenn mal jemand einen Blick drauf werfen könnte ob es im Ansatz so ginge?


    Leider ist das Layout in Opera zerschossen, da ein Menüpunkt zu groß für den Rahmen ist und nach unten geschoben ist. So verbreitert sich das Menü auch sehr unschön.

    Zitat von gast brigi03

    Für Tipps, Anregungen und Kritik (wenn ich wieder mal was total verkehrt gemacht habe - bin Anfänger) bedanke ich mich im Voraus.


    Technisch meiner Meinung nach perfekt (wenn man von dem Fehler mal absieht). Semantsich korrekt und Webstandards eingehalten.
    Korrektur: Validome meckert natürlich mehr als meine Augen auf den ersten Blick erfassen konnten.
    1.) Ein alt-Attribut fehlt
    2.) IDs wurden mehrfach vergeben
    2. Korrektur: Dein Header bekommen auch nicht alle zu sehen, da Grafiken mit der Bezeichnung Banner von vielen Werbeblockern geblockt werden.

    Zitat von gast brigi03

    Die CSS-Datei würde ich natürlich anschließend auslagern als externes style.


    Erleichtert auf jeden Fall die Arbeit bei vielen Seiten.

    Zitat von Elvis

    [Offtopic]


    Auch ich habe manchmal meine Tage. Und zum Freunde machen bin ich nicht hier. :mrgreen:

    [/Offtopic]

    Erstmal @all vielen Dank für Eure Mühe.

    Das vergessene alt-Attribut habe ich hinzugefügt -
    die Bezeichnung Banner in Kopf geändert -

    Zitat


    Leider ist das Layout in Opera zerschossen, da ein Menüpunkt zu groß für den Rahmen


    Welcher Menüpunkt ist zu groß? Wollte eigentlich alle in einer Größe.

    Wollte wenn das Layout mal klappt, den Text löschen - die Css auslagern,
    das ganze als Vorlage speichern, damit ich es dann für einzelnen Seiten immer wieder verwenden kann. Hoffe daß mein Gedankengang in der richtigen Reihenfolge ist.

    Nun zum Hauptproblem:
    mehrfache ID -
    meint Ihr damit z.B.
    # head und #head h1 ?

    Hab mich ja durch xSeiten gelesen und dann scheinbar etwas falsch interpretiert.

    Soll ich also Div nur für die Container verwenden und für die Formatierung class?
    also z.B. #head und .head h1

    Dann hätte ich noch eine Frage -
    auf meiner bisherigen Seite (hauptsächslich Reiseberichte) habe ich die (Vorschau)Bilder in Tabellen -
    ebenso ist da tägl. eine Tabelle f. die Zusammenfassung.
    Kann ich mit css 2erlei Tabellenformatierungen machen?
    z.B.
    .tabelletag und .tabellebilder

    Vielen Dank
    brigi03

    id´s können nur einmal vergeben werden und dienen vor allem zur eindeutigen ansprache eines objekts.
    willst du allerdings mehrer objekte (also z.B. deine divs) mit der gleichen formatierung versehen, nimmst du klassen:

    also in deiner html-datei:

    Code
    <div class="klassenname">

    und in der externen ;) css:

    Code
    .klassenname{
  ...
}

    damit dürfte dann auch dein problem mit verschiedenen tabellenformatierungen der vergangenheit angehören.

    Hi pixxldealer,
    vielen Dank,
    aber jetzt bin ich ganz irre...
    ich will ja meine divs nicht gleich formatieren (z.B. Navi oben, bzw. Menue linke Seite)

    Die angesprochenen Tabellen sind vom Format (Spalten etc). auch unterschiedlich - wären also dann divs?
    oder doch class - weil auf verschiedenen Seiten?

    Hallo pixxldealer,

    habe schon viereckige Augen... selfhtml.org kenne ich, hab mir ja da html und auch css angelesen ( so ist meine alte bzw. die hier vorgestellte Site entstanden)

    Trotzdem streiken meine grauen Gehirnzellen, bei der Umsetzung für das von mir gewünschte Ergebnis.

    Vielleicht ist es doch besser für mich die HP vom FrameFormat in ein Tabellenlayout umzugestalten, als mit DIV-Containern zu arbeiten?

    Bevor ich mir erlaube eine Frage zu stellen, kurve ich schon einige Zeit herum - scheinbar fehlt mir aber das Verständnis für manches.
    Bin halt nicht mit Comp. groß geworden (habe erst seit 5J. so ein Ding) und muß mir alles erst erarbeiten was dann mehr oder eben weniger klappt. :cry:

    Liebe Grüße und vielen Dank f. Deine Mühe
    brigi03

    also noch mal zum mitmeisseln :wink:

    iss gar nicht so schwierig, denn prinzipiell ist der code ja schon ganz gut so! nachdem du jetzt mit den divs schon soweit gekommen bist, gibt es keinen grund wieder auf tabellen umzuschwenken...

    das einzige problem ist, das du die ID "sidebar" mehrfach vergibst und das ist nicht gestattet. du willst doch erreichen, dass alle elemnte mit dem namen "sidebar" die gleiche formatierung erhalten. somit verwendest du statt einer ID einfach eine KLASSE. die syntax findest du ja schon in meinem obigen beitrag ...

    also nicht verzweifeln, sondern einfach die "id" durch "class" ersetzen - färdsch :D

    "Unsere Reisen" scheint nicht in das Korsett zu passen.

    Das mit dem Tabellenlayout hab ich jetzt mal überlesen. So einen Quatsch willste doch bestimmt nicht machen.

    Jetzt noch mal zu den Ids....
    Ein DIV-Container hat keine semantische Bedeutung, sondern dient nur der Strukturierung eines Dokumentes und der Möglichkeit ihn per CSS zu formatieren. Deshalb vergibt man für die "großen" Container IDs. Dies sind in der Regel: Header, Navi (gibt einige die dies nicht für nötig halten), Content, Sidebar und Footer.
    Somit legt man zum Beispiel fest wie die Links im Contentbereich formatiert sind.

    Code
    #content a {
color:red;
}


    will man aber Links innerhalb des Contents anders formatieren als die Grundformatierung, so vergibt man eine Klasse.

    Code
    .externerlink a {
color:red;
text-decoration:underline;
}


    Diese Klasse kann man dann für unendlich viele Links auf einer Seite anwenden.

    Hi,
    erstmal danke @all f. die aufbauenden Worte.

    Elvis
    Als Anfänger hab ich jetzt ein Problem mit dem Download - weiß jetzt nichts damit anzufangen. Gehe mal davon aus, daß Du die Seite so siehst. Aber mit welchem Browser?
    Ich habe nur InternetExplorer der stellt es eigentlich recht gut da. (Sicher auch noch verbesserungsfähig, aber nichts verschoben)

    Ebensowenig kann ich mit dem "sinnlosen Blog" was anfangen. Wenn ich darauf klicke kommt nur Http: verboten!

    Oder soll ich daß als internes Geplänkel unter Euch Profis abhaken?

    Liebe Grüße
    brigi03

    pixxldealer

    vielen Dank für den Hinweis.
    Jetzt ist der Groschen hoffentlich gefallen, daß ich in der Sidebar ja die Liste mehrmals habe.
    Manchmal kann ich noch xtheoretischen Seiten lesen und kapiers nicht.
    Grrrr.
    Schönes Wochenende
    brigi03

    Hi Elvis,

    Zitat


    Meine Signatur verlinke zu meinem Blog, der im Moment aber leider offline ist


    na dann kanns ja für mich nichts Wichtiges oder Schlimmes gewesen sein und ich darf weiter fragen?

    Das mit Opera sieht ja wirklich schlimm aus. Gibts da irgendwo Tipps/Tutorials (deutsch) wie ich das relativ einfach beheben kann?
    Oder ist das wieder ein extra Studium :wink:

    Wie bereits erwähnt, habe ich bereits eine allem Anschein nach funktionierende Seite. Damit ich nicht soviel Tipparbeit habe, wurde mir von einem Bekannten Dreamweaver empfohlen weil da alles einfacher sei.

    Leider komme ich damit garnicht zurecht :kopfpatsch:
    So bin ich durch die Weiten des Netzes und dabei auf die Idee gekommen, meinen anstehenden Bericht vom Dez. gleich mit einer neuen, den aktuellen Empfehlungen nach, zu gestalten. (Sollte aber schon noch zu meinen Lebzeiten online gehen.)

    Vielen Dank für die Hilfe
    brigi03

    Zitat von Anonymous


    na dann kanns ja für mich nichts Wichtiges oder Schlimmes gewesen sein und ich darf weiter fragen?


    Die Signatur ist ja für alle da, also solltest Du sie auch nicht persönlich nehmen, selbst wenn das Ziel lesbar wäre.

    Zitat von Anonymous

    Das mit Opera sieht ja wirklich schlimm aus. Gibts da irgendwo Tipps/Tutorials (deutsch) wie ich das relativ einfach beheben kann?
    Oder ist das wieder ein extra Studium :wink:


    Es gibt meiner Meinung nach eine Sofortlösung, die aber das Problem nicht löst. Dafür sollte sich das mal ein CSS-Profi ansehen.
    Ändere

    Code
    Unsere Reisen


    in

    Code
    Reisen
    Zitat von Anonymous

    Damit ich nicht soviel Tipparbeit habe, wurde mir von einem Bekannten Dreamweaver empfohlen weil da alles einfacher sei.


    Wieder jemand ohne Ahnung. Die Seite sieht technisch gesehen perfekt aus. Gut, es scheinen noch ein paar kleine Fehler drin zu sein, aber mit einem WYSIWYG-Editor machste nur alles kaputt.