1. 首頁
  2. 問答
  3. 與我的造型混合

與我的造型混合

2014-12-23 83 views
0

我與我的造型混在一起，希望獲得一些幫助，讓我的page_content_div出現在我的標題下，而不是在右側和左側旋轉木馬控件下。在page_content_div上應用float左側沒有幫助。我還放置了代碼jsfiddle，結果幾乎相同。與我的造型混合

我懷疑它是我的一個基本監督，但任何人都可以發現我在header或container_div CSS中發生的錯誤嗎？

這裏是我目前的index.html代碼截圖：

mix up with divs

這裏是我的index.html：

<!DOCTYPE html> 
<html> 

<head> 
    <meta charset='utf-8'> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 

    <link rel="stylesheet" href="stylesheets/public.css"> 

    <!-- <link rel="stylesheet" href="stylesheets/bootstrap.css"> --> 

    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 

    <link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/combo?2.6.0/build/reset-fonts-grids/reset-fonts-grids.css&2.6.0/build/base/base-min.css"> 

    <link href="stylesheets/carouseltwo.css" rel="stylesheet" type="text/css"> 

    <!-- Bootstrap Core CSS --> 
    <link href="stylesheets/bootstrap.min.css" rel="stylesheet"> 

    <!-- Custom CSS --> 
    <link href="stylesheets/modern-business.css" rel="stylesheet"> 

    <!-- Custom Fonts --> 
    <link href="font-awesome-4.1.0/stylesheets/font-awesome.min.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]--> 

    <title>Welcome</title> 

</head> 

<body> 

    <div id="topbar"> 
     <a class="logo_link" href="http://www.swim-mates.com/learning/landingpage/index.html">Logo text</a> 

     <ul> 
      <li><a href='#'><span>MENU OPTION A</span></a></li> 
      <li ><a href='#'><span>MENU OPTION B</span></a></li> 
      <li ><a href='#'><span>MENU OPTION C</span></a></li> 
      <li ><a href='#'><span>MENU OPTION D</span></a></li>       
     </ul>   
    </div> 

    <!-- Welcome message --> 
    <div class="welcome_message"> 
     Welcome message ... Welcome message ... Welcome message ... Welcome message ... 
    </div> 

    <!-- Header Carousel --> 
    <header id="myCarousel" class="carousel slide"> 

     <!-- Indicators --> 
     <ol class="carousel-indicators"> 
      <li data-target="#myCarousel" data-slide-to="0" class="active"></li> 
      <li data-target="#myCarousel" data-slide-to="1"></li> 
      <li data-target="#myCarousel" data-slide-to="2"></li> 
     </ol> 

     <!-- Wrapper for slides --> 
     <div class="carousel-inner"> 
      <div class="item active"> 
       <div class="fill" style="background-image:url('http://placehold.it/1900x1080&text=Slide One');"> 

       </div> 

       <div class="carousel-caption"> 
        <h2>Caption A</h2> 
       </div> 
      </div> 
      <div class="item"> 
       <div class="fill" style="background-image:url('http://placehold.it/1900x1080&text=Slide Two');"> 

       </div> 

       <div class="carousel-caption"> 
        <h2>Caption B</h2> 
       </div> 
      </div> 
      <div class="item"> 
       <div class="fill" style="background-image:url('http://placehold.it/1900x1080&text=Slide Three');"> 

       </div> 
       <div class="carousel-caption"> 
        <h2>Caption C</h2> 
       </div> 
      </div> 
     </div> 

     <!-- Controls --> 
     <a class="left carousel-control" href="#myCarousel" data-slide="prev"> 
      <span class="icon-prev"></span> 
     </a> 

     <a class="right carousel-control" href="#myCarousel" data-slide="next"> 
      <span class="icon-next"></span> 
     </a> 

    </header>  

    <!-- Page Content --> 
    <div id="page_content" class="page_content_div"> 

     <div class="row_div"> 
      <div class="col-lg-12"> 
       <h1 class="page-header"> 
        Sign up 
       </h1> 
      </div> 
     </div> 

     <!-- Call to Action Section --> 
     <div class="well"> 
      <div class="row"> 

      </div> 
     </div> 

     <!-- Footer --> 
     <footer> 
      <div class="row_div"> 
       <div class="footer_div"> 
        <p>Copyright &copy; Desired footer text 2014</p> 
       </div> 
      </div> 
     </footer>   
    </div>  

    <!-- jQuery --> 
    <script src="js/jquery.js"></script> 

    <!-- Bootstrap Core JavaScript --> 
    <script src="js/bootstrap.min.js"></script> 

    <!-- Script to Activate the Carousel --> 
    <script> 
    $('.carousel').carousel({ 
     interval: 2000 //changes the speed 
    }) 
    </script>  
