Beiträge von hundebeinem

hundebeinem · 23. September 2017

Ich suche eine Anleitung in deutscher Sprache für Bluefish zur Verwendung auf Linux .

hundebeinem · 19. Juni 2017

Hallo Stef

Besten Dank für Deine Hilfe ich bin aber doch stecken geblieben.

Das bisherige Ergebnis ist auf http://hundebeinem.lima-city.de/ zu sehen.

Wenn ich das Bild anklicke, erscheint es vergrößert, läßt sich aber nicht zurück nehmen.

Sicherlich konnte ich das Script nicht anpassen.

Ist es richtig, daß nur die große Bildgröße eingesetzt wird?

Ich habe das im HTML so verstanden.

DW zeigt mir in der Zeile 11 "interval: 5000," "Syntaxfehler" an.

Das verstehe ich auch nicht.

Würdest du mir nochmal weiterhelfen?

Danke

Gruß

Peter

hundebeinem · 14. Juni 2017

Danke Stef, an diesem Vorschlag probiere ich noch, klappt aber bidsher noch nicht.

Danke Axel,
Ich habe
Inner Zoom gewählt.

Das steht im HTML, nach dem vorgegebenen Muster:

Den ersten Teil habe ich verstanden, das Bild kommt ja auch, der zweite Teil verweist auf das große Bild, das im selben Ordner liegt. Wie das geht, habe ich nicht verstanden.

Dann habe ich die JS Datei eingebunden:

Nun tut sich aber nichts. Sicher fehlt da noch was. Eine CSS Datei für das große Bild müsste ja auch noch da sein.

Das betreffende Bild mit dem Eiszapfen habe ich auf:

http://hundebeinem.lima-city.de/

hochgeladen.

Ich wäre dankbar für weitere Hilfe

Beste Grüße

Peter

hundebeinem · 3. Juni 2017

Beim Anklicken des verlinkten Bildes geht ein neues Fenster mit dem größeren Bild auf.

Das Browserfenster kann ich nun wieder schließen.

Mehrfach habe ich gesehen, daß im vergrößerten Bild im selben Fenster geöffnet wird, dieses hat dann einen Button, mit dem man das Bild schließen kann.

Nach meinen Erkundungen soll das mit JS gehen. Wie würde der Code dazu aussehen?

Wäre des HTML anzupassen?

hundebeinem · 11. Mai 2015

Hallo Nitamud, danke für die Antwort.
Den Ordner responsive.css gibt es nicht mehr.
Ich habe eine neue Version unter https://www.hundebeinem.lima-city.de/ eingestellt.
Dazu habe ich alles einfach auf den Server kopiert.
Kannst Du mir bitte sagen was Du meinst mit: Du solltest jQuery über https laden?
Wie gesagt, ich stecke im Lernprozeß.
Beste Grüße

hundebeinem · 9. Mai 2015

Hallo
Ich muß meine Anfrage noch mal neu beginnen, denn ich komme mit euren Antworten nicht zurecht.
Warum?
Ich habe eine Seite vorgestellt, die einige Probleme hat. Diese habe ich auch beschrieben.
Basi hat mir gezeigt, daß man den Code übersichtlicher gestalten kann und daß es hilfreich ist, die Seite auf einen Serverzu laden.

Damit hatte ich aber keinen Hinweis zur Lösung eines der von mir genannten Probleme.
Wolf zeigte mir die Meldung der Bowserkonsole ohne diese zu kommentieren. Und mit dem Hinweis, ich hätte mir bei der Fragestellung nicht genug Mühe gegeben.
Auch damit konnte ich keines der von mir genannten Probleme näher kommen.
Nitamud hat mir dann auf die Frage, was denn Die Meldungen in der Konsole bedeuten, auch nicht auf diese Frage geantwortet sondern über anderes geschrieben, dessen Zusammenhang zu meinen Fragen ich nichterkennen kann.
So habe ich heute eine menge Beiträge ohne Inhalt.
Es kann ja sein, daß ich grundsätzlich etwas falsch mache. Dann sagt das bitte. Zu wenig Mühe gegeben ist kein konstruktiver Hinweis.
Beachtet bitte, daß ich kein Informatiker bin. Meine Kenntnisse habe ich nur aus Lehrmaterial zusammengetragen. Da kann ich meine Fragen nicht klüger stellen, als ich bin. Ich finde es auch ganz natürlich, wenn Ihr nicht alles wißt. "Politikerantworten" bringen aber wirklich nicht weiter.
Ich habe eigentlich große Hoffnung in Euch gesetzt, den Ihr habt mir vor einiger Zeit schon gut geholfen.
Meine Frage allgemein ist also, wie können wir verfahren? Mir ist bewußt, daß Ihr das alles nur freundlicherweise macht.
Ich könnte Meine Probleme in einzelne Seiten aufspalten, dann kann ich auch eine begrenztere Fragestellnung erarbeiten. Geht das?

Beste Grüße
Peter

hundebeinem · 7. Mai 2015

Danke, aber ich kann die Meldungen nicht verstehen.
Wenn ich https://www.hundebeinem.lima-city.de/ eingebe, wird die Seite angezeigt.
Kannst du mir sagen was ich machen kann und warum ?
Hilft es, wenn ich die einzelnen Probleme mal voneinander getrennt darstelle?
Beste Grüße
Peter

hundebeinem · 4. Mai 2015

Antwort für Forum Wolf

Danke für die Mühen.

Ich habe die Seite mal auf : http://hundebeinem.lima-city.de gestellt.

Ich denke das macht nur -Sinn, wenn ich auch die Zugangsdaten mitgebe, damit Änderungen ausprobiert werden können. BN: hundebeinem KW: $UB@]@MdhUp/o4vcY7v6

Nun ist zwar aufgeräumt, die von mir genannten Probleme
bestehen aber wie zuvor.

Nach jetzigem Stand
sind die Codes für JS und für slider.css aus der HTML-Seite entfernt und in die
dafür erstellten Ordner verschoben. Das Ergebnis ist wie oben beschrieben und
nun läuft auch der Bildwechsel nicht mehr.

Kann jemand helfen?

Beste Grüße

Peter

hundebeinem · 27. April 2015

