stackoom
  简体   繁体   中英

Vertical Align & Navigation Problems

 原文  2014-06-04 04:49:57  9   3    html/ css/ html5/ css3

Question

Site: http://tripleo.biz/test/index.html Please shrink browser to mobile view.

Header: I have problems with the alignment. They don't seem to align all to the middle of the header. The Android logo seems ot be the only thing aligned. The text and dash image aren't. :/

Navigation: The Navigation Drop Down is in effect when you mouse-over "ALL" but the links after Link 2 are hidden behind the image. I tried to use z-index to fix this issue but nothing still.

Content Area: Another problem with Vertical align. For some reason there is more space at the bottom of the content.

Index.html 

<html lang="en">

<head>

    <meta charset="utf-8">

    <title></title>

    <meta name="viewport" content="width=device-width; initial-scale=1; maximum-scale=1">

        <link rel="stylesheet" href="css/styled.css">

    <!--[if IE]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->

</head>

<body>

    <header>    
            <div class="image_carousel">
            <img src="images/menu.png" style="width: 15px; height: 22px;" />
            <img src="images/android_icon.png" style="margin-top: 10px; width: 26px; height: 46px;" />
        <div class="nav">
            <a href="#" id="menu-icon">ALL</a>

            <ul>
                <li><a href="#">LINK1</a></li>
                <li><a href="#">LINK2</a></li>
                <li><a href="#">LINK3</a></li>
                <li><a href="#">LINK4</a></li>
                <li><a href="#">LINK5</a></li>
            </ul>

        </div>
        </div>
        <div class="clearfix"></div>
    </header>

    <section>
        <img src="images/headerimg.jpg" />

        <div class="bround">
        <img src="images/logo.jpg" class="imgleft" width="75px" />
        <b>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis feugiat quam vitae mauris lacinia, id tincidunt eros lobortis.</b> 
        <p class="bauthor">Olajide Olaolorun | <a href="">1 Comment</a></p>
           </div>
        <div class="clearfix"></div>

        <div class="bround">
        <img src="images/logo.jpg" class="imgleft" />
        <b>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis feugiat quam vitae mauris lacinia, id tincidunt eros lobortis.</b>
        <p class="bauthor">Olajide Olaolorun | <a href="">1 Comment</a></p>
           </div>
        <div class="clearfix"></div>


    </section>

    <footer>

        <p>Copyright Confidential</p>

    </footer>

</body>

</html>

CSS 

img {

    width: 100%;

}

header {

    background: #83aa01;
    width: 100%;
    height: 76px;
    /*position: fixed;*/
    top: 0;
    left: 0;
    vertical-align:middle;

}

.image_carousel {
    padding: 5px 0 1px 1px;
    vertical-align: middle;
    text-align: left;
}

.image_carousel img {
    border: 0px;
    padding: 0px;
    margin: 0px;
    display: inline-block;
    vertical-align: middle;
    bottom:0px;
}

.clearfix {
    float: none;
    clear: both;
}

div.bround {
background-color: #FFF;
color: #000;
padding: 20px;
margin-top: 10px;
margin-right: 0px;
border-radius: 15px;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;

}

img.imgleft {
    position:relative; 
    float: left;
    margin: 0px 5px 5px 0px; 
    width: 60px;
}

.bauthor {
color: #D3D3D3;
}

.bauthor a {
color: #83aa01;
}



#menu-icon {

    display: hidden;
    width: 40px;
    height: 40px;
    font-size: 20px;
}

div.nav {
    border: 0px;
    padding: 0px;
    margin: 0px;
    display: inline-block;
    vertical-align: middle;
    bottom:0px;
    color: #FFF;


}


    div.nav ul, div.nav:active ul { 

        display: none;
        position: absolute;
        padding: 0px;
        background: #444;
        color: #FFF;
        top: 50px;
        width: 20%;
        border-radius: 4px 0 4px 4px;

    }

    div.nav li {

        text-align: center;
        width: 100%;
        padding: 5px 0;
        margin: 0px;
        border-bottom: 1px dotted #FFF;
        z-index:1000;
    }

    div.nav:hover ul {

        display: block;

    }

div.nav ul, div.nav a { 

        color: #FFF;
        font-size: 17px;
        font-weight: normal;
        letter-spacing:2px;

}


ul {

    list-style: none;

}

li {

    display: inline-block;
    float: left;
    padding: 10px

}

- Please Help!

Thanks.

3 answers

solution1
 0  2014-06-04 05:02:17

Regarding the Navigation issue, You need to add z-index for the dropdown menu. Update your css like below it will resolve. 

div.nav ul, div.nav a
{
color:#fff;
font-size:17px;
font-weight:normal;
letter-spacing:2px;
z-index:10;
}

