Hallo, ich hänge gerade vor einem Problem, bei dem ich keine Erklärung habe. Wenn man die folgende Webseite https://erich-wolf.de/rieg/ nach unten scrollt, sollte ein Back to top Button erscheinen. Wenn man drauf klickt, scrollt die Seite wieder zurück auf Anfang. Soweit so gut. Warum funktioniert das lokal auf meinem PC. Wenn ich die gleichen Dateien auf den Webspace lade funktioniert das nicht!
Hat jemand einen Rat?
Deine Rundschreiben kannst du auch mit einem Editor zum Erstellen von Blätterkatalogen herstellen. Schau mal auf diese Seite, ob das etwas für dich ist. https://gtsl.de/
So isch er halt unser Scatellole! Immer a Bissle destruktiv! Der wird au noch andersch, wenn er erst erwachsa isch! Des wächst sich aus. 
Hallo Arne, sind die beiden Shopsysteme kostenfrei?
Hallo, ich brauch mal wieder Hilfe von den Profis.
Ich bin gerade mal wieder am Lernen und habe mir eine Webseite mit Grid zusammengebastelt. Leider bekomme ich die obere Navigationleiste nicht so hin, wie ich mir das wünsche. Die drei rechten Icons sollen dicht nebeneinander und nach rechts ausgerichtet sein. Kann mir jemand einen Tipp geben, wie ich das bewerkstelligen kann?
Danke!
Hallo zusammen, ich bin Rentner, Anfänger und begeisterter "Webseitenmacher". In diesem Forum bin ich jeden Tag unterwegs, habe alle Videos gekauft und durchgearbeitet und viel Spaß dabei gehabt. Danke an alle hier, die mich immer freundlich behandelt und mir geholfen haben, wenn ich mal wieder gescheitert bin. Ich hoffe das ist noch lange so.
Ein Witzle von mir:
Kommt ein Kunde in einen Laden und möchte eine blaue Deutschlandflagge kaufen. Wir haben nur schwarz, rot, goldene Deutschlandflaggen erwidert die Verkäuferin. Sagt der Kunde, dann nehme ich halt eine rote!
Hoffentlich baut der nie ein Haus!!!
Ich finde die Hilfe zur Selbsthilfe von m.scatello angemessen. Wenn man Webdesign ernsthaft erlernen will, dann muss man schon einen gewissen Zeitaufwand betreiben und, fertig ist man nie!
Sorry Leute, ich stehe ein Bisschen auf dem Schlauch. Danke Euch! mit
wollte ich die Abstände zwischen den Listenpunkten verkleinern, weil mir das so nicht gefällt.
Ich beschäftige mich gerade mit dem Thema Flexbox und habe eine Webseite als one-pager erstellt. Kann mir jemand erklären, warum es bei längeren <li>Einträgen zu diesem komischen Phänomen kommt, dass die Inhalte übereinander liegen. Für Hilfe immer dankbar. Ich habe schon alles ausprobiert.
HTML
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="style_3.css">
<title>One - Pager</title>
</head>
<body>
<div class="container">
<header class="header">
<div class="header_l">
<img src="images/logo.png" alt="Logo">
</div>
<div class="header_r">
<a href="index_3.html#physio"><img src="images/physioIcn.jpg" alt="Physio"></a>
<a href="index_3.html#team"><img src="images/teamIcn.png" alt="Team"></a>
<a href="index_3.html#kontakt"><img src="images/contactIcn.png" alt="Kontakt"></a>
</div>
</header>
<!--<nav class="nav-box1">Navi</nav>-->
<div class="welcome"><!-- Content mit 1 Spalten -->
<h2 class="left">WILLKOMMEN</h2>
<h3>Olaf Gerlach</h3>
<p>Praxis für Krankengymnastik und Physiotherapie, Schwäbisch Hall <br><br>
Herzlich willkommen auf unserer Website <br><br>
Olaf Gerlach und sein Team helfen Ihnen mit Freude gesund zu werden und gesund zu bleiben. Gesund werden und gesund bleiben ist
die Philosophie von Olaf Gerlach und seinem Team und stellt Sie in den Mittelpunkt:<b>unsere Kunden und Patienten.
Olaf Gerlach und Team
</p>
</div>
<div id="physio">
<div class="welcome"> <!-- Content mit 1 Spalten -->
<h2>physiotherapie</h2>
<p>In der Physiotherapie behandeln wir Patienten mit orthopädischen, unfallchirurgischen, sporttraumatologischen sowie
neurologischen Krankheitsbildern. Aus einer Vielzahl von Behandlungsmethoden wählen wir in Abstimmung auf Ihre Erkrankung
das passende therapeutische Verfahren. Sollten Sie eine bestimmte Behandlungsmethode wünschen, so sprechen Sie diese bitte
mit unseren Therapeuten oder bei der Anmeldung ab. Unser Ziel ist Sie in angenehmer Atmosphäre nach den neuesten
wissenschaftlichen Erkenntnissen zu versorgen.
</p>
</div>
<div class="content"> <!-- Content mit 3 Spalten -->
<div class="box1"><h2>PHYSIOTHERAPIE/ KRANKENGYMNASTIK</h2>
<ul>
<li>Manuelle Therapie</li>
<li> Massage</li>
<li>Gerätegestützte Krankengymnastik</li>
<li> Manuelle Lymphdrainage</li>
<li>PNF - Propriozeptive Neuromuskuläre Fazilation</li>
<li>Kieferbehandlung (Zahnarztverordnung) bei <br> Cranio Mandibulärer Dysfunktion usw.</li>
<li>Naturmoor-Packung</li>
<li> Skoliosetherapie für Kinder, <br> Jugendliche und Erwachsene</li>
</ul>
</div>
<div class="box2">
<h2>PHYSIKALISCHE THERAPIE</h2>
<ul>
<li>Elektrotherapie</li>
<li>Naturmoorbehandlung</li>
<li>Wärmetherapie</li>
<li>Kältetherapie</li>
<li>Schlingentisch/ Extension</li>
<li>Ultraschallbehandlung</li>
</ul>
<p>und vieles mehr...</p>
</div>
<div class="box3">
<h2>PRIVATE LEISTUNGEN</h2>
<ul>
<li>Cranio Sacrale Osteopatie</li>
<li>Kinesiotaping</li>
<li>Personal Training</li>
<li>Trainingsgruppen</li>
<li>Geschenkgutscheine</li>
<li>Thai-Massagen</li>
<li>Propriozeptive neuromuskuläre Fazilitation (PNF)</li>
</ul>
<p>und vieles mehr...
</p>
<h2>HAUS- UND HEIMBESUCHE MÖGLICH</h2>
<ul>
<li>Klassische Massage</li>
<li>Bindegewebsmassage</li>
<li>Manuelle Lymphdrainage</li>
</ul>
</div>
</div>
</div>
<div id="team">
<div class="content1"> <!-- Content mit 2 Spalten -->
<div class="box1"> <h2>(1) box1</h2> <p> Consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. </p>
</div>
<div class="box2"> <h2>(2) box2</h2>
<p> Consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et t justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
</div>
</div>
</div>
<div id="kontakt">
<div class="content2"> <!-- Content mit 3 Spalten -->
<div class="box1"> <h2>(1) box1</h2>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
<p> Consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna t, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
</div>
<div class="box2"> <h2>(2) box2</h2>
<p> Consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna et, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
</div>
<div class="box3"><h2>(3) box3</h2><p> Consetetur sadipscing elitr, sed diam nonumy eirmod tempor r sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
</div>
</div>
</div>
<footer class="footer">(6) Footer</footer>
</div>
</body>
</html>
CSS
* {
padding:0;
margin:0;
}
ul {
line-height: 0.1em;
}
body {
background: #333;
margin: 0;
font-family: arial, sans-serif;
}
.container {
background: white;
margin: 0 auto;
padding: 1em;
max-width:1500px;
}
.container * { padding: 1em; }
/*.header { background: #aa8147; }*/
.header_l img{
width: 40%;
}
.nav-main { background: #97a2aa; }
.welcome {
background: #fff;
padding: 1em;
}
.content, .welcome, .team, .kontakt {padding: 0;}
/*.box1 { background:#fff; }
.box2 { background: #f0f3f5; }
.box3 { background: #daedc1; }*/
.footer {
background: #353535;
color: white;
}
h1, h2, h3 {
text-align: left;
}
p {
text-align: justify;
}
#box3 ul li {
line-height: 1;
}
@media screen and (min-width: 600px) {
body {margin:1em;}
.header{
display: flex;
flex-direction: row;
justify-content: end;
align-items: flex-end;
}
.header_r{
flex: 1;
background: #fff;
text-align: right;
}
.header_l{
flex: 1;
background: #fff;
}
.header_l img{
width: 50%;
}
.welcome { background: lightgrey;
margin-left: 10%;
margin-right: 10%;
padding: 1em;
color: #000;
}
.content {
background-color: #aa8147;
margin-left: 10%;
margin-right: 10%;
display: flex;
}
.content1 {
background-color: lightblue;
margin-left: 10%;
margin-right: 10%;
display: flex;
}
.content2 {
background-color: red;
margin-left: 10%;
margin-right: 10%;
display: flex;
}
.box1 {
flex: 1;
order: 1;
}
.box2 {
flex: 1;
order: 2;
}
.box3 {
flex: 1;
order: 3;
}
.left {
text-align: left;
}
}Hat damit schon jemand Erfahrung?
Danke basti1012! Manchmal sieht man den Wald vor Bäumen nicht!
Ich möchte gerne das Cevron-Zeichen von Font Awesome in einen Button zum Top Scrollen einsetzen und habe mir dazu den angehängten Code von w3schools kopiert. Warum erscheint das Cevron Zeichen nicht auf dem Button? Kann mir jemand weiter helfen?
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Test </title>
<style>
body {
font-family: Arial, Helvetica, sans-serif;
font-size: 20px;
}
#myBtn {
display: none;
position: fixed;
bottom: 20px;
right: 30px;
z-index: 99;
font-size: 18px;
border: none;
outline: none;
background-color: red;
color: white;
cursor: pointer;
padding: 15px;
border-radius: 4px;
}
#myBtn:hover {
background-color: #555;
}
</style>
</head>
<body>
<button onclick="topFunction()" id="myBtn" title="Go to top"><span><i class="fas fa-chevron-up"></i></span></button>
<div style="background-color:black;color:white;padding:30px">Scroll Down</div>
<div style="background-color:lightgrey;padding:30px 30px 2500px">
<h2>This example demonstrates how to create a "scroll to top" button that becomes visible when the user starts to scroll the page.</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Magnam veritatis possimus molestias enim inventore voluptatibus totam nisi a repellat et fugit non animi nam expedita labore, quia minus autem! Corporis.
Omnis eaque at quasi, dicta similique necessitatibus harum aut suscipit, repudiandae accusantium odio aperiam voluptatibus nobis voluptas odit iusto hic consequatur ullam esse, temporibus nisi consequuntur. Atque veritatis alias sapiente?
Fugiat, alias ea. Hic ipsam ratione consequuntur pariatur reiciendis, beatae, rerum eos error atque eaque vel doloribus amet officia explicabo nesciunt. Libero nihil excepturi, vero odit maxime nam quia repellat.
Mollitia eos, aliquid natus nam ut eaque facere placeat commodi at minima dolor facilis magni dolores minus, architecto, provident aspernatur reiciendis adipisci est harum sit. Doloribus consequuntur eligendi nobis libero!
Tenetur rerum, suscipit vitae omnis animi aliquid voluptate labore veniam harum, eius perspiciatis facere natus. Facere delectus aliquid soluta debitis odio quasi omnis, velit minus unde animi ab, dicta magni.
Tempore, vitae. Quos excepturi animi eos consectetur eaque voluptate, voluptatem repudiandae deserunt aperiam perferendis sit, iusto, facere quas a ex veniam officiis? Velit nulla, odit ab aliquam cupiditate ipsa numquam?
soluta alias ex! Fugit labore magnam vel exercitationem eveniet sequi hic unde illum autem deleniti! Sint, rerum.</p>
</div>
<script>
// When the user scrolls down 20px from the top of the document, show the button
window.onscroll = function() {scrollFunction()};
function scrollFunction() {
if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
document.getElementById("myBtn").style.display = "block";
} else {
document.getElementById("myBtn").style.display = "none";
}
}
// When the user clicks on the button, scroll to the top of the document
function topFunction() {
document.body.scrollTop = 0;
document.documentElement.scrollTop = 0;
}
</script>
</body>
</html>Vielen Dank Euch allen. Das was Ihr schreibt unterstreicht meinen ersten Eindruck. Ich lasse die Finger davon. Meine Zeit ist zu kostbar.
Hallo zusammen, ich bin Rentner und habe mich als Hobby dem Herstellen von Webseiten verschrieben. Ich unterstütze mit meinem Wissen ehrenamtlich Vereine und kleine Unternehmer. In den letzten Jahren habe ich mich ganz gut in die Materie HTML5 und CSS3 eingearbeitet und verwende seit kurzem Flexbox und Grid. Seit letzter Woche habe ich mich in die Technik von Bootstrap eingelesen und frage mich, ob ich Bootstrap nutzen sollte. Was spricht aus Eurer Erfahrung/ Praxis dafür oder dagegen?
Danke Sempervivum, das ist die Auswirkung, wenn man zu lange vor dem Rechner sitzt. Zwei kleine Änderungen - .text in .textbox und column statt row - und schon flutscht es wie gewünscht.
Hallo zusammen, ich verbringe jetzt schon den halben Sonntag, um mich in Flexbox fit zu machen. Allerdings stoße ich jetzt an eine Grenze. Ich möchte in einer Webseite deren 3 Container column ausgerichtet sind in den mittleren Container eine Textbox mit 3 weiteren Containern Ausrichtung column einfügen. Diese Textbox soll bei "@media only screen and (max-width: 48em) " row ausgerichtet sein, also die Container sollen sich unter einander anordnen. Ich habe alles Mögliche schon probiert, kriege aber einfach nicht die Kurve. Googlen hilft mir im Moment einfach nicht weiter. Den Code habe ich auf einen Webspace gestellt KVW-Test. Vielleicht kann mir jemand helfen? Danke und Gruß
Ich habe das mit MAGIX Photo & Grafik-Designer "nachgebaut" und komme zum gleichen Ergebnis!
Ich habe mittlerweile diese Version Owl carousel ausprobiert und die funktioniert gut. Für alle, die das auch interessiert.