Guten Tag
Ich versuche mal meine Arbeit insgesamt abzusenden und meine Probleme auszuführen.

Die farbig hinterlegten Bereiche sind kein Design sondern
zum besseren Zurechtfinden gedacht.

1. Bildwechsler

HTML

<div id=bildwechsler>
    <img id="bild1" src="bilder/bild1.jpg" width="940" height="235" alt="See">
    <img id="bild2" src="bilder/bild2.jpg" width="940" height="235" alt="see">
</div>

Wenn ich in HTML die Bildgröße nicht angebe, sondern das in CSS angeben will, funktioniert der Bildwechsler nicht mehr.
Der Bildwechsler drängt über den Rand hinaus und ist nicht flexibel.
Unter "@media only screen and (max-width: XXXpx)"bekomme ich keinen Zugriff.

2. Navigation

Ab einer Bildschirmbreite von 650px, wenn also die Navigation ausgeblendet wird und der Menüschalter erscheint, funktioniert unter den zweiten Hauptmenü das Untermenü nicht mehr. Die Unterpunkte lassen sich nicht mit der Maus erreichen und die Verteilung des Untermenüs über css gelingt mir nicht.
Für den Menüschalter soll eigentlich das Bild "menu100x50"eingeblendet werden.
Es erscheint aber nur das Wort "Menü" sowie es über js eingetragen ist.
Wird die Navigation vertikal ausgerichtet, verschwindet sie hinter dem Bildwechsler.
Der Z-Index wirkt sich nicht aus.

Auslagerung von CSS und JS in die vorgesehenen Ordner

Sobald ich die Cods für den Schalter "toggleNavMain" und für den Bildswechsler aus der HTML-Seite herausnehme und über den "<head>"einbinden will, kommt keine Verbindung zustande. Sicher habe ich da Fehler gemacht, ich finde sie aber nicht.

CSS Probleme

Ich hatte die Absicht, die Bereiche <aside>und <div id="angebote"> mit einer automatischen Höhe zu versehen. Wenn ich das aber mache, fallen die Inhalte aus diesen Bereichen heraus und die Höhe wird 0.

Ich wäre für die Lösung sehr dankbar, denn ich komme nicht weiter.
Beste Grüße
Peter

Gestaltung HTML

HTML

<!doctype html>
<head>
    <meta charset="utf-8">
    <title>GarciaNetz</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />




    <link href="css/gestaltung.css" rel="stylesheet" type="text/css">
    <link rel="stylesheet" href="boilerplate.css">
    <link rel=normalize.min.css href="css/normalize.css">
    <link href="css/slider.css" rel="stylesheet" type="text/css">
    <link href="js/slider.js" rel="stylesheet" type="text/css">




    <script type="text/javascript" src="js/toggleNavMain.js"></script>
    <script type="text/javascript" src="js/slider.js"></script>
    <link href="js/toggleNavMain.js">




    <link rel="shortcut icon" href="favicon.ico">







    <script type="text/javascript">




var bild1 = new Image();
bild1.src = 'bilder/bild1.jpg';
var bild2 = new Image();
bild2.src = 'bilder/bild2.jpg';
var bild3 = new Image();
bild3.src = 'bilder/bild3.jpg';




var bildoben = 0;
var bildunten = 1;
var op = 1;
var op_ie = 100;




var diebilder = new Array('bilder/bild1.jpg','bilder/bild2.jpg','bilder/bild3.jpg','bilder/bild2.jpg');
var lang = diebilder.length;




function slider() {
    var rahmen1 = document.getElementById('bild1');
    var rahmen2 = document.getElementById('bild2');

    rahmen1.src = diebilder[bildoben];
    rahmen2.src = diebilder[bildunten];
    rahmen1.style.opacity = '1';
    rahmen1.style.filter = 'alpha(opacity=100)';

    bildoben++;
    bildunten++;




    if((bildoben+1) == lang) {
        bildunten = 0;
    }
    if(bildoben == lang && bildunten == 1) {
        bildoben = 0;
        bildunten = 1;
    }
    window.setTimeout("slidemove()",3000);
}




function slidemove() {
    if(op > 0) {
        op = op - 0.1;
        op_ie = op_ie - 10;
        document.getElementById('bild1').style.opacity = op;
        document.getElementById('bild1').style.filter = 'alpha(opacity=' + op_ie + ')';
        window.setTimeout("slidemove()",100);
    } else {
        op = 1;
        op_ie = 100;
        window.setTimeout("slider()",0);
    }
}
    </script>
</head>