Regarding the Content Area padding is coming from the following class 

section
{
 margin:80px auto 40px;
 max-width:980px;
 position:relative;
 padding:20px;
}

If you remove the margin bottom 40px, it will work fine in mobile. But the problem is you wont get enough space on bigger screens. So you can use media query and apply this class only on mobile versions. 

 @media all and (max-width: 399px)
{
  section
  {
    margin-bottom:0px;
  }
}

solution2
 0 ACCPTED  2014-06-04 05:04:35

For Header : set your .image_carousel padding-top value to 15px and remove margin-top from your android icon. which looks like this 

.image_carousel {
padding: 15px 0 1px 1px;
vertical-align: middle;
text-align: left;
}

Content Area : You have Given margin-bottom :20px to your p tag Just remove that .

solution3
 0  2014-06-04 08:33:51

Test css copy code 

header {
background: none repeat scroll 0 0 #83AA01;
height: 76px;
position: relative;
width: 100%;
z-index: 10;
}
.image_carousel {
text-align: center;
vertical-align: middle;
}
.image_carousel img, .image_carousel > .nav {
border: 1px solid #DDDDDD;
display: inline-block;
height: 74px;
line-height: 74px;
padding: 0 30px;
position: relative;
vertical-align: middle;
}
 .image_carousel > .nav:hover {
   background-color: #FF0000;
}
.image_carousel > .nav ul li {
   line-height: normal;
 }
.clearfix {
  clear: both;
  float: none;
 }
div.bround {
   background-color: #FFFFFF;
   border-radius: 15px;
   color: #000000;
   margin-right: 0;
   padding: 20px;
}
img.imgleft {
   float: left;
   margin: 0 5px 5px 0;
   position: relative;
   width: 60px;
}
.bauthor {
  color: #D3D3D3;
}
.bauthor a {
  color: #83AA01;
  }
  #menu-icon {
    display: inline-block;
   font-size: 20px;
   height: 40px;
   width: 40px;
  }
   div.nav ul, div.nav:active ul {
   background: none repeat scroll 0 0 #444444;
  border-radius: 4px 0 4px 4px;
   color: #FFFFFF;
   display: none;
  left: 0;
   padding: 0;
   position: absolute;
  width: 100px;
  margin-top:30px;
}
 div.nav li {
   border-bottom: 1px dotted #FFFFFF;
   margin: 0;
   padding: 5px 0;
   text-align: center;
   width: 100%;
    z-index: 1000;
}
 div.nav li:hover{
    background-color:red;
 }
 div.nav:hover ul {
     display: block;
     top: 43px;
 }
 div.nav ul, div.nav a {
     color: #FFFFFF;
     font-size: 17px;
     font-weight: normal;
      letter-spacing: 2px;
}
ul {
     list-style: none outside none;
 }
li {
    display: inline-block;
    float: left;
    padding: 10px;
 }

 //yes test html 

 <header>    
        <div class="image_carousel">
        <img src="images/menu.png" />
        <img src="images/android_icon.png" />
    <div class="nav">
        <a href="#" id="menu-icon">ALL</a>

        <ul>
            <li><a href="#">LINK1</a></li>
            <li><a href="#">LINK2</a></li>
            <li><a href="#">LINK3</a></li>
            <li><a href="#">LINK4</a></li>
            <li><a href="#">LINK5</a></li>
        </ul>

    </div>
    </div>
    <div class="clearfix"></div>
</header>

<section>
    <img src="images/headerimg.jpg" />

    <div class="bround">
    <img src="images/logo.jpg" class="imgleft" width="75px" />
    <b>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis feugiat quam vitae mauris lacinia, id tincidunt eros lobortis.</b> 
    <p class="bauthor">Olajide Olaolorun | <a href="">1 Comment</a></p>
       </div>
    <div class="clearfix"></div>

    <div class="bround">
    <img src="images/logo.jpg" class="imgleft" />
    <b>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis feugiat quam vitae mauris lacinia, id tincidunt eros lobortis.</b>
    <p class="bauthor">Olajide Olaolorun | <a href="">1 Comment</a></p>
       </div>
    <div class="clearfix"></div>


</section>

<footer>

    <p>Copyright Confidential</p>

</footer>

暂无
暂无

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

Related Question Problems with vertical align to middle CSS Navigation Vertical Align Vertical align button in the navigation bar Vertical align navigation link text Vertical align Bootstrap navigation button CSS - align vertical center and float right problems Vertical align navigation icon/button in header Border Problems with Responsive Vertical Page Navigation How to perfectly vertical align navigation buttons with responsive image How to make icons align in vertical center with the navigation links?
Related Tags
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM