Zaloguj | Zarejestruj | FAQ
Anonymous

> Centering my navbar and content divs vertically within con

+ Odpowiedz

Posty: 3 Strona 1 z 1


> Centering my navbar and content divs vertically within con

przez JakeThomasLee » Pt cze 20, 2014 2:07 pm

Kod: Zaznacz cały
<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
Avatar użytkownika

JakeThomasLee

  • Posty: 5
  • Dołączył(a): Pt cze 20, 2014 2:00 pm

Re: > Centering my navbar and content divs vertically within

przez JakeThomasLee » Pt cze 20, 2014 9:33 pm

Kod: Zaznacz cały
<!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>


Kod: Zaznacz cały
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
Avatar użytkownika

JakeThomasLee

  • Posty: 5
  • Dołączył(a): Pt cze 20, 2014 2:00 pm

Re: > Centering my navbar and content divs vertically within

przez JakeThomasLee » So cze 21, 2014 10:35 am

Thank you very much for such an in depth answer :)
Avatar użytkownika

JakeThomasLee

  • Posty: 5
  • Dołączył(a): Pt cze 20, 2014 2:00 pm


+ Odpowiedz

Strona 1 z 1