<body onload="slider()">




    <div id="container">
        <header>
            <nav id="navMain">
                <ul>
                    <li><span>Startseite</span></li>
                    <li>
                        <a href="#">Projekt 1 </a>
                        <ul>
                            <li><a href="#">Unterseite1.1 </a></li>
                            <li><a href="#">Unterseite1.2</a></li>
                            <li><a href="#">Unterseite1.3</a></li>
                        </ul>
                    <li><a href="#">Projekt 2</a></li>
                    <li><a href="#">Projekt 3</a></li>
                </ul>




                <!-- <div id="toggleNavMain">Menü
                <img src="bilder/menu100x50.png">
                </div>-->
            </nav>




            <div id="ueberschrlogo">
                <div id="h1">
                    <h1>
                        <p id="text">
                            <span id="textspan">I</span>m Div h1
                        </p>
                    </h1>
                </div>
                <img src="bilder/Logoweb1.png">
                <p id="vertrauen"> vertrauen,eine Bemerkung oder eine Ergänzung</p>
            </div>
        </header>
        <!-- [url]https://www.youtube.com/watch?v=LeHN5y1LweU--[/url]>
        <div id= bildwechsler>
        <img id="bild1" src="bilder/bild1.jpg" width="940" height="235" alt="See">
        <img id="bild2" src="bilder/bild2.jpg" width="940" height="235" alt="see">
        </div>




        <!-- <div id= bildwechsler>
        <img id="bild1" src="bilder/bild1.jpg" alt="See">
        <img id="bild2" src="bilder/bild2.jpg" alt="see">
        </div>
        -->




        <hr>
        <main id="main">
            <aside>
                <article id="leitfaden">
                    <h2>Leitartikel zur Seite</h2>
                    <p>Auch gibt es niemanden, der den Schmerz an sich liebt, sucht oder wünscht, nur, weil er Schmerz ist, es sei denn, es kommt zu zufälligen Umständen, in denen Mühen und Schmerz ihm große Freude bereiten können. Um ein triviales Beispiel zu nehmen, wer von uns unterzieht sich je anstrengender körperlicher Betätigung, außer um Vorteile daraus zu ziehen? Aber wer hat irgend ein Recht, einen Menschen zu tadeln, der die Entscheidung trifft</p>
                </article>
                <address id="anschrift">
                    Falk-Peter Garcia-Greno
                    Gottschedstrasse 22
                    04109 Leipzig
                    <br>
                    Tel: 0341 2229717
                    <br>
                    Mail: [email]service@garciagreno.de[/email]
                </address>
                <div id="karte">
                    <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2492.3673995721706!2d12.367366100000009!3d51.341154400000015!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x47a6f789f618a5b7:0x1f7b30bc10773408!2sGottschedstraÃÂŸe,+04109+Leipzig!5e0!3m2!1sde!2sde!4v1428915811418" width="200" height="200"></iframe>
                </div>
            </aside>




            <div id="angebote">
                <article id="zielgruppe">
                    <h4>Ihre Zielgruppe definieren</h4>
                    <p>Auch gibt es niemanden, der den Schmerz an sich liebt, sucht oder wünscht, nur, weil er Schmerz ist, es sei denn, es kommt zu </p>
                </article>
                <article id="planung">
                    <h4>Projektplanung</h4>
                    Auch gibt es niemanden, der den Schmerz an sich liebt, sucht oder wünscht, nur, weil er Schmerz ist, es sei denn, es kommt zu
                </article>
                <article id="kommunikation">
                    <h4>Kommunikation</h4>
                    <p>Auch gibt es niemanden, der den Schmerz an sich liebt, sucht oder wünscht, nur, weil er Schmerz ist, es sei denn, es kommt zu </p>
                </article>
                <article id="detail">
                    <h4>Details</h4>
                    <p>Auch gibt es niemanden, der den Schmerz an sich liebt, sucht oder wünscht, nur, weil er Schmerz ist, es sei denn, es kommt zu </p>
                </article>
            </div><!--angebote-->
        </main>




        <footer>
            <ul>
                <li><a href="#">Impressum</a></li>
                <li><a href="#">Datenschutz</a></li>
                <li><a href="#">AGB</a></li>
            </ul>
        </footer>
    </div> <!--container-->




    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>




    <script type="text/javascript">
$(document).ready(function() {
    // Klasse "js" per jQuery zum html-tag hinzufügen.
    $('html').addClass('js');
    var navToggle = ['<div id="toggleNavMain">Menü</div>'].join("");
    // Button zum Einblenden des Hauptmenüs wird per JavaScript erstellt und in den Header eingefügt 
    $("header").append(navToggle) 
});




$(function() {
    var pull = $('#toggleNavMain');
    menu = $('#navMain');
    menuHeight = menu.height();

    $(pull).on('click', function(e) {
        e.preventDefault();
        menu.slideToggle();
    });

    $(window).resize(function(){
        var w = $(window).width();
        if(w > 320 && menu.is(':hidden')) {
        menu.removeAttr('style');
    }
    });
});
    </script>
</body>
</html>

Alles anzeigen

GestaltungCSS

CSS

*{
	margin:0;
	padding:0;
}
body {
	background-color: Teal;
	font-family: Helvetica, Arial, sans-serif;
	font-size: 0.9em;
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
}
#container {
	height: auto;
	max-width: 960px;
	box-sizing: border-box;
	margin-top: 10px;
	margin-bottom: 10px;
	margin-right: auto;
	margin-left: auto;
	background-color: Brown;
	border: 5px double #FFFFFF;
}
#navMain {
	width: auto;
	height: 2em;
	border: 3px solid  #000000;
	padding-top: 0.9em;
	padding-right: 2em;
	padding-bottom: 1.5em;
	padding-left: 6em;
	z-index: 2;
	background: #663399; /* Old browsers */
	background: -moz-linear-gradient(top,  #663399 0%, #995d99 47%, #995d99 57%, #663399 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#663399), color-stop(47%,#995d99), color-stop(57%,#995d99), color-stop(100%,#663399)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  #663399 0%,#995d99 47%,#995d99 57%,#663399 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  #663399 0%,#995d99 47%,#995d99 57%,#663399 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  #663399 0%,#995d99 47%,#995d99 57%,#663399 100%); /* IE10+ */
	background: linear-gradient(to bottom,  #663399 0%,#995d99 47%,#995d99 57%,#663399 100%); /* W3C */







filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#663399', endColorstr='#663399',GradientType=0 ); /* IE6-9 */




}




#navMain:after {
	content: '';
	clear: left ;
}




#navMain ul {
	margin: 0;
	padding: 0;
	text-align: center;
	z-index: 2;
}




#navMain li {
	list-style: none;
	float: left;
	position: relative;
	margin: 0.1em;/*Abstand zwischen den li-Elementen*/
	padding: 0.2;
	z-index: 2;
}




#navMain ul ul {
	margin: 0;
	padding: 0;
	position: absolute;
	top: 2.5em;
	font: 0/0 serif;
	/* Unternavigation ausblenden */

	z-index: -1;
	-webkit-transition: all 0.5s;
	transition: all 0.5s;
}




#navMain ul li:hover ul {
	font: inherit;
	z-index: auto;
	/*  Unternavigation einblenden */
}




#navMain ul ul li {
	float: none;
	margin-bottom: 0.2em;
}




#navMain a,
#navMain span {
	display: block;
	width: 8.4em;
	/* Breite den in li enthaltenen Elementen zuweisen */

	margin: 0.6em 0 0 0;
	padding: 0.4em;
	text-decoration: none;
	font-weight: bold;
	border: 1px solid  ;
	border-radius: 10px 10px 0 0;
	box-shadow: 0px 5px 10px white inset;
	color: gold;
	background-color:Purple;

	-webkit-transition: all 0.5s;
	transition: all 0.5s;
}




