2015-07-10 101 views
0

嗨,這是我的網站鏈接,在該菜單顯示logo.but的底部,但我想顯示右側的徽標底部。這是我想要改變它的示例代碼。菜單不移動在html頂部

預期輸出:

logo     menus 

的index.html

<!DOCTYPE html> 
<html> 
<head> 
    <title>Olisvell | Home </title> 
    <!--fonts--> 
     <link href='http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800' rel='stylesheet' type='text/css'> 
    <!--//fonts--> 
      <link href="css/bootstrap.css" rel="stylesheet"> 
      <link href="css/style.css" rel="stylesheet" type="text/css" media="all" /> 
    <!-- for-mobile-apps --> 
     <meta name="viewport" content="width=device-width, initial-scale=1"> 
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
     <meta name="keywords" content="Wilcox Responsive web template, Bootstrap Web Templates, Flat Web Templates, Andriod Compatible web template, 
     Smartphone Compatible web template, free webdesigns for Nokia, Samsung, LG, SonyErricsson, Motorola web design" /> 
     <script type="application/x-javascript"> addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false); function hideURLbar(){ window.scrollTo(0,1); } </script> 
    <!-- //for-mobile-apps --> 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> 
</head> 
<body> 
<!-- header --> 
<div class="header"> 
    <div class="container"> 
     <div class="logo"> 
      <a href="index.html"><img src="images/logo.gif" alt=""/></a> 
     </div> 

     <div class="header-right"> 
      <ul> 
     <li>Welcome Guest</li> 
     <li>Free Register</li> 
     <li>Login</li> 
    </ul> 
     </div> 
     <div class="clearfix"></div> 
    </div> 
</div> 
<!-- //header --> 
<!-- navigation --> 
<div class="navigation"> 
    <div class="container"> 
     <nav class="navbar navbar-default"> 

      <!-- Brand and toggle get grouped for better mobile display --> 
      <div class="navbar-header"> 
       <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> 
       <span class="sr-only">Toggle navigation</span> 
       <span class="icon-bar"></span> 
       <span class="icon-bar"></span> 
       <span class="icon-bar"></span> 
       </button> 
      </div> 

      <!-- Collect the nav links, forms, and other content for toggling --> 
      <div class="collapse navbar-collapse nav-wil" id="bs-example-navbar-collapse-1"> 
       <ul class="nav navbar-nav"> 
       <li class="active"><a href="index.html">Home <span class="sr-only">(current)</span></a></li> 
       <li><a href="index.html">About Us</a></li> 
       <li><a href="index.html">Services</a></li> 
       <li><a href="index.html">Treatments</a></li> 


       <li><a href="index.html">Partners</a></li> 
       <li><a href="index.html">Visa Help</a></li> 
       <li><a href="index.html">FAQ</a></li> 
       <li><a href="index.html">Contact Us</a></li> 
       </ul> 

       <div class="clearfix"></div> 
      </div><!-- /.navbar-collapse --> 
     </nav> 
    </div> 
</div> 
<!-- //navigation --> 
<!-- banner --> 
<div class="banner"> 
    <div class="container"> 
<!-- responsiveslides --> 
        <script src="js/responsiveslides.min.js"></script> 
         <script> 
          // You can also use "$(window).load(function() {" 
          $(function() { 
          // Slideshow 4 
          $("#slider3").responsiveSlides({ 
           auto: true, 
           pager: false, 
           nav: true, 
           speed: 500, 
           namespace: "callbacks", 
           before: function() { 
          $('.events').append("<li>before event fired.</li>"); 
          }, 
          after: function() { 
           $('.events').append("<li>after event fired.</li>"); 
           } 
           }); 
           }); 
         </script> 
      <!-- responsiveslides --> 
     <div id="top" class="callbacks_container"> 
        <ul class="rslides" id="slider3"> 
         <li> 
          <div class="banner-info"> 
           <div class="bann-top"> 

            <div class="clearfix"></div> 
           </div> 
          </div> 
         </li> 
         <li> 
          <div class="banner-info"> 
           <div class="bann-top second"> 

            <div class="clearfix"></div> 
           </div> 
          </div> 
         </li> 
         <li> 
          <div class="banner-info"> 
           <div class="bann-top second1"> 

            <div class="clearfix"></div> 
           </div> 
          </div> 
         </li> 
         <li> 
          <div class="banner-info"> 
           <div class="bann-top1"> 

            <div class="clearfix"></div> 
           </div> 
          </div> 
         </li> 
        </ul> 
     </div> 
    </div> 
