Login | Register | FAQ
Anonymous

> Centering my navbar and content divs vertically within con

+ Post a reply

3 posts Page 1 of 1


> Centering my navbar and content divs vertically within con

by JakeThomasLee » Fri Jun 20, 2014 2:07 pm

Code: Select all
<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
User avatar

JakeThomasLee

  • Posts: 5
  • Joined: Fri Jun 20, 2014 2:00 pm

Re: > Centering my navbar and content divs vertically within

by JakeThomasLee » Fri Jun 20, 2014 9:33 pm

Code: Select all
<!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>


Code: Select all
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
User avatar

JakeThomasLee

  • Posts: 5
  • Joined: Fri Jun 20, 2014 2:00 pm

Re: > Centering my navbar and content divs vertically within

by JakeThomasLee » Sat Jun 21, 2014 10:35 am

Thank you very much for such an in depth answer :)
User avatar

JakeThomasLee

  • Posts: 5
  • Joined: Fri Jun 20, 2014 2:00 pm


+ Post a reply

Page 1 of 1