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.

Themabewertung:
  • 0 Bewertung(en) - 0 im Durchschnitt
  • 1
  • 2
  • 3
  • 4
  • 5
Hilfe in CSS
#1
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;}


Zitieren
#2

zu 1.
CSS
  1. .top-nav .btn {
  2.    height: 40px;
  3. }



bzw. die Höhe des Suchfeldes einstellen

zu 2.
lösche mal <div class"conainer">


zu 3.
Da du ja schon Awesome Font nutzt gehe auf https://fontawesome.com/icons?d=gallery, such dir da ein Icon aus. Wenn dann da draufklickst wird dir der Code rechts oben angezeigt, diesen kannst du dann in deine Buttons einfügen.

Beispiel:
HTML5
  1. <span><i class="fab fa-android"></i></span>



Allerdings solltest du die Einbindung von font-awesome.css nicht in der css-datei mit den @import machen sondern in headbereich folgendes einfügen:
HTML5
  1. <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css" integrity="sha384-oS3vJWv+0UjzBfQzYUhtDYW+Pj2yciDJxpsK1OYPAYjqT085Qq/1cq5FLXAZQ7Ay" crossorigin="anonymous">



Farbe und Größe der Icons kannst dann im css festlegen. z.B:
HTML5
  1. i {
  2. font-size: 50px;
  3. color: #ffffff;
  4. }


Zitieren
#3
Erstmal ein fettes Danke von mir von Punkt 1-2 hat alles gepasst.
Bei Punkt 3 muss ich noch warten, bis ich bei diesem Punkt ankomme.
Ich hätte allerdings noch eine frage.
Ich wollte mir ein Mega Menü einbauen lassen.
Aber irgentwie haut das nicht hin und ich hoffe du kannst mir da wieder helfen



