Dieses Forum nutzt Cookies
Dieses Forum verwendet Cookies, um deine Login-Informationen zu speichern, wenn du registriert bist, und deinen letzten Besuch, wenn du es nicht bist. Cookies sind kleine Textdokumente, die auf deinem Computer gespeichert sind; Die von diesem Forum gesetzten Cookies düfen nur auf dieser Website verwendet werden und stellen kein Sicherheitsrisiko dar. Cookies auf diesem Forum speichern auch die spezifischen Themen, die du gelesen hast und wann du zum letzten Mal gelesen hast. Bitte bestätige, ob du diese Cookies akzeptierst oder ablehnst.

Ein Cookie wird in deinem Browser unabhängig von der Wahl gespeichert, um zu verhindern, dass dir diese Frage erneut gestellt wird. Du kannst deine Cookie-Einstellungen jederzeit über den Link in der Fußzeile ändern.

  Problem mit Modal
Geschrieben von: markusw1985 - 08.07.2019, 22:49 - Forum: Bootstrap 4 - Antworten (1)

Hallo zusammen,

ich bin noch ziemlich neu in der Web Entwicklungs-Welt und mache gerade meine ersten Erfahrungen mit Bootstrap. Im Moment versuche ich mich an einem Projekt, in dem ich mit einigen Modal Fenstern arbeite, die von einer Hauptseite aus geöffnet werden können. Bei einem dieser Fenster habe ich nun leider ein Problem.

Folgendes soll passieren: ich möchte mit einem Klick auf einen Button ein Modal Fenster öffnen, in dem ich dann eine andere HTML Seite lade (aus einer anderen HTML Datei mit jQuery). Wenn ich das Fenster wieder schließe, soll es ganz normal auf der Hauptseite weitergehen. Von dieser aus könnte ich dann zum Beispiel andere Modal Fenster öffnen.

Code zum öffnen des Modals:

function showModal(id) {
$("#myModalBody").load("/show_mysite?my_id=" + id);
$("#myModal").modal();
}

Folgendes ist das Problem: erstmal funktioniert alles wie gewollt. Per Klick öffnet sich das Fenster und die Seite wird dort drin geladen. Wenn ich das Modal allerdings wieder schließe (über data-dismiss="modal"), kann ich danach keine weiteren Modal Fenster mehr öffnen. Erst nachdem ich die Seite komplett neu geladen habe, geht das wieder.

Die anderen Modal Fenster machen keine Probleme. Darin lade ich aber auch keine  Seiten aus anderen HTML Dateien.

Irgend jemand eine Idee, woran das liegen könnte? Schließt sich das Modal eventuell nicht richtig? Wie könnte ich etwas daran ändern?

Vielen Dank im Voraus
Markus

Drucke diesen Beitrag

  Amazon peer CSS ändern ?
Geschrieben von: Caro - 18.06.2019, 21:41 - Forum: CSS - Keine Antworten

Hallo,
wie kann ich bei Amazon über CSS folgende Sachen ändern wie den hover Effekt oder die Schriftfarbe ?

ich finde das richtige CSS nicht dafür ?

in diesem Bild möchte ich den kompletten gelben Button ändern, hintergrundfarbe, Schriftfarbe, Rahmen usw.
   

in diesem Bild möchte ich die Schriftfarbe bei normal und hover ändern wo die roten Pfeile drauf zeigen.
EDIT + "EigeneListe" da habe ich leider den Pfeil vergessen.
   
Danke schön schonmal.

Drucke diesen Beitrag

  eigene CSS für Firefox Browser
Geschrieben von: Tapo - 13.06.2019, 22:10 - Forum: CSS - Antworten (2)

Hallo,
es wird der Firefox 67.0.2 (64-Bit) verwendet mit eigener anpassungen via CSS Datei für verschidene Websiten.

meine Frage ist eigentlich wie bekommt man es hin mit CSS das man bei dieser Seite
https://www.camp-firefox.de/forum/

Den Header kleiner bekommt und die erste Zeile wo steht "Nachrichten, Forum " ausgeblendet.
Und wenn man ein wenig runter Scrollt die Leiste dann auch ?

wie muß das CSS dafür lauten ?

könnte mir da jemand weiter helfen ?

