Chris
Chris

Reputation: 672

2 divs horizontally (Menu + div)

Hi i want to create this: enter image description here

I have a problem becouse everyting is not next to menu but under menu...

CSS:

#navigationMenu li{
    list-style:none;
    height:39px;
    padding:2px;
    width:40px;
}

#navigationMenu span{
    /* Container properties */
    width:0;
    left:38px;
    padding:0;
    position:absolute;
    overflow:hidden;

    /* Text properties */
    font-family:'Myriad Pro',Arial, Helvetica, sans-serif;
    font-size:18px;
    font-weight:bold;
    letter-spacing:0.6px;
    white-space:nowrap;
    line-height:39px;

    /* CSS3 Transition: */
    -webkit-transition: 0.25s;

    /* Future proofing (these do not work yet): */
    -moz-transition: 0.25s;
    transition: 0.25s;
}

#navigationMenu a{
    background:url('img/navigation.jpg') no-repeat;

    height:39px;
    width:38px;
    display:block;
    position:relative;
}

/* General hover styles */

#navigationMenu a:hover span{ width:auto; padding:0 20px;overflow:visible; }
#navigationMenu a:hover{
    text-decoration:none;

    /* CSS outer glow with the box-shadow property */
    -moz-box-shadow:0 0 5px #9ddff5;
    -webkit-box-shadow:0 0 5px #9ddff5;
    box-shadow:0 0 5px #9ddff5;
}

/* Green Button */

#navigationMenu .home { background-position:0 0;}
#navigationMenu .home:hover {   background-position:0 -39px;}
#navigationMenu .home span{
    background-color:#7da315;
    color:#3d4f0c;
    text-shadow:1px 1px 0 #99bf31;
}

/* Blue Button */

#navigationMenu .about { background-position:-38px 0;}
#navigationMenu .about:hover { background-position:-38px -39px;}
#navigationMenu .about span{
    background-color:#1e8bb4;
    color:#223a44;
    text-shadow:1px 1px 0 #44a8d0;
}

/* Orange Button */

#navigationMenu .services { background-position:-76px 0;}
#navigationMenu .services:hover { background-position:-76px -39px;}
#navigationMenu .services span{
    background-color:#c86c1f;
    color:#5a3517;
    text-shadow:1px 1px 0 #d28344;
}

/* Yellow Button */

#navigationMenu .portfolio { background-position:-114px 0;}
#navigationMenu .portfolio:hover{ background-position:-114px -39px;}
#navigationMenu .portfolio span{
    background-color:#d0a525;
    color:#604e18;
    text-shadow:1px 1px 0 #d8b54b;
}

/* Purple Button */

#navigationMenu .contact { background-position:-152px 0;}
#navigationMenu .contact:hover { background-position:-152px -39px;}
#navigationMenu .contact span{
    background-color:#af1e83;
    color:#460f35;
    text-shadow:1px 1px 0 #d244a6;
}

HTML:

                               <ul id="navigationMenu">
                                    <li>
                                        <a class="home" href="#">
                                            <span>Home</span>
                                        </a>
                                    </li>

                                    <li>
                                        <a class="about" href="#">
                                            <span>About</span>
                                        </a>
                                    </li>

                                    <li>
                                         <a class="services" href="#">
                                            <span>Services</span>
                                         </a>
                                    </li>

                                    <li>
                                        <a class="portfolio" href="#">
                                            <span>Portfolio</span>
                                        </a>
                                    </li>

                                    <li>
                                        <a class="contact" href="#">
                                            <span>Contact us</span>
                                        </a>
                                    </li>
                                </ul>

The same menu: http://demo.tutorialzine.com/2010/06/css3-minimalistic-navigation-menu/demo.html

Is it possible?

Upvotes: 2

Views: 67

Answers (3)

Noah Wetjen
Noah Wetjen

Reputation: 1785

Is this something you are looking for? http://jsfiddle.net/NoahWetjen/ccyf1k29/

#navWrapper {
    display: inline-block;
    box-sizing: border-box;
    float: left;
    width: 35%;
    height: 400px;
    background-color: red;
}

#rightDiv {
    display: inline-block;
    box-sizing: border-box;
    float: left;
    width: 65%;
    height: 400px;
    background-color: blue;
}

Upvotes: 1

Vitorino fernandes
Vitorino fernandes

Reputation: 15951

demo - http://jsfiddle.net/pfzt9b9y/

