Tutorial HTML, CSS u. PHP - Forum

[revils]

Ich hab erst vor Kurzem mit HTML angefangen und das "gelernt", was ich über HTML-Seminar erfahren konnte, versucht in die Tat um zu setzen.

Die ist der derzeitige Stand der Dinge:

http://www.dirtysanchezcrew.bplaced.net

Solltet ihr was finden was da nicht hingehört oder besser gemacht werden kann, immer her damit.

Danke

[neuling11]

Hallo,
das Enter Site am Anfang würde ich etwas größer machen und ihm auch eine andere Farbe geben.
Sieht man recht schlecht.

Das viele Schwarz stört mich persönlich auch ein wenig.
Vielleicht solltest du ein wenig Grau ins Spiel bringen.

[Sarkkan]

Ich finde die Startseite.html nicht besonders schön.. was vielleicht auch daran liegt, dass der Frame sich unter den Boxen setzt.
Auch stört es mich, dass der Footer mittem im Frame hängt :/

Aber ansonsten.. recht simpel, aber gut^^

[revils]

Das der Frame sich unter den Boxen hängt, liegt daran, dass ich derzeit noch keine Verlinkung der anderen Links fertig habe. Und damit alles vorerst ersichtlich ist hat er die Breite und hängt da.

Ja das mit dem Footer ist so ne Sache. Die ist abgestimmt auf #seitenbereich...aber irgendwie gefällt mir der Code nicht...

Code: Alles auswählen

#seitenbereich  {
                    margin: 0 auto;             /* Zentrierung mitte */
                    width: 75%;
                    background-color: black;
                    margin-bottom: 100px;
                }
#fusszeile      {                                               /*Fußzeile definieren*/
                    position: absolute;
                    bottom: -80em;
                    width: auto;
                    height: 20px;
                    margin: auto ;
                    padding-left: 550px;
                    padding-right: 524px;
                    border-top-width: thin;
                    border-top-style: solid;
                }

[revils]

Hab jetzt wieder ein paar Kleinigkeiten verändert und die Vorschläge von euch umgesetzt!

http://www.dirtysanchezcrew.bplaced.net/

Verändert wurde:
- index.html -> Enter Site!
- startseite.html -> Ein wenig Grau, -> Frame noch oben versetzt, -> Footer angepasst

- und allgemein die Seite aktualisiert!

[Sarkkan]

