Vertical alignment of ul in responsive layout - html

Question

I've been struggling for the entire day to center the ul list with the id="menu" vertically in this responsive layout.
Would really appreciate a hand getting in in the right place. I Want it to be centered vertically to the right. The list consists of circles indicating where you are in a one page scroll layout and also functioning as navigation.
<ul id="menu">
<li data-menuanchor="firstPage">1</li>
<li data-menuanchor="secondPage">2</li>
<li data-menuanchor="3rdPage">3</li>
<li data-menuanchor="4thpage">4</li>
</ul>
<div id="1"><p>O</p></div>
<div id="2"><p>O</p></div>
<div id="3"><p>O</p></div>
<div id="4"><p>O</p></div>
<div class="section " id="section0">
<h1>Hi</h1>
<p>Hihi</p>
</div>
<div class="section" id="section1">
<div class="slide">
<div class="intro">
<h1>Hi</h1>
<p>Hihi</p>
</div>
</div>
<div class="slide">
<div class="intro">
<h1>Simple</h1>
<p>Hihi</p>
</div>
</div>
<div class="slide">
<div class="intro">
<h1>Hey</h1>
<p>Hihi</p>
</div>
</div>
<div class="slide">
<div class="intro">
<h1>Heyhey</h1>
<p>Hihi</p>
</div>
</div>
</div>
<div class="section" id="section2">
<div class="intro">
<h1>Hi</h1>
<p>Hihi</p>
</div>
</div>
<div class="section" id="section3">
<div class="intro">
<h1>Hi</h1>
<p>Hihi</p>
</div>
</div>
This is my CSS:
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,
form,fieldset,input,textarea,p,blockquote,th,td {
padding: 0;
margin: 0;
}
table {
border-spacing: 0;
}
ol,ul {
list-style: none;
margin:0;
padding:0;
}
body{
font-family: arial,helvetica;
color: #000;
color: rgba(246,192,6,1);
}
.wrap{
margin-left: auto;
margin-right: auto;
width: 960px;
position: relative;
}
h1{
font-size: 6em;
}
p{
font-size: 2em;
}
.section{
text-align:center;
}
#1 {
position: fixed;
z-index: 70;
top: 10px;
right: 10px;
}
#2 {
position: fixed;
z-index: 70;
bottom: 10px;
left: 10px;
}
#3 {
position: fixed;
z-index: 70;
top: 10px;
left: 10px;
}
#4 {
position: fixed;
z-index: 70;
bottom: 10px;
right: 10px;
}
#menu li {
display:;
margin-top: 40px;
margin-bottom: 40px;
color: #000;
background:#fff;
background: rgba(255,255,255, 0.5);
width: 35%;
height:0;
padding-bottom: 35%;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
border-radius: 50%;
}
#menu li.active{
background:#000;
background: rgba(255,255,255, 1);
color: #fff;
}
#menu li a{
text-decoration:none;
color: #000;
}
#menu li.active a:hover{
color: #000;
}
#menu li:hover{
background: rgba(255,255,255, 0.8);
}
#menu li a,
#menu li.active a{
padding: 9px 18px;
display:block;
}
#menu li.active a{
color: #fff;
}
#menu{
position:fixed;
top:0;
right:0;
height: 40px;
z-index: 70;
width: auto;
padding: 0;
margin:0;
}
Here is the JSFiddle demo

Answer 1

Your CSS is not being applied "}" is missing from this rule.
form,fieldset,input,textarea,p,blockquote,th,td {
padding: 0;
margin: 0;
}
Numbers should not be used as a ID tag.
This is a perfect place to do vertical centering using full html5 with CSS3 transform, which will center anything vertically.
#menu {
position:fixed;
top:50%;
transform:translateY(-50%);
-webkit-transform:translateY(-50%); /* for chrome preview */
right:0;
height: auto;
z-index: 70;
width: auto;
padding: 0;
margin:0;
}

Answer 2

Is what you want something like this fiddle.
I added the border so that you can see the ul is aligned to the right.
You want the div numbered elements to be part of the ul. So, the first code is now:
<ul id="menu">
<li data-menuanchor="firstPage"><a href="#firstPage"><div id="1"><p>O</p></div></a </li>
<li data-menuanchor="secondPage"><div id="2"><p>O</p></div></li>
<li data-menuanchor="3rdPage"><div id="3"><p>O</p></div></li>
<li data-menuanchor="4thpage"><div id="4"><p>O</p></div></li>
</ul>
Update
Actually, what I think you want is something like this: jsfiddle.
Note the change from p to span the new class bulletDiv and the addition of vertical-align middle:
<ul id="menu">
<li data-menuanchor="firstPage"><span id="1" class="bulletDiv">O</span>1</li>
<li data-menuanchor="secondPage"><span id="2" class="bulletDiv">O</span>2</li>
<li data-menuanchor="3rdPage"><span id="3" class="bulletDiv">O</span>3</li>
<li data-menuanchor="4thpage"><span id="4" class="bulletDiv">O</span>4</li>
</ul>
CSS:
.bulletDiv{
font-size: 2em;
vertical-align:middle;
}
#menu li a{
text-decoration:none;
color: #000;
vertical-align:middle;
}