</div> 
<!-- //banner --> 
<!-- banner-bottom --> 
<div class="bann-bot"> 
    <div class="container"> 
    <div class="news"> 
       <div class="news-left"> 
       <h1>Welcome to Olisvell</h1> 
        <p>ACROSS THE WORLD THE COST OF HEALTHCARE HAS ROCKETED AND THERE HAS BEEN A GREATER NEEED FOR FINDING AFFORDABLE AND TOP QUALITY HEALTHCARE. THIS IS A PHENOMENA THAT IS SPREADING ACROSS THE WORLD AND INDIA HAS BEEN GEARING UP FOR THIS IN THE LAST DECADE. INDIA IS NOW AN ESTABLISHED ENTITY IN MEDICAL TOURISM AND THE WORLD IS LOOKING AT IT FROM ALL SIDES. 
WE AT OLISWELL, LOOK FORWAD TO HELP DIRECT YOUR HEALTH PROBLEMS TO THE BEST DOCTORS AVAILABLE IN BANGALORE, INDIA, THE MECCA OF MEDICAL TOURISM IN INDIA. WITH THE BEST WEATHER, CONNECTIVITY AND SURROUNDED BY TOURIST SPOTS AND THE ADDED TOP HEALTH INSTITITUES, IT REMAINS THE CHOICE OF DESTINATIONS FOR MEDICAL TOURISM. WE AT ALISWELL WILLMAKE SURE YOU CARRY THE BEST OF FEELINGS WHEN YOU LEAVE AFTER YOUR TREATMENTS.</p> 
       </div> 

       <div class="clearfix"></div> 
      </div> 
     <div class="banner-info-second"> 
      <div class="row bann-col"> 
       <div class="col-md-4 banner-grid"> 
        <i></i><h2>Solutions Made Easy</h2> 
         <div class="clearfix"></div> 
        <p>Suspendisse vulputate fringilla arcu et porttitor. Mauris placerat 
         mattis tellus id sodales. Morbi vitae ipsum lectus, ullamcorper eleifend orci.</p> 
        <p><a class="btn btn-default" href="#" role="button">Read More</a></p> 
       </div> 
       <div class="col-md-4 banner-grid"> 
        <span></span><h2>We Listen To You</h2> 
         <div class="clearfix"></div> 
        <p>Suspendisse vulputate fringilla arcu et porttitor. Mauris placerat 
         mattis tellus id sodales. Morbi vitae ipsum lectus, ullamcorper eleifend orci.</p> 
        <p><a class="btn btn-default" href="#" role="button">Read More</a></p> 
       </div> 
       <div class="col-md-4 banner-grid"> 
        <label></label><h2>Monitoring your Output</h2> 
         <div class="clearfix"></div> 
        <p>Suspendisse vulputate fringilla arcu et porttitor. Mauris placerat 
         mattis tellus id sodales. Morbi vitae ipsum lectus, ullamcorper eleifend orci.</p> 
        <p><a class="btn btn-default" href="#" role="button">Read More</a></p> 
       </div> 

      </div> 

     </div> 

    </div> 
</div> 
<!-- //banner-bottom --> 
<!-- news-bottom --> 
<!-- 
<div class="news-bottom"> 
    <div class="container"> 
     <div class="news-pad"> 
      <div class="row news-bot"> 
       <div class="col-md-3 news-grid"> 
        <h3>Pages</h3> 
        <ul> 
         <li><a href="#">Suspendisse Vulputate </a></li> 
         <li><a href="#">Fringilla Arcu et Porttitor</a></li> 
         <li><a href="#">Mauris Placerat Mattis </a></li> 
         <li><a href="#">Tellus id Sodales </a></li> 
         <li><a href="#">Magnust Qisit</a></li> 
        </ul>   
       </div> 
       <div class="col-md-3 news-grid"> 
        <h3>Main Menu</h3> 
        <ul> 
         <li><a href="#">Suspendisse Vulputate </a></li> 
         <li><a href="#">Fringilla Arcu et Porttitor</a></li> 
         <li><a href="#">Mauris Placerat Mattis </a></li> 
         <li><a href="#">Tellus id Sodales </a></li> 
         <li><a href="#">Magnust Qisit</a></li> 
        </ul>        
       </div> 
       <div class="col-md-3 news-grid"> 
        <h3>Latest News & Events</h3> 
        <ul> 
         <li><a href="#">Suspendisse Vulputate </a></li> 
         <li><a href="#">Fringilla Arcu et Porttitor</a></li> 
         <li><a href="#">Mauris Placerat Mattis </a></li> 
         <li><a href="#">Tellus id Sodales </a></li> 
         <li><a href="#">Magnust Qisit</a></li> 
        </ul>        
       </div> 
       <div class="col-md-3 news-grid"> 
        <h3>Blog Posts</h3> 
        <ul> 
         <li><a href="#">Suspendisse Vulputate </a></li> 
         <li><a href="#">Fringilla Arcu et Porttitor</a></li> 
         <li><a href="#">Mauris Placerat Mattis </a></li> 
         <li><a href="#">Tellus id Sodales </a></li> 
         <li><a href="#">Magnust Qisit</a></li> 
        </ul>        
       </div> 
      </div> 
     </div> 
    </div> 
</div>--> 
<!-- //news-bottom --> 
<!-- footer --> 
<div class="footer"> 
    <div class="container"> 
     <p>Copyright &copy; 2015 OLISVELL, Inc.</p> 
    </div> 
</div> 
<!-- footer --> 
<!-- Bootstrap core JavaScript 
    ================================================== --> 
    <!-- Placed at the end of the document so the pages load faster --> 
    <!-- js --> 
     <script src="js/bootstrap.js"></script> 
    <!-- js --> 
</body> 
</html> 
+0

請你嘗試什麼一個小例子,什麼你期望的結果是。也不要發佈鏈接到代碼,發佈相關代碼的問題。 – firelynx

+0

看到我更新的帖子 – care567

回答

1

更改您的HTML

<!DOCTYPE html> 
<html> 
<head> 
    <title>Olisvell | Home </title> 
    <!--fonts--> 
     <link href='http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800' rel='stylesheet' type='text/css'> 
    <!--//fonts--> 
      <link href="css/bootstrap.css" rel="stylesheet"> 
      <link href="css/style.css" rel="stylesheet" type="text/css" media="all" /> 
    <!-- for-mobile-apps --> 
     <meta name="viewport" content="width=device-width, initial-scale=1"> 
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
     <meta name="keywords" content="Wilcox Responsive web template, Bootstrap Web Templates, Flat Web Templates, Andriod Compatible web template, 
     Smartphone Compatible web template, free webdesigns for Nokia, Samsung, LG, SonyErricsson, Motorola web design" /> 
     <script type="application/x-javascript"> addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false); function hideURLbar(){ window.scrollTo(0,1); } </script> 
    <!-- //for-mobile-apps --> 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> 
</head> 
<body> 
<!-- header --> 
<div class="header"> 
    <div class="container"> 


     <div class="header-right"> 
      <ul> 
     <li>Welcome Guest</li> 
     <li>Free Register</li> 
     <li>Login</li> 
    </ul> 
     </div> 
<div class="logo"> 
      <a href="index.html"><img src="images/logo.gif" alt=""/></a> 
     </div> 
     <!-- Collect the nav links, forms, and other content for toggling --> 
      <div class="collapse navbar-collapse nav-wil" id="bs-example-navbar-collapse-1"> 
       <ul class="nav navbar-nav"> 
       <li class="active"><a href="index.html">Home <span class="sr-only">(current)</span></a></li> 
       <li><a href="index.html">About Us</a></li> 
       <li><a href="index.html">Services</a></li> 
       <li><a href="index.html">Treatments</a></li> 


       <li><a href="index.html">Partners</a></li> 
       <li><a href="index.html">Visa Help</a></li> 
       <li><a href="index.html">FAQ</a></li> 
       <li><a href="index.html">Contact Us</a></li> 
       </ul> 

       <div class="clearfix"></div> 
      </div><!-- /.navbar-collapse --> 
     <div class="clearfix"></div> 
    </div> 
</div> 
<!-- //header --> 
<!-- navigation --> 
<div class="navigation"> 
    <div class="container"> 
     <nav class="navbar navbar-default"> 

      <!-- Brand and toggle get grouped for better mobile display --> 
      <div class="navbar-header"> 
       <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> 
       <span class="sr-only">Toggle navigation</span> 
       <span class="icon-bar"></span> 
       <span class="icon-bar"></span> 
       <span class="icon-bar"></span> 
       </button> 
      </div> 


     </nav> 
    </div> 
</div> 
<!-- //navigation --> 
<!-- banner --> 
<div class="banner"> 
    <div class="container"> 
<!-- responsiveslides --> 
        <script src="js/responsiveslides.min.js"></script> 
         <script> 
          // You can also use "$(window).load(function() {" 
          $(function() { 
          // Slideshow 4 
          $("#slider3").responsiveSlides({ 
           auto: true, 
           pager: false, 
           nav: true, 
           speed: 500, 
           namespace: "callbacks", 
           before: function() { 
          $('.events').append("<li>before event fired.</li>"); 
          }, 
          after: function() { 
           $('.events').append("<li>after event fired.</li>"); 
           } 
           }); 
           }); 
         </script> 
      <!-- responsiveslides --> 
     <div id="top" class="callbacks_container"> 
        <ul class="rslides" id="slider3"> 
         <li> 
          <div class="banner-info"> 
           <div class="bann-top"> 

            <div class="clearfix"></div> 
           </div> 
          </div> 
         </li> 
         <li> 
          <div class="banner-info"> 
           <div class="bann-top second"> 

            <div class="clearfix"></div> 
           </div> 
          </div> 
         </li> 
         <li> 
          <div class="banner-info"> 
           <div class="bann-top second1"> 

            <div class="clearfix"></div> 
           </div> 
          </div> 
         </li> 
         <li> 
          <div class="banner-info"> 
           <div class="bann-top1"> 

            <div class="clearfix"></div> 
           </div> 
          </div> 
         </li> 
        </ul> 
     </div> 
    </div> 
</div> 
<!-- //banner --> 
<!-- banner-bottom --> 
<div class="bann-bot"> 
    <div class="container"> 
    <div class="news"> 
       <div class="news-left"> 
       <h1>Welcome to Olisvell</h1> 
        <p>ACROSS THE WORLD THE COST OF HEALTHCARE HAS ROCKETED AND THERE HAS BEEN A GREATER NEEED FOR FINDING AFFORDABLE AND TOP QUALITY HEALTHCARE. THIS IS A PHENOMENA THAT IS SPREADING ACROSS THE WORLD AND INDIA HAS BEEN GEARING UP FOR THIS IN THE LAST DECADE. INDIA IS NOW AN ESTABLISHED ENTITY IN MEDICAL TOURISM AND THE WORLD IS LOOKING AT IT FROM ALL SIDES. 
WE AT OLISWELL, LOOK FORWAD TO HELP DIRECT YOUR HEALTH PROBLEMS TO THE BEST DOCTORS AVAILABLE IN BANGALORE, INDIA, THE MECCA OF MEDICAL TOURISM IN INDIA. WITH THE BEST WEATHER, CONNECTIVITY AND SURROUNDED BY TOURIST SPOTS AND THE ADDED TOP HEALTH INSTITITUES, IT REMAINS THE CHOICE OF DESTINATIONS FOR MEDICAL TOURISM. WE AT ALISWELL WILLMAKE SURE YOU CARRY THE BEST OF FEELINGS WHEN YOU LEAVE AFTER YOUR TREATMENTS.</p> 
       </div> 

       <div class="clearfix"></div> 
      </div> 
     <div class="banner-info-second"> 
      <div class="row bann-col"> 
       <div class="col-md-4 banner-grid"> 
        <i></i><h2>Solutions Made Easy</h2> 
         <div class="clearfix"></div> 
        <p>Suspendisse vulputate fringilla arcu et porttitor. Mauris placerat 
         mattis tellus id sodales. Morbi vitae ipsum lectus, ullamcorper eleifend orci.</p> 
        <p><a class="btn btn-default" href="#" role="button">Read More</a></p> 
       </div> 
       <div class="col-md-4 banner-grid"> 
        <span></span><h2>We Listen To You</h2> 
         <div class="clearfix"></div> 
        <p>Suspendisse vulputate fringilla arcu et porttitor. Mauris placerat 
         mattis tellus id sodales. Morbi vitae ipsum lectus, ullamcorper eleifend orci.</p> 
        <p><a class="btn btn-default" href="#" role="button">Read More</a></p> 
       </div> 
       <div class="col-md-4 banner-grid"> 
        <label></label><h2>Monitoring your Output</h2> 
         <div class="clearfix"></div> 
        <p>Suspendisse vulputate fringilla arcu et porttitor. Mauris placerat 
         mattis tellus id sodales. Morbi vitae ipsum lectus, ullamcorper eleifend orci.</p> 
        <p><a class="btn btn-default" href="#" role="button">Read More</a></p> 
       </div> 

      </div> 

     </div> 

    </div> 
</div> 
<!-- //banner-bottom --> 
<!-- news-bottom --> 
<!-- 
<div class="news-bottom"> 
    <div class="container"> 
     <div class="news-pad"> 
      <div class="row news-bot"> 
       <div class="col-md-3 news-grid"> 
        <h3>Pages</h3> 
        <ul> 
         <li><a href="#">Suspendisse Vulputate </a></li> 
         <li><a href="#">Fringilla Arcu et Porttitor</a></li> 
         <li><a href="#">Mauris Placerat Mattis </a></li> 
         <li><a href="#">Tellus id Sodales </a></li> 
         <li><a href="#">Magnust Qisit</a></li> 
        </ul>   
       </div> 
       <div class="col-md-3 news-grid"> 
        <h3>Main Menu</h3> 
        <ul> 
         <li><a href="#">Suspendisse Vulputate </a></li> 
         <li><a href="#">Fringilla Arcu et Porttitor</a></li> 
         <li><a href="#">Mauris Placerat Mattis </a></li> 
         <li><a href="#">Tellus id Sodales </a></li> 
         <li><a href="#">Magnust Qisit</a></li> 
        </ul>        
       </div> 
       <div class="col-md-3 news-grid"> 
        <h3>Latest News & Events</h3> 
        <ul> 
         <li><a href="#">Suspendisse Vulputate </a></li> 
         <li><a href="#">Fringilla Arcu et Porttitor</a></li> 
         <li><a href="#">Mauris Placerat Mattis </a></li> 
         <li><a href="#">Tellus id Sodales </a></li> 
         <li><a href="#">Magnust Qisit</a></li> 
        </ul>        
       </div> 
       <div class="col-md-3 news-grid"> 
        <h3>Blog Posts</h3> 
        <ul> 
         <li><a href="#">Suspendisse Vulputate </a></li> 
         <li><a href="#">Fringilla Arcu et Porttitor</a></li> 
         <li><a href="#">Mauris Placerat Mattis </a></li> 
         <li><a href="#">Tellus id Sodales </a></li> 
         <li><a href="#">Magnust Qisit</a></li> 
        </ul>        
       </div> 
      </div> 
     </div> 
    </div> 
</div>--> 
<!-- //news-bottom --> 
<!-- footer --> 
<div class="footer"> 
    <div class="container"> 
     <p>Copyright &copy; 2015 OLISVELL, Inc.</p> 
    </div> 
</div> 
<!-- footer --> 
<!-- Bootstrap core JavaScript 
    ================================================== --> 
    <!-- Placed at the end of the document so the pages load faster --> 
    <!-- js --> 
     <script src="js/bootstrap.js"></script> 
    <!-- js --> 
</body> 
</html> 
0

這取決於你如何要對齊,但這裏有一個例子:

.logo, 
 
.header-right { 
 
    float: left; 
 
} 
 
.header-right li { 
 
    float: left; 
 
    margin-left: 16px; 
 
    list-style: none; 
 
} 
 
.clearfix::after { 
 
    content: ''; 
 
    display: table; 
 
    clear: both; 
 
}
<div class="header"> 
 
    <div class="container"> 
 
    <div class="logo"> 
 
     <a href="index.html"> 
 
     <img src="//lorempicsum.com/futurama/350/200/2" alt="" /> 
 
     </a> 
 
    </div> 
 

 
    <div class="header-right clearfix"> 
 
     <ul> 
 
     <li>Welcome Guest</li> 
 
     <li>Free Register</li> 
 
     <li class="clearfix">Login</li> 
 
     </ul> 
 
    </div> 
 
    </div> 
 
</div>

0

更改DIVdemo

.container{ 
    height:150px; 
    width:100%; 
    background-color:green; 
} 
.logo{ 
    float:left; 
    width:20%; 
    height:100%; 
    background-color:blue; 
} 
.header-right{ 
    float:right; 
    width:80%; 
    height:100%; 
    background-color:yellow; 
} 
.header-right-top{ 
    width:100%; 
    height:80%; 
    background-color:pink; 
} 
.header-right-top{ 
    width:100%; 
    height:20%; 
    background-color:gray; 
} 

.header-right ul { 
    float: right; 

} 
.header-right ul li { 
    display: inline-block; 

} 

<div class="container"> 
    <div class="logo"> 
     <a href="index.html">LOGO</a> 
     </div> 
    <div class="header-right"> 
     <div class="header-right-top"> 
      <ul> 
       <li>Welcome Guest</li> 
       <li>Free Register</li> 
       <li>Login</li> 
      </ul> 
     </div> 
     <div class="header-right-bottom"> 
      YOUR NAV MENU 
     </div> 
    </div> 
</div>