#navMain ul ul a,
#navMain ul ul span {
	border-radius: 10px;
}




#navMain a:focus,
#navMain a:hover,
#navMain span {
	/* aktuelle Unterseite kennzeichnen */

	color:#0000CD;
	background-color: Snow;




}




#navMain a:focus,
#navMain a:hover {
	margin-top: 0;
	padding: 1.0em 0.4em 0.4em;
}




#navMain ul ul a:hover {
	margin: 0.6em 0 0 0;
	padding: 0.4em;
}




#navMain ul ul span {
	/* aktuelle Unterseite kennzeichnen */

	background-color:Green;
	color:black;
}




#toggleNavMain img {
	float: right;
	display: none;
}




header {
	background-color: Cyan;
	height: auto;
	width: auto;
	box-sizing: border-box;
	padding: 5px;
	margin: 5px;
	border: 3px solid #004848;
}
main {
	height: auto;
	box-sizing: border-box;
	position: relative;
	width: 100%;
	padding: 3px;
	background-color: #FFFFFF;
	border: 5px solid #EE3387;
}
div#h1 {
	float: left;
	background-color: rgba(255,128,128,1);
	height: 40px;
	width: 40%;
	margin: 1px;
	padding: 1px;
	font-size: 12px;
} 
#textspan {
	float: none;
	font-size: 1.5em;
	line-height: 1em;
	font-family: unlock;
}
#ueberschrlogo {
	background-color: #FFFFFF;
	height: 120px;
	box-sizing: border-box;
	border: 5px solid #14BA4A;
	padding: 1px;
	margin: 1px;
}
#vertrauen {
	float: left;
	height: 1.3em;
	background-color: orchid;
	width: 40%;
	clear: left;
	margin-top: 0.3em;
	font-size: 0.95em;
}




#ueberschrlogo img {
	width: 110px;
	float: right;
	margin-right: 20px;
	max-width: 100%;




}
#bildwechsler {
	height: 235px;
	max-width: 100%;
	z-index:-1;
}




address {
	background-color: Ivory;
	width: 20%;
	float: left;
	padding: 0.5%;
	margin-top: 0.5em;
	margin-left: 2%;
}
#karte {
	background-color: Red;
	width: auto;
	float: right;
	height: auto;
	margin-top: 0.5px;
	padding-left: 0.5%;
	margin-right: 1%;
	}
#leitfaden {
	background-color: Bisque;
	width: 45%;
	float: left;
	margin: 0.5%;
	height: auto;
	}
#zielgruppe {
	background-color: Gold;
	width: 23%;
	float: left;
	margin-right: 0.5em;
	padding-left: 0.5em;
	height: auto;
}




#planung {
	background-color: Goldenrod;
	width: 23%;
	float: left;
	padding-left: 0.5em;
	margin-right: 0.5em;
	margin-bottom: 0.5em;
	height: auto;
}
#kommunikation {
	background-color: Thistle;
	width: 23%;
	float: left;
	margin-right: 0.5em;
	padding-left: 0.5em;
	height: auto;
}
#detail {
	background-color: Wheat;
	width: 23%;
	float: left;
	padding-left: 0.5em;
	height: auto;
}
#angebote {
	background-color: Violet;
	height: 140px;
	box-sizing: border-box;
	border: 5px solid #33EE37;
}
aside {
	background-color: Peru;
	height: 220px;
	box-sizing: border-box;
	border: 5px solid #11000D;
}
footer {
	background-color:Plum;
	box-sizing: border-box;
	width: 100%;
	text-align: center;/*text zentriert in der Mitte*/
	border: 5px solid #2D32F2;
}
footer ul{
	background-color:Khaki;
	display:block;
	max-width:960px;
	text-align:left;
	margin-left:10%;
	}
footer ul li {
	background-color: Silver;
	display: inline; /*setzt die Listenelemente nebenainander*/
	line-height: 2em; /*Listenhöhe*/
	padding: 0em 0.9em 0em 1.0em; /*Abstand der Schrift im Listenelement*/
	}
footer ul li a {
	color: #000000;
	font-size: 14px;
	text-decoration: none;
	}




@media only screen and (max-width: 900px){
	#bildwechsler {
	max-width: 100%;
	z-index:-1;
}
	#ueberschrlogo {
	background-color: #FFFFFF;
	height: 105px;
}
	#ueberschrlogo img {
	width:95px;
}
	#angebote {
	height: 170px;
}
	#vertrauen {
	width: 50%;
	background-color:Tomato;

}
	#zielgruppe {
	width: 48%;
}
	#planung {
	width: 48%;
}
	#kommunikation {
	width: 48%;
}
	#detail {
	width: 48%;
}
}




@media only screen and (max-width: 768px){
	#vertrauen{
	background-color:Olive;
	width: 50%;
} 
	#navMain {
	padding-left: 4em;
}
	#ueberschrlogo img {
	width:90px;
}
	#leitfaden {
	width: 40%;
	padding-left:1em;
	font-size: 12px;
	}
	#leitfaden h2 {
	font-size: 14px;
	margin-bottom: 3px;	
}
	address {
	padding: 0.5%;
	font-size: 12px;
}
	#angebote {
	height: 170px;
	font-size:0.95em;
	padding-bottom:1px;
}
	#zielgruppe {
	width: 46%;
	margin-bottom:8px;
	font-size:12px;
}
	#planung {
	width: 46%;
	float:right;
	font-size:12px;
}
	#kommunikation {
	width: 46%;
	clear:left;
	font-size:12px;
}
	#detail {
	width: 46%;
	float:right;
	margin-right:5px;
	font-size:12px;
}
@media only screen and (max-width: 700px){
	 #toggleNavMain {
	margin-left:1.5%;
}
	#vertrauen {
	width: 50%;
	clear: left;
	margin-top: 0.3em;
	font-size: 0.9em;
	background-color:red;
}
	#ueberschrlogo {
	height: 80px;
}
	#ueberschrlogo img {
	width:78px;
}
	#navMain {
	padding-left: 1em;
}
	#h1 {font-size:1em;
}
	#textspan {
	font-size: 1.5em;
}
	address {
	display:none;
}




	#ueberschrlogo img {
	width:70px;
}
	#zielgruppe {
	width: 46%;
	margin-bottom:8px;
}
	#planung {
	width: 46%;
	float:right;
}
	#kommunikation {
	width: 46%;
	clear:left;
}
	#detail {
	width: 46%;
	margin-left:4%;
}
	#angebote {
	height: 150px;
	font-size:0.8em;
}
	#leitfaden {
	width: 60%;
	float: left;
	margin: 0.5%;
	height: auto;
	font-size:0.8em;
	}

}
@media only screen and (max-width: 650px){
	#vertrauen {
	width: 70%;
	margin-top: 0.2em;
	font-size: 0.8em;
	background-color:Blue;
}
	#navMain {
	display:none;
}
	#navMain li {
	float: none;