Drucke diesen Beitrag

  Theme bei welchen die Unterseiten mit Ajax geladen werden
Geschrieben von: The-Error - 27.05.2019, 14:24 - Forum: Bootstrap Templates - Keine Antworten

Theme bei welchen die Unterseiten mit Ajax geladen werden

Der Vorteil dieses Theme ist das es nur ein Menu in der Index.html gibt. Also wenn an dem Menu etwas geänder wird, muss es nicht auch auf allen Unterseiten geändert werden, da diese ja über ajax dynamisch jeladen werden.

Die Browser-Unterstützung ist auch sehr gut. Allerdings wird de IE erst ab Version 10 ünterstützt. siehe caniuse.com
Demo

- laden der Unterseiten erfolgt über:

Javascript
  1.     /* Inhalt mit Ajax laden */
  2.     $("a.ajax-link").click(function () {
  3.  
  4.         $("*").removeClass("active")
  5.         $("div.dropdown-menu").removeClass("show")
  6.         $("a.ajax-link").removeClass("active")
  7.         $(this).addClass("active")
  8.         
  9.         var url = $(this).attr('href');
  10.  
  11.         /* alten Inhalt ausblenden */
  12.         $("#main").animate({
  13.             opacity: "0",
  14.             filter: "alpha(opacity=0)"
  15.         }, 300, function () {
  16.  
  17.             /* Neuen Inhalt laden */
  18.             $("#main").load(url, function () {
  19.                 /* neuen Inhalt einblenden */
  20.                 $("#main").animate({
  21.                     opacity: "1",
  22.                     filter: "alpha(opacity=100)"
  23.                 });
  24.             });
  25.         });
  26.  
  27.         /* geöffnetes Dropdown Menu schließen*/
  28.         $("div .dropdown-menu").css("display", "none")
  29.  
  30.         return false;
  31.     });



Die Navigation

HTML5
  1.     <nav class="navbar navbar-expand-md navbar-dark bg-nav  fixed-top">
  2.         <div class="container">
  3.             <a class="navbar-brand" href="#"><img src="img/logo.png" height="40px" /></a>
  4.             <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation">
  5.                 <span class="navbar-toggler-icon"></span>
  6.             </button>
  7.  
  8.             <div class="collapse navbar-collapse" id="navbarsExampleDefault">
  9.  
  10.                 <ul class="navbar-nav ml-auto">
  11.                     <li class="nav-item active">
  12.                         <a class="nav-link ajax-link" href="home.html" id="m_home">Home</a>
  13.                     </li>
  14.                     <li class="nav-item">
  15.                         <a class="nav-link ajax-link" href="about.html" id="m_about">About</a>
  16.                     </li>
  17.                     <li class="nav-item">
  18.                         <a class="nav-link ajax-link" href="kontakt.html" id="m_kontakt">Kontakt</a>
  19.                     </li>
  20.  
  21.                     <li class="nav-item dropdown">
  22.                         <a class="nav-link dropdown-toggle" href="" id="dropdown01" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Rechtliches</a>
  23.                         <div class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdown01">
  24.                             <a class="dropdown-item ajax-link" href="impressum.html">Impressum</a>
  25.                             <a class="dropdown-item ajax-link" href="datenschutz.html">Datenschutzerklärung</a>
  26.                             <a class="dropdown-item ajax-link" href="kontakt.html" id="m_kontakt">Kontakt</a>
  27.  
  28.                         </div>
  29.                     </li>
  30.  
  31.                 </ul>
  32.             </div>
  33.         </div>
  34.     </nav>




Container in welchen die Seiten geladen werden
HTML5
  1.     <!-- Ajax container -->
  2.     <main id="main" role="main" class="container">
  3.  
  4.     </main>



Inhalt.html
HTML5
  1. <div class="text-center mt-5 pt-5">
  2.     <h1>About</h1>
  3.     <p class="lead">Use this document as a way to quickly start any new project.<br> All you get is this text and a mostly barebones HTML document.</p>
  4. </div>




Angehängte Dateien
.rar   Inhalte_mit_Ajax_laden.rar (Größe: 205,54 KB / Downloads: 1)
Drucke diesen Beitrag

  Javascript Problem beim automatischen Schließen des Submenüs
Geschrieben von: dandarkisland - 19.05.2019, 12:39 - Forum: Bootstrap 4 - Antworten (3)

Hallo, 

ich habe auf der Website https://bit.ly/2HBwLiR das Problem, dass beim Klicken auf die Hauptpunkte des Menüs das Submenü zwar öffnet, aber nicht beim weiterklicken wieder automatisch schließt. Ich vermute es hängt an einem JS Problem in Bezug auf BS4 - allerdings weiß ich nicht, wo der Fehler genau liegen kann? Hat jemand eine schnelle Idee?

Gruß Daniel

Drucke diesen Beitrag

  Frames?
Geschrieben von: Daniel26 - 17.05.2019, 10:09 - Forum: Bootstrap 4 - Antworten (4)

Hallo,

jaja, ich weiß, Frames sind tot Smile
Ich hab das letzte mal mit HTML was vor 15 Jahren gemacht...aber jetzt muss ich beruflich nochmal ran.
Ich soll ein Webinterface bauen, mit dem sich Hardware von uns konfigurieren lässt.
Das ganze soll auf der linken Seite ein Menü haben, rechts sollen dann die Konfigurationen gemacht werden.
Ich möchte aber nicht in jeder Datei das Menü mitschleifen.
Früher hätte man sowas wohl mit Frames gemacht. Wie erschlägt man sowas heute mit Bootstrap? Hat mir jemand ein paar Stichworte?

Gruß

Daniel

Drucke diesen Beitrag

  Bootstrap 3 --> Bootstrap 4
Geschrieben von: Svenmann - 15.05.2019, 05:16 - Forum: Bootstrap 4 - Antworten (3)

Moin Leute, 

habe zu meinem Thema leider nix hilfreiches gefunden.

Ich habe mein eigenes Wordpress Theme und habe BS3 eingebunden. Jetzt will ich ein Upgrade auf BS4 machen.
habe auch alles wie beschrieben eingebunden (mit jQuery, Popper und Bootstrap).

Jetzt werden verschiedene Teile meiner Homepage völlig anders dargestellt als zuvor. Z.B. wird der Komplette Header ausgeblendet und die Horizontalen Navbars sind Vertikal.

Habe ich etwas nicht beachtet oder muss ich noch was umstellen oder mein CSS komplett ändern?

Ich bedanke mich für eure Antworten.


Gruß Svenmann

Drucke diesen Beitrag

  Bootstrap 4 Mega Menu
Geschrieben von: The-Error - 11.05.2019, 11:30 - Forum: Bootstrap Snippet - Keine Antworten

Bootstrap 4 Mega Menu
   

Demo

HTML5
  1.     <li class="nav-item dropdown megamenu-li">
  2.         <a class="nav-link dropdown-toggle" href="" id="megamenu" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Mega Menu</a>
  3.  
  4.         <div class="dropdown-menu megamenu" aria-labelledby="megamenu">
  5.             <div class="row">
  6.                 <div class="col-sm-6 col-lg-2">
  7.                     <h5>Spalte 1 Link's</h5>
  8.                     <a class="dropdown-item" href="#">Another action</a>
  9.                     <a class="dropdown-item" href="#">Something else here</a>
  10.                 </div>
  11.                 <div class="col-sm-6 col-lg-2">
  12.                     <h5>Spalte 2 Link's</h5>
  13.                     <a class="dropdown-item" href="#">Another action</a>
  14.                     <a class="dropdown-item" href="#">Something else here</a>
  15.                 </div>
  16.                 <div class="col-sm-6 col-lg-4">
  17.                     <h5>Spalte 3 Text</h5>
  18.                 </div>
  19.                 <div class="col-sm-6 col-lg-4">
  20.                     <h5>Spalte 4</h5>
  21.                 </div>
  22.             </div>
  23.         </div>
  24.     </li>



CSS
  1.  .megamenu-li {
  2.      position: static;
  3.  }
  4.  
  5.  .megamenu {
  6.      position: absolute;
  7.      width: 100%;
  8.      left: 0;
  9.      right: 0;
  10.      padding: 20px;
  11.  }



Javascript
  1.         $(document).ready(function() {
  2.             $(".megamenu").on("click", function(e) {
  3.                 e.stopPropagation();
  4.             });
  5.         });




