Beiträge von mr.gnom

mr.gnom

Guten Morgen,

gäbe mehrere Optionen, eine wäre:

HTML

<html>
<head>
    <style>
        a {
            text-decoration: none;
            font-weight: bold;
            color: red;
        }
        a:hover {
            text-decoration: underline;
        }




    </style>
</head>
<body>
    <p><strong>Vereinbaren Sie einen Termin:</strong><a href="#" onclick="js_function();">Telefon 0511.876 28 66-0</a></p>
</body>
</html>

Alles anzeigen

So wäre die Nummer klickbar und du könntest auf eine function zugreifen und alles realisieren.

- - - Aktualisiert - - -

Eigentlich macht man sowas: <b>text</b> gar nicht mehr, aber wenn dann so: <strong>text</strong>, wenn Du Dir mal Grundlagen Tutorials auf Youtube ansiehst bekommst Du schnell raus das Du id#s und klassen vergeben kannst um Deinen Text zu ändern.

Aber Typo 3 ohne Html / Css Kenntnisse fahren, krass. Typo ist sehr hohes Niveau!

- - - Aktualisiert - - -

Hier nochmal ein bischen abgeändert und Nummer anonymisiert:

HTML

<html>
<head>
    <style>
        #telefon {
            font-family: Verdana, Geneva, sans-serif;
            font-weight: bold;
        }




        #telefon a {
            text-decoration: none;
            border: 2px solid #000;
            padding: 0 3px;
            border-radius: 5px;
            color: white;
            background-color: #CCCCCC;
        }
        #telefon a:hover {
            box-shadow: #000 2px 2px 3px inset;
            background-color: red;
            color: white;
        }




    </style>
</head>
<body>
    <p id="telefon">Vereinbaren Sie einen Termin:&nbsp;<a href="#" onclick="js_function();">Anrufen !</a></p>
</body>
</html>

Alles anzeigen

Der Punkt ist, in Deinem CMS existiert ne api oder ein Objekt welches den Telefonanruf regelt, damit dieses funktioniert bedarf es eines Bestimmten Aufrufes, also must Du sehen wie Du es verwenden must um mit dem Quellcode zu kommunizieren.
Im letzten Quellcode habe ich alle Farblichen Werte vereinfacht eingetragen, erstell Dir ne name.html und füge den Quelltex dort ein. Dann siehst Du was ich Dir da geschrieben habe. Du kannst Den Schrift Typen ändern, die Schriftfarben. wenn Du unter #telefon noch font-size: 20px; einträgst, kannst Du das font-weight: bold; auch rausnehmen und die Textgröße besser anpassen, einfach rum probieren.

mr.gnom

Hallo,

var mp4 = 'Metallica st.anger';

ich bastle gerad an einer website und hab mir da nen kleinen Player reingeschrieben, wenn ich mp4 files mit hinzufügen würde, könnte ich dafür belangt werden.
Was aber wenn ich das Video von Youtube aus einbinde ? Kann ich hierfür zur kasse gebeten werden ????

- - - Aktualisiert - - -

Code

var width = '100%';
 var height = 380;




 function start(){




    var a = '<iframe width="';
    var a_b = '" height="';
    var b = '" src="';
    var c = '" frameborder="0" allowfullscreen></iframe>';








    $("#vid_bereich").html(a + width + a_b + height + b + this.url + c);
    $("#anzeige").html('<h1>' + this.interpret + '&nbsp;' + this.titel + '</h1>');
    anzeige_on();
 };




function anzeige_on(){
    $("#anzeige").removeClass('hu');
};












var vid = [ {interpret: 'Metalica', titel: 'St Anger', url: 'https://www.youtube.com/embed/dwZuFexTy0k', play: start},
            {interpret: 'BertycoX', titel: 'The Signal', url: 'https://www.youtube.com/embed/8kRindjksaQ', play: start}];

Alles anzeigen

mr.gnom

Schreibs doch gleich richtig in die db rein

Code

$text = $db->real_escape_string($_GET['txt']);


        $text = str_replace("ä", "&auml;", $text);
        $text = str_replace("Ä", "&Auml;", $text);
        $text = str_replace("ü", "&uuml;", $text);
        $text = str_replace("Ü", "&Uuml;", $text);
        $text = str_replace("ö", "&ouml;", $text);
        $text = str_replace("Ö", "&Ouml;", $text);
        $text = str_replace("ß", "&szlig;", $text);
        $text = str_replace("\r\n", "<br>", $text);
        $text = str_replace('"', "'", $text);
        $text = str_replace('<', "", $text);
        $text = str_replace('>', "", $text);

Alles anzeigen

mr.gnom

Ups peinlich, hehe.
Stimmt ja, da war ja was, von wegen Responsive. Ich muss mich momentan einfach zuviel mit Frameworks rumschlagen so dass ich mir ne Welt ohne js momentan gar nicht vorstellen kann.

mr.gnom

Bolschi hättest du es geschaft mal bei djheke auf seine Website zu klicken (Anhang), hättest du ein Tutorial gehabt, es gibt auch massich bei youtube.

