du musst aus die divs mit der class container in container-fluid ändern!
<div class="container-fluid">
du musst aus die divs mit der class container in container-fluid ändern!
<div class="container-fluid">
Versteh das Problem nicht!
im Moment weist du den div in der class intro einen Backround zu. dieser div umschließt die gesamte Seite??
einfache Rechenaufgabe 4 x 400 = 1600
also sollte das so aussehen:
.image-holder
{
width: 1600px;
background-color: yellow;
height: 200px;
clear: both;
position: relative;
Ich tu die Website auch in xampp erstellen.
Nach Fertigstellung mach ich eine Sicherung der Datenbank, welche mit zum Beispiel phpMyAdmin auf den Webserver übertragen wird. Dann installiert man Wordpress auf den Webserver und bindet diese Datenbank ein.
Danach kopiert man das lokale Wordpress-Verzeichnis "wp-content" auf den Server und alles sollte laufen.
Um in WordPress die gZIP Kompression zu aktivieren musst du nur
folgenden Code in die functions.php eintragen,
unter dem öffnenden PHP Tag.
ob_start("ob_gzhandler");
dann sollte der gZIP Cache einschaltet sein
Testen kannst du das ganze dann unter:
http://www.gidnetwork.com/tools/gzip-test.php
Versuchs mal mit der Endung .html
Das einbetten sollte in etwa so erfolgen, dann kannst du mit width und height die Größe selbst bestimmen.
<p>[embed width=“300" height=“170"]https://www.youtube.com/video[/embed]</p>
das Video in HTML einbinden:
<video autoplay muted class="bg__video">
<source src="video.mp4" type="video/mp4">
</video>
und in den Styles den Z-Index auf -100 setzen:
.bg__video {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -100;
}
in diesen Fall läuft das Video im Fullscreen.
Mögliche Lösung wäre einen Flexbox :
Dem Logo die class="img-responsive" geben statt 100%
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap - Prebuilt Layout</title>
<link href="css/bootstrap.css" rel="stylesheet">
<link href="styls.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="container navigation-logo " >
<div class="col-md-6"> <a href="index.html"><img class="img-responsive" src="img/logo.png" ></a> </div>
<div class="col-md-6 navi-buttom">
<nav class="navbar navbar-default">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"> <span class="sr-only">Navigation ein-/ausblenden</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right" >
<li class="active"><a href="#">Link 1 <span class="sr-only">(aktuell)</span></a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
<li><a href="#">Link 4</a></li>
<li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Menü <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Aktion 1</a></li>
<li><a href="#">Aktion 2</a></li>
<li><a href="#">Aktion 3</a></li>
<li role="separator" class="divider"></li>
<!-- Trennlinie -->
<li><a href="#">Link 1</a></li>
<li role="separator" class="divider"></li>
<!-- Trennlinie -->
<li><a href="#">Link 2</a></li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</nav>
</div>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="js/jquery-1.11.2.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.js"></script>
</body>
</html>
Alles anzeigen
Inhalt der styles.css:
eigentlich ist alles richtig, bei mir funktioniert es mit allen Browsern.
Vielleicht ist Java deaktiviert?
Versuchs mal damit, funktioniert bei mir sehr gut:
// set focus when modal is opened
$('#modal-content').on('shown.bs.modal', function () {
$("#txtname").focus();
});
// show the modal onload
$('#modal-content').modal({
show: true
});
// everytime the button is pushed, open the modal, and trigger the shown.bs.modal event
$('#openBtn').click(function () {
$('#modal-content').modal({
show: true
});
});
Alles anzeigen
<style>
.infotip span{
visibility: hidden;
}
.infotip:hover span{
visibility: visible;
}
</style>
<html>
<head>
<meta charset="utf-8">
<title>Unbenanntes Dokument</title>
</head>
<body>
<a href="#" class="infotip"><img src="http://domain.de/pfad/images/info.png"/><br><span>Zeile 1<br />
Zeile 2<br />Zeile 3</span></a>
</body>
</html>
.slider {
background-color: yellow;
height: 500px;
}
.bild1 {
background-color: green;
min-height: 245px;
margin-bottom: 10px;
}
.bild2 {
background-color: red;
min-height: 245px;
Das es immer noch kein deutschsprachiges Bootstrap Forum gibt habe ich mich entschlossen selbst eins ins Leben zu rufen.
Nun bin ich auf der Suche nach einigen Moderatoren für die Bereiche CSS JS HTML PHP MySQL ...
Bei Intresse meldet euch per PM.
Danke!
Forum ist nun online und unter (Deadlink von Moderation entfernt) zu erreichen.
Ich hoffe doch das es noch mehr Leute gibt mit der Begeisterung für Bootstrap!
Habe ein Problem die breadcrumb in bootstrap mittig ausrichten.
<div class="container">
<ol class="breadcrumb">
<li><a href="index.html">Start</a> </li>
<li><a href="firma.html">Service</a> </li>
<li><a href="kontakt.html">Kontakt</a></li>
<li><a href="links.html">Links</a></li>
<li><a href="impressum.html">Impressum</a></li>
</ol>
</div>
Hat jemand eine Idee?
die Lösung war wieder einfacher als gedacht
Welchen Effekt meinst den für das Menu, einen anderen hab ich dort nicht gefunden?
HTML-Seminar.de - mit Videos zum schnellen Lernen, wie man eine Website selbst erstellt.