Hey (:

Ich meckere mal wieder rum ^^'
Wenn man auf das Link bei deiner index.html klickt, sollte doch bitte kein neues Fenster aufgehen.. :/

Allgemeiner Vorschlag:
-> Du verschiebst die Navigation unter deinen Header (Also dort wo zur Zeit Startseite steht. *1)
-> Der Blog ist eine eigene Seite und erhält in der Navigation einen Navigationspunkt, wo dann der Frame die komplette Fläche unter dem Header bekommt
-> bei deinem 'Crew Check Out' gibst du bitte den div#checkout einen padding-Wert, damit die Schrift nicht so am Rand klebt
-> Hast du dir schon mal überlegt, dass du das mit den Videos etwas anders machst, als alle gleichzeitig einzubinden? Ich denke da an eine JavaScript basierte Lösung (: [Wenn du interesse hast, dann sprich da bitte in deinem nächsten Post an oder schreib mir ne PM (:]

*1 Für den Fall, dass du Probleme bei einer Horizontalen Navigation hast, hier einige Tipps:
-> die Listenelemente <li> erhalten ein float: left;
-> die Links bekommen ein display: block; (Das macht die komplette Fläche anklickbar)

[revils]

Ich gebe Antwort^^

Das mit dem neuen Fenster hab ich extra gemacht.

-> Verschiebung der Navigation hatte ich mir auch schon überlegt. Aber da hatte ich eher die "Struktur" im Sinn...dass das was zusammengehört auch bei einander liegt. Wenn man das in deiner Idee realisieren kann, mache ich das gerne
-> Die Startseite in Verbindung mit dem Blog ist die eigene Seite. Der Blog ist die Startseite.
-> div #checkout - padding werde ich in Erwegung ziehen. Danke
-> Video mit Javascript Lösung...gerne! Ich habe Interesse.

Danke für die Tipps

Und JavaScript...lass eine Konversation starten

[Sarkkan]

So, vergessen hab ich dich nicht^^
Nur musste ich ein wenig rum tüfteln, weil es nicht ganz so einfach war, wie Gedacht :/

Naja, der JavaScript Code:

Code: Alles auswählen

<script language="javascript" type="text/javascript">
window.onload = function(){
    if(location.hash != "")
        changeClip();
}
function changeClip(){
    window.setTimeout("cClip()", 50);
}
function cClip(){
    var url = location.hash.split('#');

    document.getElementById('clip').innerHTML = '<object width="480" height="385">'+
        '<param name="allowfullscreen" value="true" />'+
        '<param name="allowscriptaccess" value="always" />'+
        '<param name="movie" value="' + url[1] + '" />'+
        '<embed src="' + url[1] + '" type="application/x-shockwave-flash" allowfullscreen="true" allowscriptaccess="always" width="480" height="385"></embed>'+
    '</object>';
}
</script>

Der HTML-Code:

Code: Alles auswählen

<div id="clip"><noscript><h3>Sie benötigen Aktiviertes JavaScript!</noscript></div>

<a href="#http://www.youtube.com/v/vAhhy_SVrVI?fs=1&amp;hl=de_DE" onclick="changeClip();">Youtube 1</a> -
<a href="#http://vimeo.com/moogaloop.swf?clip_id=13681714&amp;server=vimeo.com&amp;show_title=1&amp;show_byline=1&amp;show_portrait=1&amp;color=00ADEF&amp;fullscreen=1&amp;autoplay=0&amp;loop=0" onclick="changeClip();">Vimeo</a>

Zur Funktion meines Codes:
Gib einfach Links, zur dem Video an und setzte eine Raute (#) davor. Jeder Link benötigt zudem die Funktion changeClip().
Es empfiehlt sich außerdem, wenn du div#clip per CSS eine Breite und Höhe gibst (also width: 480px; height: 385px;), damit die Seite nicht so springt (:


So und nun zu deinem neuen Fenster was aufgeht:
Was für einen Sinn hat das? Außer, dass es den Besucher nervt, weil ihm ein zusätzlicher Tab aufgezwungen wird, der ihm nichts bringt.. :/

Und wieso fast du die Sachen nicht in einer Navigation zusammen? :/
Du kannst ja ansonsten auch ein Aufklappendes Menü machen, also:

Code: Alles auswählen

-> Startseite
-> Crew
     |     -> Check Out
     '---> -> Clips
           -> Special
-> Check Yourself
-> Tricktips
-> Bilder

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

-> Startseite
-> Crew Check Out
-> Check Yourself
-> Media
     |      -> Bilder
     '--->  -> Clips
            -> Tricktips
-> Special

Lg Sarkkan

[revils]

Super. Danke für die Tipps. Morgen mach ich mich ran und ändere das mit dem Tab^^...hast ja Recht ;-)

Die JavaScript Lösung werde ich auch mal ausprobieren...Ich kann schon erahnen was das wird^^ Jummy.

Die Navigation..naja...aufklappbares Menü hab ich noch keine "Erfahrung" mit...da muss ich mich erstmal reinlesen ;-)

EDIT:

Check Yoself -> JavaScript Lösung implementiert.
Index -> neuer Tab weg.
Crew Check Out -> padding-wert top, bottom, left

[revils]

EDIT 2:

Navigation verändert -> Dropdown

http://www.dirtysanchezcrew.bplaced.net

EDIT 3:

Impressum hinzugefügt mit Mailto-Funktion
Crew Special -> Javascript Videofunktion
Crew Clips -> Javascript Videofunktion

[Sarkkan]

Wird doch langsam echt schick
Versuch mal bitte, wie es aussieht wenn du die Navigation mit margin: 0 auto; zentrierst (:

Ansonsten finde ich bei den Videos noch, dass die Links nicht wirklich zu geltung kommen/man auf den ersten Blick nicht weiß, was du meinst.. :/
Vorschlag:
-> Liste die Links auf und setzte die liste vielleicht neben den div#clip?
-> Schreibe in das div#clip so etwas wie: "Klicken Sie bitte auf einen Videotitel [position also Links/Rechts/..]".

Ansonsten wird das doch echt langsam richtig nett (=

[revils]

Das sind gute Ideen.

Leider schaff ich es irgendwie nicht^^ Brainlagg
Die Navi lässt sich nicht zentrieren, finde sie an der Seite eignetlich auch passend. Aber mann kann es ja auch anders mal versuchen ;)

Das mit den Videolinks hab ich mir auch schon gedacht. Aber auch da schaff ich es nicht sie an die Seite zu bringen -.-

[Sarkkan]

Wieso führen eigentlich 2/3 deiner Stylesheetverweise auf eine 404'er?

Ach das hat man schon mal
Das mit dem Zentrieren kriege ich aber auch gerade irgendwie nicht hin..^^'
Kommt daher, dass die Liste die komplette Breite ausnutzt.. und dann kann man Sachen nun mal nicht mehr wirklich zentrieren
Wenn müsstest du ihr eine Breite geben^^

Aber mit der Liste ist es relativ einfach Versuch das mal so:

Code: Alles auswählen

div#clip {
    width: 480px;
    height: 385px;

    float: left;
    margin-right: 20px; /*Wie weit die Liste entfernt sein soll*/

    /*Text-Deco*/
    font-size: 16px;
    line-height: 200px;
    text-align: center;
}

ul#clipList {
    list-style: none;
}

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

<div id="clip">Bitte w&auml;hlen Sie aus der Liste Rechts einen Clip aus -&gt;</div>

<ul id="clipList">
    <li><a href="#http://www.youtube.com/v/vAhhy_SVrVI?fs=1&amp;hl=de_DE" onclick="changeClip();">Youtube 1</a></li>
    <li><a href="#http://vimeo.com/moogaloop.swf?clip_id=13681714&amp;server=vimeo.com&amp;show_title=1&amp;show_byline=1&amp;show_portrait=1&amp;color=00ADEF&amp;fullscreen=1&amp;autoplay=0&amp;loop=0" onclick="changeClip();">Vimeo</a></li>
</ul>

[revils]

Wieso führen eigentlich 2/3 deiner Stylesheetverweise auf eine 404'er?

Vielleicht weil ich die in einem Unterverzeichnis hab? Weiß nit

Die Liste funktioniert vom Prinzip her...jetzt wird sie nur unter dem Video an der linken Seite aufgelistet.

[Sarkkan]

Wie viel Platz steht den eigentlich zur Verfügung?
Du kannst theoretisch mit einer min-width von 900px arbeiten^^
Dann sollte das eigentlich passen Oder was für eine Schriftgröße verwendest du? O.o