SELFPHP: Version 5.8.2 Befehlsreferenz - Tutorial – Kochbuch – Forum für PHP Einsteiger und professionelle Entwickler

SELFPHP


Professional CronJob-Service

Suche



CronJob-Service    
bei SELFPHP mit ...



 + minütlichen Aufrufen
 + eigenem Crontab Eintrag
 + unbegrenzten CronJobs
 + Statistiken
 + Beispielaufrufen
 + Control-Bereich

Führen Sie mit den CronJobs von SELFPHP zeitgesteuert Programme auf Ihrem Server aus. Weitere Infos



:: Buchempfehlung ::

Fortgeschrittene CSS-Techniken

Fortgeschrittene CSS-Techniken zur Buchempfehlung
 

:: Anbieterverzeichnis ::

Globale Branchen

Informieren Sie sich über ausgewählte Unternehmen im Anbieterverzeichnis von SELFPHP  

 

:: Newsletter ::

Abonnieren Sie hier den kostenlosen SELFPHP Newsletter!

Vorname: 
Name:
E-Mail:
 
 

Zurück   PHP Forum > SELFPHP > HTML, CSS und JavaScript Help!

HTML, CSS und JavaScript Help! Hier gibt es Hilfe zu HTML, CSS und JavaScript Problemen

Antwort
 
Themen-Optionen Ansicht
  #1  
Alt 16.04.2016, 20:01:00
Kiba Kiba ist offline
Anfänger
 
Registriert seit: Apr 2016
Alter: 26
Beiträge: 1
Responsible Navbar Dropdown Button

Hallo!
Bin hier komplett neu und brauche Hilfe.

Ich möchte gerne für meine Homepage mit Bootstrap eine Navbar (fixed top) haben, die, wenn die Website vom smartphone aufgerufen wird, in ein Dropdown menu umgewandelt wird.
Ich habe schon Navbar und Carousel gecodet und am PC(Google Chrome) funktioniert alles Problemlos, aber rufe ich die Seite vom smartphone aus auf, ist der Body zwar im Center und die Navbar ein Dropdown, aber der Button fürs Dropdown ist ca 100px weiter rechts... ist natürlich Suboptimal... Ist wahrcheinlich total easy aber ich steh einfach aufm Schlauch...
Hier mal mein HTML code (Body):
HTML-Code:
<div class="navbar-wrapper">
    <div class="container">
      <div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
        <div class="container">
          <div class="navbar-header">
          
              <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-responsive-collapse">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
              </button>

              <a class="navbar-brand" href="#">xKiba</a>

           </div> <!-- navbar-header -->

           <div class="navbar-collapse collapse navbar-responsive-collapse" id="navbar-responsive-collapse">

           <ul class="nav navbar-nav">
             <li class="active"><a href="#">Kiba</a></li>
             <li class="navbar-item"><a href="#">Videos</a></li>
             <li class="navbar-item"><a href="#">Infos</a></li>
             <li class="navbar-item"><a href="#">Kontakt</a></li>
           </ul>
            
           </div> <!-- collapse -->

        </div> <!-- container -->
      </div> <!-- navbar inverse -->
    </div> <!-- container -->
  </div> <!-- navbar-wrapper -->
CSS:
HTML-Code:
.navbar-wrapper {
	height: 50px;
	background-color: #222;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	z-index: 20;
	box-shadow: none;
	border: 0px;
}

.navbar {
	border: 0px;
}

.navbar-header {
	border: 0px;
}

.navbar-item:hover {
	background-color: rgba(255,255,255,.2);
}

/*-----------------------
	Carousel
-----------------------*/

#myCarousel .item {
	height:307px;
	max-width: 768px;
}

#slide1 {
	background: url('../pics/c_m_001.jpg') top center no-repeat;
}

#slide2 {
	background: url('../pics/c_m_002.jpg') top center no-repeat;
}

#slide3 {
	background: url('../pics/c_m_003.jpg') top center no-repeat;
}

.carousel {
	margin-top: 50px;
	height:307px;
	margin-bottom: 40px;
	max-width: 768px;
	position: relative;
	margin-left: auto;
	margin-right: auto;
}

.carousel-caption {
	z-index: 10;
}

/*-----------------------
	Global
-----------------------*/

.container {
	width: 768px;
	margin-left: 20%;
	margin-right: 20%;
}

body {

	margin-left: auto;
	margin-right: auto;
	padding-bottom: 40px;
	color: #5a5a5a;
}



.thumbnail1 {
	width: 140px;
	height: 140px;
}

/*-----------------------
	Media Queries
-----------------------*/
/*
@media (max-width: 480px) {

}
*/
@media (max-width: 768px) {

#slide1 {
	background: url('../pics/c_s_001.jpg') top center no-repeat;
}

#slide2 {
	background: url('../pics/c_s_002.jpg') top center no-repeat;
}

#slide3 {
	background: url('../pics/c_s_003.jpg') top center no-repeat;
}

.carousel {

	margin-top: 50px;
	height:192px;
	max-width: 480px;

}

#myCarousel {
	margin-top: 50px;
}

#myCarousel .item {
	height:192px;
	max-width: 480px;
}

.container {
	width: 480px;
	margin-left: auto;
	margin-right: auto;
}


}

@media (min-width: 1200px) {

#slide1 {
	background: url('../pics/c_l_001.jpg') top center no-repeat;
}

#slide2 {
	background: url('../pics/c_l_002.jpg') top center no-repeat;
}

#slide3 {
	background: url('../pics/c_l_003.jpg') top center no-repeat;
}

.carousel {
	margin-top: 50px;
	height:480px;
	max-width: 1200px;
}

#myCarousel .item {
	height:480px;
	max-width: 1200px;
}

.container {
	width: 1200px;
	margin-left: auto;
	margin-right: auto;
}


}
Hoffe ich mir kann jemand helfen =)
Danke im Vorraus!

MfG Kiba
Mit Zitat antworten
Antwort


Aktive Benutzer in diesem Thema: 1 (Registrierte Benutzer: 0, Gäste: 1)
 
Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind aus.
[IMG] Code ist aus.
HTML-Code ist aus.

Gehe zu

Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
Dropdown Menü ID's übergeben Cien MySQLi/PDO/(MySQL) 12 31.03.2015 13:28:35
Dropdown mittels DB Tabelle füllen Catzenjaeger PHP Grundlagen 2 23.03.2011 12:19:22
Dropdown Auswahl wird nicht an DB übergeben ThinkFlou MySQLi/PDO/(MySQL) 13 06.01.2010 20:42:12
Back Button Bosko PHP Grundlagen 0 25.12.2005 10:56:57
Wert aus DropDown Feld auslesen Jim Panse PHP für Fortgeschrittene und Experten 12 07.04.2003 08:37:55


Alle Zeitangaben in WEZ +2. Es ist jetzt 05:23:57 Uhr.


Powered by vBulletin® Version 3.8.3 (Deutsch)
Copyright ©2000 - 2024, Jelsoft Enterprises Ltd.


© 2001-2024 E-Mail SELFPHP OHG, info@selfphp.deImpressumKontakt