</body> 

</html>

這裏是我的public.css：

html {height: 100%; width: 100%;} 

body { 
    padding: 0px; 
    height: 100%; 
    width: 100%; 
    margin: 0; 
    padding: 0; 
    border: 0; 
    font-family: "DINPro-Bold",Georgia,Serif;  
    font-size: 15px; 
    line-height: 15px; 
} 

/* Main div - this will hold all the componenets*/ 
.main_div { 
    height: 100%; 
    width: 100%; 
} 

/* Welcome message div*/ 
.logo_link { 
    float: left; 
    height: 50px; 
    padding: 15px 15px; 
    font-size: 20px; 
    line-height: 20px; 
    font-family: "DINPro-Bold",Georgia,Serif; 
    background-color: #FFCC00; 
} 

/* Top bar*/ 
#topbar { 
    background: #3399CC; 
    height: 50px; 
    width: 100%; 
    border-bottom: 1px #808080; 
    float: left; 
} 

/* ul */ 
#topbar ul { 
    float: right; 
    list-style: none; 
    margin: 0; 
    padding: 0; 
    line-height: 1; 
    display: block; 
    zoom: 1; 
} 

/* li */ 
#topbar ul li { 
    display: inline-block; 
    padding: 0; 
    margin: 0; 
} 

/* Insert a gap after every <ul> element */ 
#topbar ul:after { 
    content: " "; 
    display: block; 
    font-size: 0; 
    height: 0; 
    clear: both; 
    visibility: hidden; 
} 

/* ul li a */ 
#topbar ul li a { 
    font-family: "DINPro-Bold",Georgia,Serif; 
    color: #FFFFFF; 
    text-decoration: none; 
    display: block; 
    padding: 15px 15px; 
    font-weight: 700; 
    text-transform: uppercase; 
    font-size: 14px; 
    position: relative; 
    -webkit-transition: color .25s; 
    -moz-transition: color .25s; 
    -ms-transition: color .25s; 
    -o-transition: color .25s; 
    transition: color .25s; 
} 

/* ul li a:hover */ 
#topbar ul li a:hover { 
    color: #000000; 
} 

/* Bullet point after the menu name */ 
#topbar ul li a:after { 
    content: ""; 
    display: block; 
    position: absolute; 
    right: -3px; 
    top: 19px; 
    height: 6px; 
    width: 6px; 
    background: #FFFFFF; 
    opacity: .5; 
} 

/* Insert content before every <a> element's content */ 
#topbar ul li a:before { 
    content: ""; 
    display: block; 
    position: absolute; 
    left: 0; 
    bottom: 0; 
    height: 3px; 
    width: 0; 
    background: #00FF00; 
    -webkit-transition: width .25s; 
    -moz-transition: width .25s; 
    -ms-transition: width .25s; 
    -o-transition: width .25s; 
    transition: width .25s; 
} 

#topbar ul li.last > a:after, 
#topbar ul li:last-child > a:after { 
    display: none; 
} 

#topbar ul li.active a { 
    color: #FFDD00; 
} 

#topbar ul li.active a:before { 
    width: 100%; 
} 

#topbar.align-right li.last > a:after, 
#topbar.align-right li:last-child > a:after { 
    display: block; 
} 

#topbar.align-right li:first-child a:after { 
    display: none; 
} 

/*Overall/Super div*/ 
.main_div { 
    width: 100%; 
    float: left; 
    font-family: "DINPro-Bold",Georgia,Serif; 
} 

/* Welcome message div*/ 
.welcome_message { 
    width: 100%; 
    font-size: 25px; 
    float: left; 
    color: #999999; 
    padding: 10px; 
} 

/* */ 
.page_content_div { 
    padding-right: 15px; 
    padding-left: 15px; 
    margin-right: 100px; 
    margin-left: 100px; 
    background-color:#FFCC00; 
} 

/* row div */ 
.row_div { 
    margin-right: -15px; 
    margin-left: -15px; 
    background-color:#99FF99; 
    font-family: "DINPro-Bold",Georgia,Serif; 
} 

/* footer inner div */ 
.footer_div { 
    position: relative; 
    min-height: 1px; 
    padding-right: 15px; 
    padding-left: 15px; 
    background-color:#FF0000; 
} 

/* Carousel arrows/control 
.arrows { 
    position:relative; 
    background-color:#99FF99; 
    top:0; 
    bottom:0; 
    left:0; 
    width:15%; 
    font-size:20px; 
    text-align:center; 
    text-shadow:0 1px 2px rgba(255,114,0,.6); 
    filter:alpha(opacity=50);opacity:.5; 
} 

.arrows.left{ 
    background-image:-webkit-linear-gradient(left,rgba(0,0,0,.5) 0,rgba(0,0,0,.0001) 100%); 
    background-image:-o-linear-gradient(left,rgba(0,0,0,.5) 0,rgba(0,0,0,.0001) 100%); 
    background-image:-webkit-gradient(linear,left top,right top,from(rgba(0,0,0,.5)),to(rgba(0,0,0,.0001))); 
    background-image:linear-gradient(to right,rgba(0,0,0,.5) 0,rgba(0,0,0,.0001) 100%); 
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#80000000', endColorstr='#00000000', GradientType=1); 
    background-repeat:repeat-x 
} 

.arrows.right{ 
    right:0; 
    left:auto; 
    background-image:-webkit-linear-gradient(left,rgba(0,0,0,.0001) 0,rgba(0,0,0,.5) 100%); 
    background-image:-o-linear-gradient(left,rgba(0,0,0,.0001) 0,rgba(0,0,0,.5) 100%); 
    background-image:-webkit-gradient(linear,left top,right top,from(rgba(0,0,0,.0001)),to(rgba(0,0,0,.5))); 
    background-image:linear-gradient(to right,rgba(0,0,0,.0001) 0,rgba(0,0,0,.5) 100%); 
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#00000000', endColorstr='#80000000', GradientType=1); 
    background-repeat:repeat-x 
} 
*/

這是我的modern-business.css：

/*! 
* Start Bootstrap - Modern Business HTML Template (http://startbootstrap.com) 
* Code licensed under the Apache License v2.0. 
* For details, see http://www.apache.org/licenses/LICENSE-2.0. 
*/ 

/* Global Styles */ 

html, 
body { 
    height: 100%; 
} 

body { 
    /* padding-top: 50px; Required padding for .navbar-fixed-top. Remove if using .navbar-static-top. Change if height of navigation changes. */ 
} 

.img-portfolio { 
    margin-bottom: 30px; 
} 

.img-hover:hover { 
    opacity: 0.8; 
} 

/* Home Page Carousel */ 

header.carousel { 
    height: 50%; 
} 

header.carousel .item, 
header.carousel .item.active, 
header.carousel .carousel-inner { 
    height: 100%; 
} 

header.carousel .fill { 
    width: 100%; 
    height: 100%; 
    background-position: center; 
    background-size: cover; 
} 

/* 404 Page Styles */ 

.error-404 { 
    font-size: 100px; 
} 

/* Pricing Page Styles */ 

.price { 
    display: block; 
    font-size: 50px; 
    line-height: 50px; 
} 

.price sup { 
    top: -20px; 
    left: 2px; 
    font-size: 20px; 
} 

.period { 
    display: block; 
    font-style: italic; 
} 

/* Footer Styles */ 

footer { 
    /*margin: 50px 0;*/ 
} 

/* Responsive Styles */ 

@media(max-width:991px) { 
    .customer-img, 
    .img-related { 
     margin-bottom: 30px; 
    } 
} 

@media(max-width:767px) { 
    .img-portfolio { 
     margin-bottom: 15px; 
    } 

    header.carousel .carousel { 
     height: 70%; 
    } 
}

謝謝。

來源

2014-12-23 TokTok123

+3

那麼JSFiddle在哪裏？ –

+1

和......你不能移動html塊？ – aahhaa

+1

您可以製作一個簡化代碼示例來重現問題嗎？現在你有太多的代碼來輕鬆查看。 – bjb568

回答

0

這是朝正確方向邁出的一步。還有很多清理工作要做。但是現在你有你的divs不疊加，而是一個接一個地出現。希望有所幫助。

http://jsfiddle.net/marineboudeau/02wsoh42/1/

除其他事項外，我已通過添加留有餘量/右中心爲您的網頁page_content_div：汽車並增加了寬度（如果你希望它在整個頁面跨越，只是讓那寬度100％）。 我也加了一個clear:both。

.page_content_div { 
    padding-right: 15px; 
    padding-left: 15px; 
    margin-right: auto; 
    margin-left: auto; 
    background-color: #FFCC00; 
    width: 800px; 
    clear: both; 
}

來源

2014-12-23 16:58:46 Imalea

相關問題

 相關問題