do something like this add a div side of the ul

* {
  margin: 0;
  padding: 0;
}
ul {
  float: left;
}
.content {
  display: table-cell;
}
#navigationMenu li {
  list-style: none;
  height: 39px;
  padding: 2px;
  width: 40px;
}
#navigationMenu span {
  /* Container properties */
  width: 0;
  left: 38px;
  padding: 0;
  position: absolute;
  overflow: hidden;
  /* Text properties */
  font-family: 'Myriad Pro', Arial, Helvetica, sans-serif;
  font-size: 18px;
  font-weight: bold;
  letter-spacing: 0.6px;
  white-space: nowrap;
  line-height: 39px;
  /* CSS3 Transition: */
  -webkit-transition: 0.25s;
  /* Future proofing (these do not work yet): */
  -moz-transition: 0.25s;
  transition: 0.25s;
}
#navigationMenu a {
  background: url('http://demo.tutorialzine.com/2010/06/css3-minimalistic-navigation-menu/img/navigation.jpg') no-repeat;
  height: 39px;
  width: 38px;
  display: block;
  position: relative;
}
/* General hover styles */

#navigationMenu a:hover span {
  width: auto;
  padding: 0 20px;
  overflow: visible;
}
#navigationMenu a:hover {
  text-decoration: none;
  /* CSS outer glow with the box-shadow property */
  -moz-box-shadow: 0 0 5px #9ddff5;
  -webkit-box-shadow: 0 0 5px #9ddff5;
  box-shadow: 0 0 5px #9ddff5;
}
/* Green Button */

#navigationMenu .home {
  background-position: 0 0;
}
#navigationMenu .home:hover {
  background-position: 0 -39px;
}
#navigationMenu .home span {
  background-color: #7da315;
  color: #3d4f0c;
  text-shadow: 1px 1px 0 #99bf31;
}
/* Blue Button */

#navigationMenu .about {
  background-position: -38px 0;
}
#navigationMenu .about:hover {
  background-position: -38px -39px;
}
#navigationMenu .about span {
  background-color: #1e8bb4;
  color: #223a44;
  text-shadow: 1px 1px 0 #44a8d0;
}
/* Orange Button */

#navigationMenu .services {
  background-position: -76px 0;
}
#navigationMenu .services:hover {
  background-position: -76px -39px;
}
#navigationMenu .services span {
  background-color: #c86c1f;
  color: #5a3517;
  text-shadow: 1px 1px 0 #d28344;
}
/* Yellow Button */

#navigationMenu .portfolio {
  background-position: -114px 0;
}
#navigationMenu .portfolio:hover {
  background-position: -114px -39px;
}
#navigationMenu .portfolio span {
  background-color: #d0a525;
  color: #604e18;
  text-shadow: 1px 1px 0 #d8b54b;
}
/* Purple Button */

#navigationMenu .contact {
  background-position: -152px 0;
}
#navigationMenu .contact:hover {
  background-position: -152px -39px;
}
#navigationMenu .contact span {
  background-color: #af1e83;
  color: #460f35;
  text-shadow: 1px 1px 0 #d244a6;
}
<ul id="navigationMenu">
  <li> <a class="home" href="#"><span>Home</span>
        </a>
  </li>
  <li>
    <a class="about" href="#">
      <span>About</span>
    </a>
  </li>
  <li>
    <a class="services" href="#">
      <span>Services</span>
    </a>
  </li>
  <li>
    <a class="portfolio" href="#">
      <span>Portfolio</span>
    </a>
  </li>
  <li>
    <a class="contact" href="#">
      <span>Contact us</span>
    </a>
  </li>
</ul>

<div class="content">

  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium
    quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede</p>
  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium
    quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede</p>
  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium
    quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede</p>
  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium
    quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede</p>
  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium
    quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede</p>
  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium
    quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede</p>
  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium
    quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede</p>
  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium
    quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede</p>
  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium
    quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede</p>
  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium
    quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede</p>
  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium
    quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede</p>
  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium
    quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede</p>
</div>

Upvotes: 4

Sergeon
Sergeon

Reputation: 6788

The html you posted doesn't even have any single div...

Btw you should use float : left in order to stack block elements (like divs) horizontally. Display : inline-block; comes in handy too.

Upvotes: 5

Related Questions