/*Liste soll beim Aufklappen vertikal angeordnet werden*/
}
	#navMain ul ul li {
	float: right;
/*	Liste Untermenü soll nach rechts ausweichen*/




}
	#ueberschrlogo img {
	width: 50px;
	float: right;
	margin-right: 15%;
	margin-top:10px;
	max-width: 100%;
}
	#toggleNavMain {
	 display:block;
	 position: absolute;
	 right: 40px;
	 top: 40px;
	 cursor:pointer;
}
	.js #navMain {display:none;}
	#navMain {
	display:none;
}
	#leitfaden {
	width: 45%;
	padding-left:1em;
	font-size: 12px;
	}
	#leitfaden h2 {
	font-size: 12px;
	margin-bottom: 3px;	
}
	#zielgruppe {
	width: 44%;
}
	#planung {
	width: 44%;
	margin-right:5px;
}
	#kommunikation {
	width: 44%;
}
	#detail {
	width: 44%;
	}
	#angebote {
	height: 200px;
	font-size:0.8em;
}
@media only screen and (max-width: 480px){
	#toggleNavMain {
	right:8%;
}
	#vertrauen {
	width: 90%;
	margin-top: 8px;
	font-size: 0.6em;
	background-color:Magenta;
}
	#ueberschrlogo {
	height: 70px;
	border: 3px solid #14BA4A;
	padding: 1px;
	margin: 1px;
}
	#ueberschrlogo img {
	width: 30px;
	float: right;
	margin-right: 18%;
	margin-top:8px;
}
	div#h1 {
	float: left;
	background-color: rgba(255,128,128,1);
	height: 30px;
	width: 60%;
	margin: 1px;
	padding: 1px;
	font-size:0.6em;
} 
	#textspan {
	font-size: 1.2em;
	line-height: 1em;
}
	aside {
	height:270px;
	border: 3px solid #11000D;
}




	#leitfaden {
	font-size:0.7em;
	width: 50%;
	}
	#leitfaden h2 {
	font-size: 0.8em;

}
	#karte {
	width: auto;
	float:left;
	}
	iframe {
		width:110px;
		height:110px;
		padding-left:0.5%;
}
	#angebote {
	height:190px;
	padding-bottom:1px;
}
	#zielgruppe {
	width: 44%;
	font-size:0.8em;
}
	#planung {
	width: 44%;
	margin-right:5px;
	font-size:0.8em;
}
	#kommunikation {
	width: 44%;
	font-size:0.8em;
}
	#detail {
	width: 44%;
	font-size:0.8em;
	}
}
@media only screen and (max-width: 320px){
	#vertrauen {
	width: 90%;
	margin-top:2%;
	font-size: 0.6em;
	background-color:Teal;
}
	#ueberschrlogo {
	height: 60px;
	border: 2px solid #14BA4A;
	padding: 1px;
	margin: 1px;
}
	#ueberschrlogo img {
	width: 30px;
	float: right;
	margin-right: 22%;
	margin-top:8px;
}
	div#h1 {
	font-size:0.5em;
	width: 60%;
	height: 20px;
}
	#toggleNavMain {




}
	aside {
	height:280px;
	border: 3px solid #11000D;
}
	#karte {
		margin-left:0.7%;

	}
	iframe {
		width:100px;
		height:100px;
		padding-left:1.5%;
}
	#angebote {
	height:195px;
	padding-bottom:1px;
}
footer ul li a {




	font-size: 0.7em;




	}
}




slider.css
[code=css]#bildwechsler {
	height: 240px;
	max-width: 100%;
	border: 2px solid green;
	box-sizing: border-box;
	padding-left: 0.2%;
	padding-right: 0.5%;
}




#bild1{
	position: absolute;
	z-index: 2;
	opacity: 1;
	filter: alpha(opacity=100);
	max-width:100%;





}




#bild2 {
	position: absolute;
	z-index: 1;
	opacity: 1;
	filter: alpha(opacity=100);
	max-width: 100%;
}




#bildwechsler {
    height: 240px;
    max-width: 100%;
    border: 2px solid green;
    box-sizing: border-box;
    padding-left: 0.2%;
    padding-right: 0.5%;
}




#bild1{
    position: absolute;
    z-index: 2;
    opacity: 1;
    filter: alpha(opacity=100);
    max-width:100%;







}




#bild2 {
    position: absolute;
    z-index: 1;
    opacity: 1;
    filter: alpha(opacity=100);
    max-width: 100%;
}

Alles anzeigen

Javascript

JavaScript

var bild1 = new Image();
bild1.src = 'bilder/bild1.jpg';
var bild2 = new Image();
bild2.src = 'bilder/bild2.jpg';
var bild3 = new Image();
bild3.src = 'bilder/bild3.jpg';




var bildoben = 0;
var bildunten = 1;
var op = 1;
var op_ie = 100;




var diebilder = new Array('bilder/bild1.jpg', 'bilder/bild2.jpg', 'bilder/bild3.jpg', 'bilder/bild2.jpg');
var lang = diebilder.length;




function slider() {
    var rahmen1 = document.getElementById('bild1');
    var rahmen2 = document.getElementById('bild2');




    rahmen1.src = diebilder[bildoben];
    rahmen2.src = diebilder[bildunten];
    rahmen1.style.opacity = '1';
    rahmen1.style.filter = 'alpha(opacity=100)';




    bildoben++;
    bildunten++;
    if ((bildoben + 1) == lang) {
        bildunten = 0;
    }
    if (bildoben == lang && bildunten == 1) {
        bildoben = 0;
        bildunten = 1;
    }
    window.setTimeout("slidemove()", 3000);
}
function slidemove() {
    if (op > 0) {
        op = op - 0.1;
        op_ie = op_ie - 10;
        document.getElementById('bild1').style.opacity = op;
        document.getElementById('bild1').style.filter = 'alpha(opacity=' + op_ie + ')';
        window.setTimeout("slidemove()", 100);
    } else {
        op = 1;
        op_ie = 100;
        window.setTimeout("slider()", 0);
    }
}




// JavaScript toggleNavMaain




$(document).ready(function () {
    $('html').addClass('js'); // Klasse "js" per jQuery zum html-tag hinzufügen.
    var navToggle = ['<div id="toggleNavMain">Menü</div>'].join("");
    $("header").append(navToggle) /* Button zum Einblenden des Hauptmenüs wird per JavaScript erstellt und in den Header eingefügt */
});




$(function () {
    var pull = $('#toggleNavMain');
    menu = $('#navMain');
    menuHeight = menu.height();




    $(pull).on('click', function (e) {
        e.preventDefault();
        menu.slideToggle();
    });




    $(window).resize(function () {
        var w = $(window).width();
        if (w > 320 && menu.is(':hidden')) {
            menu.removeAttr('style');
        }
    });
});

Alles anzeigen

html-seminar.de/woltlab/attachment/787/html-seminar.de/woltlab/attachment/788/html-seminar.de/woltlab/attachment/789/html-seminar.de/woltlab/attachment/790/html-seminar.de/woltlab/attachment/791/

hundebeinem · 25. September 2014

Ich bedanke mich für eure Hinweise, besonders auf HTML5.
Nun werde ich alles neu mit HTML5 aufbauen.
Beste Grüße

hundebeinem · 4. September 2014

Hallo, ich suche Rat

-------------------------------------------------------------------------------------------------------------------------------------------

Rahmenbedingungen

zusätzliche Techniken: keine

Einschränkungen: keine

Browser & Betriebssystem: W7, Firefox

Editor: DW

Danke für jeden guten Rat
Peter

Problembeschreibung

Fehlermeldung/-beschreibung:

Aufgabenstellung

Der "container" soll alle Elemente außer dem
"fuss" umfassen und sich auf Bildschirmmitte zentrieren.

Der "fuss"soll sich bei Ausdehnung des "container"
immer am unteren Ende des "container" befinden.

Auftretende Fehler

Der "container" erweitert sich nur in Abhängikeit
von der Logohöhe nach unten.

Die übrigen Elemente verhalten sich als ob sie auf einer
anderen Ebene liegen würden.

Die Schaltflächen "li" lassen sich nicht auf den
linken Rand von "#ul" setzen.

bisherige Lösungsversuche: lesen von Artikeln und probieren

Code:

HTML

<body>
    <div id="container">container
        <div id="logo">"logo"
        </div>
        <!--#logo-->
        <div id="inhalt">"inhalt1"</div>
        <!--inhalt1-->
        <div id="inhalt2">id "inhalt2"</div>
        <div id="navigation">id navigation
            <div id="ul">
                <ul>
                    <li>Artikel1</li>
                    <li>Artikel2</li>
                    <li>Artikel3</li>
                    <li>Artikel4</li>
                    <li>Artikel5</li>
                    <li>Artikel6</li>
                    <li>Artikel7</li>
                    <li>Artikel8</li>
                </ul>
            </div>
        </div>
        <!--#navigation-->
    </div>
    <!--#container-->
    <div id="fuss">id "fuss"</div>
</body>




</html>

Alles anzeigen

CSS

@charset "utf-8";
body {
	background-color: hsl(60,100%,75%);
	height: 100%;
	width: 100%;
	margin-right: auto;
	margin-left: auto;
}




#container {
	background-color: hsl(180,100%,50%);
	height: 100%;
	width: 1100px;
	margin-top: 0px;
	margin-right: auto;
	margin-left: auto;
	position: relative;
	margin-bottom: 0px;
}
#logo {
	background-color: hsl(60,33%,38%);
	height: 150px;
	width: 150px;
	position: relative;
	left: 0px;
	top: 0px;
}




#fuss {
	background-color: hsl(120,100%,25%);
	width: 1100px;
	margin-right: auto;
	margin-left: auto;
	height: 80px;
	margin-bottom: -80px;
}




#navigation {
	background-color: hsl(300,100%,25%);
	height: 408px;
	width: 180px;
	position: absolute;
	left: 0px;
	top: 200px;
	padding-left: 0px;
}
#ul {
	height: 363px;
	width: 132px;
	position: absolute;
	left: 0px;
	top: 29px;
	background-color: hsl(330,100%,50%);
	padding-left: 0px;
}




li {
	background-color: hsl(0,0%,64%);
	height: 30px;
	width: 100px;
	list-style-type: none;
	position: relative;
	padding-top: 5px;
	padding-left: 10px;
	float: left;
	left: 0px;
	margin-top: 3px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 0px;
}




#inhalt {
	background-color: hsl(0,0%,0%);
	height: 500px;
	width: 400px;
	position: absolute;
	left: 210px;
	top: 10px;
	color: hsl(0,0%,100%);
}




#inhalt2 {
	background-color: hsl(0,0%,24%);
	height: 500px;
	width: 400px;
	position: absolute;
	left: 650px;
	top: 10px;
	color: hsl(0,0%,100%);
}

Alles anzeigen

hundebeinem · 10. Oktober 2013

Danke, es geht nach dieser Methode.
mein css sieht nun so aus:

CSS

#Seitenstreifen {
background-color: hsla(60,100%,67%,1);
height: 352px;
width: 1100px;
position: absolute;
top: 50%;
margin-top: -320px;
margin-left: -800px;
left: 50%;
padding-top: 0%;
padding-left: 50%;

hundebeinem · 8. Oktober 2013

Hallo Ralf
Dein Rat zur Containerbreite hat mich zu einem neuen Lösungsansatz geführt, das eigentliche Problem ist aber folgendes:
Ich will einen Container estellen, in dem alle andern Elemente ligen und dieser soll sich mittig im Body ausrichten.
Soweit geht alles gut.
Der Seitenstreifen soll sich über die 960 Px hinaus über den gesamten Bildschirm verteilen und das ist das Problem.
Versuche ich den Seitenstreifen im Container anzuordnen, zeigt sich, daß er den optisch nicht verlässt.
Ordne ich den Seitenstreifen im body an, also auf gleicher Ebene wie den Container, sehe ich im Firefox nur den Container und keinen Streifen.
Ich sende noch mal den vereifachten Quelltext, vielleicht kann jemand meinen Fehler erkennen.
Beste Grüße Peter

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<link href="Stylesheets/Zentrierung0.css" rel="stylesheet" type="text/css">
</head>

<body>
<div id="Container">Raum für den Inhalt von id "Container"
<div id="Seitenstreifen">Raum für den Inhalt von id "Seitenstreifen"</div>
</div>
</body>
</html>

css
@charset "utf-8";
body {
height: 100%;
width: 100%;
background-color: hsla(240,100%,90%,1);
}
#Container {
background-color: hsla(166,100%,44%,1);
height: 2000px;
width: 960px;
margin-right: auto;
margin-left: auto;
position: relative;
}
#Seitenstreifen {
background-color: hsla(60,100%,67%,1);
height: 352px;
width: 1200px;
position: absolute;
top: 400px;
}

hundebeinem · 6. Oktober 2013

Hallo
In den vorhandenen Beiträgen habe ich leider keine Lösung zu meinem Problem finden könne.
Ich habe den Container im Body zentriert, das geht auch bei verschiedenen Bildschirmgrößen.
Fülle ich den Container mit Div-Bereichen, erscheint der Scrollbalken und ich muß den Container in die Mitte rücken,
obwohl ich den Div "Seitenstreifen" mit Width auto versehen habe und dieser leer ist.
Kann mir jemand Helfen?
Beste Grüße
<body>
<div id="container">
<h1>Juwelier und Goldschmiedeatelier in Leipzig</h1>
<div id="firmierung">Firmierug</div>
<div id="Navigation">Raum für den Inhalt von id "Navigation"</div>
<div id="seitenbild">Seitenbild</div>
<h2> GOLDSCHMIEDEATELIER GARCIA</h2>
<div id="Seitenstreifen"></div>
<div id="seitentext">Seitentext</div>
<div id="fussnavigation">Fussnavigation</div>
</div>

</body>

css basisaufteilung
@charset "utf-8";
#firmierung {
height: 215px;
width: 650px;
position: absolute;
left: 500px;
top: 118px;
color: hsla(240,100%,50%,1);
background-color: hsla(44,100%,97%,1);

}
#Seitenstreifen {
height: 352px;
position: relative;
top: 400px;
text-align: center;
width: auto;
margin-right: auto;
margin-left: auto;
left: auto;
right: auto;
}

#seitentext {
background-color: hsla(44,100%,97%,1);
height: 1500px;
width: 960px;
position: absolute;
left: 500px;
top: 800px;
text-align: left;
font-size: 16px;
}
#Navigation {
background-color: hsla(340,100%,50%,1);
height: 250px;
width: 240px;
position: absolute;
left: 1220px;
top: 80px;
}

#fussnavigation {
height: 50px;
width: 760px;
position: absolute;
left: 500px;
top: 2300px;
margin-right: auto;
margin-left: auto;
padding-right: 100px;
padding-left: 100px;
background-color: hsla(0,0%,100%,1);
}

#seitenbild {
background-color: hsla(240,100%,90%,1);
height: auto;
width: 460px;
position: absolute;
top: 500px;
left: 1000px;
z-index: 1;
}
h2 {
font-family: Arial, Helvetica, sans-serif;
position: absolute;
left: 510px;
top: 692px;
z-index: 1;
color: #333333;
font-weight: lighter;
font-variant: small-caps;
}
h1 {
font-size: 1.2em;
text-indent: -2450px;
}

CSS Zentrierung
@charset "utf-8";
body {
background-color: hsla(60,100%,67%,1);
margin: 0px;
height: 100%;
width: 100%;
padding: 0px;
border-top-width: thick;
border-right-width: thick;
border-bottom-width: thick;
border-left-width: thick;
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
border-top-color: hsla(80,100%,12%,1);
border-right-color: hsla(80,100%,12%,1);
border-bottom-color: hsla(80,100%,12%,1);
border-left-color: hsla(80,100%,12%,1);
}
#container {
background-color: hsla(140,100%,75%,1);
height: 2500px;
width: 2000px;
margin-top: 0px;
margin-right: auto;
margin-left: auto;
position: relative;
padding-left: 0px;
padding-right: 0%;
font-family: Arial, Helvetica, sans-serif;
font-size: 18px;
color: hsla(270,100%,17%,1);
text-align: center;
}
container zentriert sich im body und passt sich verschiedenen Bildschirmgrössen an

hundebeinem · 18. Juli 2013

Danke für die Rüge.
Ich habe den Eintrag entspechend Rolands Hinweis gemacht und es klappt.
Für mich ist nur irritierent, dass in dem Videovortrag von Praxner,
nachdem ich das Formular nachgebaut habe, dieser Eintrag nicht notwendig war.
Entscheidend für mich ist aber erstmal ein brauchbares Ergebnis.
Danke

hundebeinem · 15. Juli 2013

html-seminar.de/woltlab/attachment/452/Hallo
Ich bedanke mich bei euch allen für die schnelle Hilfe.
Mein Problem hat sich sicher unter anderen Fehlern und Unkenntnissen verborgen.
Das Bild im Anhang macht klar, worum es geht.
Sichtbar ist das im Firefox aufgerufene Formular.
Der Besucher soll die Notice 43 / 48 nicht präsentiert bekommen und die Eingabefelder sollten im ersten Durchlauf leer sein.
Im zweiten Durchlauf, falls ein Eintrag vergessen wurde, sollten die Eintragungen des ersten Durchlaufes erhalten werden.
Das war mit dem php in value bezweckt.
Der Lehrer axel Pratzner hat das in seinem Videovortrag vorgemacht. Da waren die Felder auch leer. Bei mir sind diese Einträge zu sehen.
Leider kann ich den Originalquelltext nicht aus dem Video kopieren. Ich muß einen Abschreibefehler gemacht haben.
Inzwischen sieht mein Text so aus:
<?php
echo "<li>Anrede:" .$_GET['gender'];
echo "<li>Vorname:" .$_GET['vorname'];
echo "<li>Anliegen:".$_GET['anliegen'];