Angehängte Dateien
.rar   Megamenu.rar (Größe: 6,13 MB / Downloads: 4)
Drucke diesen Beitrag

  Hilfe in CSS
Geschrieben von: Germanikus - 09.05.2019, 10:12 - Forum: CSS - Antworten (8)

Hallo zusammen,
ich bin neu hier und arbeite eigentlich schon länger mit Bootstrap.
Nun wollte ich meine TCG Datenbank auf dem neustenstand bringen und angefangen hab ich mit einem neuen Designe für die Seite.
Gleich mal vorweck. Die Webseite kann von keinem Besucht werden (ausser man hat Hamachi und ist in der Gruppe, nur ein Freund und ich).

Leider stoße ich immer wieder auf das Problem mit CSS.
Das ich garnicht behersche, leider.
Auch generell bin ich ein schlechter Programmierer und mach das nur als Hobby.
Ich hoffe ihr könnt mir da weiter helfen

1. Beim ersten Problem habe ich oben rechts (rot makiert). ich will das mit dem roten Button vergrößern, so das dieses graue teil verschwindet.
2. Beim zweiten Problem habe ich das der Text feld unten mir zu eng ist. Ich würde dies auf die gesamt länge ziehen wollen.
3. Dies ist eher eine unwichtige frage und ist mir gerade spontan eingefallen. Kann man bei den Buttons eine Grafik einfügen lassen und wen ja, wie?

https://screenshots.firefox.com/1e01uBMq.../127.0.0.1



PHP-Code:
<link href="<?php echo base_url(); ?>assets/css/ver4.x/bootstrap.temp.css" rel="stylesheet">
<
link href="<?php echo base_url(); ?>assets/css/ver4.x/bootstrap.min.css" rel="stylesheet">
<
script src="<?php echo base_url() ?>assets/js/ver4.x/bootstrap.min.js"></script>
<
script src="<?php echo base_url() ?>assets/js/ver4.x/jquery.min.js"></script>
<
style>
.
show-on-hover:hover ul.dropdown-menu {
 
   displayblock   
}
.
fa-shopping-cart,
.
fa-exchange,
.
fa-bell-o{
 
 font-size:200%;
}
</
style>
<
div class="small-top">
 <
div class="container">
 <
div class="row">
 <
div class="col-lg-4 date-sec">
 <
div><?php echo date('Y.m.d H:i:s'); ?></div>
 </div>
            <div class="col-lg-3 offset-lg-5">
 <div class="social-icon">
 <a target="_blank" href="<?php echo base_url(); ?>users/profil/<?php echo $this->session->userdata('username'); ?>" class="fa fa-user"> <?php echo $this->session->userdata('username'); ?></a>
 </div>
            </div>
            <!-- <div class="col-lg-3 offset-lg-5">
 <div class="social-icon">
 <a target="_blank" href="#" class=" fa fa-facebook"></a>
 <a target="_blank" href="#" class=" fa fa-twitter"></a>
 <a target="_blank" href="#" class=" fa fa-google-plus"></a>
 <a target="_blank" href="#" class=" fa fa-linkedin"></a>
 <a target="_blank" href="#" class=" fa fa-youtube"></a>
 <a target="_blank" href="#" class=" fa fa-vimeo-square"></a>
 </div>
            </div> -->
 </div>
 </div>
</div>
<div class="top-head left" style="background-image: url(<?php echo base_url(); ?>/assets/images/text_bg.png); background-repeat:repeat-x;float:left;">
 <div class="container">
 <div class="row">
 <div class="col-md-6 col-lg-4">
                <h1>Yugi-Mania<!-- <small>Sammelkarten</small> --></h1>
 </div>
 <div class="col-md-6 col-lg-3 ml-auto admin-bar hidden-sm-down">
                <nav class="nav nav-inline">
 <div class="btn-group show-on-hover">
 <a href="#" class="nav-link"><span class="ping"></span><i class="fa fa-shopping-cart"></i> <span class="caret"></span></a>
 <ul class="dropdown-menu" role="menu">
 <!-- <li><a href="#">Something else here</a></li> -->
 <!-- <li class="divider"></li> -->
 <li>Separated link</li>
 </ul>
 </div>
 <div class="btn-group show-on-hover">
 <a href="#" class="nav-link"><span class="ping"></span><i class="fa fa-exchange"></i> <span class="caret"></span></a>
 <ul class="dropdown-menu" role="menu">
 <!-- <li><a href="#">Something else here</a></li> -->
 <!-- <li class="divider"></li> -->
 <li>Separated link</li>
 </ul>
 </div>
 <div class="btn-group show-on-hover">
 <a href="#" class="nav-link"><span class="ping"></span><i class="fa fa-bell-o"></i> <span class="caret"></span></a>
 <ul class="dropdown-menu" role="menu">
 <!-- <li><a href="#">Something else here</a></li> -->
 <!-- <li class="divider"></li> -->
 <li>Separated link</li>
 </ul>
 </div>
 </nav>
 </div>
 </div>
 </div>
</div>
<section class="top-nav">
 <nav class="navbar navbar-expand-lg py-0">
 <div class="container">
 <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
 <span class="navbar-toggler-icon"></span>
 </button>
 <div class="collapse navbar-collapse" id="exCollapsingNavbar2">
 <ul class="nav navbar-nav ">
 <li class="nav-item active"> <a class="nav-link" href="<?php echo base_url(); ?>event/index">Event <span class="sr-only">(current)</span></a> </li>
 <li class="nav-item"> <a class="nav-link" href="<?php echo base_url(); ?>rechnung/index">Rechnung</a> </li>
 <li class="nav-item"> <a class="nav-link" href="<?php echo base_url(); ?>protokoll/index">Protokollliste</a> </li>
 <li class="nav-item"> <a class="nav-link" href="<?php echo base_url(); ?>karte/index">Kartenliste</a> </li>
 <li class="nav-item"> <a class="nav-link" href="<?php echo base_url(); ?>edition/index">Editionliste</a> </li>
 <li class="nav-item"> <a class="nav-link" href="<?php echo base_url(); ?>pages/produckt_list">Producktliste</a> </li>
 <li class="nav-item"> <a class="nav-link" href="<?php echo base_url(); ?>trade/index">Trade</a> </li>
 <li class="nav-item"> <a class="nav-link" href="<?php echo base_url(); ?>warenkorb/index">Warenkorb</a> </li>
 <li class="nav-item"> <a class="nav-link" href="<?php echo base_url(); ?>umsatz/index">Umsatz</a> </li>
 </ul>
 <form class="ml-auto">
 <div class="search">
 <input type="text" class="form-control" placeholder="suchen" />
 <button type="submit" class="btn btn-search"><i class="fa fa-search"></i></button>
 </div>
 </form>
 </div>
 </div>
 </nav>
</section>
<section class="section-01">
 <div class="container">
 <div class="row"> 



CSS
  1. @import url("//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css");
  2.  
  3.  
  4. body {
  5.   color: #5a5a5a;
  6.   font-family: 'Open Sans',Arial,sans-serif;
  7.   font-size: 15px;
  8. }
  9. h1,h2,h3,h4,h5{
  10.     font-family: 'Montserrat', sans-serif;
  11. }
  12. a, a:hover, .btn{outline:none!important;}
  13. .btn-search{background: #FD3A13; border-color: #FD3A13; color: #fff; padding: 7px 10px}
  14. .btn-search:hover{background: #ca1b1b; border-color: #ca1b1b}
  15. section{padding: 30px 0; float: left; width: 100%}
  16. .card{float: left; width:100%}
  17. .navbar {border: medium none; float: left; margin-bottom: 0px; width: 100%;  border-radius: 0}
  18. .title-large {font-size: 20px; margin: 10px 0 5px; line-height: 27px; color: #141517;}
  19. .title-small { color: #141517; font-size: 16px; font-weight: 400; line-height: 23px; margin: 6px 0 0;}
  20. .title-x-small {font-size: 18px; margin: 0px;}
  21. .title-large a, .title-small a, .title-x-small a{color: inherit}
  22. .banner-sec{float: left; width: 100%; background: #EBEBEB}
  23. .card-block{padding:0 10px 10px;}
  24. .card-text{margin: 0}
  25. .text-time{color: #ff0000; font-weight: 600;}
  26. .banner-sec .card-img-overlay{padding: 0; top: 3px; left: 7px; height: 20%}
  27.  
  28. header{float: left; width:100%}
  29. .small-top{ border-bottom: 1px solid #2b2b2b;float: left; width: 100%; background: #000}
  30. .small-top .social-icon{float: right;}
  31. .small-top .social-icon a {border-left: 1px solid #2b2b2b; color: #ca1b1b; float: left; padding: 6px 13px;}
  32. .small-top .social-icon a:last-child {border-right: 1px solid #2b2b2b;}
  33. .small-top .social-icon a:hover {color:#FD3A13; text-decoration: none;}
  34. .small-top .date-sec {font-size: 13px; font-weight: 600; float: left; margin-top: 4px; color: #898989}
  35. .top-head{background: #141517; width: 100%; float: left; height: 100px;}
  36. .top-head h1 {color: #fff; font-size: 36px; font-weight: 600; margin: 18px 0 0;}
  37. .top-head small{float: left; width: 100%; font-size: 14px; color: #c0c0c0; margin-top: 5px; margin-left: 5px;}
  38. .top-head .admin-bar {text-align: right; margin-top: 22px;}
  39. .top-head .admin-bar a {color: #fff; line-height: 49px; position: relative; padding:0 7px;}
  40. .top-head .admin-bar a:hover{color: #ff0000}
  41. .top-head .admin-bar a i{margin-right: 6px;}
  42. .top-head .admin-bar .ping {background: #ff0000; border: 3px solid #141517; border-radius: 50%; height: 14px; position: absolute; right: 3px;    top: 13px; width: 14px; z-index: 1;}
  43. .top-head .admin-bar img {float: right; height: 50px; width: 50px; margin-left: 18px;}
  44. .top-nav{background: #fff; padding: 0; border-bottom: 1px solid #dbdbdb}
  45. .top-nav .nav-link {padding-bottom: 0.7rem; padding-top: 0.7rem;}
  46. .top-nav .navbar-nav .nav-item + .nav-item{margin-left:0}
  47. .top-nav li a{color: #141517; text-transform: uppercase; font-size: 14px; font-weight: 700; padding: 0 10px; border-bottom: 2px solid #fff}
  48. .top-nav li a:hover, .top-nav li a:focus, .top-nav li.active a{color: #141517; border-bottom: 2px solid #FD3A13 }
  49. .top-nav .form-control{border-color: #fff}
  50. .navbar-toggle{background: #fff;}
  51. .navbar-toggle .icon-bar{background:#0A2E61; }
  52. .navbar-brand{display: none;}
  53.  
  54. .top-slider .carousel-indicators{bottom: 0}
  55. .top-slider .carousel-indicators li{border:1px solid #000;}
  56. .top-slider .carousel-indicators .active{background:#000;}
  57.  
  58.  
  59. .side-bar .nav-tabs{border-bottom:none;}
  60. .side-bar .nav-tabs .nav-link {color: #aeaeae; text-transform: uppercase; border: none;}
  61. .side-bar .nav-tabs .nav-link.active, .side-bar .nav-tabs .nav-link:hover{border-bottom:2px solid #ff0000;  text-transform: uppercase; color: #222}
  62. .sidebar-tabing .media{margin-top: 20px}
  63. .sidebar-tabing img{width: 120px;height: 100px;}
  64. .sidebar-tabing .title-small {line-height: 23px; margin-top: 5px; font-size: 18px}
  65.  
  66. #search {float: right; margin-top: 9px; width: 250px;}
  67. .search {padding: 5px 0; width: 230px; height: 30px; position: relative; left: 10px; float: left; line-height: 22px;}
  68. .search input {background: #d0d0d0; border: medium none; border-radius: 3px 0 0 3px; float: left; height: 36px; line-height: 18px; margin-left: 210px; padding: 0 9px; position: absolute; top: 0px; width: 0; -webkit-transition: all 0.7s ease-in-out; -moz-transition: all 0.7s ease-in-out;
  69. -o-transition: all 0.7s ease-in-out; transition: all 0.7s ease-in-out;}
  70. .search:hover input, .search input:focus { width: 200px; margin-left: 0px; background: #d0d0d0;}
  71. .top-nav .btn {position: absolute;right: 0;top: 0px;border-radius:3px;}
  72.  
  73. .banner-sec{float: left; width:100%;}
  74. .banner-sec .news-block{margin-bottom: 20px}
  75. .banner-sec .news-block:last-child{margin-bottom: 0px}
  76. .banner-sec .news-des {margin-bottom: 5px;}
  77. .banner-sec .title-large{margin: 18px 0 0}
  78. .banner-sec .time{margin-top: 0px; font-size: 13px;}
  79. .banner-sec .carousel-control.left, .banner-sec .carousel-control.right{background: none;}
  80. .banner-sec .card{margin-bottom:20px;}
  81.  
  82. .section-01{float: left; width: 100%;  border-top: 1px solid #d5d5d5; border-bottom: 1px solid #d5d5d5}
  83. .section-01 .heading-large {border-bottom: 2px solid #222; color: #222; float: left; width: 100%; padding:0 0 6px; margin:0 0 18px; text-align: left;}
  84. .section-01 .heading-large::before, .section-01 .heading-large::after{background: transparent;}
  85. .section-01 .heading-small {border-bottom: 2px solid #222; color: #222; float: left; margin: 7px 0 0; width: 100%; padding-bottom: 10px; font-size: 18px }
  86. .section-01 .title-small {margin-bottom: 5px; font-size:17px }
  87. .section-01 .news-block{border-bottom: 1px dashed #000; padding-bottom: 30px; border: none;}
  88. .section-01 aside > .news-block{border-bottom: 1px dashed #000; padding-bottom: 19px;}
  89. .section-01 aside > .news-block:last-child{border-bottom: none; margin-bottom: 20px}
  90. .section-01 .card{border: none;}
  91. .section-01 .card-block{padding: 10px 0;}
  92. .section-01 .video-sec {float: left; margin-top: 30px; width: 100%;}
  93. .section-01 .video-block {float: left; margin-top: 20px; width: 100%;}
  94.  
  95. .action-sec{width:100%; float:left; background:#222}
  96. .action-box{float:left; width:100%; text-align:center;}
  97. .action-box h2{color:#fff; font-size:20px;}


Drucke diesen Beitrag

  CSS: Nur 1/3 eines (Slideshow-)Bildes anzeigen lassen?
Geschrieben von: datsuxindau - 01.05.2019, 15:58 - Forum: Bootstrap 3 - Antworten (1)

Moin,

ich bin gerade ein bisschen mit Websites (Bootstrap 3) am rumbasteln.
Habe nun zu oberst eine Carousel-Slideshow, die abwechselnd 5 Bilder zeigt.

Nun die Frage: Wie kann ich bloss einen Drittel der Silde-Bilder (Oberer Bild-Drittel) anzeigen lassen?

Habe es so lösen können (CSS):


CSS
  1. img.sliderimage {
  2. width: 100%;
  3. height: auto;
  4. margin-bottom: -400px;
  5. margin-top: -350px;
  6. }




Aber finde das zu waaghalsig und hätte lieber eine elegantere Lösung, die wirklich exakt 1 Drittel des Bildes anzeigt.

Lösungsvorschläge? Achja: Bin auf diesem Gebiet ein Noob, eine kurze Erklärung wäre toll. Undecided

Drucke diesen Beitrag

[-]
Willkommen im ersten deutschen Bootstrap-Forum
You have to register before you can post on our site.

Benutzername/E-Mail:


Passwort





[-]
Letzte Beiträge
Problem mit Modal
Last Post: The-Error
09.07.2019 11:55
» Replies: 1
» Views: 62
Update DSGVO Kontaktformuler Bootstrap 4...
Last Post: The-Error
21.06.2019 11:46
» Replies: 41
» Views: 5151
Amazon peer CSS ändern ?
Last Post: Caro
18.06.2019 21:41
» Replies: 0
» Views: 130

[-]
Private Messages
Please login or register to use this functionality.

[-]
Statistics
» Members: 254
» Latest member: mps
» Forum threads: 219
» Forum posts: 902

Full Statistics

[-]
Tutorials
Get Started
Text/Typography
Gridsystem
Dropdowns
Navigation Bar
Modal
Farben
Jumpotron
Popover
Formulare
Carousel (Slider)
Die Höhe von Elementen mit Klassen h-*
Flip Cards
Bild Overlay-Hover-Effekt
Google Fonts einbinden
Flexbox Bootstrap 4
Responsive Breakpoints

[-]
Wer ist online
There are currently no members online.

>