Dann die frage welches cms ?
Ich finde es schade wenn jemand gleich aggro wird nur weil er nich gleich ne Antwort bekommt.

Zitat

Dumme Antworten auf ernstgemeinte Fragen ohne jedwede Ernsthaftigkeit. Hat nichts mit einem seriösen Forum am Hut.

wie man in den wald reinruft ...

Hier extra für Dich eine Schritt für Schritt Anleitung !

Externer Inhalt www.youtube.com

Inhalte von externen Seiten werden ohne Ihre Zustimmung nicht automatisch geladen und angezeigt.

Durch die Aktivierung der externen Inhalte erklären Sie sich damit einverstanden, dass personenbezogene Daten an Drittplattformen übermittelt werden. Mehr Informationen dazu haben wir in unserer Datenschutzerklärung zur Verfügung gestellt.

mr.gnom

Ich habe Deinen Post gelesen und es als perfekte Aufgabe gesehen, da ich noch im Studium bin, bin ich noch nicht perfekt aber, ich denke das Ergebnis lässt sich sehen.
Ist aber bischen viel Quelltext geworden sry, hehe.

HTML

<!DOCTYPE HTML>
<html>
<head>
    <link rel="stylesheet" href="main.css" />
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script type="text/javascript" src="main.js"></script>
</head>
<body>
   <div id="wrapper">
        <nav>
            <div id="menu">
                <ul>
                    <li id="ul1"><a href="#">home</a>
                        <script>
                            $("#ul1")
                            .mouseleave(function(){move_out('.li1');setTimeout(function(){$('#ul1_a').css("display","none");},500);})
                            .mouseenter(function(){$("#ul1_a").css("display","block");move_in('.li1');});
                        </script>
                        <ul id="ul1_a">
                            <li class="li1"><a href="#">home2</a></li>
                            <li class="li1"><a href="#">home3</a></li>
                        </ul>
                    </li>
                    <li id="ul2"><a href="#">bilder</a>
                        <script>
                            $("#ul2")
                            .mouseleave(function(){move_out('.li2');setTimeout(function(){$('#ul2_a').css("display","none");},500);})
                            .mouseenter(function(){$("#ul2_a").css("display","block");move_in('.li2');});
                        </script>
                        <ul id="ul2_a">
                            <li class="li2"><a href="#">bilder2</a></li>
                            <li class="li2"><a href="#">bilder3</a></li>
                        </ul>
                    </li>
                    <li id="ul3"><a href="#">blog</a>
                        <script>
                            $("#ul3")
                            .mouseleave(function(){move_out('.li3');setTimeout(function(){$('#ul3_a').css("display","none");},500);})
                            .mouseenter(function(){$("#ul3_a").css("display","block");move_in('.li3');});
                        </script>
                        <ul id="ul3_a">
                            <li class="li3"><a href="#">blog2</a></li>
                            <li class="li3"><a href="#">blog3</a></li>
                        </ul>
                    </li>
                </ul>
            </div>
        </nav>
        <div id="main"></div>
    </div>
</body>
</html>

Alles anzeigen

css:

Code

* {
    margin:0;
    padding:0;
}
#wrapper {
    width: 80%;
    margin: 0 auto;
}
nav {
    width: 20%;
    min-height: 400px;
    border: 2px solid #000;
    float: left;
}
#main {
    min-height: 400px;
    border: 2px solid #000;
    margin-left: 20%;




}
#menu {
    border: 3px solid #0066CC;
    border-radius: 5px;
    width: 80%;
    margin: 10px auto 0 auto;
}




ul {
    display: block;
    list-style-type: none;
    margin: 0px auto;
    padding:0;




}
ul li {
    background-color: #0066CC;








}
li a{
    display: block;
    text-align: center;
    text-decoration: none;
    color: #CCCCCC;
    line-height: 2em;
    height: 30px;
}




ul li ul{
    display: none;
}
ul li li{
    background: #CCCCCC;
}




ul li:hover li{
    height: 30px;
}




ul li:hover ul a{
    display: block;








}
ul li ul a{
    color: #0066CC;
}




ul li ul a:hover{
    background: #57ABFF;
}
#ul1, #ul2, #ul3{
    border-bottom: 1px solid #FFF;
}




@keyframes slidein
{
    from{height:0px;opacity:0;}
    to{height:30px;opacity:1;}




}
@keyframes slideout
{
    0%{height:30px;opacity:1;}
    25%{height:22.5px;opacity:1;}
    50%{height:15px;opacity:0.5;}
    75%{height:7.5px;opacity:0.1;}
    100%{height:0px;opacity:0;}
}
@keyframes show
{
    0% {height:0px;opacity:0;}
    25% {height:0px;opacity:0;}
    50% {height:0px;opacity:0;}
    75% {height:0px;opacity:0;}
    100% {height:20px;opacity:1;}




}




.slide_in {
   animation-name: slidein;
   animation-duration: 0.5s;
}
.slide_out {
   animation-name: slideout;
   animation-duration: 0.5s;
}

Alles anzeigen

js:

Code

