Menu - Zentrierung Bootstrap

chrisverol · 23. März 2014

Hallo an Alle,

ich versuche mich als Neuling (CSS&HTML) an Bootstrap. Habe dazu ein Tutorial von YouTube nachgebaut.
Bei meinem Tut hat sich aber irgendwie ein Fehler eingeschlichen, den ich einfach nicht finden kann.

Ich hoffe, Ihr könnt mir bei der Fehlersuche helfen.

Fehler: Meine Navi ist nicht zentriert. Habe dazu der Navi sowie dem Content zur besseren Sichtbarkeit einen Außenrahmen gegeben (siehe Bild)

Hier mein CSS

Code:

.container { 
		margin: 0 auto;
		width:958px !important;		
		border-left:1px solid #009;
		border-right:1px solid #009;
}

.blog-masthead {		
		background-color:#2eace9;
		box-shadow: inset 0 -5px 5px rgba(0,0,0,.2);
}

.blog-nav {
		width:958px;
		text-align:center;
		border-left:1px solid #009;
		border-right:1px solid #009;
		background:#F0F
}

.blog-nav-item {	
		position:relative;
		display:inline-block;
		padding:10px;
		font-weight:400;
		color:white;
		text-decoration:none;
}

.blog-nav-item:hover{
		text-decoration:none;
		font-weight:400;
		color: #333;
}

.blog-titel {
		text-transform:uppercase;
		font-size:26px;
}


.blog-main { 
		background:#666;
}

.blog-sidebar { 
		background:#CCC;
		height:100%;
}

Anhang anzeigen 63102

Danke im Voraus für Eure Hilfe.

chrisverol

SpiceLab · 23. März 2014

Ohne den HTML-Code gesehen zu haben, tippe ich je nach HTML-Gerüstaufbau entweder hierauf:

CSS:

.blog-nav {
        margin:0 auto; /* (Block-)Element im Viewport horizontal zentrieren */
        width:958px;
        text-align:center;
        border-left:1px solid #009;
        border-right:1px solid #009;
        background:#F0F
}

oder darauf:

CSS:

.blog-nav {
        margin:0; /* voreingestellten Außenabstand des ul-Elements zurücksetzen */
        padding:0; /* voreingestellten Innenabstand des ul-Elements zurücksetzen */
        width:958px;
        text-align:center;
        border-left:1px solid #009;
        border-right:1px solid #009;
        background:#F0F
}

chrisverol · 23. März 2014

Hallo spiceleb,
danke erst mal für die Antwort.
Die Änderung brachte leider keinen Erfolg.
Wenn ich die CSS von Bootstrap deaktiviere passt es.

Anbei mal der html code

Code:

<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8">


<meta name="description" content="Ein Torturial von PIXELMEDIEN">
<meta name="autor" content="Ole.Bole">

<title>Tutorial Template PIXELMEDIEN</title>

        <!-- Bootstrap -->
            <link href="css/bootstrap.css" rel="stylesheet" type="text/css">
            <link href="css/bootstrap.min.css" rel="stylesheet" type="text/css"> 
            <link href="css/mein-tutorial-css.css" rel="stylesheet" type="text/css">
        
            <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
            <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
            <!--[if lt IE 9]>
              <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
              <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
           <![endif]-->
</head>
  
   
          <body>
          
				<div class="blog-masthead">
  					<div class="container">
                            <nav class="blog-nav">
                                <a href="#" class="blog-nav-item">Navigationspunkt 1</a>
                                <a href="#" class="blog-nav-item">Navigationspunkt 2</a>
                                <a href="#" class="blog-nav-item">Navigationspunkt 3</a>
                                <a href="#" class="blog-nav-item">Navigationspunkt 4</a>
                                <a href="#" class="blog-nav-item">Navigationspunkt 5</a>
                                <a href="#" class="blog-nav-item">Navigationspunkt 6</a>
                            </nav>                  
                  	</div>
                </div>
                
                <div class="container"><!-- container ANFANG-->
                        <div class="blog-header"><!-- blog-header Anfang-->
                                <h1 class="blog-titel">PIXELMEDIEN Tutorial</h1>
                                
                                <p class="blog-beschreibung">Dies ist ein Bootstrap - Tutorial zum Erlernen von HTML 5 + CSS3</p>                       
                        </div> <!-- blog-header ENDE-->
                        
                        
                        
                        
                    <div class="row-fluid"><!-- row Anfang-->
                    
                      <!-- Content ANFANG -->
                   	  <div class="col-md-8 blog-main">
                            <h2>Überschrift vom Hauptinhalt</h2>
                            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi.</p>
                            
                            <h4>Untertitel</h4>
                            <p>Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem.</p>
                      </div>
                      <!-- Content ENDE     -->
                      
                      
                      <!-- Sidebar ANFANG -->
                      <div class="col-md-3 col-md-offset-1 blog-sidebar">
                      		<h2>Sidebar</h2>
                        		<ul class="list-unstyled">
                                	<li><a href="#">Seitennavigation</a></li>
                                    <li><a href="#">Seitennavigation</a></li>
                                    <li><a href="#">Seitennavigation</a></li>
                                    <li><a href="#">Seitennavigation</a></li>
                                    <li><a href="#">Seitennavigation</a></li>
                                    <li><a href="#">Seitennavigation</a></li>
                                </ul>
                                
                                <h2>Module</h2>
                        		<ul class="list-unstyled">
                                	<li><a href="#">Modul 1</a></li>
                                    <li><a href="#">Modul 2</a></li>
                                    <li><a href="#">Modul 3</a></li>
                                    <li><a href="#">Modul 4</a></li>
                                    <li><a href="#">Modul 5</a></li>
                                    <li><a href="#">Modul 6</a></li>
                                </ul>
                      </div>
                      <!-- Sidebar ENDE -->                              
                    
                    
                  </div><!-- ROW ENDE -->
                  
                </div><!-- container ENDE -->
                
          
          <!-- ******************************************************************************************************-->        
            <!--  Bootstrap core Javascript 
            ====================================================================================-->
            <!-- Placed at the end of the document so the pages load faster -->
            <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
            <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
            <!-- Include all compiled plugins (below), or include individual files as needed -->
          <script src="js/bootstrap.min.js"></script>
