登录 | 注册 | FAQ
Anonymous

> Centering my navbar and content divs vertically within con

+ 发表回复

3 篇帖子 分页: 1 / 1


> Centering my navbar and content divs vertically within con

JakeThomasLee » 周五 6月 20, 2014 2:07 pm

代码: 全选
<div class="container">
            <div class="navbar">
                <div class="logo">Insert Title</div>
                <div class="navlinks">
                    <ul>
                        <li><a href="index.html">Home</a></li>
                        <li><a href="about.html">About</a></li>
                        <li><a href="portfolio.html">Portfolio</a></li>
                        <li><a href="contact.html">Contact</a></li>
                    </ul>
                </div>
            </div>
            <div class="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque feugiat est augue, sed mollis justo ultrices sit amet. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut egestas odio nisi, eget cursus nisl interdum et. Aenean tempus turpis sapien. Duis pellentesque, elit in condimentum tristique, diam lectus eleifend odio, at ultricies eros sem a nulla. Fusce eros risus, mollis vel condimentum at, posuere sed felis. Cras ut varius leo, vitae faucibus sem. Aliquam risus libero, pellentesque eget nunc vitae, volutpat fringilla tellus. Aliquam dapibus velit hendrerit dolor scelerisque, eget tempor libero mollis. Maecenas malesuada nisi eu pretium consequat. Integer ullamcorper, mauris sodales tempor cursus, arcu nunc molestie ante, id ullamcorper lacus sem sit amet lectus. Phasellus pharetra sapien sit amet facilisis tincidunt.
</div>
        </div>


I have attached a photograph of what this looks like within Google Chrome. What I wish to do is to center the content and the navbar divs so that they are in the middle of the container vertically whilst still floated on their respective sides. I also want to keep them both aligned because they are the same size.

I look forward again to hearing from you, please bear in mind that this is my first personal project so any technical jargon may confuse me a little bit blink.gif.

Link to the image:
http://imageshack.com/a/img843/5658/1aqp.png
Thank you in advance,
Jake
头像

JakeThomasLee

  • 帖子: 5
  • 注册: 周五 6月 20, 2014 2:00 pm

Re: > Centering my navbar and content divs vertically within

JakeThomasLee » 周五 6月 20, 2014 9:33 pm

代码: 全选
<!DOCTYPE HTML/>
<html>
     <LINK href="stylesheet.css" rel="stylesheet" type="text/css">
    <title>Insert Title</title>
   
    <head></head>
   
    <body>
        <div class="container">
            <div class="navbar">
                <div class="logo">Insert Title</div>
                <div class="navlinks">
                    <ul>
                        <li><a href="index.html">Home</a></li>
                        <li><a href="about.html">About</a></li>
                        <li><a href="portfolio.html">Portfolio</a></li>
                        <li><a href="contact.html">Contact</a></li>
                    </ul>
                </div>
            </div>
            <div class="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque feugiat est augue, sed mollis justo ultrices sit amet. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut egestas odio nisi, eget cursus nisl interdum et. Aenean tempus turpis sapien. Duis pellentesque, elit in condimentum tristique, diam lectus eleifend odio, at ultricies eros sem a nulla.
</div>
        </div>     
    </body>
   
    <footer></footer>
</html>


代码: 全选
a {
    text-decoration: none; 
}

body {
    background-color: black;
}

.container {
    background-color: cyan;
    width: 95%;
    height: 95%;
    margin: auto;
    margin-top: 2.5%;
    margin-bottom: 2.5%;
}

.content {
    background-color: purple;
    height: auto;
    float:right;
    width: 40%;
    height: 260px;
    padding: 10px;
}

.navbar {
    float: left;
    background-color: red;
    width: 150px;
    height: 280px;
}

.logo {
    width: 130px;
    height: 100px;
    background-color: green;
    padding: 10px;
    font-family: Arial Narrow;
}

.navlinks {
    width: 150px;
    height: 160px;
    padding: 0px;
    margin: 0;
}

ul, li {
    margin: 0;
    padding: 0;
}

li {
    font-family: "Arial Narrow", sans-serif;
    font-size: 16px;
    text-align: center;
    padding-top: 5px;
    list-style-type: none;
    width: auto;
    height:30px;
    margin-left: 0;
    margin-right: 0;
    margin-top: 0;
    margin-bottom: 5px;
    }


This is a copy and paste of the HTML Index Page and the Stylesheet upon which I styled the site, hopefully this is enough information for you to help me.

Thank you,
Jake
头像

JakeThomasLee

  • 帖子: 5
  • 注册: 周五 6月 20, 2014 2:00 pm

Re: > Centering my navbar and content divs vertically within

JakeThomasLee » 周六 6月 21, 2014 10:35 am

Thank you very much for such an in depth answer :)
头像

JakeThomasLee

  • 帖子: 5
  • 注册: 周五 6月 20, 2014 2:00 pm


+ 发表回复

分页: 1 / 1