function move_in(wert1){
    $(wert1).removeClass("slide_out");
    $(wert1).addClass("slide_in");
};
function move_out(wert1){
    $(wert1).removeClass("slide_in")
    $(wert1).addClass("slide_out");
};

Ich bin mir sicher, es geht erheblich schöner, aber es funktioniert
hab son ding halt noch nie geschrieben.

- - - Aktualisiert - - -

Man müsste versuchen die ganze Js Action in ein Object auszulagern und dann immer wieder auf das Object zugreifen.
Das meinte ich halt mit schöner.

mr.gnom

Mach das

mr.gnom

Wenn Du Deine Website auf für Mobile einsetzen möchtest ist garnicht schwehr:

HTML

<meta name="viewport" content="width=device-width, maximum-scale=1.0, user-scalable=no">


<link rel="stylesheet" href="lib/css/main.css" media="all and (min-width: 1400px)" type="text/css" />
<link rel="stylesheet" href="lib/css/main_lap.css" media="all and (max-width: 1400px)" type="text/css" />
<link rel="stylesheet" href="lib/css/main_mobile.css" media="all and (max-width: 500px)" type="text/css" />

Die erste Zeile fragt die Weite des Displays / Monitors ab. Dann wird die dementsprechende filename.css genutzt.
Sollten für etwaige elemente Werte durch vorherige css gesetzt sein, nutze die default werte.
So hast du sogar die Möglichkeit extra Divs für mobile und divs für pc zu erstellen.
Über css kannst Du einem Div sagen display: none, und er ist weg.
Über display:block; ist er sichtbar und wird zum Blockelement. Nebenbei, so kannst Du aus einem Inline Element ein Blockelement machen, ihm eine Weite verpassen und er reagiert auf margin: 0 auto 0 auto;

mr.gnom

Meinst Du so ?

HTML

<!DOCTYPE HTML>
<HTML>
<head>
    <link rel="stylesheet" href="main.css" />
</head>
<body>
    <div id="userA">
        <form id="formA" action="#" method="post">
             <input type="submit" id="btnA" />
            <input type="text" id="textA" name="txtA" placeholder="schreiben..." />
        </form>
        <div id="userA2">
            Spieler A
        </div>
    </div>


    <div id="userB">
        <div id="userB2">
            Spieler B
        </div>
        <form id="formB" action="#" method="post">
            <input type="text" id="textB" name="txtB" placeholder="schreiben..." />
            <input type="submit" id="btnB" />
        </form>
    </div>
</body>
</HTML>

Alles anzeigen

Code

#userA {
    width: 600px;
    border: 2px solid #000;
    float:left;




}
#formA {
    float:left;
    margin-right: 4px;
}
#userA2 {
    text-align: center;
}




#userB {
    width: 600px;
    border: 2px solid #000;
    margin: 0 0 0 601px;
}
#userB2 {
    float:left;
    width: 362px;
    text-align: center;
}
#formB {




}

Alles anzeigen

Also ist jetzt nur mal so eine Idee, kann man sicherlich noch schöner machen. Aber mal ganz im ernst, das sind echt html und css grundlagen, ich empfehle Dir dringenst dich damit mal auseinander zu setzen.
Der nächste Punkt wäre in action="#" anstelle der Raute deine php file einzubinden in welcher du über ein $txtA = $mysql->real_escape_string($_POST['txtA']) den value übernimmst und damit weiter arbeitest.

mr.gnom

Du kannst noch in die document.ready mit eintragen:

Code

$("#btnA").addClass("focus");

so hast Du beim Seitenstart gleich den ersten link mit class focus

mr.gnom

HTML

<style>


   .focus{ font-weight:bold;color: red;}


</style>


.......




<nav>
   <a class="btn" id="btnA" href="#" onclick="next('#content1','#btnA');">Seite1</a>
   <a class="btn" id="btnB" href="#" onclick="next('#content2','#btnB');">Seite2</a>
</nav>


<div class="main" id="content1"></div>
<div class="main" id="content2"></div>

Alles anzeigen

js:

Code

$(document).ready(function(){


   $(".main").hide();
   $("#content1").show();


});


function next(wert,wert2)
{
$(".main").hide();
$(wert).show();


$(".btn").removeClass("focus");
$(wert2).addClass("focus");
}

Alles anzeigen

Nur werde ich immer wieder mit der Frage konfrontiert: "Und was wenn der User js ausgeschaltet hat ?". Also sollte man dieses evtl erstmal in PHP lösen und dem User über nen Hyperlink die Option geben auf http://index2.html/php zu springen wo js existent ist.

Beiträge von mr.gnom

Typo3 html code für klickbare Telefonnummer in Kombi mit bestimmter Schrift

Rechtliche Seite, Vid einbindungen

htmlentities UTF8

Responsive Navigation?

Bildslider automatisch (Javascript einbinden wo? und wie?)

Responsive Navigation?

Unterseite wird auf Smartphone nicht richtig angezeigt.

Unterseite wird auf Smartphone nicht richtig angezeigt.

Bootstrap / Hilfe bei einer Gruppe von Textfeldern und Buttons

Navigationsmenü mit CSS und Javascript Onclick steuern

Navigationsmenü mit CSS und Javascript Onclick steuern