</body>
</html>

SpiceLab · 23. März 2014

chrisverol hat gesagt.:
Die Änderung brachte leider keinen Erfolg.
Wenn ich die CSS von Bootstrap deaktiviere passt es.

Dass es bei mir auch ohne meine Tipps paßt, kann ich nur bestätigen, denn dieses plötzlich relevante CSS hab ich überhaupt nicht zur Hand

chrisverol · 23. März 2014

Anbei der Original CSS Code

Code:

/*!
 * Bootstrap v3.1.1 (http://getbootstrap.com)
 * Copyright 2011-2014 Twitter, Inc.
 * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
 */

/*! normalize.css v3.0.0 | MIT License | git.io/normalize */
html {
  font-family: sans-serif;
  -webkit-text-size-adjust: 100%;
      -ms-text-size-adjust: 100%;
}
body {
  margin: 0;
}
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
nav,
section,
summary {
  display: block;
}
audio,
canvas,
progress,
video {
  display: inline-block;
  vertical-align: baseline;
}
audio:not([controls]) {
  display: none;
  height: 0;
}
[hidden],
template {
  display: none;
}
a {
  background: transparent;
}
a:active,
a:hover {
  outline: 0;
}
abbr[title] {
  border-bottom: 1px dotted;
}
b,
strong {
  font-weight: bold;
}
dfn {
  font-style: italic;
}
h1 {
  margin: .67em 0;
  font-size: 2em;
}
mark {
  color: #000;
  background: #ff0;
}
small {
  font-size: 80%;
}
sub,
sup {
  position: relative;
  font-size: 75%;
  line-height: 0;
  vertical-align: baseline;
}
sup {
  top: -.5em;
}
sub {
  bottom: -.25em;
}
img {
  border: 0;
}
svg:not(:root) {
  overflow: hidden;
}
figure {
  margin: 1em 40px;
}
hr {
  height: 0;
  -moz-box-sizing: content-box;
       box-sizing: content-box;
}
pre {
  overflow: auto;
}
code,
kbd,
pre,
samp {
  font-family: monospace, monospace;
  font-size: 1em;
}
button,
input,
optgroup,
select,
textarea {
  margin: 0;
  font: inherit;
  color: inherit;
}
button {
  overflow: visible;
}
button,
select {
  text-transform: none;
}
button,
html input[type="button"],
input[type="reset"],
input[type="submit"] {
  -webkit-appearance: button;
  cursor: pointer;
}
button[disabled],
html input[disabled] {
  cursor: default;
}
button::-moz-focus-inner,
input::-moz-focus-inner {
  padding: 0;
  border: 0;
}
input {
  line-height: normal;
}
input[type="checkbox"],
input[type="radio"] {
  box-sizing: border-box;
  padding: 0;
}
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  height: auto;
}
input[type="search"] {
  -webkit-box-sizing: content-box;
     -moz-box-sizing: content-box;
          box-sizing: content-box;
  -webkit-appearance: textfield;
}
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
}
fieldset {
  padding: .35em .625em .75em;
  margin: 0 2px;
  border: 1px solid #c0c0c0;
}
legend {
  padding: 0;
  border: 0;
}
textarea {
  overflow: auto;
}
optgroup {
  font-weight: bold;
}
table {
  border-spacing: 0;
  border-collapse: collapse;
}
td,
th {
  padding: 0;
}

SpiceLab · 23. März 2014

Sorry, ich erkenne damit im aktuellen Firefox und IE beim besten Willen keinen Unterschied, was die horizontale Zentrierung betrifft.

Mit welchem Browser / welcher Version hast du Probleme?

chrisverol · 23. März 2014

Ansicht ist bei mir in allen aktuellen Browsern (IE 10 FF Chrome) gleich.
Ergebnis überall gleich wie im Bild oben.

SpiceLab · 23. März 2014

Ist da vielleicht noch etwas mehr CSS involviert, als von dir bisher genannt/gezeigt?

P.S. "IE 11" ist die aktuelle Version

chrisverol · 23. März 2014

es folgt noch Media querie Angaben

chrisverol · 23. März 2014

die bootstrap.min.css habe ich rausgenommen aber das ändert auch nichts am Ergebnis.

Menu - Zentrierung Bootstrap

chrisverol

Grünschnabel

Anhänge

SpiceLab

ZENmechanic

chrisverol

Grünschnabel

SpiceLab

ZENmechanic

chrisverol

Grünschnabel

SpiceLab

ZENmechanic

chrisverol

Grünschnabel

SpiceLab

ZENmechanic

chrisverol

Grünschnabel

chrisverol

Grünschnabel

Neue Beiträge