if ($_GET['vorname'] =="")
{
echo "<p>Bitte Vornamen eintragen!</p>";
}
if ($_GET['gender'] =="")
{
echo "<p>Bitte Anrede eintragen!</p>";
}
if ($_GET['anliegen'] =="")
{
echo "<p>Bitte Anliegen eintragen!</p>";
}

if($_GET['vorname'] == "" OR
$_GET['gender'] == "" OR
$_GET['anliegen'] == "" )

//wenn eins der Felder leer ist, bring das Formular
{
?>

<p>Anrede</p> <br/>
<input
name="gender"
type="radio"
value="w" /> Frau
</p>
<input
name="gender"
type="radio"
value="m" /> Mann
</p>

<?php
if ($_GET['gender']== "w" )
{
echo 'checked="checked"';
}

if ($_GET['gender']== "m" )
{
echo 'checked="checked"';
}
//Die php-Einträge bewirken, dass nach dem ersten Durchlauf die schon gemschten Einträge des Besuchers erhalten bleiben

?>
<br/>
<p>Name</p> <br/>
<input name='vorname' type="text" value="<?php echo $_GET['vorname'];?>" size="20" maxlength="20"/> <br/>
<p>Anliegen</p> <br/>
<textarea name='anliegen' cols="20" rows="5"> <?php echo $_GET ['anliegen']?> </textarea><br/>

<?php
}
//heißt: wenn Felder ausgefüllt sind, dann Auswertung
else
{
echo "<h2>hier Auswertung</h2>";
}
?>
Beste Grüße

hundebeinem · 15. Juli 2013

Hallo
Wenn ich das Formular im Firefox aufrufe, müßten die Felder "Name" und "Anliegen" leer sein, damit ich die Inhalte einschreiben und absenden kann.
Im Feld Name ist aber folgender Eintrag:
<b>Notice</b>: Undefined index: vorname in <b>C:\xampp\htdocs\Formulare\Formular.php</b> on line <b>59</b><br />
im Feld Anligen steht:
<b>Notice</b>: Undefined index: anliegen in <b>C:\xampp\htdocs\Formulare\Formular.php</b> on line <b>61</b><br />
Ich bin ratlos.
Beste Grüße

hundebeinem · 13. Juli 2013

Hallo Laura
Danke für Dein Angebot. Folgend ist der Text zu sehen um den es geht. Solange der php-Teil nicht das value usw. eingetragen ist, funktioniert alles.
Mit den php-Enträgen in den HTML-Teil kommt dann aber igendwie ein Fehler rein.php

PHP

<?php
echo "<li>Anrede:" .$_GET['gender'];
echo "<li>Vorname:" .$_GET['vorname'];
echo "<li>Anliegen:".$_GET['anliegen'];




if ($_GET['vorname'] =="")
{
echo "<p>Bitte Vornamen eintragen!</p>";
}
if ($_GET['gender'] =="")
{
echo "<p>Bitte Anrede eintragen!</p>";
}
if ($_GET['anliegen'] =="")
{
echo "<p>Bitte Anliegen eintragen!</p>";
}




if($_GET['vorname'] == "" OR
$_GET['gender'] == "" OR
$_GET['anliegen'] == "" )










//wenn eins der Felder leer ist, bring das Formular 
{
?>




<hr/>
<form action="Formular.php" method="get">




<p>Anrede <br/>
<input 
name="gender" 
type="radio" 
value="w" 
<?php
if ($_GET['gender']== "w" )
{
echo 'checked="checked"';
} 
?> 
/> Frau <br/>
<input 
name="gender" 
type="radio" 
value="m" 
<?php
if ($_GET['gender']== "m" )
{
echo 'checked="checked"';
} 
//Die php-Einträge bewirken, dass nach dem ersten Durchlauf die schon gemschten Einträge des Besuchers erhalten bleiben




?>




/> Herr <br/>
<p>Name <br/>
<input name="vorname" type="text" value="<?php echo $_GET['vorname'];?>" size="20" maxlength="20"><br/>
<p>Anliegen <br/>
<textarea name="anliegen" cols="20" rows="5"><?php echo $_GET ['anliegen']?></textarea><br/>




<input type="submit" value="absenden"> 
</form>




<?php
}
//heißt: wenn Felder ausgefüllt sind, dann Auswertung
else
{
echo "<h2>hier Auswertung</h2>";
}
?>

Alles anzeigen

Danke und beste Grüße

hundebeinem · 9. Juli 2013

Ich bin dabei, das Kontaktformular auf der DVD 1, PHP-Kurs.com, von Axel Pratzner nachzubauen.
Sicher mache ich immer dabei Fehler, so daß ich nicht zum Ziel komme.
Kann mir jemand den Quelltext senden?
Danke

Beiträge von hundebeinem

bluefish tutorial deutsch

Ein verlinktes größeres Bild im selben Fenster öffnen und mit einem Button wieder schließen

Ein verlinktes größeres Bild im selben Fenster öffnen und mit einem Button wieder schließen

Ein verlinktes größeres Bild im selben Fenster öffnen und mit einem Button wieder schließen

Verschiedene Probleme bei der Entwicklung einer Seite

Verschiedene Probleme bei der Entwicklung einer Seite

Verschiedene Probleme bei der Entwicklung einer Seite

Verschiedene Probleme bei der Entwicklung einer Seite

Verschiedene Probleme bei der Entwicklung einer Seite

Anordnung von Elementen mit css

Anordnung von Elementen mit css

Zentrierung

Zentrierung

Zentrierung

PHP-Kurs.com, DVD 1

PHP-Kurs.com, DVD 1

PHP-Kurs.com, DVD 1

PHP-Kurs.com, DVD 1

PHP-Kurs.com, DVD 1