2016-10-29 7 views
0

divの後にborder-bottomを表示しようとしていますが、最初のdivのみが表示されています。Div境界線が表示されない

**My CSS:** 

.row:after { 
content: " "; 
clear:both; 
display:block; 
} 


body { 
    margin: 0; 
    padding: 0; 
    border: 0 solid black; 
    font-family: Verdana,Geneva,sans-serif; 
    font-style: normal; 
    font-variant: normal; 
    font-weight: bold; 
} 

div.wrapper { 
    width: 100%; 
    align: center; 
    height: auto; 
    overflow: hidden; 
    margin: 0; 
    padding: 0; 
} 

*, *:after, *:before { 
    box-sizing: border-box; 
} 

img { 
    max-width: 100%; 
} 

/*** HEADER ***/ 

div.hdr_logo { 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: auto; 
    background-color: black; 
} 

img.hdr_logo { 
    position: relative; 
    padding: .5em; 
    border-radius: 50%; 
    width: 6em; 
} 

h3.hdr_logo { 
    position: absolute; 
    color: #90EE90; 
    font-family: Brush Script MT,cursive; 
    font-weight: 500; 
    font-size: 1em; 
    top: 3.75em; 
    left: 5em; 
} 

div.hdr_links { 
    position: absolute; 
    width: auto; 
    top: .15em; 
    right: .5em; 
    color: white; 
    float: right; 
    display: inline; 
} 

.hdr_links ul{ 
    list-style-type: none; 
    margin: 0; 
    padding: 0; 
} 

.hdr_links li{ 
    display: inline; 
    padding: 0; 
} 

.hdr_links a{ 
    text-decoration: none; 
    color: white; 
    font-size: .5em; 
    padding: 0; 
} 

.hdr_links li a:visited { 
    color: white; 
} 

.hdr_links li a:hover { 
    color: green; 
} 

.hdr_links li:not(:first-child):before { 
    content: " | "; 
} 

/*** BANNER ***/ 

div.banner { 
    margin: 0; 
    padding: 0; 
    width: 100%; 
    height: auto; 
    display: inline-block; 
    background-color: #101010; 
    color: WHITE; 
    text-align: center; 
    border-bottom: 1px solid black; 
} 

.banner img{ 
    position: relative; 
    margin: auto; 
    padding: 0; 
    max-width: 100%; 
    height: auto; 
    display: block; 
} 

.banner h1{ 
    font-size: 2em; 
    padding: .5em; 
} 

.banner h2{ 
    font-size: 1.15em; 
    padding: .5em; 
} 

.banner a { 
    text-decoration: none; 
    font-size: 1em; 
    padding: 0; 
} 

.banner a:link, a:visited { 
    background-color: #90EE90; 
    color: black; 
    padding: 14px 25px; 
    text-align: center; 
    text-decoration: none; 
    display: inline-block; 
} 

<!-- CAPTION --> 

div.caption { 
    margin: 0; 
    padding: 0; 
    width: 100%; 
    height: 200px; 
    display: block; 
    background-color: white; 
    color: black; 
    text-align: left; 
    border-bottom: 1px solid black; 
} 

.caption h3 { 
    padding: 1em 0 0 1em; 
    text-decoration: none; 
    font-size: 1em; 
} 

.caption a { 
    padding: 0 0 0 1em; 
    text-decoration: none; 
    font-size: 1.25em; 
    color: #33CCFF; 
} 

.caption a:visited { 
    color: #33CCFF; 
    background-color: white; 
} 

<!-- CURRENT MONTH --> 

div.currentMonth{ 
    margin: 0; 
    padding: 0; 
    width: 100%; 
    height: auto; 
    display: inline-block; 
    text-align: center; 
    background-color: white; 
    color: black; 
    border-bottom: 5px solid black; 
} 

img.currentMonth{ 
    position: relative; 
    margin: auto; 
    padding: 0; 
    max-width: 100%; 
    height: auto; 
    display: block; 
} 

.currentMonth h1{ 
    position: relative; 
    font-size: 2em; 
    text-align: center; 
} 

.currentMonth h2{ 
    position: relative; 
    font-size: 1.75em; 
    text-align: center; 
} 

.currentMonth a{ 
    align: left; 
    text-decoration: none; 
    color: #99e6ff; 
    background-color: #DEB887; 
    padding: .1em .25em .1em .25em; 
} 

.currentMonth a:hover{ 
    background-color: #a06d2c; 
    color: #99ccff; 
} 

<!--- FOOTER ---> 

div.ftr_main { 
    position: relative; 
    bottom: 0; 
    left: 0; 
    width: 100%; 
    height: auto; 
    color: black; 
    background-color: white); 
    } 

h3.ftr_main { 
    position: absolute; 
    top: 100px; 
    left: 20px; 
    font-size: 14px; 
    color: white; 
} 

div.ftr_legal { 
    position: relative; 
    left: 0; 
    bottom: 0; 
    padding: 1em; 
    width: 100%; 
    height: auto; 
    align: center; 
    color: white; 
    font-size: .75em; 
    line-height: 1em; 
    background-color: black; 
    } 

.ftr_legal a{ 
    align: center; 
    font-size: .8em; 
    color: white; 
    text-decoration: none; 
} 


**My HTML:** 

<head> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <meta http-equiv="Content-Type" content="text/html; charset=windows-1252"> 
    <meta http-equiv="description" content="<?php echo $page_description; ?>" /> 
    <title>ZenBox by Jen&trade; ~ <?php echo $page_title; ?></title> 
    <link rel="stylesheet" type="text/css" href="ZenBoxStyleNEW.css"> 
    <link href="http://fonts.googleapis.com/css?family=Merienda+One' rel='stylesheet' type='text/css'"> 
</head> 

<body> 
<div class="wrapper"> 


<!-- HEADER --> 

<div class="row"> 
<div class="col-s-12"> 
    <div class="hdr_logo"> 
    <a href="index.php"><img class="hdr_logo" src="images/LogoGr150.png"></a> 
    <h3 class="hdr_logo">A monthly subscription box of all things Zen.</h3> 

    <div class="hdr_links"> 
     <ul> 
     <li><a href="index.php">HOME</a></li> 
     <li><a href="ordernow.php">STORE</a></li> 
     <li><a href="about.php">ABOUT</a></li> 
     <li><a href="whois.php">MEET JEN</a></li> 
     </ul> 
    </div> <!-- CLOSE DIV HDR_LINKS --> 

    </div> <!-- CLOSE DIV HDR_LOGO --> 
</div> 
</div> <!-- CLOSE ROW --> 
<!-- BANNER --> 

<div class="row"> 
<div class="col-s-12"> 
    <div class="banner"> 

     <h2> 
     <?echo $text2text;?><br> 
     <?echo $text2L2text;?> 
     </h2> 
     <h1> 
     <?echo $mainText;?><br> 
     <?echo $mainText2;?> 
     </h1> 
     <a href="ordernow.php">BUY NOW</a><br><br><br> 

    </div> <!-- CLOSE BANNER --> 
</div> 
</div> <!-- CLOSE ROW --> 

<div class="row"> 
<div class="col-s-12"> 
    <div class="banner"> 

    <img src="images/ZenBoxRudys.png"> 

    </div> <!-- CLOSE BANNER --> 
</div> 
</div> <!-- CLOSE ROW --> 



<!-- CAPTION --> 

<div class="row"> 
<div class="col-s-12"> 
    <div class="caption"> 

    <h3><?echo $captionText;?></h3> 
    <a href="ordernow.php"><?echo $captionLink;?>&nbsp;&gt;</a> 

    </div> 
</div> 
</div> <!-- CLOSE ROW --> 



<!-- CURRENT MONTH --> 

<div class="row"> 
<div class="col-s-12"> 
    <div class="currentMonth"> 

    <h1>See What's Inside<br>This Months ZenBox!</h1> 
    <img class="currentMonth" src="images/ZenGroupHomepage.jpg"> 
    <h2>Click <a class="currentMonth" href="ordernow.php">HERE</a> to get started!</h2> 
    <br> 

    </div> 
</div> 
</div> 

<!-- FOOTER --> 

<div class="row"> 
<div class="col-s-12"> 
    <div class="ftr_legal"> 
    2016 ZenBox by Jen&trade; All rights reserved. &nbsp;&nbsp;|&nbsp;&nbsp; 
    <a href="terms.php">Terms &amp; Conditions</a><br> 
    </div> 
</div> 
</div> 
</div> <!-- CLOSE WRAPPER --> 
</body> 
</html> 

私が間違っていることを誰かに教えてもらえますか?

+0

あなたはマークアップを提供できますか – Geeky

答えて

1

このコードからは何もわかりません。 hereのように可能な限り最小限のコードで問題を再現してください。

関連する問題