HTML5
  1.             <div class="collapse navbar-collapse" id="exCollapsingNavbar2">
  2.                 <ul class="nav navbar-nav ">
  3.                     <li class="nav-item dropdown mega-dropdown active">
  4.                         <a class="nav-link dropdown-toggle text-uppercase" id="navbarDropdownMenuLink2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Event<span class="sr-only">(current)</span></a>
  5.                         <div class="dropdown-menu mega-menu v-2 z-depth-1 special-color py-5 px-3" aria-labelledby="navbarDropdownMenuLink2">
  6.                     <div class="row">
  7.                     <div class="col-md-6 col-xl-3 sub-menu mb-xl-0 mb-4">
  8.                     <h6 class="sub-title text-uppercase font-weight-bold white-text">Featured</h6>
  9.                     <ul class="list-unstyled">
  10.                     <li>
  11.                     <a class="menu-item pl-0" href="#!">
  12.                     <i class="fas fa-caret-right pl-1 pr-3"></i>Lorem ipsum dolor sit amet
  13.                     </a>
  14.                     </li>
  15.                     <li>
  16.                     <a class="menu-item pl-0" href="#!">
  17.                     <i class="fas fa-caret-right pl-1 pr-3"></i>Consectetur adipiscing elit
  18.                     </a>
  19.                     </li>
  20.                     <li>
  21.                     <a class="menu-item pl-0" href="#!">
  22.                     <i class="fas fa-caret-right pl-1 pr-3"></i>Sed do eiusmod tempor incididunt
  23.                     </a>
  24.                     </li>
  25.                     <li>
  26.                     <a class="menu-item pl-0" href="#!">
  27.                     <i class="fas fa-caret-right pl-1 pr-3"></i>Ut labore et dolore magna
  28.                     </a>
  29.                     </li>
  30.                     <li>
  31.                     <a class="menu-item pl-0" href="#!">
  32.                     <i class="fas fa-caret-right pl-1 pr-3"></i>Ut enim ad minim veniam
  33.                     </a>
  34.                     </li>
  35.                     </ul>
  36.                     </div>
  37.                     <div class="col-md-6 col-xl-3 sub-menu mb-xl-0 mb-4">
  38.                     <h6 class="sub-title text-uppercase font-weight-bold white-text">Related</h6>
  39.                     <ul class="list-unstyled">
  40.                     <li>
  41.                     <a class="menu-item pl-0" href="#!">
  42.                     <i class="fas fa-caret-right pl-1 pr-3"></i>Quis nostrud exercitation
  43.                     </a>
  44.                     </li>
  45.                     <li>
  46.                     <a class="menu-item pl-0" href="#!">
  47.                     <i class="fas fa-caret-right pl-1 pr-3"></i>Duis aute irure dolor in
  48.                     </a>
  49.                     </li>
  50.                     <li>
  51.                     <a class="menu-item pl-0" href="#!">
  52.                     <i class="fas fa-caret-right pl-1 pr-3"></i>Laboris nisi ut aliquip ex ea commodo consequat
  53.                     </a>
  54.                     </li>
  55.                     <li>
  56.                     <a class="menu-item pl-0" href="#!">
  57.                     <i class="fas fa-caret-right pl-1 pr-3"></i>Reprehenderit in voluptate
  58.                     </a>
  59.                     </li>
  60.                     <li>
  61.                     <a class="menu-item pl-0" href="#!">
  62.                     <i class="fas fa-caret-right pl-1 pr-3"></i>Esse cillum dolore eu fugiat nulla pariatur
  63.                     </a>
  64.                     </li>
  65.                     </ul>
  66.                     </div>
  67.                     <div class="col-md-6 col-xl-3 sub-menu mb-md-0 mb-xl-0 mb-4">
  68.                     <h6 class="sub-title text-uppercase font-weight-bold white-text">Design</h6>
  69.                     <ul class="list-unstyled">
  70.                     <li>
  71.                     <a class="menu-item pl-0" href="#!">
  72.                     <i class="fas fa-caret-right pl-1 pr-3"></i>Excepteur sint occaecat
  73.                     </a>
  74.                     </li>
  75.                     <li>
  76.                     <a class="menu-item pl-0" href="#!">
  77.                     <i class="fas fa-caret-right pl-1 pr-3"></i>Sunt in culpa qui officia
  78.                     </a>
  79.                     </li>
  80.                     <li>
  81.                     <a class="menu-item pl-0" href="#!">
  82.                     <i class="fas fa-caret-right pl-1 pr-3"></i>Sed ut perspiciatis unde omnis iste natus error
  83.                     </a>
  84.                     </li>
  85.                     <li>
  86.                     <a class="menu-item pl-0" href="#!">
  87.                     <i class="fas fa-caret-right pl-1 pr-3"></i>Mollit anim id est laborum
  88.                     </a>
  89.                     </li>
  90.                     <li>
  91.                     <a class="menu-item pl-0" href="#!">
  92.                     <i class="fas fa-caret-right pl-1 pr-3"></i>Accusantium doloremque laudantium
  93.                     </a>
  94.                     </li>
  95.                     </ul>
  96.                     </div>
  97.                     <div class="col-md-6 col-xl-3 sub-menu mb-0">
  98.                     <h6 class="sub-title text-uppercase font-weight-bold white-text">Programming</h6>
  99.                     <ul class="list-unstyled">
  100.                     <li>
  101.                     <a class="menu-item pl-0" href="#!">
  102.                     <i class="fas fa-caret-right pl-1 pr-3"></i>Totam rem aperiam eaque
  103.                     </a>
  104.                     </li>
  105.                     <li>
  106.                     <a class="menu-item pl-0" href="#!">
  107.                     <i class="fas fa-caret-right pl-1 pr-3"></i>Beatae vitae dicta sun
  108.                     </a>
  109.                     </li>
  110.                     <li>
  111.                     <a class="menu-item pl-0" href="#!">
  112.                     <i class="fas fa-caret-right pl-1 pr-3"></i>Quae ab illo inventore veritatis et quasi
  113.                     architecto
  114.                     </a>
  115.                     </li>
  116.                     <li>
  117.                     <a class="menu-item pl-0" href="#!">
  118.                     <i class="fas fa-caret-right pl-1 pr-3"></i>Nemo enim ipsam voluptatem
  119.                     </a>
  120.                     </li>
  121.                     <li>
  122.                     <a class="menu-item pl-0" href="#!">
  123.                     <i class="fas fa-caret-right pl-1 pr-3"></i>Neque porro quisquam est
  124.                     </a>
  125.                     </li>
  126.                     </ul>
  127.                     </div>
  128.                     </div>
  129.                         </div>
  130.                     </li>
  131.                 </ul>
  132.                 <form class="ml-auto">
  133.                     <div class="search">
  134.                         <input type="text" class="form-control" placeholder="suchen" />
  135.                         <button type="submit" class="btn btn-search"><i class="fa fa-search"></i></button>
  136.                     </div>
  137.                 </form>
  138.             </div>



CSS
  1. .dropdown:hover .dropdown-menu {display: block;}
  2. .fa-shopping-cart,
  3. .fa-exchange,
  4. .fa-bell-o{
  5.   font-size:200%;
  6. }



Link:
https://mdbootstrap.com/docs/jquery/navi...-menu/#v-4


Angehängte Dateien Thumbnail(s)
   
Zitieren
#4
Um dieses Megamenu nutzen zu können musst du das komplette Addon "Material Design for Bootstrap" installieren.
Davon würde ich abraten wenn du nur das Menu nutzen willst. Das geht sicher auch einfacher!
Poste mal dein komplettes Menu und CSS oder häng es an.
Zitieren
#5
HTML5
  1. <link href="<?php echo base_url(); ?>assets/css/ver4.x/bootstrap.temp.css" rel="stylesheet">
  2. <link href="<?php echo base_url(); ?>assets/css/ver4.x/bootstrap.min.css" rel="stylesheet">
  3. <script src="<?php echo base_url() ?>assets/js/ver4.x/bootstrap.min.js"></script>
  4. <script src="<?php echo base_url() ?>assets/js/ver4.x/jquery.min.js"></script>
  5. .dropdown:hover .dropdown2-menu {display: block;}
  6. .fa-shopping-cart,
  7. .fa-exchange,
  8. .fa-bell-o{
  9.   font-size:200%;
  10. }
  11.  
  12. <div class="small-top">
  13.     <div class="container">
  14.         <div class="row">
  15.             <div class="col-lg-4 date-sec">
  16.                 <div><?php echo date('Y.m.d H:i:s'); ?></div>
  17.             </div>
  18.             <div class="col-lg-3 offset-lg-5">
  19.                 <div class="social-icon">
  20.                     <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>
  21.                 </div>
  22.             </div>
  23.             <!-- <div class="col-lg-3 offset-lg-5">
  24.                 <div class="social-icon">
  25.                     <a target="_blank" href="#" class=" fa fa-facebook"></a>
  26.                     <a target="_blank" href="#" class=" fa fa-twitter"></a>
  27.                     <a target="_blank" href="#" class=" fa fa-google-plus"></a>
  28.                     <a target="_blank" href="#" class=" fa fa-linkedin"></a>
  29.                     <a target="_blank" href="#" class=" fa fa-youtube"></a>
  30.                     <a target="_blank" href="#" class=" fa fa-vimeo-square"></a>
  31.                 </div>
  32.             </div> -->
  33.         </div>
  34.     </div>
  35. </div>
  36. <div class="top-head left" style="background-image: url(<?php echo base_url(); ?>/assets/images/text_bg.png); background-repeat:repeat-x;float:left;">
  37.     <div class="container">
  38.         <div class="row">
  39.             <div class="col-md-6 col-lg-4">
  40.                 <h1>Yugi-Mania<!-- <small>Sammelkarten</small> --></h1>
  41.             </div>
  42.             <div class="col-md-6 col-lg-3 ml-auto admin-bar hidden-sm-down">
  43.                 <nav class="nav nav-inline">
  44.                     <div class="btn-group show-on-hover">
  45.                         <a href="#" class="nav-link"><span class="ping"></span><i class="fa fa-shopping-cart"></i> <span class="caret"></span></a>
  46.                             <ul class="dropdown-menu" role="menu">
  47.                                 <!-- <li><a href="#">Something else here</a></li> -->
  48.                                 <!-- <li class="divider"></li> -->
  49.                                 <li>Separated link</li>
  50.                             </ul>
  51.                     </div>
  52.                     <div class="btn-group show-on-hover">
  53.                         <a href="#" class="nav-link"><span class="ping"></span><i class="fa fa-exchange"></i> <span class="caret"></span></a>
  54.                             <ul class="dropdown-menu" role="menu">
  55.                                 <!-- <li><a href="#">Something else here</a></li> -->
  56.                                 <!-- <li class="divider"></li> -->
  57.                                 <li>Separated link</li>
  58.                             </ul>
  59.                     </div>
  60.                     <div class="btn-group show-on-hover">
  61.                         <a href="#" class="nav-link"><span class="ping"></span><i class="fa fa-bell-o"></i> <span class="caret"></span></a>
  62.                             <ul class="dropdown-menu" role="menu">
  63.                                 <!-- <li><a href="#">Something else here</a></li> -->
  64.                                 <!-- <li class="divider"></li> -->
  65.                                 <li>Separated link</li>
  66.                             </ul>
  67.                     </div>
  68.                 </nav>
  69.             </div>
  70.         </div>
  71.     </div>
  72. </div>
  73. <section class="top-nav">
  74. <?php
  75.     if(date('N') == 2 OR date('N') == 4 OR date('N') == 7):#Nur am Dienstag, Donnerstag und Sonntag
  76.         if(date('H') == 21):
  77.             if(date('i') >= 00 AND date('i') <= 59):
  78. ?>
  79.     <div class="alert alert-warning">
  80.         <strong>Meldung!</strong> Führe bis ende dieser Stunde ein Backup durch. <a class="alert-link" href="#">LINK</a>
  81.     </div>
  82. <?php
  83.             endif;
  84.         endif;
  85.     endif;
  86. ?>
  87.     <nav class="navbar navbar-expand-lg py-0">
  88.         <div class="container">
  89.             <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
  90.                 <span class="navbar-toggler-icon"></span>
  91.             </button>
  92.             <div class="collapse navbar-collapse" id="exCollapsingNavbar2">
  93.                 <ul class="nav navbar-nav ">
  94.                     <li class="nav-item dropdown mega-dropdown active">
  95.                         <a class="nav-link dropdown-toggle text-uppercase" id="navbarDropdownMenuLink2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Event<span class="sr-only">(current)</span></a>
  96.                         <div class="dropdown2-menu mega-menu v-2 z-depth-1 special-color py-5 px-3" aria-labelledby="navbarDropdownMenuLink2">
  97.                     <div class="row">
  98.                     <div class="col-md-6 col-xl-3 sub-menu mb-xl-0 mb-4">
  99.                     <h6 class="sub-title text-uppercase font-weight-bold white-text">Featured</h6>
  100.                     <ul class="list-unstyled">
  101.                     <li>
  102.                     <a class="menu-item pl-0" href="#!">
  103.                     <i class="fas fa-caret-right pl-1 pr-3"></i>Lorem ipsum dolor sit amet
  104.                     </a>
  105.                     </li>
  106.                     <li>
  107.                     <a class="menu-item pl-0" href="#!">
  108.                     <i class="fas fa-caret-right pl-1 pr-3"></i>Consectetur adipiscing elit
  109.                     </a>
  110.                     </li>
  111.                     <li>
  112.                     <a class="menu-item pl-0" href="#!">
  113.                     <i class="fas fa-caret-right pl-1 pr-3"></i>Sed do eiusmod tempor incididunt
  114.                     </a>
  115.                     </li>
  116.                     <li>
  117.                     <a class="menu-item pl-0" href="#!">
  118.                     <i class="fas fa-caret-right pl-1 pr-3"></i>Ut labore et dolore magna
  119.                     </a>
  120.                     </li>
  121.                     <li>
  122.                     <a class="menu-item pl-0" href="#!">
  123.                     <i class="fas fa-caret-right pl-1 pr-3"></i>Ut enim ad minim veniam
  124.                     </a>
  125.                     </li>
  126.                     </ul>
  127.                     </div>
  128.                     </div>
  129.                         </div>
  130.                     </li>
  131.                 </ul>
  132.                 <form class="ml-auto">
  133.                     <div class="search">
  134.                         <input type="text" class="form-control" placeholder="suchen" />
  135.                         <button type="submit" class="btn btn-search"><i class="fa fa-search"></i></button>
  136.                     </div>
  137.                 </form>
  138.             </div>
  139.         </div>
  140.     </nav>
  141. <section class="section-01">



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: 40px; 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 {height: 40px; 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;}


Zitieren
#6
In dem Menu gibt es nur einen Menüpunkt der als Megamenu ausgeführt wird?

HTML5
  1.     <nav class="navbar navbar-expand-lg py-0 ">
  2.         <div class="container">
  3.             <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
  4.                 <span class="navbar-toggler-icon"></span>
  5.             </button>
  6.  
  7.             <div class="collapse navbar-collapse" id="navbar">
  8.  
  9.                 <ul class="nav navbar-nav ">
  10.                     <li class="nav-item dropdown megamenu-li">
  11.                         <a class="nav-link dropdown-toggle" href="" id="megamenu01" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Mega Menu 1</a>
  12.                         <div class="dropdown2-menu mega-menu v-2 z-depth-1 special-color py-5 px-3" aria-labelledby="navbarDropdownMenuLink2">
  13.                             <div class="dropdown-menu megamenu" aria-labelledby="megamenu01">
  14.                                 <div class="row">
  15.                                     <div class="col-md-6 col-xl-3 sub-menu mb-xl-0 mb-4">
  16.                                         <h6 class="sub-title text-uppercase font-weight-bold white-text">Featured</h6>
  17.                                         <ul class="list-unstyled">
  18.                                             <li>
  19.                                                 <a class="menu-item pl-0" href="#!">
  20.                                                     <i class="fas fa-caret-right pl-1 pr-3"></i>Lorem ipsum dolor sit amet
  21.                                                 </a>
  22.                                             </li>
  23.                                             <li>
  24.                                                 <a class="menu-item pl-0" href="#!">
  25.                                                     <i class="fas fa-caret-right pl-1 pr-3"></i>Consectetur adipiscing elit
  26.                                                 </a>
  27.                                             </li>
  28.                                             <li>
  29.                                                 <a class="menu-item pl-0" href="#!">
  30.                                                     <i class="fas fa-caret-right pl-1 pr-3"></i>Sed do eiusmod tempor incididunt
  31.                                                 </a>
  32.                                             </li>
  33.                                             <li>
  34.                                                 <a class="menu-item pl-0" href="#!">
  35.                                                     <i class="fas fa-caret-right pl-1 pr-3"></i>Ut labore et dolore magna
  36.                                                 </a>
  37.                                             </li>
  38.                                             <li>
  39.                                                 <a class="menu-item pl-0" href="#!">
  40.                                                     <i class="fas fa-caret-right pl-1 pr-3"></i>Ut enim ad minim veniam
  41.                                                 </a>
  42.                                             </li>
  43.                                         </ul>
  44.                                     </div>
  45.                                 </div>
  46.                             </div>
  47.                         </div>
  48.                     </li>
  49.                 </ul>
  50.                 <form class="ml-auto">
  51.                     <div class="search">
  52.                         <input type="text" class="form-control" placeholder="suchen" />
  53.                         <button type="submit" class="btn btn-search"><i class="fa fa-search"></i></button>
  54.                     </div>
  55.                 </form>
  56.             </div>
  57.         </div>
  58.     </nav>



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.         }



Script vor den schliezenden BogyTag einfügen! 
Javascript
  1.     <script>
  2.         $(document).ready(function() {
  3.             $(".megamenu").on("click", function(e) {
  4.                 e.stopPropagation();
  5.             });
  6.         });
  7.     </script>


Zitieren
#7
Haut irgentwie nicht hin
https://screenshots.firefox.com/WNYOWQjN.../127.0.0.1
Zitieren
#8
Ich hab mal ein Snipped eingestellt.
Schau dir das mal an!
https://bootstrap-forum.de/showthread.ph...27#pid1227
Zitieren
#9
Vielen Dank
Zitieren


Gehe zu:


Benutzer, die gerade dieses Thema anschauen: 1 Gast/Gäste
[-]
Willkommen im ersten deutschen Bootstrap-Forum
You have to register before you can post on our site.

Benutzername/E-Mail:


Passwort:





[-]
Letzte Beiträge
Javascript Problem beim automatischen Sc...
Last Post: The-Error
19.05.2019 15:14
» Replies: 3
» Views: 34
Frames?
Last Post: The-Error
17.05.2019 17:15
» Replies: 3
» Views: 58
Bootstrap 3 --> Bootstrap 4
Last Post: The-Error
16.05.2019 13:15
» Replies: 3
» Views: 52

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

[-]
Statistics
» Members: 239
» Latest member: Sittingbull
» Forum threads: 215
» Forum posts: 885

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
Responsive Breakpoints

>